VWG User Guide

Introduction

The VWG User Guide is your go-to guide for everything you could possibly need when
using VWG. Use this excellent add-on in ways that will help create amazing, high quality
Web and Mobile Device Applications, in the familiar environment of Microsoft Visual
Studio. VWG supports versions of Visual Studio up to and including VS 2012 and VS
2013.

Who is this VWG User Guide for?

This VWG User Guide is aimed at Visual Basic and C# programmers who have already
explored the basic functions of VWG.

What is the purpose of this VWG User Guide?

The aim of this Guide is to give users of VWG an in-depth understanding of all the
functionalities of Visual WebGUI when used as an add-on to Microsoft Visual Studio.

Overview
This User Guide provides Information regarding the uses and functionalities of all aspects
of Visual WebGUI as an add-on to Microsoft Visual Studio. Each Chapter covers
information on activating and working with the various aspects that make up Visual
WebGUI, and introduces users to many features that will enhance their VWG experience.

VWG Architecture and its advantages

VWG is the only add-on for Visual Studio which provides users with the ability to create
Web Applications. It can be used with ease by anyone who has experience with Visual
Studio. VWG has a Web Architecture and deployment structure which is based on
ASP.NET.

When using JavaScript for the creation of Web Applications, the bulk of the Information
is stored Client-side, on the Web Browser. With VWG, the information is stored Server-
side, whether the Application is destined to be a Desktop Web Application or an
Application for Mobile Devices. There are major advantages to this process, especially in
relation to Application security. Business logic is not passed from the Server to the Client
but rather the Client sends Postback notifications to the Server when there is a change,
the Server processes the change and then sends the Information on changes required
back to the Client. This means that only a small kernel of code is stored on the Client,
and there is less room for changes to be made on the Client without the knowledge of
the Server. This also makes VWG extremely stable and reliable to use.

Meanwhile, the code of the Controls in a given VWG Application is written in JavaScript.
This allows a designer to move between visual design and code writing, depending on
requirements.VWG is fully HTML5 supported. This improves performance and reduces
rendering time, as HTML5 is a lighter HTML structure. Due to its fully HTML5 compatible
document type, VWG does not require Quirks mode in Internet Explorer. It also has built
in iScrolls for devices lacking a visible scroll bar.

CSS3 Visual effects are supported, being available from the VisualEffects property.
 Internet Explorer Versions 10 and 11 are also supported by VWG.

Client-side interactions are supported through JQuery UI, allowing elements to be

resized, dragged, dropped, or multi-selected.

VWG also includes an Offline Mode option. This allows VWG Applications to work even
when disconnected from the Server through poor internet connectivity or other errors. In
this case, Postbacks are not sent to the Server. But again, unlike other Web design tools,
the Offline Mode is an option which can be chosen by the programmer rather than a
given default, allowing for a secure and reliable environment.

At every point of creation of a VWG Application, simplicity and ease of integration with
Microsoft Visual Studio is underscored.

Recommended Workflow
This is the recommended workflow for a VWG Project. Of course, users are able to create
their own Workflow that suits their needs, time frame and familiarity with the product.

Optional Step: Before beginning work with a VWG Project, the option of opening
a new VWG Control Library exists. Libraries are containers for
Open a VWG Control designs, functionality and capabilities that may be useful in
Library multiple Projects. Therefore, organizing a Control Library prior to
beginning a Project is a worthwhile option.

1. Open and Enable An un-integrated Project is one that was created with Gizmox
Un-Integrated assemblies but not in VWG, or a Project that was created in a
Projects version of VWG that does not have integrations. To be included in
a VWG Project, the un-integrated Projects must be enabled.

2. Open a VWG This is the Project in which the Web Application is designed
Application Project
3. Add References Add all the references to assemblies that may be required
required for Project throughout the Project

4. Set options on the The General Tab contains settings relevant to the use of VWG in
General Tab of the Visual Studio, and options within this Tab should be set prior to
Properties Pages beginning work on the Application Project

5. Open Form1 This is the first Form of the Project. Each Form is the design
canvas for a page of the web Application. Many Forms can be
added as required during design time

6. Create a Theme for VWG contains a default ‘Live Office Theme’, but a unique theme
the Application can be set to be used in the Application.

7. Add Controls to the Select Controls from the Toolbox and place on the Form. Set
Form properties of individual controls, set browser options for each
control, and define events to be attached to the Controls.

8. Add Images, Visual To create a complete Application Form, a variety of resources may
Effects and other be added to and around the Controls on the Form
Resources to the
Form
9. Add Code using the Using the Code Designer, code can be added to the Form in order
Code Designer to create additional functionality for the Controls
 10. Set a Start Form In order for the Application to run as a Web Application, a Start
Form must be defined. This is the Form that is the entrance point
to the Application once it has been deployed.

11. Build the Project Prior to debugging and running the Application, the Project must
be built. Information about the success of the Build appears at the
bottom of the screen. Errors can then be corrected prior to
running.

12. Debug and Run the The Project can be run either with or without debugging, but
Project debugging is recommended.

13. Deploy on IIS After assuring that the correct version of IIS is installed, the
Project can be deployed as a web Application on IIS.

What is covered in this VWG User Guide?

 VWG Project Templates There are two types of VWG Project Templates. A VWG
Application Project is the template in which the VWG Project is designed. A VWG Control
Library is a storage facility for functionality, capabilities and designs that can be added to
one or multiple VWG Application Projects. How to open Un-integrated Projects is also
covered here. Un-integrated Projects, created with Gizmox assemblies outside of VWG, or
with VWG versions that do not allow integration.
 Properties Pages The most essential Integration Tab when using VWG is the General Tab.
An explanation of all the features displayed on this Tab is given.
 Reference Assemblies In order to use particular assemblies in a VWG Project, they must
be referenced to the Project. It is recommended that this is done prior to beginning work
on the Project.
 VWG Application Forms The Form is the basic canvas on which Applications are designed.
Each Form consists of both a Design Form and a Code Form. In this section, adding
Forms, designating a Start Form, and routing different Forms to different Browsers is
discussed.
 Item Templates There are two types of Item Templates – Controls and Themes. The
Control is the Visual object used in the design of a VWG Application. Control properties
can be modified and changed according to the needs of the designer of the Application.
VWG runs with a default Theme, but unique Themes can be created to suit the Web
Application being designed. All aspects of Theme design and use are explored.
 Images and Other Resources Images and other resources, such as visual effects, can be
added to both individual, particular Controls as well as to chosen Forms. This section
describes the possibilities and application of these and other VWG Resources.
 Data Binding Data can be bound to a range of Controls using VWG. This process is
explained in the Data Binding section.
 Browser Capabilities Options Different Browsers have different capabilities when
presenting visual effects. The programmer can choose a variety of Browser Capability
Options to streamline rendering of the same Application on different Browsers.
 WebSockets WebSockets is a feature that allows the Server to communicate with the
Browser while bypassing the Client. WebSockets is useful for Applications requiring an
open two-way communication channel between the Browser and the Server, such as Chat
Applications.
 Deployment of VWG Applications on IIS In order for a VWG Application to run as a Web
Application, it must be deployed to Internet Information Services (IIS). This section
describes the associated requirements and steps required.
 Troubleshooting Various common scenarios are presented and troubleshooting options
given.
Project Templates
Project Templates are the essential templates required to create Web Applications using
VWG. The two types of Templates are Visual WebGui Application Project and Visual
WebGui Control Library.

Both Templates have a particular Project Structure, presented in the Solution Explorer of
the Project. This structure varies between Project types but also within each Project
type, dependent on whether Visual Basic or C# is the programming language being used
to create the Project.

Visual WebGui Application Project

The Visual WebGui (VWG) Application Project is the Project template on which the VWG
Web Application is created. A VWG Application Project must be opened in order to
perform any part of the design of an Application.

Open a new Visual WebGui Application Project:

1. Click on File -> New Project

2. The New Project Window opens.
3. In the left hand column, select either Visual Basic or C# and click to expand the
relevant menu.
4. Select Visual Web GUI from the list of Installed Templates.
5. In the central column, select Visual Web GUI Application.
6. Name the Application, or keep the default name.
7. If the Application is to be placed in a different location, click the Location drop down
box and select a location.
8. If the Application is to be part of a Solution which has already been created, click on
the Solution drop down box and select Add to Solution. Type the solution name in the
Solution Name window.
9. If the Application is to be part of a new Solution, the default Solution name can be
kept, or a new name typed into the Solution Name Window.
10. Assure that the Create Directory For Solution check box is checked.
11. Click OK.

Project Structure within Solution Explorer:

