Build an AJAX-Enabled Content Management System with Visual WebGUI: Creating a Prototype

he web offers a way to share incredible amounts of information; however?even within a single organization?as the amount of content grows, it became more and more difficult to manage and organize.

All this explosion of information (useful content) requires software systems capable of organizing and managing this content by letting the users themselves organize it in meaningful and useful ways, and make it available to the appropriate users. The applications intended for this purpose are called Content Management Systems (CMSs).

CMSs are numerous, popular, and widespread today. Most are integrated systems that offer a portal?based architecture, allowing integration not only of content-management-specific modules, but also various other modules such as like chat rooms, forums, wikis, shopping charts and other e-commerce functionality. While all this functionality can be beneficial in large organizations, smaller organizations, which need only basic systems for organizing their own documents and providing appropriate access rights to their employees and selected partners, such comprehensive systems can be overkill.

A recent customer of mine began the quest for a CMS by reviewing various full-featured CMS systems (such as DotNetNuke, Joomla and phpNuke). He liked their overall functionality, but thought the complexity of the admin modules was prohibitive. So he asked me to design and implement a custom application that had just the functionality he needed.

Defining Requirements

The system had the following requirements:

Figure 1. Visual Prototype: In this prototype, you can see the main parts of the MiniCMS application, with a document selection pane on the left, and a work area on the right.
  1. The application will have a Documents Management module with an integrated WYSIWYG editor, available only to administrators, where they can create and edit HTML documents.
  2. Documents should be organized in a logical tree structure. Users should be able to freely rearrange the documents in the tree structure.
  3. The application’s document selection pane will be organized as a tree, dynamically defined by users, by linking with documents defined in the system. A document should be linkable to multiple points in the document selection pane structure, with different names.
  4. Users without administrator rights should be able to both view and edit documents when accessed directly from the document selection pane structure.
  5. Users should be able to upload other type of documents (such as Excel files, MS Word documents, and PDF files) and link to them from the edited HTML documents.
  6. The system must have user authentication and management features that allow administrators to create users and groups, assign users to groups, and assign access rights for documents to groups or individual users.
  7. The application contains two panes: a Document Section Pane on the left, and a workplace pane on the right. Documents and management modules open in the right pane, which is the main workplace (see Figure 1).

Why Choose Visual WebGui?

Figure 2. Visual WebGui Project Templates: You’ll find these new template types in Visual Studio after installing Visual WebGUI.

To implement this application, I chose Visual WebGui, an open-source AJAX framework built on top of ASP.NET. Visual WebGui offers a programming model that replicates the WinForms desktop development, but for the web. Experienced .NET desktop developers can begin developing powerful web-based AJAX applications very quickly by leveraging their desktop development knowledge.

Author’s Note: Visual WebGui is available for both NET 2.0, with Visual Studio 2005, and NET 3.5, with Visual Studio 2008. The sample application uses NET 2.0, VS 2005 and Visual WebGui version 6.2.3.

After you download and install Visual WebGui, you’ll find three new project types available in the VS project templates: Visual WebGui application, WebGuiClient Application and Visual WebGui library (see Figure 2).

You’ll also find three new components in the Toolbox: the Visual WebGui Custom Control, Visual WebGui Form and the Visual WebGui User Control. These correspond to the WinForms Custom Control, Form, and User Control, respectively.

Create and Configure the Project

Figure 3. Enabling Visual WebGUI: Installation adds a new item to the Project context menu in Visual Studio that lets you enable or disable Visual WebGUI.

Start by creating a Visual WebGui application project called MiniCMS. Enable Visual WebGui for the project by right-clicking on the Project item in Solution Explorer and selecting “Enable Visual WebGui” from the context menu (see Figure 3).

The add-in creates special pages in the Project Properties dialogs that let you modify Visual WebGui’s configuration settings in web.config rather than having to add or change them manually.

Rename the default Form1 to MainForm, and rebuild the project, which makes the MainForm available in the project properties. Next, configure the application’s properties. Right-click the Project item and select Properties.

Author’s Note: This article focuses only on settings required by the sample application and the Visual WebGui framework.

