Developing your first Visual WebGui application

Page 1 of 2
  1. Introduction and Setting Up
  2. Finishing Up and Conclusion

Introduction and Setting Up


While web development environments such as ASP.NET and JSP have made huge strides in creating a rich environment for developing web applications, they have always targeted a very wide range of applications from content rich sites to OWA like applications. By doing so, they forced a compromise that was very painful for applications developers. Concepts like pages, html, requests and responses, which originated from the historical evolution of web development, are not really suitable for developing applications. While AJAX frameworks such as Atlas make a very nice edition to those enviroments they are still based on web development concepts which adds a great deal of complexity over desktop development concepts.


Visual WebGui is a new AJAX framework that took a different approach to web application development, specially designed to simplify building highly complex applications like Outlook Web Access (OWA). Visual WebGui makes it possible for developers to create web applications by using full WinForms server side API that includes design-time capabilities. By adopting the WinForms object module and development concepts Visual WebGui has completely simplified the development of web applications. Alowing you program as a VB/WinForms programmer and not as a web programmer makes much more sense when developing web applications like Outlook Web Access.

Visual WebGui is completly free to use and deploy for non-commercial purposes and is also available as an open source project in The Visual WebGui site has multiple free license that you can apply to inorder to use it freely in your production site

This article creates a fully AJAX enabled incremental explorer application browsing the wwwroot directories on the left pane and on the right pane the current selected folder files are displayed.


Using the code

In order to start developing Visual WebGui you need to download the SDK from the Visual WebGui download page. The installation will install a couple of assemblies to you GAC adding the Visual WebGui capabilities to your development enviroment. Installing the Visual WebGui SDK will add a two new projects to your Visual Studio (WebGui Application and WebGui Control Library). The WebGui Application project will create you a ASP.NET new project that one class named Form1.cs instead of the WebForm1.aspx file usualy created by the ASP.NET project template. Inheriting from the Gizmox.WebGUI.Forms.Form class the Form1.cs automaticly causes this file to have a WinForms like design time behavior. When you enter the design surface of the Form1.cs class you will have an aditional WebGUI toolbox available in the toolbox pane. These components can be draged to the design surface and be used exactly as WinForms components are used on a WinForms design surface. In the properties pane of any givven component you can change the component attributes including layout properties such as Dock and Anchoring which are WinForms way of layouting components and are fully supported by Visual WebGui.

Before you can run your application you need to have your form registerd in Visual WebGui web.config configuration section to a virtual page and have Visual Studio start page set to this virtual page. Visual WebGui uses a ".wgx" IIS script map extension that needs to be added to the IIS with the same definitions as the ".aspx" script map extension but without the check file exist check box as Visual WebGui uses virtual pages mapped to Gizmox.WebGUI.Forms.Form inherited classed. After setting these configurations you can start debugging your application exactly as you debug a WinForms application.

Step 1 - Creating a new WebGui Application project

Open the new project dialog and select the WebGui Application project. In the project name textbox enter WebGUIExplorer and press OK.


Visual WebGui will create you a new WebGui Application project that is both ASP.NET and WinFroms, as the structure is that of ASP.NET and the form classes behave like a WinForm form forms. Double clicking the Visual WebGui form1.cs page will open the design surface that is exactly the same as the WinForm design surface. The Visual Studio tool box has an added pane named WebGUI and you can find there Visual WebGui components which are identical to WinForms components. You can drag and drop components on the design surface exactly as you do in a WinForms application and the Visual WebGui designer will generate the code with in the InitializeComponent method.


Step 2 - Creating the main form

From the WebGUI toolbox pane drag a treeview component on to the design surface. The designer will create you a new treeview and it the properties pane you can change the component properties. From the properties pane select Dock property and change that property to Left. This will cause the designer to dock you treeview to the left. You can drag the right handle of the tree view to change the width of the treeview. Now, from the WebGUI toolbox pane select a splitter component and drag it to the design surface. By default the designer will apply left docking to a splitter which in this case works just fine. Drag a listview to the design surface and change it's docking to fill. The fill docking value causes the component to take all the remaining space.

You might also like...


Guy Peled


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Debuggers don't remove bugs. They only show them in slow motion.”