Properties (in C#)/My Project (in Visual Basic): Opens the property pages, for users
to apply Web.config settings to the Application.

References (in C#): Includes standard .NET assemblies and various VWG assemblies
used for the Project. This folder is not shown by default in Visual Basic but can be
displayed by clicking on Project->Show All Files on the main toolbar.

Resources: Consists of folders in which to save various resources – Generated, Icons,

Images, UserData.

Form1: Opens the first Form of the Application on the screen. Multiple Forms may be
opened for each Application.

Readme.txt: This file gives the user short pieces of Information regarding the creation
of VWG Applications.
Web.config: This file contains settings that control and manage the VWG Application.
The file is a standard ASP.NET configuration file. Additional configuration settings are
added to the standard Visual Studio file when creating a VWG Project. Unless the user
has full understanding of the meaning and implication of the various configuration
settings, changing of default values in the Web.config file is NOT recommended.

Visual WebGui Control Library

Creation of a Visual Web Gui (VWG) Control Library is optional. The advantage of the
Library is that functionalities, designs and capabilities can be stored and used within and
across Application Projects. Libraries contain a specific Form type, called the Usercontrol
Form.

Open a Visual WebGui Control Library Project:

1. Click on File -> New Project.

2. The New Project Window opens.
3. In the left hand column, select either Visual Basic or C# and click to expand the
relevant menu.
4. Select Visual Web GUI from the list of Installed Templates.
5. In the central column, select Visual WebGui Library.
6. Name the Library, or keep the default name.
7. If the Library is to be placed in a different location, click the Location drop down box
and select a location.
8. If the Library is to be part of a Solution which has already been created, click on the
Solution drop down box and select Add to Solution. Type the solution name in the
Solution Name window.
9. If the Library is to be part of a new Solution, the default Solution name can be kept,
or a new name typed into the Solution Name Window.
10. Assure that the Create Directory For Solution check box is checked.
11. Click OK.

Using Libraries in Solutions

Add a Library to a Solution:

1. In Solution Explorer, right click the Solution and select Add -> Existing Item.
2. Add Existing Item Dialog Box appears.
3. In left pane, select Projects folder.
4. In right pane, select library required and click Add.
5. The Library appears in the Solution Explorer.

Reference a Library to a Solution it is part of:

1. In Solution Explorer, right click References (in Visual Basic, make sure to have
chosen Project -> Show all files)
2. Select Add Reference. Add Reference Dialog Box appears
3. Library name appears in Project Tab. Click OK.
4. Library appears in References folder in Solution Explorer and Library content may
now be added to the project

Reference a Library without adding it to a Solution:

1. Build the library

a. Open the Library in Visual Studio
b. In Solution Explorer, right click the Solution
c. Click Build
 2. Open the Project in Visual Studio
3. In Solution Explorer, right click References (in Visual Basic, make sure to have
chosen Project -> Show all files)
4. Select Add Reference. The Add Reference Dialog Box appears.
5. Open Browse Tab and select Library to reference
6. Open bin file of the Library, select the Library’s dll file and click ok
7. Library appears in References folder in Solution Explorer and Library content may
now be added to the project

Project Structure within Solution Explorer:

Properties (in C#)/My Project (in Visual Basic): Opens the property pages, for users to
apply Web.config settings to the Library

Properties (in Visual Basic): Opens Assemblyinfo.vb. This page provides Information
about the assembly and build of the Library

References (in C#): Gives a list of Gizmox and System references used within the
library

UserControl1: Opens a blank Usercontrol Form. This Form looks the same as the
Application Form, with a grey canvas. The Toolbox also opens at this point. From here,
programmers may create new UserControls to be stored within the particular Library.

Un-integrated Projects
An Un-integrated Project is one that was not created in VWG but references Gizmox
Assemblies, or a Project created in a version of VWG without integrations. When an Un-
integrated Project is opened in VWG, a warning message appears, advising that VWG
must be enabled to use the Designer in the Un-integrated Project. By doing this, VWG
integrations are enabled for the Project.

Project Integration Steps:

1. In Solution explorer, right-click on the Project, and select Enable Web GUI.
2. A textbox appears. Click on the reload button.
The Project is now integrated.

Properties Pages

The Properties Pages allow users to set the Web.config settings required for a particular
Project. The Tab relevant for creating VWG Applications is the General Tab. It is advised
that the Tab is set prior to beginning work on a new VWG Application Project, after the
Project has been opened. All settings in the Properties Pages may also be set through
coding in the Web.config files.

In this section:

 Open the Properties Pages

 Private Version
 Inline Windows status
 Accessibility Mode
 Client-side Events
 Device Integration Settings
 Advanced General Settings

Open the Properties Pages

In order to open the Properties Pages, to set Web.config settings for a VWG Application
Project

1. Open the Solution Explorer

2. Click Properties (C#)/My Project (VB)
The Tabs are presented in the left hand column of the Properties Pages

The user may also define the settings in each Tab manually, using the Web.config file,
which is located in the Solution Explorer.

Below, each option presented on the General Tab is listed and explained:

General

Keep Interval between each keep-connected call

Connected
Interval

Keep Limits the amount of keep connected calls allowed

Connected before timing out occurs
Limitation

Private Version In order to enforce updating of files and resources,

this option adds the Private Version Key to the
Caching Key, providing a mechanism to invalidate
both Client and Server caching

Authentication
 Logon Form Indicates which Form is the log-on Form of the
Application, from all Forms that inherit ILogonForm

Mode Select either None or Main to define if the Log-on

Form is the main Form of the Application

Administration

Application Displays, and allows for changing of, the name of the
Name current Application.

Logon Control Configure how Logon is administered

Logon User User Name for Administrator of Application

Name

Logon Password for Administrator of Application

Password

Settings

Force Page By selecting this function, VWG provides a specific

Instance instance in the query argument of the page

Inline Windows This function is selected by default. When using non-

Internet Explorer browsers, the default should be
kept, but when using Internet Explorer, switch the
default off. If Inline Windows is selected for Internet
Explorer, these will be used for Internet Explorer
browsers also. See explanation of Inline Windows
below.

Preserve Focus This assures that if the user clicks on a non-focused

Element element, they are taken to the last focused element
by default.

Use Flash For Selects Flash for uploading. Switch off for
Uploading Applications using Safari browser (Apple Technology)
(DHTML)

Stop Code Enables Code Modality. Assures all Dialog Boxes are
Execution On modal and that any code following these boxes waits
Modal Dialog for the dialog to return before executing. Switching
on this mode also makes sure that code will be
parsed on build.
  Use On Thread By default, the code in your project is updated and
Action compiled to achieve modality. Enabling this option
uses helper threads instead to achieve modality - the
thread releases when the dialog box is closed and the
rest of your code continues to run. Using this option
slightly decreases performance of your application (a
new thread is created for each session using this
mechanism) but leaves your original code intact.
Accessibility Enables AccessibleName and AccessibleDescription
Mode properties for Controls. For more Information on this
mode, see Accessibility Mode explanation link below

Full Screen Each page of the Application is viewed on the device

in Full Screen mode. Advisable for mobile devices.

Enable Security User Permissions can be applied per Form (requires

per Form VWG Business Server edition)

Enable By selecting this option, VWG adds an attribute to the

automation ids Dynamic ID of each Control, keeping the ID constant

Verify Browser Browser support is checked before loading Application

Support

Client Actions Actions that could previously only run on the Server
can now be set to run on the Client

Client Event Online Client-side events are only processed or

Availability Mode executed when online

OfflineMode When Server is disconnected, users can

continue working on the Application.

When the Server is connected, prevents

or delays certain events being sent to
Server once they are fired. Selection
assures Client-side events are only
processed when offline. For more
information see Offline Mode.

Always This is the default. If two events are

assigned to a Control, one for offline
mode and one for online mode, both will
occur, with the offline one occurring
first, as Information does not need to be
sent back to the Server for this to
happen.
 Force Content Sends all necessary Information to the Client to work
Availability On in offline mode, whether the current state of the
Client Application is online or offline. All XML is sent, but
only images that are required for the current state
are sent.

Developer
Switches

Disable Prevents caching of files from occurring.

Caching

Disable Obscuring is enabled by default. Select to Disable

Obscuring Obscuring of CSS and Javascript

Enable Key For advanced users- select this to enable key

Shortcuts shortcuts for Applications (e.g. using ALT and/or Ctrl
keys)

Show VWG For very advanced users- when selected, provides

Client Information about traffic between Client and Server
Debugger

Design Time

Apply Selected Themes can be applied at design-time and will

Theme in display almost exactly as in run-time, except for
Design Time CSS3 images and properties.

Device Provides Device integration provides an API that allows

Integration additional Phonegap mobile devices to integrate with VWG.
Button options for These include Accelerometer, Camera, audio, image
device and video Capture, Compass, Connection Info,
integration Contacts creation and search, Device Info, Device
Events, File Management, Geolocation, Globalization,
Media Files record and play back, Notification, and
local and Web SQL Storage. Only Accelerometer,
Compass and Geolocation settings can be defined in
the Device Integration Settings window.

Advanced … Provides Click here for an explanation of the Advanced General

Button additional Settings window.
Advanced
settings

Private Version

VWG uses the Private Version number for various dynamic and caching data. The Private
Version is a version number and many caching issues can be solved by increasing it. It is
irrelevant which number is used, as long as it is only used once. Best practice dictates
increasing the Private Version number by one, each time it is changed. As part of the
upgrading process of installing a new or different version of VWG, the Private Version
 number should be changed (increased). Some advantages of increasing the Private
Version number include elimination of the relevance of previous Client cache, previous
Server cached DLLs, all cached static resources on the virtual directory, and saved
dynamic resources on the virtual directory, which otherwise can only be removed by
closing the Server and deleting manually.

Inline Windows status

VWG has two different ways of running windows:

 Inline Windows: Non-Internet Explorer browsers draw dialogs as floating div elements in
the browser’s Client area.
 Non-Inline Windows: In Internet Explorer, dialogs are separate windows.

Accessibility Mode

Accessibility Mode is explained in the table above. A variety of events are added to the
code at build time by selecting Accessibility Mode and these are presented below.

The following Events are added to the code at build time if not already present:

 onMouseOver - an onFocus event is added that triggers onMouseOver

 onMouseEnter - an onFocus event is added that triggers onMouseEnter
 onMouseOut - an onBlur event (onFocusOut in IE) is added that triggers onMouseOut
 onMouseLeave - an onBlur event (onFocusOut in IE) is added that triggers onMouseLeave
 onMouseDown - an onKeyDown event is added that triggers onMouseDown
 onMouseUp - an onKeyUp event is added that triggers onMouseUp

The following Controls have the AccessibleName Property Label added as a hidden label
which appears after the Control name in the generated HTML, and can be read by
Accessibility Programs

 ComboBox
 DateTimePicker
 TextBox and all controls inherited from TextBox, e.g. MaskedTextBox, WatermarkTextBox
 UpDown
 SearchTextBox
 PropertyGrid
 Paging

Client-side Events

Generally, all VWG processes are run on the Server. VWG is a Zero Footprint Application,
which means there is no Client-side installation or downloads. The Server tracks the
state of every Control in the Application, while the Client renders the Application
accordingly. Communication between Client and Server occur in the following way:

1. The Client sends a Postback to the Server regarding a Control status change
2. The Server processes all Information regarding this change
3. The Server sends back a response to the Client as to which aspects require re-rendering
due to the status change

The Client code therefore has no control over the Server behavior. This simplifies
running Server-side script when Client-side actions are performed, but it may also cause
less than high quality performance, especially if there are many Postbacks being sent
from Client to Server. Users of dial-up internet connections may be affected by this even
more so. It also means that if internet connection is lost or slowed down, the Application
cannot run.

Using Client Events, actions can be performed either from the Server or Client, solely on
the Client-side. There are no, or delayed, Postbacks to the Server when using Client
Events. The Client API gives access to Javascript functions which interact with VWG
Controls. Functionality is pushed onto the Client by downloading the scripts created and
executing them onto the Client. This provides opportunity for more efficient Applications.

Most Server-side events have parallel Client-side Events, but not all Events can be
located only on the Client.

It is recommended that a minimal amount of functionality is pushed onto the Client.

Although Client-side functionality improves the efficiency of the Application, the less
Information stored on the Client, the more secure the Application remains.

For more information on see ClientAPI.

Device Integration Settings

Accelerometer Frequency The Accelerometer is a motion detection device. It
(ms) can sense changes in movement along x, y and z
axes. The Frequency is measured in milliseconds
(ms) and refers to how often to retrieve the
acceleration.

Compass Frequency The Compass frequency will detect the point at

(ms) which the Compass realigns as the device turns. It
is also measured in milliseconds. The compass is
retrieved as often as defined by the frequency
setting.

Geolocation –identifies Timeout How long it is permitted to take for a timeout

the ‘real world’ location (ms) message to appear if the location is not found
of the device in a (millisecond measurements). This is set by default
meaningful way (eg to infinity
street name)
Maximum How ‘old’ the geolocation Information that is sent
Age (ms) back to the device is permitted to be, in
milliseconds.

Enable High Accuracy Checking Enable High Accuracy requires the Server
(Default:false) to send back a High Accuracy location to the
device. This is unchecked by default, in order to
allow for locations to be sent back to the device
more quickly, if less accurately. By default,
network-based methods are used for this. High
Accuracy invokes the use of satellite positioning
and other more accurate methods.

Advanced General Settings

The General settings are sufficient for the majority of VWG users. The Advanced General
settings are only advantageous to a small group of advanced VWG users.
General

ASP Compatible
Mode

GZip Compression Checked as default. When checked, all responses

from the Server are compressed using GZip.
Similar strings within a text file are identified and
temporarily replaced to make the overall file
smaller.

Show Client Errors Unchecked by default, so that Client browser

errors are hidden. Check to show the Client
browser errors.

Animation Enabled Checked by default. Animations are shown on a

select group of Controls, mostly when performing
drop downs. This causes the drop down to occur
slightly more slowly because of the animation
involved.
WinForms Check items as needed in relation to look and feel
Compatible
Mode

Tracing

Tracing Switch Select options from the drop down box. Allows
user to monitor an Application using a debug
message viewer or output window in debug time.
Remember to DISABLE in deployment.

Session Tracing:

Trace Registration
and Unregistration

Trace Registration
Count on the end of
request

Tracing Threshold Performance tracing is limited to threshold

Url

Force Domain Specify a domain in order to make the base URL

of each rendered html page

Force Port The port specified value will be used for the base
URL of each rendered html page

Force Virtual
Directory

Force HTTPS

Standard (DHTML) This is checked by default.

Extension Defines Application extension. Default is .wgx

Reference Assemblies

Various Gizmox and other Assemblies can be referenced to the Project and used
throughout. There are certain assemblies which are required in order to create a VWG
Application Project, whilst others are optional depending on the needs of the
programmer. References to these required assemblies must be added, and so it is a
good idea to do this before starting work on the Project.

Adding a reference is a simple process, as explained below.

 Required References
There is a differentiation between ‘with sources’ assemblies and ‘without sources’
assemblies. With Source Assemblies means that when the Assembly is installed, it is
done with sources and works either with the source code in that installation or VWG SVN
source code. Without Source Assemblies work within the standard VWG Framework
without access to the source code.

Develop a VWG Project

With  Gizmox.WebGUI.Common.Design
Sources Gizmox.WebGUI.Forms.Design

Without Gizmox.WebGUI.Client
Sources Gizmox.WebGUI.Common
 Gizmox.WebGUI.Forms
 Gizmox.WebGUI.Server
 Gizmox.WebGUI.Forms.Themes

Use new Controls and  Gizmox.WebGUI.Forms.Professional

Functionalities  Gizmox.WebGUI.Forms.Office
 Gizmox.WebGUI.Forms.Converters (for the
RichTextBox only)
 Gizmox.WebGUI.Forms.Extended

Work with New Features With  Gizmox.WebGUI.Forms.Professional.Design

and Functionalities Sources Gizmox.WebGUI.Forms.Office.Design
in Designer when using
‘with sources’ installation

Design-time assemblies are already in the Global Assembly Cache (GAC) and do not
need to be referenced manually.

Add a Reference
As mentioned above, non-essential references may also be added to a VWG Project. To
do this, follow the procedure below:

1. On Solution Explorer, right click References-> Add Reference. The Add Reference Dialog
Box appears.
2. Add references to the assemblies from the .NET or Browse tabs and click OK
3. Confirm Copy Local property of ALL Gizmox Assemblies is set to True

Forms in the Application

The Design Form is the canvas on which to place Controls, while the Code Form provides
programmers with a space to view and write the code-behind.

Add a Form
On opening a VWG Application Project, one Form is present within the Solution Explorer.
Of course, the majority of Applications require more than one Form.
 In order to add a Form to a Project

1. Open Solution Explorer

2. Right-click the Project
3. Select Add -> Form
4. The Add new item screen appears, with Visual WebGui Form highlighted in the central
column
5. Name the Form if needed, or use the default name (e.g. Form2.cs or Form2.vb)
6. Click Add
7. The new Form appears in the Solution Explorer and can now be worked with
Designate a Start Form
A running Application cannot be opened without a Form which is defined as the Start
Form, or entry page to that Application.

A programmer may choose to designate many Forms as the Start Form, and these will
all continue to be Start Forms unless they are removed. The most recently selected Start
Form will be the one which appears when the Application is open in the IDE.

To select a Start Form:

1. In Solution Explorer, right click on the Form to be designated.

2. Click Set As Start Form
Once a Start Form has been defined, it is registered in the Property Pages Web Tab,
Start Action Section, SpecificPage Box. This setting is only used by the IDE, when
running the Application within Visual Studio Web.config Applications Section. This setting
is used by the Web Server as well as within Visual Studio.

Route Different Forms to Different Browsers

Desktop and mobile devices are different in many ways. Due to these differences, when
an Application is created for both desktop and mobile devices, it may be worthwhile
creating different Forms for the different devices.

Using the IForm Factory Interface, different Forms or User Controls can be routed to
different devices, browsers or users. In order to use IForm Factory for routing, a class
that implements it must be created and it must be added to the CreateForm method.
Each time a new context is created and a new MainForm is needed, the CreateForm is
called from the Context class.

Instead of registering a Start Form in the web.config files, as in standard routing, when
using IFormFactory Interface, the Form references are replaced with a reference to
IFormFactory. As such, the IFormFactory can control and designate Start Forms
particular to each device.

To use the IFormFactory Interface:

1. Create Forms/Controls for each browser, device or user.

2. Create a new class to implement IFormFactory Interface.
3. Add the CreateForm method to the new class.
4. Set browser/device types.
5. Set Target- Form or User Control. If User Control, create a host Form for it.
6. On the web.config file, in the Applications section, replace the existing Forms reference
with IFormFactory reference.

Item Templates
 There are two types of Item Templates included in VWG. The first are Controls. As with
Visual Studio, Controls are visual ‘items’ that can be moved onto the Form and then
modified in various ways using the properties window of that particular Control. Each
time a Control is added to the Form, the code for the Control is added automatically to
the Code Form. When VWG is installed, a new set of Controls appears in the Visual
Studio Toolbox, under the name Visual WebGUI controls.

Controls
Add Controls to a Form
The Toolbox is the container for all the common Controls used within Visual Studio.

In order to add a Control from the Toolbox to the current Form

1. Click and drag the Control to be added onto the Form

2. Drop the Control in the correct position on the Form
Define Control Properties
Once a control has been added to the Form, its properties can be defined, text added,
colors changed and so on. In order to do this, open the Properties Window, located
under the Solution Explorer. From there, properties Information is added and changed
through clicking on the relevant properties, or entering text.

Register New Controls

The majority of VWG Controls do not require registration before use. There are some
though, that must be registered in order to operate at runtime. Registering all Controls
with the same namespace at the same time is more efficient than registering individual
Controls, but may influence the Application performance, as everything registered is
downloaded onto the Client.

Controls and Namespaces can be registered in the Properties Pages, on the Registration
Tab:

1. In the Controls Section, click Add.

2. The Choose Controls Dialog Box appears.
 To register a Control:
1. Click the Controls Tab
2. Check the Control requiring registration
 To register a Namespace:
1. Click the Namespace Tab
2. Check the Namespace requiring registration
Registration is now complete and the names of the Registered Controls appear in the
Registration Tab under Controls.

Controls and Namespaces can also be registered in the Web.config file, in the Controls
Section.

Example of registration of a Namespace:

<ControlType="Gizmox.WebGUI.Forms.*,
Gizmox.WebGUI.Forms.Professional,Version=4.0.5701.0,Culture=neutral,
PublicKeyToken=6b5c571512bede7c" />

 The namespace with an asterisk (meaning, every control that is included in the
namespace): Gizmox.WebGUI.Forms.*
 The assembly name: Gizmox.WebGUI.Forms.Professional
 The version number of the VWG assembly: Version=4.0.5701.0
Note: The versions of the available VWG assemblies are as follows:
  MS .NET4.0 (Visual Studio 2010) – Version=4.0.5701.0
 MS .NET3.5 (Visual Studio 2008) – Version=3.0.5701.0
 MS .NET2.0 (Visual Studio 2005) – Version=2.0.5701.0
 The culture of the assembly in RFC-1766 Format, or "neutral" for language-
independent assemblies: Culture=neutral
 String value of public key token in hexadecimal Format:
PublicKeyToken=d50c2c7452ba77d

Example of registration of a Control:

<ControlType="Gizmox.WebGUI.Forms.ExpandableGroupBox,
Gizmox.WebGUI.Forms.Professional, Version=4.0.5701.0, Culture=neutral,
PublicKeyToken=6b5c571512bede7c" />

 The name of the control along with the namespace that contains it (full qualified
name): Gizmox.WebGUI.Forms.ExpandableGroupBox
 The assembly name: Gizmox.WebGUI.Forms.Professional
 The version number of the VWG assembly: Version=4.0.5701.0
Note: The versions of the available VWG assemblies are as follows:
 MS .NET4.0 (Visual Studio 2010) – Version=4.0.5701.0
 MS .NET3.5 (Visual Studio 2008) – Version=3.0.5701.0
 MS .NET2.0 (Visual Studio 2005) – Version=2.0.5701.0
 The culture of the assembly in RFC-1766 Format, or "neutral" for language-
independent assemblies: Culture=neutral
 String value of public key token in hexadecimal Format:
PublicKeyToken=d50c2c7452ba77d
Add Visual Effects to a Control
Visual Effects can be added to a Control through the following steps

1. Drag and drop the Control onto the Form

2. Open the Properties Window and scroll down to Visual Effects
3. Click on the ellipsis. The Visual Effect Collection Editor appears
4. Click Add and select a Visual Effect.
5. Modify the properties of the Visual Effect as desired. More than one Visual Effect can be
added and modified. Each one appears in the list on the left hand side of the editor as it
is added.
6. Once all Visual Effects have been added, click OK
The Visual Effects appear in all instances when the control is selected when the
Application is running.

Add New Controls to the Toolbox Manually

In general, once the required assemblies for the Project have been referenced, the
Controls included in them appear in the Toolbox. If this does not happen, add them
manually. For Information on how to reference assemblies, see Add a Reference.

1. On the Toolbox, click All VisualWebGui ->Choose Items. The Choose Toolbox Items
Dialog Box appears. To locate Control name, type into Filter box
2. On the .NET Frameworks Tab, check all Controls to be added and click OK

If Controls appear more than once in the Toolbox:

1. Right click the Toolbox and select Reset Toolbox

2. Close and reopen the Form

If the new Controls do not appear in the Toolbox:

1. Remove and then re-add references to Gizmox Assemblies needed
2. Build the Project
3. Close and reopen Visual Studio
4. Re-add the Controls to the Toolbox
Change the appearance of two specific Controls
At times, for the sake of both aesthetics and workability of an Application, it may be
desirable to change the appearance of a Control. Currently, the appearance of two
Controls can be modified, the Checkbox and the TabControl. The Checkbox appearance
can be changed to Button or Switch. The TabControl appearance can be altered to be
Buttons, FlatButtons, Workspace, Logical, Navigation or Spread.

Change the Appearance of the Checkbox to Button:

1. Drag and Drop the Control onto the Form

2. Open the Properties window of the Control
3. Select Appearance and highlight the Button from the Drop Down box

Change the Appearance of the Checkbox to Switch:

1. Drag and Drop the Control onto the Form

2. Open the Properties window of the Control
3. Select Appearance and highlight Switch from the Drop Down box
4. On the Autosize property, select False
5. On the Size property, enter 94, 26

Change the Appearance of the TabControl to Buttons, FlatButtons, Workspace, Logical,

Navigation or Spread:

1. Drag and Drop the Control onto the Form

2. Open the Properties window of the Control
3. Select Appearance and highlight the desired appearance from the Drop Down box
Use Mobile Device Specific Events
Mobile devices contain two elements that are unique to their use. Mobile devices
generally contain an option for the user to swipe the screen in order to cause a situation
to occur. Additionally, due to their size and mobility, mobile devices can be reoriented to
suit the comfort or needs of the user.

In response to these capabilities, two Mobile Device Specific Events are available in the
Events section of the Properties window, to streamline design of Applications for mobile
devices.

Swipe event

This event provides end users the ability to swipe their finger across the screen to
perform a command.

The swipe event can be accessed in the same way as other events. Make sure to click on
the designated Control. Open the properties window, click on the event icon at the top of
the window and double click on Swipe. The code Form appears with the required
commands.

OrientationChanged event

This event causes the screen to reorient when the mobile device is turned horizontally or
vertically. To include this event, click on the Form, then open the properties window,
click on the event icon at the top of the window and click on OrientationChanged. The
code for this event will appear in a code Form on the screen.
 Custom Control
A Custom Control is a whole new Control which can be created in the instance that no
standard Controls provide the specific functionality needed. Custom Controls can be
wholly new controls designed in the Control Class, or modified from existing Controls.

Create a new Custom Control

1. In the Solution Explorer, right click on the Project

2. Add->New Item
3. The Add New Item Dialog Box opens
4. In the center pane, select Visual WebGUI Custom Control
5. Name the Control or keep the default name
6. Click Add
The Custom Control Code Form appears, and is added to the list in the Solution Explorer
as CustomControl1.vb or .cs, CustomControl1.bmp and CustomControl1skin.vb or .cs. Of
course if the Custom Control has been renamed, this name appears in place of
CustomControl1.

The Custom Control Function

The .vb or .cs Form is the code Form for the Custom Control. The .bmp provides users
with a space to design the look of the Control using a variety of tools from an added
ribbon bar above the Form. The Design Form CustomControl1skin provides programmers
with the ability to modify existing Controls into Custom Controls.

User Control
The User Control is a composite control, providing a container in which to place other
Controls.

Open a new User Control:

1. In the Solution Explorer, right click on the Project

2. Add->New Item
3. The Add New Item Dialog Box opens
4. In the center pane, select Visual WebGUI User Control
5. Name the Control or keep the default name
6. Click Add
A Form, UserControl1.vb [Design] or UserControl1.cs [Design] appears. Of course if the
User Control has been renamed it will appear as such. The User Control is now also listed
in the Solution Explorer. Double clicking on the Design Form will open the Code Form for
the User Control.

Create a User Control:

1. Drag and drop controls onto the Form to create the User Control.
2. Save
3. Build
4. Open a Form and the Toolbox. The new User Control appears in the Toolbox.
Skinable Controls
A Skinable Control maintains the functionality of the original control, whilst changing
how the Control looks. Its functionality is inherited from a standard Control. This Control
is then usable across Applications.

Open a new Skinable Control

1. In the Solution Explorer, right click on the Project

2. Add->New Item
3. The Add New Item Dialog Box opens
 4. In the Installed Templates List on the left hand pane, select Skinable Controls under
Visual WebGUI
5. A range of Skinable Controls appears in the center pane. Select the one required
6. Rename if desired, or keep the default name.
7. Click Add
A new Form opens with the name ‘My______1.vb’ or ‘My_______1.cs’ or a renamed
vb/cs Form appears, with a message across the Form regarding use of either the Toolbox
or Code View to create the Skinable Control. This Form can be found listed in the
Solution Explorer, along with ‘My_____skin.vb’, ‘My_______skin.cs’ or
‘________skin.vb’ or ‘.cs’ depending on whether the Skinable Control has been
renamed.

If using the Toolbox, only certain Controls are available, depending on which Skinable
Control has been selected.

Save the Skinable Control for use across Projects.

StackPanel Control
The StackPanel Control stacks the Controls within it either horizontally or vertically
depending on orientation, to create a particular layout. It is not necessary to provide the
exact position of each Control in the StackPanel Control, as they are positioned relative
to the Control before it. Currently, the Controls available for use with the StackPanel
Control are:

 ExpandableGroupBox
 FlowLayoutPanel
 Label
 LinkLabel
 ListView
 PictureBox
 TreeView
 StackPanel

Add a StackPanel Control:

1. Add the StackPanel Control to the Form from the Toolbox

2. Drag and Drop the Controls required in the StackPanel Control onto it
3. The Controls are automatically organized one after the other
4. Set the content and properties of each selected Control
5. Set the orientation of the StackPanel Control
 On the Properties Window of the StackPanel Control, set the Orientation to either
Horizontal or Vertical
 To add a scroll to the StackPanel, set the Autoscroll property to True
The StackPanel appears when the Application is started.

Themes

All aspects of an Application, including Controls and Skins, may be modified in order to
create a unique theme. The current default theme in Visual WebGUI is the ‘Live Office
Theme’.

Open a New Theme in Design Time

1. In the Solution Explorer, right click on the Project.
2. Add -> New Item.
3. The Add New Item Dialog Box opens.
4. In the center pane, select Visual WebGUI Theme.
5. Name the Theme or keep the default name.
6. Click Add. A Code Form with the name of the Theme appears on the screen, as well as
the new Theme being listed in the Solution Explorer.
7. Build the Project.

Once added, the Theme needs to be registered, in order to be applied at run-time.

Register the new theme:

1. Right click on the Project in Solution Explorer.

2. In C#, select Properties. In Visual Basic, select My Project.
3. The Properties pages open.
4. Click on the Registration Tab.
5. Click on the Themes Tab.
6. Click Add.
7. The Choose Themes Dialog Box opens.
8. Scroll down and select the new Theme name.
9. Click OK.
10. The new theme appears on the list in the Themes Tab.
11. Check the box next to the Theme name in order to make it the default theme for the
current Project.
Customize Built-in Images using the Theme Designer
1. Open the Theme Designer by opening the Solution explorer and right click the Theme
2. Select View Designer
3. The Theme Designer appears
The page is divided into two panes. The left hand pane is titled Skins. A tree, beginning
with the Theme class is shown. All VWG Controls are contained here. Each Control can
be customized according to requirements.

The right hand pane is titled Resources. Once a Control is selected from the left hand
pane, all images associated with it appear on the Resources pane. Each one of these is
marked with an arrow, indicating that the image belongs to a parent theme, and is
therefore a referenced resource.

Incorporate an Existing Resource for the Theme

1. Click Add Resource on the tool bar on the Resources pane.
2. Select Add Existing File.
3. Select the required file and click Open.
4. The file will be added to the Resources pane.
Create a New Resource for the Theme
1. Click on the Control on the left hand Skins pane.
2. Click Add Resource on the Tool Bar on the Resources pane.
3. Select Add New…
4. The possible Controls for which a new resource can be designed appear in the Resources
pane. Depending on the Control Class, sometimes many options will appear, while with
others, there will be no or only a few options.
5. Click on the item required for creating a new Resource
6. The Image Editor appears
7. Design and save the Resource
The image appears in the Resources pane

Edit a Resource
The image must be disconnected from its Parent Control and become a Local Resource
1. Right click on the required Resource in the Resources pane.
2. Click override. The arrow in the left hand corner of the image disappears, confirming
that the Resource has been disconnected.
3. The Image Editor appears.
4. Edit and save the image.
The image appears in the Resources pane.

The edited image now appears in place of the default image when using the Control in
the Application.

To delete the edited image and restore the default image, right click the image and
select Delete.

Add Visual Effects Using the Theme Designer

1. With the Theme Designer open, select the required Control from the Skins pane
2. Open the Properties Window on the right hand side of the screen
3. Browse the Visual Effects
4. The Visual Effect Collection Editor appears
5. Click Add and select a Visual Effect.
6. Modify the properties of the Visual Effect as desired. More than one Visual Effect can be
added and modified. Each one appears in the list on the left hand side of the Editor as it
is added.
7. Once all Visual Effects have been added, click OK
The Visual Effects appear in all instances when the Control is selected when the
Application is running.

Specific Information regarding Visual Effects

Setting particular Visual Effects properties

Border Image
The Border Image effect can be used in place of a normal border around the Control.
More Information regarding the Border Image effect can be found at
http//www.w3.org/TR/css3-background/#border-images. The Border Image effect is
supported by Firefox, Chrome and Safari.

Border Image Properties:

BorderOffsets The offset values of the edges of the image can be modified. The corners
of the image remain the same.

The bottom, left, right and top of the image may be offset.

The best looking and least distorted border image requires the BorderSize
and BorderOffset widths being set to the same value.
BorderRepeat Specifies scaling and tiling of images in the center and on the sides of
the border image

HorizontalRepeat specifies the right and left side values

VerticalRepeat specifies the top and bottom values

Possible Values for HorizontalRepeat and VerticalRepeat

Stretch- the image is stretched to fit the area

Repeat-the image is tiled to fit the area

Round-the image is tiled to fit the area and scaled down if it does not fit.
The image is never cropped but may lose its aspect ratio

BorderSize Specifies the width of the border around the border image. The values of
the BorderSize can be set from all four directions, left, right, top and
bottom

Border Radius
The Border Radius effect enables the adding of rounded edges to Controls, without using
corner images. More Information on the Border Radius effect can be found at
http//www.w3.org/TR/css3-background/#corners. The Border Radius effect is supported
in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

Border Radius Properties:

The radii of the rounded corners of the Border Radius are defined by the length values.
The value unit is pixels.

BorderRadiusAll Defines the same length value for all four corners of the
border

BorderRadiusBottomLeft Defines the length value of each corner individually

BorderRadiusBottomRight

BorderRadiusTopLeft

BorderRadiusTopRight

Box Shadow
The Box-Shadow effect is used to add a drop-shadow to a box. More Information on the
Box-Shadow effect can be found at http//www.w3.org/TR/css3-background/#the-box-
shadow. This effect is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

Box Shadow Properties:

BlurDistance The shadow’s size and how blurred it is depends on the value of the
BlurDistance radius. If the blur value is 0, the shadow’s edge is sharp.
The larger the value the more blurred the shadow. Negative values are
not permitted.

Horizontal This is the length of the horizontal offset of the shadow. To draw the
Shadow shadow on the left side of the box, select a negative value; to draw it
on the right side of the box, select a positive value.
Vertical Shadow This is the length of the vertical offset of the shadow. For the offset to
be down, select a positive value; for it to be up, select a negative
value.

Inset When the Inset property is set to True, the shadow appears inside the
box. There is no drop shadow in this case.

ShadowColor Select the color of the shadow

SpreadDistance Positive values make the shadow shape expand in all directions
according to the specific SpreadDistance radius. A negative value
causes the constriction of the shadow shape in all directions according
to the specified radius.

The Box-Shadow can be set in the code-behind as follows:

BoxShadowVisualEffect(<HorizontalShadow>, <VerticalShadow>, <BlurDistance>,
<SpreadDistance>, <ShadowColor>, <Inset>)

C#
this.pictureBox1.VisualEffect
= new Gizmox.WebGUI.Forms.VisualEffects.BoxShadowVisualEffect(10, 30, 1, 20,
System.Drawing.Color.DarkGray, false);

VB.NET
Me.PictureBox2.VisualEffect
= New Gizmox.WebGUI.Forms.VisualEffects.BoxShadowVisualEffect(10, 30, 1, 20,
System.Drawing.Color.DarkGray, false)

Gradient Background
The Gradient Background effect is used to create shading in background images. This
shading can fade from one color to another smoothly. For more Information on the
Gradient Background, go to http//dev.w3.org/csswg/css3-images/#gradients. The
Gradient Background is supported in Safari 4+, Chrome 1+, Firefox 3.6+, and Opera
11.10. Please note that it is not supported in Internet Explorer.

Gradient Background Properties:

GradientStops Sets the color of the gradient, as well as giving the option of creating a
stop position. Without a stop position, the colors of the gradient
transition evenly into one another. The stop position defines where one
color stops and the next begins, so that the gradient fades into the stop
color first, and the stop color fades into the end color.
GradientType Linear Gradient A gradient line, providing a smooth fade from one color
to the next in a specific direction.

Gradient Defines the angle, in degrees, for the direction of the

angle gradient 0=left; 180=right; 270=top; 90=bottom

Or

ToPositionHorizontal Specifies the non-angular horizontal direction of

the gradient

ToPositionVertical Specifies the non-angular vertical direction of the

gradient

Radial Gradient This gradient moves outwards from a start point, at 360
degrees.

RadialExtentKeyword Closest Corner The shape of the gradient

exactly meets the closest corner of the box
from its center

Closest Side For circles, the shape of the

gradient exactly meets the side of the box
closest to its center. For Ellipses, the
shape of the gradient meets both the
vertical and horizontal sides closest to its
center.

Farthest Corner The gradient shape exactly

meets the farthest corner of the box from
its center

Farthest Side For circles, the shape of the

gradient meets the side of the box furthest
from its center exactly. For ellipses, the
shape of the gradient meets both the
vertical and horizontal sides furthest from
its center.

RadialHorizontalLocation Defines the center in horizontal relation to

the control

RadialVerticalLocation Defines the center in vertical relation to

the control

RadialPositionHorizontalUnits Select preferred unit of measurement

RadialPositionVertical Select preferred unit of measurement

Units

RadialShape Select circle or ellipse

RepeatingLinearGradient Repeats the StopPosition values of the colors

and repeats them as far as possible. The stopPosition must be set for this
type to be activated. The properties of this gradient are the same as
those of the LinearGradient.
 RepeatingRadialGradient Repeats the RadialGradient pattern as far as
possible. The properties of this gradient are the same as those of the
RadialGradient.

Text-Shadow
The Text-Shadow effect adds a shadow behind each letter of a text. For more
Information on the Text-Shadow effect, go to http//www.w3.org/TR/2012/WD-css-text-
decor-3-20121113#text-shadow-property. This effect is supported in all major browsers
except for Internet Explorer.

Text-Shadow Properties:

The Text-Shadow Properties are identical to the Box-Shadow Properties.

The code-behind for the Text-Shadow effect is:

TextShadowVisualEffect(<HorizontalShadow>, <VerticalShadow>, <BlurDistance>,
<ShadowColor>)

C#
this.label1.VisualEffect
= new Gizmox.WebGUI.Forms.VisualEffects.TextShadowVisualEffect(10, -10, 1,
System.Drawing.Color.YellowGreen);

VB.NET
Me.Label1.VisualEffect
= New Gizmox.WebGUI.Forms.VisualEffects.TextShadowVisualEffect(10, -10, 1,
System.Drawing.Color.YellowGreen)

Transform
This Effect rotates, translates, skews and/or scales a Control. More Information about
the transform effect can be found at http//www.w3.org/TR/css3-transForms/. Transform
is supported in IE 9, Safari 3.2+, Chrome 4+, Firefox 3.5+, and Opera 3.2+.

Transform Properties:

Rotate Rotates the Control

RotationDegrees rotate the Control clockwise using positive number values;

rotate the Control anti-clockwise using negative number values.

Matrix Applies all the 2D properties available to the Control. Six values (A-F) can be
modified in order to rotate, translate, scale and skew the control. See
http//www.w3.org/TR/SVG/coords.html#TransFormMatrixDefined for more
Information.

Translate Moves the Control from one location to a new one. In run-time, the control
will appear in the new location.

The final location is relative to the original location.

Scale Makes the size of the Control either larger or smaller

Scale Values The size of the Control is determined by these values. Fractions
may be used for values

All increase/decrease size of x and y by the same value

X Value for the width (x-axis)

YValue for the height (y-axis)

Skew Distorts the Control and angles it. Units are in degrees and negative angles
may be selected.

Skew X value for the width (x-axis)

Skew Y value for the height (y-axis)

Translate and Transition (shows as TranslateVisualEffect in Properties)

This Effect animates the movement of a Control from one location to another. To find
more Information about this Effect, go to http//www.w3.org/TR/css3-transitions/.
Translate and Transition is supported in Safari 5.1+, Chrome 19+, Firefox 12+, and
Opera 12+, but not in Internet Explorer.

Translate and Transition Properties:

Basic TransitionDelay Using seconds as units, defines when the transition is to

Behavior start

TransitionDuration Using seconds as units, defines the length of the

transition

TransitionTimingFunction Describes the calculation of how the speed of the

transition occurs. The following values are available

Ease Slow start, then fast, then ends slowly

Linear Same speed from start to end

EaseIn Transition with a slow start

EaseOut Transition with a slow end

EaseInOut Transition with a slow start and end

CubicBezier Defines the cubic-bezier curve

Transform
Data
Before Translate Location of Control before moving

DepthLength 3D Z-axis depth value

HorizontalLength X-axis value

VerticalLength Y-axis value

DepthLengthUnits Pixel, em, Point

HorizontalLengthUnits/VerticalLengthUnits - Pixel, em, Point, Percent

After Translate Location of Control after moving. Values may be set at

negative, moving the Control left and up respectively

DepthLength 3D Z-axis depth value

HorizontalLength X-axis value

VerticalLength Y-axis value

DepthLengthUnits Pixel, em, Point

HorizontalLengthUnits/VerticalLengthUnits Pixel, em, Point, Percent

Add Additional Visual Effects through Code

Further to using built-in Visual Effects, code can be used to add other CSS3 Visual
Effects. Both static and animated Visual Effects may be added. After being added in
code, the new Visual Effect appears in the VisualEffect Collection Editor.

Following is a sample of the code for creating a static visual effect:

// Creating a new class for the new visual effect.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

// Adding the following Using declarations.

using Gizmox.WebGUI.Forms.VisualEffects;

using Gizmox.WebGUI.Common.Interfaces;

namespace VisualEffects_Sample

// Defining inheritance for the new class from VisualEffect.

public class FilterVisualEffect VisualEffect

// Defining class members.

private int mintSepia;

private int mintSaturate;

// Defining an empty default constructor – required for Designer purposes.

public FilterVisualEffect()

// Default values in percentage units.

mintSaturate = 100;

// Default values in percentage units.

mintSepia = 0;

// Defining a constructor for the class members that serve as the visual effect properties
- // Sepia and Saturate.

public FilterVisualEffect(int intSepia, int intSaturate)

this.mintSepia = intSepia;

this.mintSaturate = intSaturate;

// Defining properties for the Visual Effects Editor.

public int Sepia

get { returnthis.mintSepia; }

set { this.mintSepia = value; }

public int Saturate

get { returnthis.mintSaturate; }

set { this.mintSaturate = value; }

// Implementing functions of the VisualEffect abstract class.

public override object[] GetConstroctorArguments()

{

return new object[] { this.Sepia, this.Saturate };

protected override void InitializeFromString(string strVisualEffect)

throw new NotImplementedException();

protected override bool IsSupported(Gizmox.WebGUI.Common.Interfaces.IContext objC

ontext)

return true;

// Defining a function that will return a definition of the visual

// effect as it should be rendered with the CSS specification.

public override string ToString(Gizmox.WebGUI.Common.Interfaces.IContext objContext

)

string strCSSString = string.Empty;

IContextParams objContextParams = objContext asIContextParams;

// Defining the different implementation of each browser.

switch (objContextParams.Browser.ToLower())

case "ie"

strCSSString += string.Format("{0}filter sepia({1}%)

saturate({2}%);", VisualEffectCommon.IE_PREFIX, this.Sepia, this.Saturate);

break;

case "kit"

strCSSString += string.Format("{0}filter sepia({1}%)

saturate({2}%);", VisualEffectCommon.WEBKIT_PREFIX, this.Sepia, this.Saturate);

break;

case "moz"

strCSSString += string.Format("{0}filter sepia({1}%)

saturate({2}%);", VisualEffectCommon.MOZ_PREFIX, this.Sepia, this.Saturate);

break;
case "opera"

strCSSString += string.Format("{0}filter sepia({1}%)

saturate({2}%);", VisualEffectCommon.OPERA_PREFIX, this.Sepia, this.Saturate);

break;

return strCSSString;

Following is a sample of the code for adding an animated Visual Effect. The effect in this
case is to filter and blur and image

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Gizmox.WebGUI.Forms.VisualEffects;

using Gizmox.WebGUI.Common.Interfaces;

namespace VisualEffects_Sample

public class FilterAnimatedVisualEffect VisualEffect

private int mintBlurBase;

private int mintBlurTransitionedValue;

private TransitionDescriptor mobjDescriptor;

public FilterAnimatedVisualEffect()

Initialize();

public FilterAnimatedVisualEffect(int intBlurBase, int intBlurTransitionedValue, decimal de

cDuration, decimal decDelay, TransitionTimingFunctionenmTimingFunction) this()

this.Duration = decDuration;

this.Delay = decDelay;

this.TimingFunction = enmTimingFunction;
this.BlurBase = intBlurBase;

this.BlurTransitionedValue = intBlurTransitionedValue;

private void Initialize()

this.mobjDescriptor = newTransitionDescriptor();

this.mintBlurBase = 0;

this.mintBlurTransitionedValue = 0;

this.mobjDescriptor.PropertyName = "filter";

this.mobjDescriptor.Duration = 5;

this.mobjDescriptor.Delay = 2;

this.mobjDescriptor.TimingFunction = TransitionTimingFunction.Linear;

public int BlurBase

get { return this.mintBlurBase; }

set

this.mintBlurBase = value;

this.mobjDescriptor.BaseValue = string.Format("blur({0}px)", this.mintBlurBase);

public int BlurTransitionedValue

get { return this.mintBlurTransitionedValue; }

set

this.mintBlurTransitionedValue = value;

this.mobjDescriptor.TransitionedValue
= string.Format("blur({0}px)", this.mintBlurTransitionedValue);

public decimal Duration

{

get

return this.mobjDescriptor.Duration;

set

this.mobjDescriptor.Duration = value;

public decimal Delay

get

return this.mobjDescriptor.Delay;

set

this.mobjDescriptor.Delay = value;

public TransitionTimingFunction TimingFunction

get

return mobjDescriptor.TimingFunction;

set

this.mobjDescriptor.TimingFunction = value;

}
protected TransitionDescriptor TransitionParams

get

return this.mobjDescriptor;

public override object[] GetConstroctorArguments()

return new object[]

{ this.BlurBase, this.BlurTransitionedValue, this.Duration, this.Delay, this.TimingFunction
};

protected override void InitializeFromString(string strVisualEffect)

throw new NotImplementedException();

protected override bool IsSupported(Gizmox.WebGUI.Common.Interfaces.IContext objC

ontext)

return true;

public override string ToString(Gizmox.WebGUI.Common.Interfaces.IContext objContext

)

return string.Empty;

protected override
string GetPropertyNameByContext(string strPropertyName, IContext objContext)

string strPrefix = "";

IContextParams objContextParams = objContext as IContextParams;

if (objContextParams != null)

{
switch (objContextParams.Browser.ToLower())

case"ie" strPrefix = VisualEffectCommon.IE_PREFIX;

break;

case"kit" strPrefix = VisualEffectCommon.WEBKIT_PREFIX;

break;

case"moz" strPrefix = VisualEffectCommon.MOZ_PREFIX;

break;

case"opera" strPrefix = VisualEffectCommon.OPERA_PREFIX;

break;

return strPrefix + strPropertyName;

CRM Demo Built-in Visual Effects

The CRM Demo can be found at visualwebgui.com in the Developer Center. Click on
Mobile CRM to explore the Built-in Visual Effects.

There are four Transitional Visual Effects that are built in to the CRM Demo. These
transition effects are only examples, but can be used to create similar effects in VWG
Applications.

FlyInFromLeft Item enters from left

FlyInFromRight Item enters from right

FlyOutToLeft Item exists to left

FlyOutToRight Item exits to right

View CRM Visual Effects in VisualEffect Collection Editor:

1. Open CRMMobileDemo Solution

2. Add desired Control to Form
3. On the Properties Window of the Control, Browse the Visual Effect
Property. The VisualEffect Collection Editor opens
4. Click the Add arrow
5. The four CRM Mobile Visual Effects are displayed at the bottom of the list
Code for Transitional Visual Effects:

a. FlyInFromLeft:
public class FlyInFromLeftVisualEffect : TranslateVisualEffect

public FlyInFromLeftVisualEffect()

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, -100,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0, 0), 0.3M,
0,TransitionTimingFunction.Ease)

public FlyInFromLeftVisualEffect(decimal decDuration, decimal decDelay, TransitionTimin

gFunction enmTransitionTimingFunction)

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, -100,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0, 0),
decDuration, decDelay, enmTransitionTimingFunction)

public override object[] GetConstroctorArguments()

return new object[]

{ this.TransitionDuration, this.TransitionDelay, this.TransitionTimingFunction };

b. FlyInFromRight:
public class FlyInFromRightVisualEffect : TranslateVisualEffect

public FlyInFromRightVisualEffect()

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 100,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0, 0), 0.3M,
0,TransitionTimingFunction.Ease)

public FlyInFromRightVisualEffect(decimal decDuration, decimal decDelay, TransitionTimi

ngFunction enmTransitionTimingFunction)

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 100,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0, 0),
decDuration, decDelay, enmTransitionTimingFunction)
{

public override object[] GetConstroctorArguments()

return new object[]

{ this.TransitionDuration, this.TransitionDelay, this.TransitionTimingFunction };

c. FlyOutToLeft:
publicclass FlyOutToRightVisualEffect : TranslateVisualEffect

public FlyOutToLeftVisualEffect()

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, -100, 0), 0.3M,
0,TransitionTimingFunction.Ease)

public FlyOutToLeftVisualEffect
(decimal decDuration, decimal decDelay, TransitionTimingFunction enmTransitionTimingF
unction)

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, -100, 0),
decDuration, decDelay, enmTransitionTimingFunction)

