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.