Developer Overview All rights reserved (September 2005)

Developer Overview

All rights reserved (September 2005)

What is WebGui ?

WebGui is a RIA* platform that provides: A dedicated high performance oriented web server. Desktop application development concepts abstraction

hiding all web bits and bites. Unique communication concepts that enables 1/100 of

traditional web application transmition and processing loads.

Unique presentation concepts that enables high usage of browser capabilities.

Help...

* RIA – Stands for Rich Internet Application.

WebGUI Goals

Simplify web application development By adopting desktop application development

concepts. By hiding all web languages and concepts from the

developer enabling the developer to focus on the application.

By managing all the application from one unified OOP object module that is similar to known desktop application object module (WinForms on .NET, Swing on Java).

By providing a complete set of controls and base classes dedicated for simplifying complex IT solutions.

WebGUI Goals

High performance web application development By reducing transmition size to 1/100 of traditional web

application size. By hiding web implementation and using a

performance tuned infrastructure. By reducing server initialization and rendering

processing loads by 1/100 of traditional web application.

By using an asynchronic approach that gives a desktop like application look and feel.

By sending differential data only and partial updating of the screen.

WebGUI Goals

Creating highly secured web applications. By eliminating the data pages traditional

approach which are pages that receive parameters and return data that is potentially sensitive.

By restricting data sent to the browser to presentation data only.

By accepting only registered events sent to the server and known inputs that are kept on the server side (For example a selected list box item will send only the selected index and the server will translate it to a selected object).

Desktop application architecture

Application CodeApplication Code

Runtime Framework (WinForms, Swing)Runtime Framework (WinForms, Swing)

Operation SystemOperation System

ScreenScreenInput Devices

(Keyboard, Mouse)Input Devices

(Keyboard, Mouse)

Update Commands

Event Queue

Local Computer

WebGui application architecture

Application CodeApplication Code

Runtime Framework (WebGui)Runtime Framework (WebGui)

WebGui ServerWebGui Server

BrowserHTML

BrowserHTML

Browser Events(Keyboard, Mouse)

Browser Events(Keyboard, Mouse)

Update Commands

Event Queue

Server

Client

WebGui package content

Installing WebGui SDK will install: Gizmox.WebGui.Server:

WebGui Server handles all communication and request routing. Gizmox.WebGui.Common:

WebGui interfaces and common objects. Gizmox.WebGui.Forms:

WebGui desktop like application runtime. Gizmox.WebGui.Forms.Design:

WebGui design time support for visual studio. Gizmox.WebGui.Forms.Templates:

WebGui common GUI interfaces templates that are implemented as abstract classes that can be inherited.

Gizmox.WebGui.VSIntegration: WebGui visual studio integration.

WebGui package relations

Gizmox.WebGui.Forms (Runtime)

Gizmox.WebGui.Forms (Runtime)

Gizmox.WebGui.Common (Interfaces, Common Objects)

Gizmox.WebGui.Common (Interfaces, Common Objects)

Gizmox.WebGui.Server (Web Server)Gizmox.WebGui.Server (Web Server)

Gizmox.WebGui.Forms.Design (Design time)

Gizmox.WebGui.Forms.Design (Design time)

WebGui control

CSS (Runtime)CSS (Runtime)

XSL (Runtime) XSL (Runtime)

JS (Runtime) JS (Runtime)

C# / VB (Runtime)C# / VB (Runtime)

C# / VB (Design Time)C# / VB (Design Time)

Client Side Server Side

WebGui Classes

Component – Base class for all runtime objects implements .NET IComponent interface that is necessary for design time support.

Control – Inherits from component and acts as base class to all visual components adds visual properties and methods.

Form – Inherits from control and is the base class for all window contained objects.

UserControl – Inherits from control and can be used to create composite controls which are controls that are composed of other controls.

Configuration Setting

“WebGui Router” Registration

<!-- WebGUI Router registrestion --><system.web>

<httpHandlers><add verb="*" path="*.wgx"

type="Gizmox.WebGUI.Server.Router,Gizmox.WebGUI.Server,Version=1.0.5701.0,Culture=neutral,PublicKeyToken=3de6eb684226c24d" />

</httpHandlers></system.web>

“WebGui Router” handles all requests and routes them to the dedicated handler.

“WebGui Router” is part of the “WebGui Server” that is installed on a production server and the “WebGui Personal Server” that is installed in the SDK installation.

WebGui Configuration Section

<!-- WebGUI Configuration section handler declaration -->

<configSections>

<section name="WebGUI"

type="Gizmox.WebGUI.Common.Configuration.ConfigHandler, Gizmox.WebGUI.Common, Version=1.0.5701.0, Culture=neutral, PublicKeyToken=263fa4ef694acff6" />