public override object[] GetConstroctorArguments()

return new object[]

{ this.TransitionDuration, this.TransitionDelay, this.TransitionTimingFunction };

d. FlyOutToRight:
publicclass FlyOutToRightVisualEffect : TranslateVisualEffect

public FlyOutToRightVisualEffect()
 : base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0,
0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 100, 0), 0.3M,
0,TransitionTimingFunction.Ease)

public FlyOutToRightVisualEffect
(decimal decDuration, decimal decDelay, TransitionTimingFunction enmTransitionTimingF
unction)

: base(new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 0,

0), new AxisLengthAndUnits(LengthUnits.Percent, LengthUnits.Percent, 100, 0),
decDuration, decDelay, enmTransitionTimingFunction)

public override object[] GetConstroctorArguments()

return new object[]

{ this.TransitionDuration, this.TransitionDelay, this.TransitionTimingFunction };

Images and Other Resources

Images and other resources can be added to an Application in order to create a much
more professional and interactive Application. They can be added to Controls or in the
background. Resources included in the Resource folder of the Solution Explorer include
Images, as well as icons, userdata, and generated and designer resources.

Image and Resource Use Workflow

1. Create Storage Folder for images
2. Add Image files to Folder
3. Select Control to add image to and drag onto form canvas
4. In Properties Window, choose Images to add image to Control

