CodeProject: Microsoft Content Management Server Web Author Dynamic Console. Free source code and programming help

Announcements

	Windows 7 Comp Win a laptop!
	Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

WinHelp / HTMLHelp

Uncategorised Quick Answers

Graphics / Design

Expression

Usability

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

Code Signing Resources

WhitePapers / Webcasts

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

9 votes for this article.

Popularity: 3.20 Rating: 3.35 out of 5

Download source files - 64.5 Kb

Sample Image - cmsconsole.gif

Introduction

This collection of files creates a dynamic Web Author console for use in Microsoft Content Management Server (CMS). This dynamic console does not take up space in your web page. Authors click on an icon to expand or collapse the console. It contains 4 different themes (even a matrix theme!) for different look and feel. Users can design their own theme by customizing the included stylesheet.

File Description

Theme1.gif, Theme2.gif, Theme3.gif, Theme4.gif.
Screen dumps showing the dynamic console in various themes.
UserControls/PublishingModeLink.ascx.
This is an user control for displaying "Switch to Edit Site" and "Switch to Live Site". The switch is taken out of the console for more flexible and better user friendly placement.
UserControls/DynamicConsoleTrigger.ascx.
This is an user control for displaying an icon. When user clicks on the icon, the dynamic console shows or hides itself.
Console/DynamicConsole.ascx.
This is an user control for the dynamic console content.
Console/DynamicConsole.js.
This is the support JavaScript file for the dynamic console.
images/console/on.gif, images/console/off.gif.
These are the icons for (3).
Style/console.css.
This is the stylesheet for the dynamic console feature in Theme.gif.
Extra stylesheet and image files are available in the Theme directories.

Installation Procedures

Copy Console/* into your console directory.
Copy both user controls into your user controls directory.

In the page or user control where you would like to show the Publishing Mode link and console trigger icon, register the user controls. For example:

<%@ Register
TagPrefix="CMSUser" 
TagName="PublishingModeLink"
Src="../UserControls/PublishingModeLink.ascx"
%>
<%@ 
Register
TagPrefix="CMSUser" 
TagName="DynamicConsoleTrigger"
Src="../UserControls/DynamicConsoleTrigger.ascx"
%>

In the HTML tags where you want to show the link and icon, reference the controls. For example:

<td align="right" nowrap><CMSUser:PublishingModeLink 
id="PublishingModeLink" runat="server" /><CMSUser:DynamicConsoleTrigger 
id="DynamicConsoleTrigger" runat="server" /></td>

Copy console.css into your stylesheet directory or append the code into your site stylesheet. Use console.css in the Theme directories for other themes.
Copy images/* into your images directory. Check the Theme directories for extra images.
Check the Theme directories for the stylesheet to use. In the stylesheet, you need to specify the positions of the dynamic console. For example, the following says the console is positioned at 120 pixels from the top of the container/browser window and 10 pixels from the right of the container/browser window:
```
.StyleConsoleLayer {
...
right: 10;
top: 120;
...
}
```
The following says the console is positioned at 120 pixels from the top of the container/browser window and 10 pixels from the left of the container/browser window:
```
.StyleConsoleLayer {
...
left: 10;
top: 120;
...
}
```
If your site does not use a stylesheet or you would like to keep console.css as a separate file rather than appending the content into your site stylesheet, insert a stylesheet reference in the header section (<head></head>) of your page templates. For example:
```
<head>
....
<link rel="stylesheet" 
href="../style/console.css">
....
</head>
```
Also change references to the console control from the default one to the dynamic console.
Rebuild your site solution in Visual Studio and you are all set.

Note: By default, MCMS will render a base tag with the href of a template so that the relative links to images, scripts or stylesheets will resolve based on the template URL instead of the Posting URL seen in the browser. All the links are formatted relatively based on this assumption. If this is not the case, you may need to reformat the relative links or change them to absolute links.

History

V1.0 (2004.01.17) - New.
V1.1 (2004.01.23) - Error console now shows up correctly with updated styles.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Stephen Huen

Member

Occupation:	Web Developer
Company:	Questech Systems
Location:	Canada

Microsoft Content Management Server Web Author Dynamic Console