Transcript Visual WebGui

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
Local Computer
Application Code
Runtime Framework (WinForms, Swing)
Operation System
Update
Commands
Screen
Event Queue
Input Devices
(Keyboard, Mouse)
WebGui application architecture
Server
Application Code
Runtime Framework (WebGui)
WebGui Server
Update
Commands
Browser
HTML
Client
Event Queue
Browser Events
(Keyboard, Mouse)
WebGui package content
 Installing WebGui SDK will install:

Gizmox.WebGui.Server:


Gizmox.WebGui.Common:



WebGui design time support for visual studio.
Gizmox.WebGui.Forms.Templates:


WebGui interfaces and common objects.
Gizmox.WebGui.Forms:
 WebGui desktop like application runtime.
Gizmox.WebGui.Forms.Design:


WebGui Server handles all communication and request routing.
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.Design
(Design time)
Gizmox.WebGui.Forms
(Runtime)
Gizmox.WebGui.Common
(Interfaces, Common Objects)
Gizmox.WebGui.Server (Web Server)
WebGui control
Client Side
Server Side
CSS (Runtime)
C# / VB (Runtime)
XSL (Runtime)
C# / VB (Design Time)
JS (Runtime)
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” 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 Router registrestion -->
<system.web>
<httpHandlers>
<add verb="*" path="*.wgx"
type="Gizmox.WebGUI.Server.Router,Gizmox.WebGUI.Server,Versi
on=1.0.5701.0,Culture=neutral,PublicKeyToken=3de6eb684226c24
d" />
</httpHandlers>
</system.web>
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:
<WebGUI>
<Applications>
<Application Code="Explorer"
Type="Gizmox.WebGUI.Sample.Forms.Explorer,
Gizmox.WebGUI.Sample"/>
</Applications>
</WebGUI>
 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 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:
<WebGUI>
<Applications
DefaultFactory="Gizmox.WebGUI.UIProcess.Server.FormFact
ory, Gizmox.WebGUI.UIProcess">
<Application Code=“MyWizard" Mode=“Factory"/>
</Applications>
</WebGUI>
 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 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:
<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>
 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 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:
<WebGUI>
<Directories>
<Directory Code="Icons"
Path="Resources\Icons" />
<Directory Code="Images"
Path="Resources\Images" />
</Directories>
<WebGUI>
 The path attribute can be either relative or absolute.
 The code attribute should be one of the pre-defined directories.
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:
<WebGUI>
<Authentication Mode="Main"
Type="Gizmox.WebGUI.Sample.Forms.Logon,
Gizmox.WebGUI.Sample" />
<WebGUI>
 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 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:
<WebGUI>
<Trace Mode="On" Threshold ="30"/>
<WebGUI>
 The mode attribute can be either “On” or “Off”.
 The threshold attribute is defined as the minimum execution time
to be logged in milliseconds .
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 Rows
objTableLayout.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 Columns
objTableLayout.ColumnStyles.Add(new TableLayoutColumnStyle(100));
objTableLayout.ColumnStyles.Add(new TableLayoutColumnStyle(150));
objTableLayout.ColumnStyles.Add(new TableLayoutColumnStyle());
TableLayout Control - Sample
// Adding controls to the table layout
objTableLayout.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.