How VWG works with Images and Resources

Images used in VWG are saved on the Server, as opposed to the Client, just as is the
case with any other program using the ASP.NET structure. On opening a Web page that
has an image, the browser requests the image content from the Server, using a Gateway
request. On receipt of the request the Gateway Handler within the Server locates the
image and sends the image binary content back as a response. The browser then inserts
the image binary content onto the page and displays it. It is therefore necessary for all
images used to have a particular URL address that can be traced back to storage on the
Server.
 VWG has a special ResourceHandle class, which turns Project image addresses into
URL’s.

Various resource handles exist within the VWG Project, including ImageResourceHandle,
IconResourceHandle, and AssemblyResourceHandle amongst others. Although each
handles a specific resource type, all ResourceHandles translate resource references into
URLs every time an image is added to a Form.

The ResourceHandle creates URL references for images stored in the Project’s default
image storage location. But images can be used from across the internet, as long as they
have a valid URL. In this case, the UrlResourceHandle is used.

Create a Storage Folder for Images and Other Resources

Static images and other resources must be added to default Resources folders prior to
adding them to Controls and Applications. Within the Resources folder in the Solution
Explorer, there are five sub-folders Designer, Generated, Icons, Images, UserData.
Resources may be added to the most relevant folder depending on their type.

Add files to the default Resources folders

