Free all the way: Using Visual WebGui with SharpDevelop and Visual Studio Express

From version 6.2 we've added to Visual WebGui (VWG) install process the option to install the Visual WebGui SDK without the prerequisite of having Visual Studio installed on your computer. This option allows you to work with other IDE then Visual WebGui like SharpDevelop, Visual Studio express or notepad.This topic assumes that you have some basic knowledge of Visual WebGui.

Installation Prerequisites

The only prerequisite for Visual WebGui installation is that the corresponding .Net framework will be installed on the computer. For example if you choose to install the Visual WebGui SDK from .Net 3.5 you first need to install .Net framework 3.5.

Other than that there are no further prerequisites but there are a few things that can influence the volume of the installation. For example if you haven't installed Silverlight the Visual WebGui SDK will not be installed.

Installation

To read a full article on Version 6.2 install process go to here. To install Visual WebGui without Visual Studio run the installation process. If you select typical the VWG core SDK and extensions will be installed and a message that states that the Visual Studio templates will not be installed.

Figure 1.

Figure 2.

Once the VWG SDK is installed we can start developing.

Sharp Develop

Let's open SharpDevelop and create a new solution.

Figure 3.

We will add an Asp.Net project.

Figure 4.

First we will add to the C# class reference to Gizmox.WebGUI.Common, Gizmox.WebGUI.Forms and Gizmox.WebGUI.Server.

Figure 5.

Now we will add to the WebConfig the default sections of VWG. First will add this config section that will declare the VWG section.

<configSections>
<section name="WebGUI" type="Gizmox.WebGUI.Common.Configuration.ConfigHandler, Gizmox.WebGUI.Common, Version=3.0.5701.0, Culture=neutral, PublicKeyToken=263fa4ef694acff6" />
</configSections>

Next will add the WebGui section that will hold most of the application configuration like Applications,Controls,Themes and more.

<WebGUI>



<Applications>
<Application Code="Form1" Type="TestingIGatewayComponent.Form1, 'TestingIGatewayComponent'"/>
</Applications>

<Controls>
<Control Type="TestingIGatewayComponent.PieControl, TestingIGatewayComponent"/>
</Controls>

<Themes Selected="Default">

</Themes>

<Directories>
<Directory Code="Icons" Path="Resources\Icons" />
<Directory Code="Images" Path="Resources\Images" />
<Directory Code="Generated" Path="Resources\Generated" />
<Directory Code="UserData" Path="Resources\UserData" />
</Directories>



<StaticResources Mode="Off"/>

<PrivateVersion Value="12"/>

<IconsPreloading Mode="Off"/>






</WebGUI>

We will add the system diagnostics section. This section holds a few of the applications switches.

<system.diagnostics>
<switches>

<add name="VWG_TracingSwitch" value="0" />

<add name="VWG_TracingThresholdSwitch" value="10" />

<add name="VWG_DisableCachingSwitch" value="0" />

<add name="VWG_DisableObscuringSwitch" value="0" />
</switches>
</system.diagnostics>

And the last part we will add to the system.web section the httpHandlers section that will hold the http handler router declaration.

<system.web>
<httpHandlers>

<add verb="*" path="*.wgx" type="Gizmox.WebGUI.Server.Router,Gizmox.WebGUI.Server,Version=3.0.5701.0
,Culture=neutral,PublicKeyToken=3de6eb684226c24d" />
</httpHandlers>

Let's add a new class and call him Form1.

Figure 6.

Figure 7.

We will add the required references to the class to resemble to a VWG Form.

#region Using
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using Gizmox.WebGUI.Common;
using Gizmox.WebGUI.Forms;
#endregion

Now we will make the Form1 class inherit from Gizmox.WebGUI.Forms.Form.

public partial class Form1 : Form

We will add a constructor to the Form1 class and add a few controls in it.

public Form1()
{
GroupBox GroupBox1 = new GroupBox();
GroupBox1.Text = "My GroupBox";
this.Controls.Add(GroupBox1);
Button Button1 = new Button();
Button1.Click += new EventHandler(OnClick);
Button1.Location = new Point(20, 20);
GroupBox1.Controls.Add(Button1);
PropertyGrid PropertyGrid1 = new PropertyGrid();
PropertyGrid1.SelectedObject = GroupBox1;
PropertyGrid1.Left = 200;
PropertyGrid1.Height = 400;
PropertyGrid1.Width = 200;
this.Controls.Add(PropertyGrid1);
}

public void OnClick(object a, EventArgs b)
{
Form1 form1 = new Form1();
form1.Height = 400;
form1.Width = 200;
form1.BackColor = Color.AliceBlue;
form1.ShowDialog();
}

In the WebConfig change the application start up form to the form1 class.

<Applications>
<Application Code="Form1" Type="VWGTest.Form1, VWGTest" />
</Applications>

To run our application we will create a new virtual directory in our IIS. Open your IIS right click on the default web site and select New\Virtual Directory. Set the Directory alias.

Figure 8.

Select the folder that the application is saved.

Figure 9.

Select the new virtual directory we created and right click on the default.aspx page and select browse. This will open the asp.bet site in the browser. Now change the default.aspx url to form1,wgx and see our VWG application.

Figure 10.

Microsoft Visual Web Developer Express Edition

After installing Microsoft Visual Web Developer 2008 Express Edition open it and create a new Asp.Net Web application.

Figure 11.

If you are using Microsoft Visual Web Developer Express 2008 Edition you can skip this section and do everything in the asp.net web project. But if you're using Microsoft Visual Web Developer Express 2005 Edition another project a windows class library.

Figure 12.

We will need to update the WebConfig just like we did before just make sure you delete the configSections and the httpHandlers before so you won't have them doubled.

Next we will add a reference to the web project to the Gizmox.WebGUI.Server assembly and add to the class library a reference to Gizmox.WebGUI.Common and Gizmox.WebGUI.Forms. Also add a reference in the class library to System.Drawing.

Add a new class to the Class library named Form1.

Open Form1 and add the using section to the file.

Imports System
Imports System.Collections.Generic
ImportsSystem.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports Gizmox.WebGUI.Common
Imports Gizmox.WebGUI.Forms

This class should inherit from Gizmox.WebGUI.Forms.Form

Public Class Form1
Inherits Gizmox.WebGUI.Forms.Form

Next open Form1 but this time in designer mode and just open a few controls.

Figure 13.

Add this to Form1 so the InitializeComponent will be executed.

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Right click on the web project and add reference to the class library project.

Figure 14.

In the WebConfig we've set the start point of the application to the Form1 class like this.

<Applications>
<Application Code="Form1" Type="VWGVBClass.Form1, VWGVBClass" />

</Applications>

Open the project property page and set the start form of the application to Form1.Wgx in the Web Section.

Figure 15.

Let's run our application.

Figure 16.

To summarize:

We have seen how to use Visual WebGui without having to install Visual studio by using SharpDevelop and Visual Studio express.