</configSections>

<WebGUI>

</WebGUI>

WebGui Application Mappings

Traditional desktop applications frameworks support a single form that can be used as the main form. This form is the first form that is loaded and the application life time depends on keeping this form alive.

WebGui supports multiple forms that can be mapped to multiple URLs, enabling multiple main forms running simultaneously. The application life or in WebGui terminology, the application session life time depends on keeping at least one form alive.

WebGui Application Mappings Application mapping is done in the applications section:

Multiple “Application” tags can be defined, defining multiple URL application mappings. The access URL that is defined will look like this:

http://[host]/[Code].wgx<WebGUI>

<Applications>

<Application Code="Explorer" Type="Gizmox.WebGUI.Sample.Forms.Explorer, Gizmox.WebGUI.Sample"/>

</Applications>

</WebGUI>

WebGui Application Mappings In some cases specifying the mapped form object in a

configuration is too limiting and the mapped form depends on some business logic. This behavior can be achieved through the use of a WebGui form factory.

A WebGui form factory is a class that implements IFormFactory, which is an interface the WebGui server can use to create the mapped form.

IFormFactory contains one method called CreateForm which receives the page name and object array of arguments for future use.

WebGui Application Mappings Form factory mapping is done in the applications section:

The “DefaultFactory” attributes defines the default form factory to use. The “Application” tag “Mode” attribute is used to pass the control over this mapping to the form factory.

<WebGUI>

<Applications DefaultFactory="Gizmox.WebGUI.UIProcess.Server.FormFactory, Gizmox.WebGUI.UIProcess">

<Application Code=“MyWizard" Mode=“Factory"/>

</Applications>

</WebGUI>

WebGui Themes And Flavors

“WebGui Themes” are pre-built assemblies that can redefine WebGui component behaviors and appearance. WebGui themes contains CSS, XSLT, and skin images that should overload the default theme files. Excluding a CSS,XSLT or image file will cause WebGui to revert to the default theme version of this file.

“WebGui Flavors” are composed of variables that are grouped under a flavor definition and are applied in pre-defined CSS entry points according to the current selected flavor. Flavors are used to minor theme modification mainly in the color scheme of the current active theme.

WebGui Themes And Flavors Themes definitions are done in the themes section:

The selected attribute should be or a theme name or default that uses the default WebGui theme. The flavor attribute should be a name of a valid flavor with in the selected theme.

<WebGUI>

<Themes Selected="Default" Flavor="XPBlue">

<Theme Name="WebGUI.Classic" Assembly="Gizmox.WebGUI.Themes.Classic" />

<Theme Name="Ifn.Standart" Assembly="Ifn.W2.Web.Themes.Standart" />

</Themes>

</WebGUI>

WebGui Directories

“WebGui Directories” are pre-defined directories that can be accessed through WebGui resource management API.

Currently WebGui supports two pre-defined directories which are: Icons: That store icon images for buttons,

toolbars, and etc. Images: That store images that should be

used with picture boxes, background images and etc.

Icons directory should include icons that are 16 X 16 pixels (According to the default WebGui themes).

WebGui Directories “WebGui Directories” are defined in the directories section:

The path attribute can be either relative or absolute. The code attribute should be one of the pre-defined directories.

<WebGUI>

<Directories>

<Directory Code="Icons"Path="Resources\Icons" />

<Directory Code="Images"Path="Resources\Images" />

</Directories>

<WebGUI>

WebGui Authentication

“WebGui Authentication” enables a dedicated logon form that is presented on the application session start or when the “IsLoggedOn” session property changes to false. This feature enables token based applications to force re-logon after token is invalid.

“WebGui Authentication” requires a LogonForm inherited form to be mapped as the logon form handler.

“WebGui Authentication” can be presented in the main application form or in a dialog that pops every time logon is required.

WebGui Authentication “WebGui Authentication” mode is defined in the authentication section:

The mode attribute can be either “Main” or “Dialog”. The type attribute should be a valid LogonForm inherited form class full qualified name. Excluding authentication definition will disable “WebGui Authentication”.<WebGUI>

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

<WebGUI>

WebGui Tracing

“WebGui Tracing” enables a full performance report data gathering that can help to analyze application performance critical sections.

WebGui unique engine enables a high detail automatic tracing that can result in a event handler in a specific class execution time or control rendition time.

“WebGui Authentication” can have a threshold defined filtering the tracing to a given execution time in ms and above.

WebGui Tracing “WebGui Tracing” mode is defined in the trace section:

The mode attribute can be either “On” or “Off”. The threshold attribute is defined as the minimum execution time to be logged in milliseconds .

<WebGUI>