Using Solution Explorer:

1. In Solution Explorer, right click the Project

2. Select Resources
3. Within Resources, select the required subfolder
4. Right click the folder and select Open Folder in Windows Explorer
5. Find the Resource needed, and drag and drop into the folder on Windows Explorer
The Resource is now available for use. Please note that the names of the default folders
may be changed, as their default names are for organizational purposes only.

Using the Properties Pages:

This option is especially helpful when wanting to design a new resource for the Project
from scratch.

1. In the Solution Explorer, right click Properties in C#/ My Project in Visual Basic
2. Click on the Resources Tab. If no resources have been added to the Project, a
notification this Project does not contain a default resource file. Click here to create one.
3. A String list appears. The resource code string may be added.
OR
Click on the Add Resource Button at the top of the Tab

The Following options appear in the Drop down list

Add Existing File: When this option is clicked on, the Add existing file to resources
window appears. Select the resource to be added. The resource will appear in the
Properties Pages, as well as in the resources folder in the Solution Explorer.

Add New String: A new code string can be added using the table provided. A new row
for adding more strings is added as soon as the typing of the name of the first string
begins.

New Image: When selecting this option, a new drop down list appears.

1. Select the type of Image required from the list

2. The Add New Resource naming window appears. Insert the name of the new image.
3. Click Add
4. Design or paint the new image and save
5. The new Image appears on the Image list window and can be accessed by clicking
Images on the Drop down menu at the top left hand corner of the Resources window
Add New Icon:

