Search KB Filter article types
Free all the way: Using Visual WebGui with SharpDevelop
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 or notepad. In this article we will focus on how to use SharpDevelop.
Categories: Introduction
Tags: Developers, 1. Beginner, 2. Intermediate, 3. Advanced, Pre v6.3, v6.3, v6.4 and Later
Revision: 1
Posted: 10/Jan/2008
Updated: 10/Jan/2008
Status: Publish
Types: Walkthrough

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.

Once the VWG SDK is installed we can start developing.

SharpDevelop

Let’s open SharpDevelop and create a new solution.

We will add an Asp.Net project.

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

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.

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.

Select the folder that the application is saved.

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.

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.
 

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

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.

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.

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.

Lets run our application.

To summarize:

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

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

About the author

Related Articles

Introduction  
Title Update Author
Silverlight controls
Tags: Developers, 1. Beginner, 2. Intermediate, 3. Advanced, Silverlight, Pre v6.3, v6.3
07/Jan/2008    2008/01/07
In this “How To” we are going to learn how to use Visual WebGui open source project to create a code patch fixing a bug you have found or a feature you have created and would like to add.
Tags: Developers, 3. Advanced, Customization, Pre v6.3, v6.3, v6.4 and Later
07/Jan/2008    2008/01/07
Tags: Developers, Data Binding, Navigation, 1. Beginner, 2. Intermediate, Data Binding, Navigation, ASP.NET, Pre v6.3, v6.3, v6.4 and Later, 3. Advanced
11/Jan/2009    2009/01/11
Abstract: The Web, Cloud and SaaS models are changing the computing world forever, and us, the developers will have to adjust and serve this trend. One of the biggest challenges is moving software assets that were developed for desktop architecture to the new deployment models. Just imagine that you...
Tags: Architects, CIOs, Developers, C#, 1. Beginner, 2. Intermediate, 3. Advanced, Windows Forms, Pre v6.3, v6.3, v6.4 and Later
07/Jan/2010    2010/01/07
In this How to we are going to learn how to develop a Visual WebGui application without the use of a form designer.
Tags: Developers, 1. Beginner, 2. Intermediate, Pre v6.3, v6.3, v6.4 and Later, 3. Advanced
02/Jan/2009    2009/01/02
Tune in to this Free webcast and learn how Visual WebGui solves all the pains of Rich Internet application development. Learn how Visual WebGui bridges between the richness of .NET and the richness of HTML5. Learn how to be empowered by Visual WebGui to build rich enterprise-level Ajax based Web and...
Tags: Architects, Developers, Data Binding, Drag & Drop, Visual WebGui Pipeline, C#, CSS, HTML5, JavaScript, Visual Studio, XML, 1. Beginner, 2. Intermediate, 3. Advanced, Customization, Data Binding, Layouting, HTML5, jQuery, v6.4 and Later
30/May/2011    2011/05/30
.NET Web, Cloud and Mobile application delivery platform | Sitemap | Terms of Use | Privacy Statement | Copyright © 2005-2011 Visual WebGui®       Visual WebGui weblog on ASP.NET Visual WebGui Group on LinkedIn Visual WebGui updates on Twitter Visual WebGui Page on Facebook Visual WebGui YouTube Channel Visual WebGui Platform News RSS