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

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):

	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:

	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 Resource\Icons 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.

Previous Page

Other Articles by this Author