<Trace Mode="On" Threshold ="30"/>

<WebGUI>

Controls Overview

Form Control

This is the basic window control which is represented as a window in the client.

A form can be displayed as modal, modaless or popup.

Important: Modal forms in WebGui are only modal on the client side. Dialog result is obtained through the closed event.

Example...

The WebGui demo movie shows how to use the WebGui Modal concepts.

TabControl Control

This layout control can create tabbed view that can be used for user navigation.

The TabControl can be used to reduce the amount of elements displayed at the same time and has an important performance role by supporting incremental loading and reducing browser “display work”.

The TabControl can appear as: Normal – Displaying windows like tabs. Workspace – Displaying vs2003 like tabs. Logical – Tabs are invisible and are used only

for performance by supporting incremental loading with switching capabilities.

TableLayout Control

This layout control can create a table layout than can be used to position controls.

Defining rows can be done with height definition or without which will cause the row to expand to its maximum limit.

Defining columns can be done with width or without it, which will case the column to expand to its maximum limit.

Remark...

TableLayout is a 2.0 framework based control.

TableLayout Control - Sample

TableLayout objTableLayout = new TableLayout();

// Adding RowsobjTableLayout.RowStyles.Add(new TableLayoutRowStyle(20));objTableLayout.RowStyles.Add(new TableLayoutRowStyle(80));objTableLayout.RowStyles.Add(new TableLayoutRowStyle(20));objTableLayout.RowStyles.Add(new TableLayoutRowStyle(20));objTableLayout.RowStyles.Add(new TableLayoutRowStyle());

// Adding ColumnsobjTableLayout.ColumnStyles.Add(new TableLayoutColumnStyle(100));objTableLayout.ColumnStyles.Add(new TableLayoutColumnStyle(150));objTableLayout.ColumnStyles.Add(new TableLayoutColumnStyle());

TableLayout Control - Sample

// Adding controls to the table layoutobjTableLayout.SetControl(new Label("Name:"),1,1);objTableLayout.SetControl(new TextBox(),2,1);objTableLayout.SetControl(new ListBox(),2,2);objTableLayout.SetControl(new Label("Type:"),1,2);objTableLayout.SetControl(new TextBox(),2,3);objTableLayout.SetControl(new Label("Value:"),1,4);objTableLayout.SetControl(new TextBox(),2,4);objTableLayout.SetControl(new Label("Properties:"),1,5);objTableLayout.SetControl(new TextBox(),2,2,5,1);

CheckBox objCheckBox = new CheckBox();objCheckBox.Text="Bind";objTableLayout.SetControl(objCheckBox,3,4);

TableLayout Control - Sample

ListView Control

Displays a list of items in several view modes similar to the well known windows explorer ListView control.

Related Components: ListViewItem – Represents a single ListView

item. ListViewSubItem – Represents a single

ListView item column data. ColumnHeader – Represents a ListView

column definition.

TreeView Control

Displays a tree for nodes similar to the well known windows explorer TreeView control.

The TreeView support node level updating enabling incremental updating support.

The TreeView supports incremental loading and has supporting “Loaded” flag to simplify the incremental loading concepts.

Related Components: TreeViewNode – Represents a node with in

the tree view control.

Splitter Control

Displays dragable separator that can resize its previous sibling control.

The splitter control manipulates the previous docked control width or height.

The splitter control should be docked to left, right, top or bottom.

ContextMenu Component

This component can be used to create a right click context menu.

Most of the WebGui framework components support context menu.

MainMenu Component

This component can have multiple MenuItems which are displayed in the to of the form.

Using the MainMenu object is done by creating a MainMenu object and assigning it to the form Menu property.

MainMenu Component

This component can have multiple MenuItems which are displayed in the to of the form.

Using the MainMenu object is done by creating a MainMenu object and assigning it to the form Menu property.

ToolBar Control

This component displays a toolbar that has buttons and separators.

A button can be a drop down menu by using the dropdown property.

The toolbar can be normal style or flat style. Displaying a toolbar in the application body should be flat while the main toolbar should be defined as normal.

UserControl Control

This control is used as a base class for composite controls. Composite controls are controls that contain other controls and can be referenced as a single control.

This control is very important for code reuse (Example: An item chooser which can be easily implemented as a composite control).

WebGui Resource Manager

Resources are represented in WebGui by resource handles that act as pointers to a resource.

Currently there are several resource handle types: IconResourceHandle: Used to point to a resource that is in the

icon folder. ImageResourceHandle: Used to point to a resource that is in

the image folder. SkinResourceHandle: Used to point to a resource that is in the

theme assembly as a skin resource. TypeResourceHandle: Used to point to a resource that is in