1. The Add New Resource naming window appears. Insert the name of the new icon.
2. Click Add
3. Design or paint the new icon and save
4. The new Icon appears on the Icon list window and can be accessed by clicking Icons on
the Drop down menu at the top left hand corner of the Resources window
Add New Text File:

1. The Add New Resource naming window appears. Insert the name of the new Text File.
2. Click Add
3. A TextFile1.txt Form appears.
4. Add text
5. Save
6. The text file appears on the Text File list window and can be accessed by clicking Files in
Drop down menu at the top left hand corner of the Resources window
Adding Folders to the Resources folder
Along with the folders listed above, it is possible to add other sub-folders within the
Resources folder.

1. Right click the Project

2. Right click Resources->Add->New Folder
3. NewFolder1 (or greater) appears as a subfolder of Resources
4. Rename as desired
Add Images from the Resources folder to Controls
Note that images cannot be added to every Control.

1. Drag and drop the Control onto the Form

2. Open the Properties window
3. Scroll down to Images (this will only appear in the Properties window if relevant to the
particular Control).
4. Click the ellipses
5. The Select Resource Window appears, with the Image folder highlighted on the left hand
side of the window
6. Click to select the required image from the list on the right hand side of the window.
Add Icons from the Resources folder to Controls
Note that Icons cannot be added to every Control.

1. Drag and drop the Control onto the Form

2. Open the Properties window
3. Scroll down to Background Image (this will only appear in the Properties window if
relevant to the particular Control).
4. Click the ellipses
5. The Select Resource Window appears. Click on the Icons folder on the left hand side of
the window
6. Click to select the required icon from the list on the right hand side of the window.
Add Icons from the Resource folder to a Form
Icons may be added to a Form, as well as to individual controls.

1. Select the Form

2. Open the Properties Window
3. Scroll down to Icon
4. Click the ellipses
5. The Select Resource Window appears. Click on the Icons folder on the left hand side of
the window
6. Click to select the required icon from the list on the right hand side of the window.
Create New Designer, Generated and UserData Resources
1. In Solution Explorer, open Resources folder
2. Right click on the desired folder
3. Add->New Item
4. The Add New Item Dialog Box appears
5. Select Item from center pane and click Add. A Design Form for the new Resource
appears and can be worked with accordingly. The Item also appears in the chosen folder
in the Solution Explorer.
Add Designer, Generated and UserData Resources to the Project
1. In Solution Explorer, right click on the Project
2. Add->Existing Item
3. The Add Existing Item Dialog Box opens
4. Check desired resource
5. Click Add
6. New Resource appears in Solution Explorer
Add Externally Located Images to Controls
Images contained in externally located files, such as virtual directories and non-
production files, can be added to Controls through the use of the UrlResourceHandle
class. To use this class, the application must have read access to the file in the remote
directory. Images contained in a database can be added using the
DatabaseResourceHandle class. The images are added through code. When adding
images through code, they will not appear on the Designer View, but will show in the
running application.

Add an externally located image:

1. Drag and Drop a Control that can contain an image (such as PictureBox) to the Form
2. Click on the Control, and open its Properties Window

3. Click the Events button

4. Double click Load. The Code Form opens
 To add the image to the Control, add the following code on the Form_Load event
handler:

C#
private void Form1_Load(object sender, EventArgs e)
{
// Add an image from an external location to the PictureBox control.
this.pictureBox1.Image
= new Gizmox.WebGUI.Common.Resources.UrlResourceHandle("http://address_of_my_image.jp
g");
}

VB.NET
Private Sub Form1_Load(sender As System.Object,
e As System.EventArgs) Handles MyBase.Load
‘ Add an image from an external location to the PictureBox control.
Me.PictureBox1.Image
= New Gizmox.WebGUI.Common.Resources.UrlResourceHandle("http://address_of_my_image.jp
g");
End Sub

5. Save and Run the project. The image appears in the application.

Data Binding

Data Binding is the procedure by which a connection between an Application’s business

logic and User Interface are connected. Once a correct connection is made, elements
bound to particular data reflect changes in the data’s value automatically.

http://msdn.microsoft.com/en-us/library/ms752347.aspx provides more Information on

Data Binding.

Bind Data to a Control

The DataSource property is used to bind data to a particular control. Controls with the
Datasource property are:

 CheckedListBox
 ComboBox
 DataGridView
 ErrorProvider
 ListBox
 ListView
 VirtualDataGridView
Using this property automatically creates a Bindingsource object. This object is the
source of the data. All VWG Controls, not just those listed above, are capable of
accessing the BindingSource object using the DataBinding Property. The list of
DataBinding properties depends on the Control that it is being used for. The Control can
be bound to data at both design and run-time.
 Master/Detail Relationships between Controls
The Master/Detail relationship allows for data from a table to be displayed on the same
page as the table itself. An item collection in the Form of a table or list is displayed by
the Master control. The Detail control takes information from a particular master control
item and displays it. By selecting an individual item or row in the master control, the
user is able to view the information pertaining to it in a Detail control.

Examples of Controls for which master/detail relationships are relevant include:

ComboBox and TextBox controls

1. In the Solution Explorer, create a new folder, and add the required database file to it
2. Open Form1
3. Drag and drop a ComboBox and TextBox Control onto the Form
4. Click on the ComboBox control and open its properties window
5. In the DataSource Property, click the Drop down arrow
6. Click the Add Project Data Source link. The Data Source Configuration Wizard appears
7. Select Database as the Data Source Type and click Next
8. Select the Dataset
9. The Choose Your Data Connection page appears
10. Click New Connection. The Add Connection Dialog Box appears
11. Select a data source by clicking change. The Choose Data Source Dialog Box appears.
12. Select the Data Source – Microsoft SQL Server Database File
13. Select the Data Provider -.NET Framework Data Provider for SQL Server
14. Continue
15. The Add Data Connection page reappears
16. Click Browse to add the database file
17. Select Database and click Open (Choose to test the connection by clicking Test
Connection, if desired)
18. Click OK
THEN
1. Choose Data Connection window reappears. Click Next
2. The Save the Connection String to the Application Configuration File window appears
3. Click Next
4. Choose Your Data Base Objects window appears
5. Make selection; e.g. Tables and follow the specific steps
6. Click Finish
THEN
1. The Datasource value now represented in the properties window is bindingsource1
2. Scroll through the properties window to Displaymember
3. Click the arrow and select the required data item from the list
4. Click on the Events icon and then on Load
5. Select Form1_load using the arrow on the right
6. The code editor appears
7. Use the Fill method to add code, for example if adding to a table:

C#
private void Form1_Load(object sender, EventArgs e)
{
this.customersTableAdapter.Fill(this.nORTHWNDDataSet.Customers);
}

VB.NET
 Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Me.customersTableAdapter.Fill(Me.northWindDataSet.Customers)
End Sub

8. Click on the first textbox

9. Open the Properties window and select (Databindings)
10. Click on the arrow next to Text and select from the bindingsource1 list displayed. The
selected Information is displayed in the first Textbox.
11. Labels may be added to controls. Then choose the Form as the start Form and compile
and run the Application.
Two DataGridView controls
By connecting two DataGridView controls, the master DataGridView control displays
general Information and the detail DataGridView control displays more indepth
Information about that included in the master.

In this example, NORTHWND.MDF is used as the database file, but any database file may
be chosen in place of it.

First, the database file must be made available for use:

1. In Solution Explorer create a Folder named App_data and add the NORTHWND.MDF file
to this
2. Right click the Project and click Add->New Item
3. The Add New Item Dialog Box appears
4. Select Data from the left pane and DataSet from the middle pane
5. Enter the file name NorthWind in the name frame
6. Add. Northwind data set is added to the project.
7. View->Server Explorer
8. Right click Data Connections
9. Select Add Connection
10. The Add Connection Dialog Box appears
11. For the Data Source, select Microsoft SQL Server Database File. For the Database file
name, click Browse and select NorthWind. Test connection if desired
12. The Northwind file appears in the Server Explorer

Now the database file is accessible to use in connecting two DataGridView Controls

1. On the Solution Explorer, click on NORTHWND.xsd to open its design surface

2. From Server Explorer, select elements required and drag and drop onto the design
surface, for example the tables
3. Build the solution
4. The new files are available in the Toolbox
5. Drag and drop the data set as well as the two new master and detail controls onto the
Form. They are added to the bottom of the Form.
6. Double click the Form. The Code Editor appears
7. On the Form_Load Event handler, enter the code as follows:

C#
 private void Form1_Load(object sender, EventArgs e)
{
// Call the Fill method to fill with values the relevant DataTables in the DataSet
// using Table Adapters.
this.ordersTableAdapter1.Fill(northWind1.Orders);
this.order_DetailsTableAdapter1.Fill(northWind1.Order_Details);
}

VB.NET
Private Sub Form1_Load(sender As System.Object,
e As System.EventArgs) Handles MyBase.Load
' Call the Fill method to fill with values the relevant DataTables in the DataSet
' using Table Adapters.
OrdersTableAdapter1.Fill(NorthWind1.Orders)
Order_DetailsTableAdapter1.Fill(NorthWind1.Order_Details)
End Sub

Browser Capabilities Options

Currently, the level of support provided by various browsers for HTML5 and CSS3
elements differs. Depending on browser capabilities, the same Application can be
rendered in different ways. Thus, if HTML5 and CSS3 elements are present in an
Application, the Browser Capabilities Options provides a way to efficiently manage
browser variations. Image and HTML resources are loaded by the Client directly,
therefore Browser Capabilities Options are not relevant to them.

The Browser Capabilities Options enables the user to set automatic detection of browser
support for particular HTML5 and CSS3 elements. Support or lack of support for a
particular element can be ascertained, so that on each session, the browser capabilities
can be checked and sent back to the Server. Then, the Server is able to automatically
send the resource appropriate for that particular browser.

The Browser Capabilities Options is set at the level of a resource, and can be set for one
of the following resources of a control (XSLT) Template, Style Sheet, or Script. Each
resource may be rendered when a particular HTML5 or CSS3 element is or is not
supported by the browser.

The Browser Capabilities Dialog Box consists of the following options, divided into CSS3,
HTML5 and Misc.

Required Capabilities The active browser must support the capabilities checked in this
pane. When the capabilities are supported, the resource is loaded to the browser.

Forbidden Capabilities The active browser does not support the capabilities checked in
this pane. When the capabilities are not supported by the browser, the resource loads.

Set Browser Capabilities Options:

1. Open the Theme Designer or Skin Designer

2. In the Skins pane, select the Control required
3. In the Resources pane, open Images and select resource type. The available resources
for the Control appear.
4. Select the Resource from the display on the Resources pane
5. In order to edit the resource, disconnect it from its parent Control and make it a local
resource:
A. Right click on the resource
B. Select override. The arrow in the bottom left-hand corner disappears
6. Open the Properties Window
7. Select Browser Capabilities by clicking on the ellipses
8. The Browser Capabilities Dialog Box appears
9. Make the required selections by checking the appropriate boxes
10. Close the Browser Capabilities Dialog Box. The selections made are recorded in the
Browser Capabilities in the Properties window.

WebSockets

The WebSockets feature provides capability to have the Server send content to the
Browser without a Client request, keeping the connection open while passing messages
back and forth. This feature is available on VS 2010+ (.NET 4.0+) and allows for bi-
directional conversations between the Browser and Server. Programmers may use this to
add features such as Live Chat (only available with VWG Business Server edition).

Enable Websockets for a new Project

1. Add References to the following assemblies

For Visual studio 2012 and 2013:

* Gizmox.WebGUI.Forms.SignalR

* Microsoft.AspNet.SignalR.Core

* Microsoft.AspNet.SignalR.SystemWeb

* Microsoft.Owin

* Microsoft.Owin.Security

* Microsoft.Owin.Host.SystemWeb

* Owin

* Newtonsoft.Json

For Visual Studio 2010:

 * Gizmox.WebGUI.Forms.SignalR

* Microsoft.AspNet.SignalR.Core

* Microsoft.AspNet.SignalR.Owin

* Microsoft.AspNet.SignalR.SystemWeb

* Microsoft.Owin.Host.SystemWeb

* Owin

* Newtonsoft.Json

2. Configure the Startup Project to work under IIS Express.

3. (Only) for Visual Studio 2012 and 2013, add the following XML to the web.config file,
right before the closing </configuration> tag.

<runtime>

<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

<dependentAssembly>

<assemblyIdentity name="Microsoft.Owin" publicKeyToken="31bf3856ad364e35"

culture="neutral" />

<bindingRedirect oldVersion="0.0.0.0-2.0.2.0" newVersion="2.0.2.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="Microsoft.Owin.Security"
publicKeyToken="31bf3856ad364e35" culture="neutral" />

<bindingRedirect oldVersion="0.0.0.0-2.0.2.0" newVersion="2.0.2.0" />

</dependentAssembly>

</assemblyBinding>

</runtime>

4. For using WebSockets transport (VS2012 and VS2013 with IIS8 only) we need to add
a new configuration in the Web.Config file inside the <system.web> tags. If you don’t
add this, the transportation won’t work.

<httpRuntime targetFramework="4.5" />

Example of using WebSockets for chat

A Form is created with the following elements:

txtMessage - a textbox to write messages in

btnSend - a button that sends the message in the txtMessage to all of the chat Clients

txtChat - a textbox that lists all the messages that were sent to the current Client
To implement simple chat:

1. Code to send the text in the txtMessage textbox to all of the Clients. To do this, call
the Send method of Application.WebSockets in the btnSend_click event as follows:

Application.WebSockets.Send(Application.WebSockets.ConnectionId,txtMessage.Text,
WebSockets.SendType.All);

2. Register a handler to take care of incoming WebSockets messages, by creating a class

that implements IWebSocketHandler that looks something like this:

public class NotificationHandler : IWebSocketHandler

public void ClientHandle(object objSender,

Gizmox.WebGUI.Forms.Client.ClientEventArgs objArgs)

objArgs.Context.Invoke(VWGContext.Current.ActiveForm as Form, "MyFunc", "some

argument");

public void Handle(string strSenderConectionId, string strData)

txtChat.Text +=strData + “\n”;

public bool IsClientHandler //if we need to raise Client event

get

return false;

public bool IsServerHandler // if we need to raise Server event

get

return true;

Notes:
o ClientHandle - This works like the regular ClientAPI of WebGui, we register a function
using Context.invoke and it will run when a new WebSocket message arrives.
o Handle - This function will run when a WebSocket message arrives (Server).
o IsClientHandler- Determines if the program should call the Client handler when a
WebSocket message arrives.
o IsServerHandler- Determines if the program should call the Server handler when a
WebSocket message arrives

The “MyFunc” function should be written in a js file which is an embedded resource. For
example:

function MyFunc(dd) {

alert(“Message Arrived : “ + vwgContext.events.eventArgs()["WSD"]);

//WSD - Data sent by WebSocket, WSC - the sender connectionId.

3. Register the new handler to run when a new WebSocket Message arrives. You can use
this code inside the Form constructor or load event:

Application.WebSockets.SetHandler<NotificationHandler>();

Deployment of a VWG Application on IIS

Internet Information Services (IIS) is a Microsoft-created Web Server. IIS must be

installed with ASP.NET support on the hosting Server prior to VWG Application
deployment.

Visual Studio does include an automatic deployment capability, where certain folders and
files from the Application’s virtual folder are copied to the IIS directory. Sometimes, files
and folders needed for the Application may be left out and affect the running of the
Application. It is therefore advisable to manually follow the deployment steps described
here, at least for the first time deployment of the Application.

Depending on the version of Visual Studio used for development, and the version of IIS
installed on the hosting Server, different deployment settings are required.

Incorrect installation or registration stops the proper setting of Applications and

Application pools. To correct this problem if it arises, install the required framework,
and/or run aspnet_regiis.exe Application. More Information is available from MSDN
documentation.

Installing VWG framework SDK on the IIS Server is NOT recommended. If more than
one VWG Application is running on the host Server, conflicts and problems may be
caused if VWG framework SDK is installed.

Required ASP.NET versions for particular versions of Visual Studio

The required version of the ASP.NET framework must be installed before on the Server
and registered with IIS before deploying VWG Applications:
Visual Studio ASP.NET

2005 & 2008 ASP.NET 2.0

2010 ASP.NET 4.0

2012 ASP.NET 4.5

2013 ASP.NET 4.5.1

Installation requirements for IIS versions

VWG is compatible with all versions of IIS now available, but in this explanation we take
7.5 as an example. There may be slight differences in deployment between versions. For
Information on installation of IIS 5.1 and 6, see
http://support.microsoft.com/kb/325889. For Information on installing versions 8.0, see
http://www.iis.net/learn/get-started/whats-new-in-iis-8/installing-iis-8-on-windows-
Server-2012 and 8.5, see http://www.iis.net/learn/install/installing-iis-85/installing-iis-
85-on-windows-Server-2012-r2.

IIS version 7.5

Commonly Windows 2008 R2 Windows 7 workstation

running on Server

Required ASP.NET and ISAPI ASP.NET and ISAPI Extensions, located

components Extensions, located in:in Turn Windows features on or off-
>Internet Information Services->World Wide
Web Server (IIS)->Role Web Services-> Application Development
Services->Web Server- Features
>Application
Development

Recommended
components

Steps to Server Manager- Control Panel-> Programs-> Programs and

installation >Roles->Web Server Features -> Turn Windows features on or
(IIS) off ->Internet Information Services

Additional Notes IIS has a Server role In Web Management Tools, select the
management tools option, to administer IIS
In Web Management
Tools, select the
management tools
option, to administer
IIS

Default Folder Location on IIS

C:/inetpub is the default folder of the IIS server. Every one of the Websites on a
particular IIS server has a separate c:/inetpub folder with capability to include many
virtual folders and/or web applications. Every time IIS is installed, a new default
Website, c:\inetpub\wwwroot, is installed. Prior to manually deploying a web Application
 to any Website on the server, a new folder must be created within c:\inetpub\wwwroot.
All the required deployment contents of the web application will be copied to this folder,
which is the root folder of the application. Once the root folder is created, the Application
can be converted into a web application. If using localhost for the VWG Application, the
URL of the website will be http://localhost/yourapplication/yourform.wgx. The .wgx
extension is the default extension for VWG applications, but is not compulsory. It may be
changed if required.

Deployment Workflow
1. Create a Web Application on IIS for a VWG Project.
2. Copy required folders/files from VWG Project into Web Application folders on IIS.
3. Create an Application Pool.
4. Configure Handler Mappings on IIS.
5. [Optional] For machines with 64 bit operation systems, enable 32 bit applications.
6. Convert the folder to a Web Application and set Application Pool.
7. Run the VWG Application on IIS.

Deploy an Application on IIS

Installation of IIS with appropriate ASP.NET support is required before deployment.
Then, set the following configurations on IIS:

Create a Web Application on IIS for a VWG Project

A VWG Project must be added to an Application on IIS before it is deployed. This may be
an existing Application or a new one may be created.

To create a new Web Application:

1. Open Windows Explorer and create a new folder in c:\inetpub\wwwroot called VWGApp.
2. Into this new folder, copy the bin, resources and web.config folders from the VWG
Project folder.
The Application has now been deployed on IIS but must be configured before it becomes
usable.

Create an Application Pool for a VWG Application

A new Application Pool may be created, or an existing one configured.

1. Open Internet Information Services (IIS) Manager

2. On the left hand pane, Connections, click on Server and select Applications Pool. On the
right hand, Actions, pane, click Add Application Pool. The Add Application Pool Dialog
Box appears. Select the relevant options from the windows. If the Application was built
using VS 2005 or 2008 to select .NET Framework v2.0.50727 and if using VS2010 to
select .NET Framework v4.0.30319. See the IIS documentation on MSDN for
Information on installing .NET Frameworks not present in the Drop down list. In the
Managed Pipeline Mode list, select Classic as the default mode. Using the Integrated
mode requires further instructions.
Configure Handler Mapping on IIS
The Handler Mappings for the *.wgx extensions must be set in order to deploy a VWG
Project. The IIS Web Site folder structure inherits Handler Mappings so that if the
handler mappings are added for *.wgx on the Default Web Site, they are inherited by
the VWGApp Application. It is recommended that the Handler Mappings are set at a
higher level than that of the VWG Application, but setting them at VWG Application level
is also acceptable.

An Executable is a full path and filename to a specific DLL assembly. The path and
filename depend on the version of ASP.NET Framework and on whether the web Server
 is 32 or 64 bit. An Executable is needed when creating a new handler mapping. If the
web Server is 32 bit, a handler mapping for the specific .NET Framework of the
Application is required. For 64 bit Servers, a handler mapping for 32 and 64 bit is
recommended, but only 64 bit is essential, for the selected .NET Framework of the
Application. If Applications are built of a mixture of Applications from Visual Studio 2008
and 2010, 4 handler mappings are recommended- 32 and 64 bit for both .NET
Frameworks 2.x and 4.x.

The Executables for each .NET Framework are:

 VisualWebGui_x86_.NET2.0 - C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet
_isapi.dll
 VisualWebGui_x86_.NET4.0 - C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet
_isapi.dll
 VisualWebGui_x64_.NET2.0 - C:\Windows\Microsoft.NET\Framework64\v2.0.50727\asp
net_isapi.dll
 VisualWebGui_x64_.NET4.0 - C:\Windows\Microsoft.NET\Framework64\v4.0.30319\asp
net_isapi.dll

To obtain the required Information from the IIS on the required Executable to use, the
set up for a standard extension is already in use. The most common of these is *.ashx.

The following *.ashx handler mappings are available on 64 bit IIS Servers:

 VWG 32bit .NET framework 4.0 – *.wgx, with SimpleHandlerFactory-ISAPI-

4.0_32bit Executable.
 VWG 64bit .NET framework 4.0 - *.wgx, with PageHandlerFactory-ISAPI-
4.0_64bit Executable.
 VWG 32bit .NET framework 2.0 - *.wgx, with SimpleHandlerFactory-ISAPI-
2.0 Executable.
 VWG 64bit .NET framework 2.0 - *.wgx, with PageHandlerFactory-ISAPI-2.0-
64bit Executable
Set Handler Mapping on IIS
1. Open Internet Information Services (IIS) Manager
2. On the Connections pane, select the node at which to set the Handler Mappings. On the
middle pane, under IIS select Handler Mappings. The Handler Mappings window
appears.
3. Depending on requirements, right click the correct handler, as follows:
 VWG .NET 4.0 32bit - SimpleHandlerRFactory-ISAPI-4.0_32bit
 VWG .NET 4.0 64 bit - PageHandlerFactory-ISAPI-4.0_64bit using *.wgx
 VWG .NET 2.0 32 bit - SimpleHandlerFactory-ISAPI-2.0 using *wgx
 VWG .NET 2.0 64 bit - PageHandlerFactory-ISAPI-2.0-64bit using *wgx
4. Click Edit. The Edit Script Map Dialog Box opens. For Handlers requiring a *wgx
extension, change the Request Path.
5. Copy the content of the Executable box and click OK
6. The IIS Manager reappears
7. On the right pane, click Add Script Map. The Add Script Map Dialog Box appears
8. Fill in the details, including pasting the Executable Information
9. Click Request Restrictions. The Request Restrictions Dialog Box appears
10. On the Mapping Tab, the Invoke handler only if request is mapped to: should be
Unchecked
11. On the Verbs Tab, All Verbs should be checked
12. On the Access Tab, select Script and click OK
13. The Add Script Map Dialog Box reappears. Click OK. A confirmation box appears.
14. Click Yes. The new Handler Mapping appears in the Handler Mappings pane
 Enable 32 bit Applications on a 64 bit deployment machine
VWG assemblies can be compiled to act either as 32bit or 64bit. However, other factors
may create the need to enable 32bit Applications to run from your IIS. If using VWG
6.3x version, 32 bit Applications must be enabled. Other examples of when it is
necessary to enable 32 bit include if the Application was built for x86, 32 bit must be
enabled. If components that do not work on 64 bit are being used, then of course 32 bit
must be enabled.

In order to enable 32 bit Applications:

1. Open Internet Information Services (IIS) Manager

2. On the Connections pane, select the Applications Pool node
3. The Applications Pool node appears. Right click the VWGAppPool that has been created
and select Advanced Settings. The Advanced Settings Dialog Box appears.
4. Change the value of Enable 32-Bit Applications to True and click OK
Convert a VWG Project into a Web Application
The VWG Project is held in a virtual folder on IIS but must be converted into a Web
Application with a proper Application Pool.

1. Open Internet Information Services (IIS) Manager.

2. On the Connections pane, right click the VWG Folder, and select Convert to Application
3. The Add Application Dialog Box appears. Click Select
4. The Select Application Pool Dialog Box appears
5. Open the Application Pool drop down box and click VWGAppPool and click OK
6. The Add Application Dialog Box reappears. Click OK
Run the VWG Application on IIS
When the VWG Application is run from IIS, the Start Form needs to be manually added
to the URL in the browser. Running the Application without specifying the Start Form is
a more advanced procedure, not covered in this document.

1. Open Internet Information Services (IIS) Manager.

2. On the Connections pane, right click VWGApp and select Manage Application->browse.
The default browser appears.
3. Add the name of the Start Form with the extension *.wgx to the URL. The deployed
Application appears in the browser.

Troubleshooting

There are various issues which may arise during the running and deployment of VWG
Application Projects. Below is concise Information on the types of errors and their
possible solutions.

Clear the Cache of VWG Applications

Clearing the Cache is very important after installing a new or different version of VWG. It
is also recommended that the cache is cleared every so often even when there are no
installation updates. The following procedures assure the resolution of any caching
issues. Assure that Visual Studio is closed before beginning.

1. Close Visual Studio if open.

2. Clear the cache on the Client browsers.
3. Clear the cache on the development work station.
4. Verify all required DLLs are up to date on the Web Server.
5. Clear the cache on the Deployment Web Server.
Clear the cache on the Client browsers
Shift +Ctrl +Del opens the Cache clearing Dialog Box on all three browsers discussed
below.

Internet
1. Select Delete Browsing History.
Explorer
2. The Delete Browsing History Dialog Box opens
3. Check ONLY the Temporary Internet Files checkbox.
4. Click Delete. The cache is cleared and the Dialog Box closes
5. Open the Tools Menu (click ALT to display)
Firefox1. Open the Tools Menu (click ALT to display)
2. Select Options. The Options Dialog Box opens
3. Select Privacy from the ribbon bar. The Privacy pane opens
4. Click the clear your recent history link

5. The Clear Recent History box appears. Make selection from the Time Range
to Clear drop down box. Everything will clear entire cache.
 6. Click the down arrow titled Details and select Cache

7. Click Clear Now. The cache is now clear and the Dialog Box is closed.
8. Close the Options Dialog Box by clicking OK
Chrome1. Click the Chrome Menu on the Browser Toolbar

2. Select Tools->Clear browsing data

3. The clear browsing data Dialog Box appears
4. Select the time period to clear from the drop down box. Select the beginning
of time to clear all
5. Check cached images and files and click Clear browsing data. The browser is
cleared and the Dialog Box closes.
Clear the cache on the development work station
1. Close Visual Studio Server and all other running Microsoft Web Server instances on the
machine
2. Remove the Server cache for MS IIS Server and Visual Studio Server. This is done by
deleting the entire contents of the Temporary ASP.NET Files folder:
 Applications using ASP.NET4.0:
C:\WINDOWS\Microsoft.NET\Framework\v4.0.xxxxx\Temporary ASP.NET Files
 Applications using ASP.NET 2.0:
C:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files. If this
path is not accessible, C:\users\<username>i\AppData\local\temp\Temporary ASP.NET
Files
3. Open Application in Visual Studio
4. Delete the obj and bin folders
5. Remove the existing references to Gizmox assemblies
6. Replace the required Gizmox assemblies, so as to verify that the correct version and
location of assemblies is referenced
7. Verify that the Copy Local property is set to True for all Gizmox assemblies
8. Temporarily disable the caching of the Application by:
a. Opening the Property Pages, and on the General Tab check Disable Caching, or
b. Configuring the Disable Caching option in the Web.config file
<system.diagnostics>
<switches>
<add name="VWG_DisableCachingSwitch" value="1" />
</switches>
</system.diagnostics>
Value 0=No; 1=Yes

Important: IF THIS IS A PRODUCTION APPLICATION, REMEMBER TO RESTORE THE

ORIGINAL SETTING AND UNCHECK THE DISABLE CACHING CHECKBOX AFTER
COMPLETION OF THE CACHE CLEARING PROCESS.
9. Increase the number of the Private Version of the Project: Open the Property Pages, and
on the General Tab, in the Private Version box, increase the number by 1.
10. Clean Solution
11. Rebuild Solution
12. Delete route directory from root directory (if there is) in the Project. This directory
usually appears in older versions of VWG following the use of the StaticResources
Property. This Property is obsolete in versions of VWG after 6.4
13. Close all Visual Studio instances
14. Delete all files that are in caching locations on VWG. Projects are cached by Visual
Studio in different locations within the development machine. In extreme situations, this
may cause problems. Deleting all files will rectify these problems. The caching locations
for Windows 7 are as follows:
 C:\Users\<YourUserName>\AppData\Local\Microsoft\VisualStudio\10.0\ProjectAssemblie
s (the 10.0 refers to VS 2010; for VS 2009, use 9.0 and for VS 2005, use 8.0)
 C:\Users\<YourUserName>\AppData\Local\Microsoft\WebsiteCache
 C:\Users\<YourUserName>\AppData\Local\Temp

Similar paths can be found for Windows XP operating systems.

Clear the cache on the deployment web Server
Verify that all required DLLs are up to date on the Web Server. If caching problems
persist:

1. If running, shut down IIS. This is not always possible and is an extreme step. Not
closing down IIS may restrict the ability to delete some locked files further along in the
process.
2. Remove the cached assemblies: Delete the content of the Temporary ASP.NET files
folder:
 For Applications using ASP.NET 4.0:
C:\WINDOWS\Microsoft.NET\Framework\v4.0.xxxxx\Temporary ASP.NET Files
 For Applications using ASP.NET 2.0:
C:\WINDOWS\Microsoft.NET\Framework\v2.0.xxxxx\Temporary ASP.NET Files
3. Increase the Private Version number by using the Web.config file
4. Delete route directory from root directory (if there is) in the Project. This directory
usually appears in older versions of VWG following the use of the StaticResources
Property. This Property is obsolete in versions of VWG after 6.4
5. Restart IIS, if stopped in step 1
 Errors when running the Application
When running a VWG Application, there are common errors which may appear. Following
are the steps to identification and resolution of each of these.

Directory listing appears instead of a Form

An Access Denied error may also appear if the Application is running on the IIS Server.

Possible cause: No Start Form was defined, so there is no URL entry point to the
Application

Solution: If running on a Visual Studio Development Workstation: Designate a Start

Form. If the Application is already deployed on the IIS Server, add the Start Form name
to the URL when accessing the Application, e.g. http://yoursite/Form1.wgx

Could not resolve skin resource of type ‘ImageResource’

Occurs when the VWG Application is running.

Possible Causes:

 Amongst the most common reasons for this error message are:
 Missing assembly
 Wrong assembly version
 Caching problems
Solution: Perform one or all of the options listed below:

 Verify the Gizmox.WebGUI.Forms.Themes assembly has been referenced in the Project.

Then verify that the assembly exists in the bin folder of the Application Virtual folder,
either in the Project’s folder in Visual Studio or in IIS Virtual folder.
 Remove and replace references to Gizmox assemblies, in order to verify the correct
assemblies are in place, and in the correct locations
 Verify that every Gizmox assembly (.DLL file)referenced in the Project exists in the bin
folder and is the correct version of that assembly
 Clear the cache through increasing the Private Version number by 1
The resource cannot be found

Occurs when the URL of a VWG Application is entered into the browser address bar.

Possible Cause: The entry point (Start Form) of the Application has not been
registered.

Solution: In the Applications section of the Web.config file, every Start Form must be
registered:

<Applications>

<Application Code="Form1" Type="VWG_Application.Form1, 'VWG_Application'" Authent

ication="Default" Stateless="False" ForceSSL="False" />

<Application Code="Form2" Type="VWG_Application.Form2, VWG_Application" Authenti

cation="Default" Stateless="False" ForceSSL="False" />

</Applications>

The Control is not registered

Occurs when running a VWG Application.

Possible Cause: An unregistered VWG or Custom Control in the Application that

requires registration is unregistered. The name of the control appears in the error
message.

Solution: Register the Control

Unexpected JavaScript Errors

A JavaScript error appears when attempting to run Application.
 Possible Cause: The most recent version of a resource must be available to the
browser for the Web Application to run. Due to Information being cached in various
places in Visual Studio, the Web Server, and browser, sometimes the resource update
does not occur. Errors may occur if the most up to date resources are not available.

Solution: Clear the Cache of VWG Applications

Errors when deploying VWG Applications

The resource you are looking for has been removed, had its name changed, or
is temporarily unavailable

Occurs when running Application on the IIS Server

Possible Causes:

 The Start Form is not registered

 There is no handler mapping for the extension, .NET or bit versions being used
Solutions:

 Designate a Start Form for the Application.

 Add a Handler Mapping for the extension.