Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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

If full-featured commercial CMSs don't meet your organization's needs, find out how to build your own.




Application Security Testing: An Integral Part of DevOps

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 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.

Bogdan Zamfir has a Master's degree in Computer Science and has been working as an independent consultant and software developer since 1993. He develops both web and desktop applications, using various languages and platforms including C#, VB.NET, Visual FoxPro, Microsoft Access, Visual Basic, and C/C++. Visit his web site for more information.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date