saved under a type resource file (Like in WinForms). AssemblyResourceHandle: Used to point to a resource that is

embedded in an assembly. All handles are derived from the abstract class ResourceHandle.

ImageList Control

Currently WebGui does not support ImageList. Normally a control will have an ImageList property and an ImageIndex that will used.

WebGui contains an extension and has a Image property that when ImageList support will be available could be set by the above properties.

The WebGui Image property can be set by hand and excepts a WebGui ResourceHandle reference.

WebGui Resource Manager

// Example:// This example will display an image named “file.gif” from the// Image directory which is defined in the web.config

PictureBox objPictureBox = new PictureBox();objPictureBox.Image = new ImageResourceHandle("file.gif");

WebGui labels service

WebGui has a static class that is called WGLabels that has predefined labels that are culture sensitive. These labels are basic labels that are commonly used by WebGui and other WebGui applications (Example; Open, Close, Search, Clear, Cancel, Ok, and etc.).

Example: objMyLabel.Text = WGLabels.Open;

Component Gateway Overview

Component Gateway Technology

WebGui server supports component gateway enabled controls by creating virtual URL’s that can be handled by the control. A component gateway enabled control can declare gateways and receive gateway reference object that can return the actual URL assigned for the component gateway.

A component gateway enabled control can define multiple actions to enable multiple gateways that have different URL’s and all of them are managed by the component enabled control.

AppletBoxBase Control

A component gateway enabled control that can be used to host and communicate with applets (For example HtmlBox Applet implementation).

Example...

Show HtmlBox applet box sample.

HtmlBox Control

Displays a frame that can be populated from a server path, external URL or a HTML string content.

HtmlBox is implemented as component gateway enabled control.

Best Practices

WebGui Best Practices

Control.Update() Method is used to redraw the control. Calling this method will add the hole control and its underlining object tree to the updating commands. Call this method only if there is an WebGui update bug and remember to remove it when that bug is fixed.

TabControl is an excellent way to enhance incremental updating and to reduce browser processing loads.

TabControl can be logical which means that the tabs are not visible and tab switching is done programmatically . This way you can enjoy the TabControl performance without actually seeing the TabControl .

WebGui Best Practices

A WebGui application runs in the server session. This means that every user that uses the WebGui created application has a running application in the server session. Unlike desktop programming which is not intend to be executed in this manner you should be aware of which objects you are keeping alive and if they can be unreferenced and recreated when needed.

Static variables are shared between users and should be thread safe.

WebGui Best Practices

Using dialog return values should be used through the closed event (Like shown in the WebGui demo movie).

Event handlers should be used carefully. Attaching an event handler to an event causes the WebGui server to force post back on every time this event is fired. Consider using the queued version of this event or removing the need for this event if possible.

Important...

Events that do not cause user interface changes are potentially good candidates for rewriting as queued events.

WebGui Best Practices

WebGui automatically detects GUI changes and determines the best updating method. Updating the GUI controls should be done with as little changes as possible. Example:

If you want to update a list view item. You should prefer updating the specific list view item than reloading the entire list. WebGui will detect the change and create an update command suited for updating the client. Updating all the list view items will cause a full redraw of the list.

Roadmap

WebGui Roadmap

Supporting the designer feature requires: An empty constructor. The class should include a private member called

components of type System.ComponentModel.Container. The class should include a private method called

InitializeComponent which will initialize all components. The empty constructor must include a call to the

InitializeComponent method and other constructors should call the method or call the empty constructor.

All components should be defined as members of the designed class.

Example...

WYSIWYG – What you see is what you get.

WebGui Roadmap

Custom control creation which will enable developers to create a new component that uses the WebGui concepts but is not part of the basic WebGui controls.

Common dialog base class templates - This assembly will contain common used and familiar dialogs that are missing data retrieval code and can be populated by inheriting the base class and implementing the abstract method to reflect propriety data through these familiar dialogs. This assembly is currently present and has a few templates that where all ready created.

WebGui Roadmap

Floating layers window management for use under strict security settings. This feature will enable users who have strict popup blocking to work with the application as a single window application.

Drag and drop support. This feature will enable the definitions of valid drag mappings and the visual representation of these mappings. The drag and drop action will be used through a set of events.

WebGui Roadmap

ImageList support that will reduce transformation load and will enable porting WinForms based applications with image lists to WebGui.

WebGui performance monitor that will enable detection of critical low performance code.

WebGui performance advisor that will report sections that could be changed to improve application performance.

WebGui Roadmap

Visual studio configuration addin support that will enable application configuration from a dedicated WebGui dialogs.

An external WebGui configuration manager that will enable WebGui application configuration to be manipulated from a dedicated WebGui dialogs.

WebGui Java version.