In the section Web ? Start Action, select “Specific page,” and enter MainForm.wgx. (WGX is the default extension for Visual WebGui applications.)

In the section Web ? Servers, accept the default settings (Use Visual Studio Development Server, Auto assign port, Virtual path /)

Figure 4. General Section: Use this section of the Project Properties dialog to set flags and directories specific to Visual WebGui.
Author’s Note: If you’re using IIS as your web server, you’ll need to configure it to recognize the Visual WebGui (WGX) file extension. You’ll find the instructions in the next section “Configure IIS to run Visual WebGui Applications.”

Here are the settings specific to Visual WebGui. In the General section (see Figure 4) assign the following settings:

Flags Section:

  • Use Flash for Uploading (DHTML): Turn this flag on to enable a nice upload progress indicator).
  • Inline Windows: Visual WebGui supports opening new forms (windows) from code as popup windows. When Inline Windows is off, popup windows are opened in a new browser instance, which has two disadvantages: they’re slower (because the computer must create a new browser window) and they can be trapped by popup blockers. When Inline Windows is on, Visual WebGui forms opened as popups are pure DHTML components embedded into the web page, which eliminates popup blocker problems.


These are subdirectories under the application’s root folder, used to store various files needed by the application. You need to create these directories in Windows Explorer. You can add more directories, if needed.

Author’s Note: I usually add folders such as ResourcesReports, to store Microsoft Report definition (RDL/RDLC) files, ResourcesCrystalReports, to store Crystal Reports files, and ResourcesLogs to store various log files.

After creating those subfolders, you need to add them to the solution. Select the Project in Solution Explorer, open the Project menu, and select Show All Files. You’ll see the Resource folder appear in Solution Explorer. Expand it, right-click and select “Include in Project.” VS will add the Resource folder and all its subfolders (Images, Icons, UserData, and Generated) to the project.

Figure 5. Registration Section: This section of the Project Properties dialog lets you configure Applications, Controls, and Themes.

Registration Section

In the Registration section (see Figure 5), you can configure Applications, Controls and Themes.

In Visual WebGui, an application (as shown in Registration -> Applications section) is actually a top-level form that can be launched directly in the browser. It is similar to a standard ASPX page, which can be accessed directly with a URL. Visual WebGui forms can also be accessed directly. For example, Default.frm, Administration.frm, etc. can be started independently using URLs such as http://server/default.wgx, http://server/administration.wgx, etc

