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. In this article we will focus on how to use SharpDevelop and Visual Studio express.

This topic assumes that you have some basic knowledge of Visual WebGui. You can find more information on how to use Visual WebGui in the “Learn” section of our site here.

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.

image_thumb22image

Once the VWG SDK is installed we can start developing.

SharpDevelop

 

 

 

 

 

 

 

 

Let’s open SharpDevelop and create a new solution.

image

 

We will add an Asp.Net project.

image

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

image

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>

  <!--  WEBGUI AUTHENTICATION MANAGEMENT

   This section defines the application authentication mode.

   Example:

  <Authentication Mode="Dialog" Type="Ifn.W2.Web.POC.Forms.Logon, Ifn.W2.Web.POC" />

  Example Help:

  Mode:

  Dialog - Authentication is done in a popup window

  Type:

  A full type name to handle logon (This class should inherit from the LogonForm)

  -->

  <!--Authentication Mode="Main" Type="Gizmox.WebGUI.Sample.Forms.Logon, Gizmox.WebGUI.Sample" /-->

  

  

  

  

<!--  WEBGUI APPLICATION MANAGEMENT

    This section maps pages to application forms.

    Example:

   <Application Code="MainForm" Type="MyNameSpace.MainForm, MyAssemblyName"/>.

   Example Help:

   The current application definition maps the full qualified class name to the

   specifiec page code. This means that the link http://[host]/MainForm.wgx will

   be handles by the givven application form.

-->

<Applications>

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

</Applications>

<!--  WEBGUI CONTROL MANAGEMENT

    This section registers controls so that the webgui server can expose there resources.

-->

<Controls>

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

</Controls>

<!--  WEBGUI THEMES MANAGEMENT

     Selected - The currently selected scheme

-->

<Themes Selected="Default">

    <!-- <Theme Name="MyTheme" Assembly="MyThemeAssembly" /> -->

</Themes>

<!--  WebGUI RESOURCE MANAGEMENT

    Icons    - This maps the icon directory (Absolute\Relative path).

    Images    - This maps the images directory (Absolute\Relative path).

    Generated  - This maps the generated resources directory and is requiered for using custom controls (Absolute\Relative path).

    Data    - This maps the data directory which should contain data related files (Absolute\Relative path) 

-->

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

  <!-- WEBGUI STATIC RESOURCES MANAGMENT

   The mechanism should be used in a deployment scenario to boost performance. The static

   resoruces mode creates a directory named "Route" and with in it files that are accessed

   directly using the web server instead of dynamicly generated files. You should check that

   there the site can write to that directory.

-->

<StaticResources Mode="Off"/>

    

     <!--

       WEBGUI PRIVATE VERSION

      Adds the private version key to the caching key. This key provides a mechanism to invalidate

     both client and server caching. You should use this key when you are delpoying a theme or 

     a new custom control. The server and client caching are per site.

   -->

  <PrivateVersion Value="12"/>

   <!--

     WEBGUI PRELOADING

     Changing the Mode to "On" enables icon preloading mechanism. This mainly prevents IE

     loading the same image multiple times.

     Example:

     <IconsPreloading Mode="Off"/>

     <SkinsPreloading Mode="Off"/>

   -->

   <IconsPreloading Mode="Off"/>

   <!-- WEBGUI CONNECTION MANAGEMENT

     Setting the session timeout to a specified time will count the "idle" (non-active) time and redirect the client to a "session timed-out" page (which is currently embedded in the Gizmox.WebGUI.Forms assembly).

     There should not be any push capabilities from the server to the client, since the KeepConnected itself is a request that comes from the client and can return any command (such as redirection) back to the client.

     In order to enable session timeout you should use a combination of the following configurations:

       <KeepConnectedInterval Value="5000" />

       <KeepConnectedLimitation Value="3" />

     The KeepConnectedInterval provides the interval between each keep-connected call. The KeepConnectedLimitation provides the allowed number of continuance keep connected calls before timeout occurs.

     -->

   <!-- WEBGUI URL MANAGEMENT

     ForceDomain causes the base url of each rendered html page to be the specified domain.

     Example:

       <ForceDomain Value="www.ccast.edu.ps" />

     ForcePort causes the the base url of each rendered html page to the port specified value.

     Example:

       <ForcePort Value="8080" />

     ForceHTTPS causes the base url of each rendered html page to use the HTTPS protocol.

     Example:

       <ForceHTTPS Mode="Off" />

  -->

   <!-- WEBGUI WINDOW TYPE MANAGEMENT

     Setting On forces all popups to be rendered as DIVs

    Example:

      <InlineWindows Mode="Off" />

   -->

   <!-- WEBGUI THREAD APARTMENT MANAGEMENT

     AspCompat enables single thread apartment components

     Example:

       <AspCompat Mode="Off" />

    -->

   <!-- WEBGUI FILE UPLOAD COMPONENT MANAGEMENT

     Set true to use Flash compontent, false to use browser default

     Example:

      <UseFlashForUpload Mode="On"/>

  -->

   <!-- WEBGUI  RESPONSE COMPRESSION MANAGEMENT

     Set to compress all Responses from server

     Example:

       <GZipCompression Mode="Off" />

  -->

 </WebGUI>

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

<system.diagnostics>

  <switches>

    <!--

    Provides a mechanism for monitor an application using a debug messages viewer or

    in debug time in the output window. Remember to turn turn this feature off in

    a deplyment scenario.

    0 - Disabled

    1 - Gives error messages

    2 - Gives errors and warnings

    3 - Gives more detailed error information

    4 - Gives verbose trace information

    -->

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

    <!--

    Performance tracing limited to this threshold

    -->

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

    <!--

    Disables the caching of Visual WebGui resources

    -->

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

    <!--

    Disables client sources obscuring (Mainly for debugging and developing purposes)

    0 - Disabled

    1 - Enabled

    -->

    <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>
    <!--  WebGUI ROUTER HANDLER
      This http handler routes the requests to Modules/Icons/Images/Css/Xslt/Resoureces.
      Client events are sinked through this router as well.
    -->
    <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.

image  image

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.

image

Select the folder that the application is saved.

image

 

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.

image

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.

image

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

image

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

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

image 

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.

image

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.

image

 

Lets run our application.

image

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

You can read the original how to here 

-- Eyal Albert @ Eyal.Albert (at) Gizmox.com

No Comments