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


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

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


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 Resources\Reports, to store Microsoft Report definition (RDL/RDLC) files, Resources\CrystalReports, to store Crystal Reports files, and Resources\Logs 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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date