To set up the application’s startup form and UI theme, click on the first button (see item #1 in Figure 5), and from the popup “Choose applications” select “MainForm.” Then select Form1 in Registration ? Applications and delete it (see Item #2 in Figure 5).

You use the Controls area of the dialog to configure custom controls defined in different assemblies or projects. For this application, add all the controls available in the extended controls set (the Forms.Extended and Office assemblies), which let you implement an Outlook style navigation bar, Header panels, a Ribbon bar, and enable advanced editors (such as the RichTextEditor and FCKEditor?a full-featured HTML editor).

In the Themes section of the dialog, select one of the available themes. Click the arrow for the dropdown control in the Assembly column, select “Browse?” and choose a standard (DHTML) theme. For this example, click the NET tab, scroll down, and select the Gizmox.WebGUI.Themes.Vista theme. Name it Vista (in the Name column), and check the Selected box as shown at the bottom of Figure 5.

Save and close the Properties dialog. You can test the bare-bones application skeleton you just created, but first you need to configure IIS to run Visual WebGui files properly.Next, you need to configure IIS so it will run Visual WebGui applications. Because Visual WebGui is built on ASP.NET, the ASP.NET engine handles its applications. But for IIS to run Visual WebGui-based applications, you need to configure it to recognize the .wgx and .swgx (for Silverlight) file extensions. Visual WebGui doesn’t actually create any .wgx files; those are virtual files that redirect processing to the Visual WebGui handler?specifically, to the Gizmox.WebGUI.Server.Router handler for DHTML, and to the Gizmox.WebGUI.Server.Silverlight.Router handler for Silverlight.

Figure 6. Web Site Properties: From the Web Site Properties dialog, click the Configuration button.

To configure IIS, open the IIS console, and select the web site for which you want to enable Visual WebGui applications. On Windows XP, you always have one web site, named Default. On Windows Server 2003, you can have multiple web sites on a single server instance, so you must enable the .wgx and .swgx extensions on every web site you plan to run Visual WebGui applications.

Right-click on the web site for which you want to enable Visual WebGui, and select Properties. Go to the Home Directory tab, and click the Configuration button (see Figure 6). Locate the .aspx extension, and click the Edit button. You’ll see a dialog that lets you specify the handler for ASP.NET aspx web pages. Don’t alter that handler. Instead, follow these steps:

  1. Select and copy the full path name of the executable handler. For example, for NET 2.0 it is c:windowsmicrosoft.netframeworkv2.0.50727aspnet_isapi.dll.
  2. Close the configuration editor, and click the Add button to add a new handler configuration for .wgx files.
  3. In the Executable field type the copied handler path (the same one as for ASPX), enter .wgx in the Extension field
  4. In the Verbs section, click the “Limit to” item and enter the four operations GET, HEAD, POST, and DEBUG.
  5. Finally, uncheck the “Check that file exists” checkbox.
  6. Click OK to save the settings and close the dialog.

Now, IIS will recognize and will be able to run Visual WebGui applications. Figure 7 shows all these settings.

Figure 7. IIS Extension Mapping: Use this dialog to configure extension mapping for Visual WebGui applications (WGX).

With IIS set up to run Visual WebGui applications, you’re ready to build and run the skeleton application. When you run it, you’ll see the empty main for (an empty browser window with a light gray background). Now you can move on to complete the project prototype.

Create a Visual Prototype

At this point, you’ve created and configured the solution and the main project and can move on to the more interesting task of creating the mini-framework discussed earlier.

Because it offers the same object model available to WinForms, Visual WebGui provides web versions of all the standard UI controls available for desktop applications. You’ll see them in the Toolbox whenever you have any component (Form or UserControl) open in design view in Visual Studio. In addition, Visual WebGui ships with some special new controls that help you build user interfaces with a modern look. These include: HeaderedPanel, Chart, WatermarkTextbox, WorkspaceTabs, FCKEditor, RibbonBar, ScheduleBox, NavigationTabs, and more. You’ll find these in the Toolbox as well, under the General tab.

Because Visual WebGui mimics the WinForms object model, you basically have three application building blocks: Forms, User Controls and Custom Controls (see Figure 8)

Figure 8. New Templates: After installing Visual WebGui, you’ll find some new templates in Visual Studio’s Add New Item dialog.

The sample application uses a composite UI approach?in other words, it relies on forms as little as possible and builds the functionality into UserControls instead. This approach offers a great deal of flexibility, because you can host such custom components in forms or any other type of container (such as another UserControl, a Panel, a GroupBox, etc.).

First, I’ll discuss how to construct the mini-framework used as the foundation for this application, which is stored in the Framework subfolder. To begin, create a UserControl to act as the main workplace control; name it MainWorkplace, and set its size to 800 x 500. From the Toolbox, General tab, drag a NavigationTabs control onto MainWorkplace, which adds a NavigationTabs control with two initial TabPages. Rename the NavigationControl to navigation, and the two existing TabPages to pageMain and pageAdmin.

To add a third navigation page, select the navigation control, and in the Properties window, scroll down to the TabPages property. Click the ellipsis to open the NavigationTabs collection editor and then click the Add button to add a new page, which, by default, will be named navigationTab1.

Author’s Note: When you close the NavigationTabs collection editor, navigation control will show only a single page?the one newly added. You need to tweak the code a little to restore the other two navigation pages. To do this, in Solution Explorer, expand the MainWorkplace.cs node so you can see the files MainWorkplace.Designer.cs and MainWorkplace.resx. Open MainWorkplace.Design.cs and press CTRL+F to open Search. Use QuickSearch, select “Look in Current document” and “Search Hidden Text,” and search for “this.navigation.Controls.Add(this.navigationTab1);”.

When found, change the code as shown below:

   this.navigation.Anchor = Gizmox.WebGUI.Forms.AnchorStyles.None;   // insert the following two lines   this.navigation.Controls.Add(this.tabMain);   // add this line   this.navigation.Controls.Add(this.navigationTab1);   this.navigation.Controls.Add(this.tabAdmin);   // and this one   this.navigation.CustomStyle = "Navigation";

Close MainWorkplace.Design.cs and open MainWorkplace.cs in design mode. Now all three tab pages will be visible in the navigation control.

Set the control properties as shown in Table 1 (Note: Empty cells mean you should accept the default property value):

Table 1. Control Properties: The table shows how to set the properties of the controls on the MainWorkPlace UserControl. Blank cells mean you should accept the default property values.
? navigation pageMain navigationTab1 pageAdmin linkLabel1 linkLabel2 headeredPanel1
Name Navigation pageMain pageDocManag pageAdmin linkLogout linkExit workPanel
Text ? Main Documents management Administration Logout Exit ?
Anchor ? ? ? ? Top,Right Top,Right ?
CustomStyle Navigation ? ? HeaderedPanel
ForeColor ? ? ? ? Yellow Yellow ?
Dock Fill None None None ? ? None
Size 240,500 ? ? ? 53,15 28,15 530, 390
Location ? ? ? ? 706,3 765,3 260, 30
TextAlign ? ? ? ? TopCenter TopCenter ?

Next, from the Toolbox tab “All Visual WebGui,” drag a splitter onto the MainWorkplace, to create the control splitter1. Leave its Dock property to the default, Left. Add two LinkLabel controls (linkLabel1 and linkLabel2) and a HeaderedPanel control to the right side of the splitter, and set their properties as shown in Table 1.

Close MainWorkplace and rebuild the project.

Now you can add the main workplace to the main form. Open MainForm, and from the Toolbox, on the MiniCMS Components tab, drag MainWorkplace onto the form. Set its properties as shown in Table 2:

Table 2. Main Workplace Properties: The table shows property settings for the MainWorkPlace UserControl. Again, blank cells mean you should accept the default property values.
? MainForm mainWorkplace1
Name ? mainWorkplace
Text Mini CMS ?
Anchor ? Left, Top,
Right, Bottom
BackColor InactiveCaptionText ?
Size 810, 510 800,500
Location 0,0 4,4

Now you can create the document selection pane mockup. Select the pageMain navigation tab, and drag a Panel from the Toolbar. Rename it to panelDocMenu. Set its Location property to 12, 12 and its Size to 210, 310. Next, drag a TreeView control on the panelDocMenu, name it treeDocuMenu, and set its properties as follows: Location = 4, 4, Size = 202, 302 and Anchor = Left, Top, Right, Bottom, BorderStyle = Clear.

To populate the selection pane with some fictitious documents, you need to write some code. (In a follow-up article you’ll populate the tree with real entries based on the documents added to the application.)

Add ten 16 x 16-pixel PNG images into the ResourceIcons folder, and name them img_1.png, img_2.png, etc., up to img_10.png. In the Properties pane, select the MainWorkplace control, switch to the Events section, and create a Load event handler, using the following code:

   private void MainWorkplace_Load(object sender, EventArgs e)   {      LoadTreeDocuments();   }

Select the TreeView in design view and create an event handler for its BeforeExpand event, using the code below:

   private void treeDocMenu_BeforeExpand(object sender,       TreeViewCancelEventArgs e)   {      TreeNode node = e.Node;     if (!node.Loaded && node.Level < 2)     {        string specKey = node.Text.Remove(0, 5);       Random rnd = new Random();       LoadTree(node.Nodes, rnd.Next(1, 10), 0, specKey);       node.Loaded = true;     }   }

Save, build, and run the application, which will look like Figure 1.

At this point, you have the specifications and a visual prototype for a Mini-CMS system that runs as a Rich Internet Application. The next article in this series explains how to design and build a modular framework that implements the application's functionality.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin


Recent Articles: