Getting Started Guide - Informatica · Getting Started Guide - Informatica ... - Profiling
Getting Started With VWG
-
Upload
jorgedensa-1 -
Category
Documents
-
view
94 -
download
18
description
Transcript of Getting Started With VWG
-
Getting Started
Guide
-
This documentation and any related computer software help programs (hereinafter referred to as the
Documentation) is for the end users informational purposes only and is subject to change or withdrawal by
GIZMOX at any time.
This Documentation may not be copied, transferred, reproduced, disclosed, modified or duplicated, in whole or in
part, without the prior written consent of GIZMOX. This Documentation is confidential and proprietary information
of GIZMOX and protected by the copyright laws of the United States and international treaties.
Notwithstanding the foregoing, licensed users may print a reasonable number of copies of the Documentation for
their own internal use, and may make one copy of the related software as reasonably required for back-up and
disaster recovery purposes, provided that all GIZMOX copyright notices and legends are affixed to each reproduced
copy. Only authorized employees, consultants, or agents of the user who are bound by the provisions of the license
for the Product are permitted to have access to such copies.
The right to print copies of the Documentation and to make a copy of the related software is limited to the period
during which the applicable license for the Product remains in full force and effect. Should the license terminate for
any reason, it shall be the users responsibility to certify in writing to GIZMOX that all copies and partial copies of
the Documentation have been returned to GIZMOX or destroyed.
EXCEPT AS OTHERWISE STATED IN THE APPLICABLE LICENSE AGREEMENT, TO THE EXTENT PERMITTED BY
APPLICABLE LAW, GIZMOX PROVIDES THIS DOCUMENTATION AS IS WITHOUT WARRANTY OF ANY KIND,
INCLUDING WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE OR NONINFRINGEMENT. IN NO EVENT WILL GIZMOX BE LIABLE TO THE END USER OR ANY
THIRD PARTY FOR ANY LOSS OR DAMAGE, DIRECT OR INDIRECT, FROM THE USE OF THIS DOCUMENTATION,
INCLUDING WITHOUT LIMITATION, LOST PROFITS, BUSINESS INTERRUPTION, GOODWILL, OR LOST DATA, EVEN
IF GIZMOX IS EXPRESSLY ADVISED OF SUCH LOSS OR DAMAGE.
The use of any product referenced in the Documentation is governed by the end users applicable license
agreement.
The manufacturer of this Documentation is Gizmox.
Provided with Restricted Rights. Use, duplication or disclosure by the United States Government is subject to the
restrictions set forth in FAR Sections 12.212, 52.227-14, and 52.227-19(c)(1) - (2) and DFARS Section 252.227-
7014(b)(3), as applicable, or their successors.
All trademarks, trade names, service marks, and logos referenced herein belong to their respective companies.
Copyright 2012 Gizmox. All rights reserved.
-
VWG Getting Started Guide 3
Contents
Chapter 1: Introduction ..................................................................................................... 6
About this Guide ..................................................................................................................... 6
Requirements ......................................................................................................................... 6
What is Visual WebGui? ........................................................................................................... 7
VWG Integration with Visual Studio ......................................................................................... 10
Integration Tabs .............................................................................................................. 10
Project Templates ............................................................................................................ 12
Item Templates ............................................................................................................... 14
Designer Support ............................................................................................................ 15
Help Resources ..................................................................................................................... 16
The Developers Companion Kit .......................................................................................... 16
The Knowledge Base ........................................................................................................ 20
The Developer Forum ....................................................................................................... 21
Documentation ................................................................................................................ 22
Support .......................................................................................................................... 22
Chapter 2: Starting to Work with VWG ........................................................................... 23
Working with VWG Application Projects .................................................................................... 23
Creating a New VWG Application Project ............................................................................. 23
Enabling Un-integrated Projects ........................................................................................ 27
Exploring the VWG Project Structure .................................................................................. 29
Working with VWG Forms ....................................................................................................... 32
Adding a New Form to VWG Project ................................................................................... 32
Defining a Form as the Entry Point of the Application ........................................................... 34
Working with VWG Controls .................................................................................................... 36
Displaying VWG Control Set .............................................................................................. 36
Adding VWG Control to a Form .......................................................................................... 38
Setting Control Properties ................................................................................................. 40
Creating VWG User Control and Adding It to a Form ............................................................ 42
Working with VWG Libraries ................................................................................................... 46
Creating a New VWG Library ............................................................................................. 47
Using VWG Libraries in Solutions ....................................................................................... 50
Adding VWG Library to a Solution ................................................................................ 50
Referencing VWG Library to a Solution .......................................................................... 52
Extending VWG Project .......................................................................................................... 57
Adding References ........................................................................................................... 57
Registering New Controls .................................................................................................. 59
Registering Namespaces and Controls Using the Property Pages ...................................... 60
-
Table of Contents
VWG Getting Started Guide 4
Registering Namespaces and Controls Using the Web.config File ...................................... 64
Manually Adding Controls to the Toolbox ............................................................................ 66
Compiling and Running VWG Application .................................................................................. 68
Chapter 3: Creating a Simple VWG Application ............................................................ 70
VWG Application Creation Workflow ......................................................................................... 70
Creating VWG Application ....................................................................................................... 71
Creating Your First VWG Application ........................................................................................ 78
Chapter 4: Working with Images and Other Resources................................................ 87
Understanding Images and Resources Use in VWG .................................................................... 87
Static Images Use Workflow ................................................................................................... 88
Defining the Default Location of Images and Other Resources ..................................................... 89
Using the Default Location of Static Images ........................................................................ 89
Changing the Default Location of Images ............................................................................ 91
Adding a Custom Folder for Resources ............................................................................... 96
Adding Static Images to VWG Controls .................................................................................... 98
Adding Images from the Default Storage Folder .................................................................. 98
Adding Images from an External Location .......................................................................... 101
Chapter 5: Working with Databases ............................................................................. 104
Using Data Binding to Connect Databases to VWG Controls ....................................................... 104
Bind Data to a Control .......................................................................................................... 105
Creating a Master/Detail Relationship between Controls ............................................................ 118
Connecting a ComboBox and TextBox Controls in Master/Detail Relationship.......................... 118
Connecting Two DataGridView Controls in Master/Detail Relationship .................................... 131
Chapter 6: Deploying VWG Applications on IIS .......................................................... 147
General Deployment Requirements and Guidelines ................................................................... 147
IIS Server Installation ..................................................................................................... 147
IIS 5.1 Installation Requirements ................................................................................ 147
IIS 6 Installation Requirements .................................................................................. 148
IIS 7.5 Installation Requirements ................................................................................ 148
IIS Server and VWG SDK Framework ................................................................................ 149
ASP.NET Framework Version ............................................................................................ 149
Deployment Method ........................................................................................................ 150
Deployment Location on IIS ............................................................................................. 150
Deployment Contents ...................................................................................................... 151
Using *.wgx as an Extension ............................................................................................ 151
VWG Application Deployment Workflow ................................................................................... 152
Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server ........................................ 152
Installing IIS 7.5 on Windows 2008 R2 Server.................................................................... 153
Creating a Web Application for VWG Project on IIS ............................................................. 156
-
Table of Contents
VWG Getting Started Guide
5
Creating an Application Pool for VWG Applications .............................................................. 158
Configuring Handler Mappings on IIS ................................................................................ 162
Handler Mapping Guidelines ....................................................................................... 162
Setting Handler Mapping for VWG Applications on IIS .................................................... 164
Enabling 32Bit Applications .............................................................................................. 171
Converting your VWG Folder into a Web Application ............................................................ 173
Running VWG Application from IIS .................................................................................... 176
Chapter 7: Troubleshooting .......................................................................................... 178
Clearing the Cache of VWG Applications .................................................................................. 178
Clearing the Cache on the Development Workstation .......................................................... 178
Clearing the Cache on the Deployment Web Server ............................................................ 182
Clearing the Cache on the Clients ..................................................................................... 183
Running VWG Application ...................................................................................................... 187
Error: Directory Listing appears instead of a Form .............................................................. 187
Error: Could not resolve skin resource of type 'ImageResource' ............................................ 188
Error: The resource cannot be found ................................................................................. 190
Error: The Control is not registered ................................................................................... 191
Deploying VWG Application.................................................................................................... 192
Error: The resource you are looking for has been removed, had its name changed, or is
temporarily unavailable ................................................................................................... 192
Unexpected JavaScript Errors ........................................................................................... 193
-
Introduction
VWG Getting Started Guide 6
Chapter 1: Introduction
About this Guide
This Guide contains basic information for developing and deploying
Visual WebGui applications.
Note: Some of the material in this Guide is based on MSDN
documentation.
Requirements
To develop VWG applications, you need to have some theoretical and
practical knowledge of .NET Framework and Visual Studio.
-
What is Visual WebGui?
Introduction
7
What is Visual WebGui?
Visual WebGui (VWG) is a platform for rapid development, quality &
secured deployment of Web applications based on standard AJAX Web
2.0 methodologies. VWG offers the visual development simplicity and
functional richness of desktop applications for Web and Mobile.
VWG combines in one comprehensive solution two different paradigms
and technologies, and takes the best of both worlds. On the design-
time level, VWG uses the model of Windows Forms visual development
method, while on the run-time level, VWG uses ASP.NET technology
stack for forming and running pure Web applications.
From the development side, VWG provides a design-time environment
that resembles Windows Forms environment, thus turning the design
task into an easy and quick procedure. VWG users are presented with
a development environment that is integrated with Visual Studio IDE,
where controls can be dragged from Visual Studio toolbox and dropped
onto the design area, and where event handlers can be easily
registered and programmed in C# or VB.Net code. VWG design-time
environment is so similar to Windows Forms environment, that
existing Windows Forms knowledge can be largely leveraged and
applied to the development of web applications.
From the infrastructure side, VWG is an extension of ASP.NET Web
server for application development and deployment. Using a patented
optimized protocol, VWG provides a plain (plug-in-free) and rich
browser-based accessibility to the UI (User Interface), which is the
native-rich Ajax Web 2.0.
VWG Ajax approach differs from existing approaches in the role the
client and server are playing in the application run. Just like other Ajax
practices, VWG uses XML over HTTP to deliver messages from the
client to the server and vice versa. However, the browser (client) is
responsible only for rendering the UI and for capturing user-inputs,
whereas the server runs the entire application code. The client does
not use ASP.NET UI elements, like tables and buttons, only HTML. The
XML messages instruct the HTML what to draw on the browser.
VWG thus presents the Empty Client model, a paradigm shift in which: 1. no installation is required on the browser, except for a kernel
of plain and static code that is responsible for further communication
with the server, and which is automatically loaded into the client
browser when the first request arrives to the server; 2. the entire
application is running on the server except for the rendering part. This
concept is secured by design as the client code cannot control the
server behavior under any circumstances.
-
Introduction
VWG Getting Started Guide 8
VWG
Visual Development
ASP.NET Infrastructure
Web Server
Web Browser
IIS
-
What is Visual WebGui?
Introduction
9
The end result of VWG development process is a pure and rich Web
application, which is efficient, fast, scalable, and secured. The
architecture of the VWG application ensures that no data, business
logic or Web services are either running or exposed on the client side,
since all the data processing is done on the server side.
For more information about VWG you can refer to the following white
papers:
Visual WebGui Technology:
http://www.visualwebgui.com/Gizmox/Resources/Technology/tabid
/619/Default.aspx
How to Make Your ASP.NET Third Party Component 10x Faster:
http://www.visualwebgui.com/Gizmox/Resources/WhitePapers/tabi
d/528/articleType/ArticleView/articleId/746/How-to-Make-Your-
ASPNET-Third-Party-Component-10x-Faster.aspx
Visual WebGui 6.4 really changes the rules of AJAX/Web 2.0
development:
http://www.visualwebgui.com/Gizmox/Resources/WhitePapers/tabi
d/528/articleType/ArticleView/articleId/810/Visual-WebGui-64-
really-changes-the-rules-of-AJAXWeb-20-development.aspx
Enterprise Mobile Apps Using the .NET Framework:
http://www.visualwebgui.com/Gizmox/Resources/WhitePapers/tabi
d/528/articleType/ArticleView/articleId/978/Enterprise-Mobile-
Apps-Using-the-NET-Framework.aspx
Getting From .NET to HTML5:
http://www.visualwebgui.com/Gizmox/Resources/WhitePapers/tabi
d/528/articleType/ArticleView/articleId/932/Getting-From-NET-to-
HTML5.aspx
Visual WebGui Enterprise Mobile Solution:
http://www.visualwebgui.com/Gizmox/Resources/WhitePapers/tabi
d/528/articleType/ArticleView/articleId/907/Visual-WebGui-
Enterprise-Mobile-Solution.aspx
-
Introduction
VWG Getting Started Guide 10
VWG Integration with Visual Studio
VWG is integrated with Visual Studio. This integration consists of four
different groups:
Integration Tabs, see the section below.
Project Templates, see page 12.
Item Templates, see page 14.
Designer Support, see page 14.
Integration Tabs
The Integration tabs General, Registration, and Deployment - appear in the Property pages of VWG project, as follows:
The main purpose of the integration tabs is to provide an easy
interface to the various Web.config settings that you may need to set
for your VWG application. Each of the setting that can be defined in
the integration tabs can also be defined manually in the Web.config
file.
Note: Starting with Visual WebGui version 6.3, the integration tabs
are only available in the Professional Studio.
VWG
Integration
tabs
-
VWG Integration with Visual Studio
Introduction
11
To open the Property pages and the integration tabs:
1. To open the Property pages, on the Solution Explorer, right-click
your project and select Properties:
Notes:
To open the Property pages of your project, you can also
perform the following:
C# - Double-click the Properties folder in your project.
VB.NET Double-click the My Project folder in your project.
When using Visual WebGui Express Studio for Visual Studio
Express and Visual Web Developer Express, Visual WebGui
Integration tabs are not available on the Property pages. For
these versions, you should use the Web.config file.
The Property pages appear, including the integration tabs.
-
Introduction
VWG Getting Started Guide 12
Project Templates
Project templates are designed for the various types of VWG C# and
VB.NET projects you can create.
There are two VWG project templates:
Visual WebGui Library - enables you to create a new VWG class
library. See page 46.
Visual WebGui Application enables you to create a new VWG application. See page 23.
Note: Starting with Visual WebGui version 6.3, the project templates
are only available in the Professional Studio.
VWG project templates contain VWG infrastructures, such as compiler
management, and XML protocol structure.
VWG project templates
-
VWG Integration with Visual Studio
Introduction
13
To open VWG project templates:
1. Open Visual Studio.
2. Open the File menu, and select New Project.
The New Project dialog box opens:
3. From the Installed Templates left pane, select Visual WebGui.
Note: If two languages are installed in your Visual Studio, each of
them contains Visual WebGui templates. In this case, verify that
are selecting the Visual WebGui template in the language with
which you want to work.
VWG project templates appear in the middle pane.
To use Visual WebGui Library template, see page 46.
To use Visual WebGui Application, see page 23.
-
Introduction
VWG Getting Started Guide 14
Item Templates
Item templates are intended to enable you to extend your VWG
project, by adding to it additional forms, Custom and User controls,
and Themes.
Visual WebGui Custom Control - enables you to develop and
implement a new control from scratch. The Custom Control
provides all of the basic functionality required by controls, including
mouse and keyboard handling events, but no control-specific
functionality or graphical interface. In addition to creating a
Custom Control from scratch, meaning, a Custom Control that
inherits from the Control class, you can also create a Custom
Control that inherits from one of the standard controls. By
inheriting from a standard control, the Custom Control has the
appearance and all existing functionalities of the base control,
which you can either extend or modify. It is recommended to
create a Custom Control if you want to provide a custom graphical
representation to a control, or you need to implement custom
functionality that is not available through standard controls.
Visual WebGui Form enables you to create a new VWG form.
Visual WebGui Theme enables you to create a new Theme for your application.
VWG item templates
VWG Skinable
Controls
-
VWG Integration with Visual Studio
Introduction
15
Visual WebGui User Control - enables you to develop and
implement a new composite control. The composite control acts as
a container for several other controls, and holds all of the inherent
functionality associated with each of the contained controls. You
can re-use the User Control across different forms in an application
and across different applications. It is recommended to create a
User Control if you want to combine the functionality of several
controls into a single reusable unit. To learn how to create a User
Control, see page 42.
Skinable Controls - enables you to change the look of the control
without changing its underlying code. The Skinable Control is
actually a new control, which inherits its functionality from one of
the standard VWG controls. By customizing the standard control
using a Skinable Control, you can easily create a control that is
tailored to your needs, and re-use it across your applications.
Designer Support
The VWG Designer provides a Windows Forms like GUI for the editing
of Forms and other types of controls.
Note: Starting with VWG version 6.3, the Designer is available in
Professional Studio and Express Studio, but not in the SDK version.
-
Introduction
VWG Getting Started Guide 16
Help Resources
VWG provides you with several resources that can help you to easily
and efficiently create VWG applications. These Help resources include:
The Developers Companion Kit, see below.
The Knowledge Base, see page 20.
The Developer Forum, see page 21.
Documentation, see page 22.
Support, see page 22.
The Developers Companion Kit
The CompanionKit provides you with an extensive set of descriptions
and examples of available controls. The examples demonstrate the
appearance, behavior and features of VWG controls. You can browse
the examples online to explore the different features and
functionalities of each control. You can also copy or download the code
and snippets of the examples, and incorporate them in your VWG
projects for further usage and customization.
The example snippets are available in both C# and VB.NET languages,
and they were created based on the best practices of VWG platform.
To learn more about the CompanionKit, see the following video
tutorial:
http://visualwebgui.com/Developers/KB/tabid/654/article/intro_to_the
_new_developer_companionkit/Default.aspx
-
Help Resources
Introduction
17
Adding a CompanionKit example to your project:
1. Open the CompanionKit from:
http://companionkit.visualwebgui.com/main.wgx
2. Select from the Control list on the left the control you want to use
in your project,
- or
Use the Search box to find the required
control.
-
Introduction
VWG Getting Started Guide 18
3. When the section of the selected control is opened, on the Code
Sample pane, click the Download button to download the Zip files
that contain the displayed example:
4. Save the Zip files, extract, and copy them.
5. Open VWG application.
6. On the Solution Explorer, right-click the project, and select Paste
to paste the downloaded files in your project.
The sample files are added to your project:
Download example snippets
-
Help Resources
Introduction
19
7. To add the example into a form, open the form in Designer View.
Then, from the Toolbox, locate the added component and drag it
onto the form:
The CompanionKit sample is now included in your project, and you
can customize it according to your needs:
-
Introduction
VWG Getting Started Guide 20
The Knowledge Base
VWG Knowledge Base provides you with numerous articles, best
practices, tutorials, code snippets, videos, and other VWG
development and design resources:
http://visualwebgui.com/Developers/KB/tabid/654/Default.aspx
-
Help Resources
Introduction
21
The Developer Forum
VWG Developer Forums enable you to communicate and consult with
other people who use VWG, and to post questions about different
aspects, procedures, and issues of VWG:
http://visualwebgui.com/Developers/Forums/tabid/364/Default.aspx
VWG is an open source product, so sharing information and issues with
the community of developers is very valuable. Therefore, it is highly
recommended to use the Developer Forum for technical discussions.
-
Introduction
VWG Getting Started Guide 22
Documentation
VWG documentation provides you with a set of Guides that describes
and explains how to use VWG. You can download the Guide from the
Downloads page:
http://visualwebgui.com/tabid/515/default.aspx
Support
If you have information that you do not want to share with other users
in the Developer Forum, or if you want to send further material, such
as code samples, docs, images, and apps, you can contact Gizmox
Support at: [email protected]
-
Working with VWG Application Projects
Starting to Work with VWG
23
Chapter 2: Starting to Work with VWG
This chapter describes how to perform the basic procedures required
for starting working with VWG, and provides step-by-step instructions
for the following: creating a new VWG project, adding a new form to
VWG project, defining a form as the entry point of the application,
working with VWG controls, adding VWG User Control to a form,
working with VWG libraries, extending VWG projects, and compiling
and running VWG application.
Working with VWG Application Projects
Creating a New VWG Application Project
The first step in developing VWG application is creating VWG
application project. When you create a new VWG application project, a
solution is automatically generated to contain it, unless you define the
project as a part of an existing solution.
Visual Studio uses project templates to generate new projects. Each
template represents a different project type. During VWG installation,
VWG templates are installed and integrated into Visual Studio.
Creating a new VWG application project is based on the selection of
VWG template.
-
Starting to Work with VWG
VWG Getting Started Guide 24
To create a new VWG project
1. Open Visual Studio.
Note: VWG fully supports Visual Studio 2005, 2008 and 2010.
2. Open the File menu, and select New Project.
- or
On the Start Page of Visual Studio, click the New Project link.
The New Project dialog box appears:
-
Working with VWG Application Projects
Starting to Work with VWG
25
3. From the Installed Templates left pane, select Visual WebGui.
Note: If two languages are installed in your Visual Studio, each of
them contains Visual WebGui template. In this case, verify that you
are selecting the Visual WebGui template in the language with
which you want to work:
4. From the middle pane, select Visual WebGui Application.
5. [For Visual Studio 2008 and 2010 only] In the .NET Framework
drop-down list above the middle pane, the latest possible .NET
Framework version is displayed by default for the version of Visual
Studio you are using.
For Visual Studio 2008 - you can select any Framework version
between 2.0 and 3.5.
For Visual Studio 2010 - you can only use Framework version
4.0 while working with VWG applications.
-
Starting to Work with VWG
VWG Getting Started Guide 26
If you change the .NET Framework version to a non-supported
version, your VWG application will not be able to run.
Note: Visual Studio 2005 uses .NET Framework version 2.0 by
default, and you cannot change it.
6. In the Name box, type a name for the new project, or accept the
default name.
7. In the Location box, select a save location.
8. In the Solution Name box, type a name for the new solution, or
accept the default name.
Notes:
To add the new project to an existing solution, type here the
name of the solution.
If you open the New Project dialog box when an existing
solution is already opened in Visual Studio, a Solution drop-
down list appears in the dialog box as well. Select from the
Solution drop-down list whether to create a new solution for
the new project, or whether to add the new project to the
existing solution:
9. Verify that the Create directory for solution checkbox is
selected.
10. Click OK.
Note: The project you create here is basically ASP.NET Web
Application project configured for VWG.
-
Working with VWG Application Projects
Starting to Work with VWG
27
A new VWG application project is created:
Enabling Un-integrated Projects
If you have a project that has references to Gizmox assemblies,
but which was not created with VWG, or was created in VWG
version without integrations, once you open it in Visual Studio, the
following message appears on the Designer View - You must
enable Visual WebGui to use the designer in this project:
In this case, you need activate VWG integrations by enabling VWG,
as described below.
-
Starting to Work with VWG
VWG Getting Started Guide 28
To enable VWG:
1. To enable VWG, on the Solution Explorer, right-click the project
and select Enable Visual WebGui from the context menu:
The following message appears:
2. To integrate your project into Visual Studio and to work with VWG
Integration options, click the Reload button.
-
Working with VWG Application Projects
Starting to Work with VWG
29
Exploring the VWG Project Structure
VWG application project is just like any other type of project in that it
consists of a grouping of source code files, a list of references to
required .NET assemblies, and an appropriate configuration of
compilation and debugging options. When you use Visual Studio to
create a project from a template, it sets all of this up for you,
providing a base structure appropriate to the template you have
selected. In the case of VWG projects, this consists of the following:
C#:
VB.NET:
-
Starting to Work with VWG
VWG Getting Started Guide 30
The default folders of VWG project are:
Properties (C#)/My Project (VB.NET) opens the Property pages, which contain the properties of your VWG
application/project. The Property pages are the same as the
Property pages of ASP.NET project, with the addition of VWG
integration tabs (see page 10). Most of the configuration settings
that appear in the Property pages also appear in the Web.config
file. Therefore, you cannot work with the Property pages while the
Web.config file is opened in Edit mode.
References a list of all assemblies that are available for the project. The References folder includes by default standard .Net
assemblies and several VWG assemblies:
Note: In VB.NET the References folder is not displayed by
default. To display the References folder on the Solution Explorer,
click the Show All Files button.
Form1.cs (C#)/Form1.vb (VB.NET) a blank form that serves as the starting point for developing VWG application.
-
Working with VWG Application Projects
Starting to Work with VWG
31
The Form1 folder includes three files:
Note: In VB.NET the files that are included in the Form1 folder are
not displayed by default. To display the files on the Solution
Explorer, click the Show All Files button.
Form1.cs/Form1.vb enables you to work in the Designer View, and to view the code that the Designer generates while
you design your form.
Note: It is generally not recommended to manually edit the
files that are generated automatically by the Designer, unless
you are fully aware of their meaning and implications.
Modifying these files incorrectly can cause inconsistencies and
problems, which may damage the form and prevent you from
opening it in the Designer.
Form1.Designer.cs/Form1.Designer.vb enables you to add code to the form.
Form1.resx XML based file, which enables you to create and manipulate resources in your forms. This file is useful for
customization of resources for different languages or
installations.
Readme.txt a text file that provides you with some basic information about creating VWG applications.
-
Starting to Work with VWG
VWG Getting Started Guide 32
Web.config a standard ASP.NET configuration file, which contains settings that control and manage the behavior of your
VWG application. The VWG Integration suite adds additional
configuration settings to the standard file, which are required
for running your VWG application.
Note: It is recommended not to change the default values of
the Web.config file, unless you are fully aware of the meaning
and implications of the different configuration settings.
Working with VWG Forms
Adding a New Form to VWG Project
When you create a new VWG project, one default form is automatically
created. You can add to VWG project as many forms as you wish.
Adding a new form to VWG project:
1. On the Solution Explorer, right-click the target project, and select
Add Form from the context menu:
-
Working with VWG Forms
Starting to Work with VWG
33
The Add New Item dialog box opens:
2. Verify that the Visual WebGui Form item is selected in the middle
pane, and click the Add button.
A new VWG form is added to the project:
-
Starting to Work with VWG
VWG Getting Started Guide 34
Defining a Form as the Entry Point of the Application
In each application, you need to define at least one of the forms as a
Start Form, meaning the form that will be an entry point to the
application. Without defining a Start Form, a running application
cannot be opened.
To define a form as a Start Form:
On the Solution Explorer, right-click the form you want to set as an
entry point for your application. Then, select Set As Start Form
from the context menu:
The form you defined as a Start Form will be the form that will
appear once you start your application from within Visual Studio.
-
Working with VWG Forms
Starting to Work with VWG
35
Notes:
Once you define the Start Form, it is registered in the following
places:
Property pages - Web tab, Start Action section, Specific
Page box. This setting is used by Visual Studio IDE only,
when you run your application from within Visual Studio:
Web.config - Applications section. This setting is used by
Visual Studio as well as your Web server.
All the forms you define as Start Forms using the Set As Start
Form option, will be entry points to your application, unless
you later remove them. The last form you define as a Start
Form, will be the form Visual Studio IDE loads when running
your application from within the IDE.
If you rename a form that you previously defined as a Start
Form, you need to define it again as a Start Form after the
renaming. Alternatively, after the renaming you can change the
name of the Start Form in the Property pages or Web.config
file.
-
Starting to Work with VWG
VWG Getting Started Guide 36
Working with VWG Controls
Displaying VWG Control Set
VWG controls are located in Visual Studio Toolbox in a separate section
called Visual WebGUI Controls:
By default, the Toolbox window is set to Auto Hide. It appears as a tab
on the left margin of your solution when the Designer editor is open.
However, you can pin the Toolbox window into position by clicking the
Auto Hide button in the upper right corner of the window. If the
Toolbox is not displayed, you can open it manually.
To open the Toolbox:
Open the View menu, and select the Toolbox option.
The Toolbox appears.
-
Working with VWG Controls
Starting to Work with VWG
37
To start working with VWG controls, open Visual WebGUI Controls
section on the Toolbox, and drag the desired controls onto the form.
If the controls on the Visual WebGUI Controls section are not sorted
in alphabetical order, you can sort them.
To sort VWG controls in alphabetical order:
On the Toolbox, right-click the Visual WebGUI Controls section,
and select Sort Items Alphabetically from the context menu:
VWG control set is sorted alphabetically.
-
Starting to Work with VWG
VWG Getting Started Guide 38
Adding VWG Control to a Form
The fastest way to add controls to a form, or reposition existing
controls, is to use the drag-and-drop method. When you add a control
to a form with the drag-and-drop method, the control is given a
standard height appropriate to that type of control.
To add VWG control to a form:
1. Open the target form in a Design View.
2. Open the Toolbox, and expand the All Visual WebGui controls
section.
3. From the All Visual WebGui section on the Toolbox, drag the
control you want to add and drop it onto the form:
Alternatively, you can select the control in the Toolbox, and then
draw it on the form:
-
Working with VWG Controls
Starting to Work with VWG
39
The control is displayed on the form:
Note: In the background, Visual Studio automatically adds code to
the From1.Designer.cs/Form1Designer.vb for the new control.
Every time you make a change in a control on the form, the code-
behind is automatically changed accordingly. It is generally not
recommended to manually edit the files that are generated
automatically by the Designer, unless you are fully aware of their
meaning and implications.
4. Save your work by clicking the Save button on the Standard
toolbar.
-
Starting to Work with VWG
VWG Getting Started Guide 40
Setting Control Properties
After adding controls to the form, the next step is to set the properties
of these controls. The Properties window provides an easy way to set
the properties of all the controls on a form:
The Properties window may be already opened in Visual Studio. When
you select a control on the form, the Properties windows automatically
displays its properties:
If the Properties window is not already opened, you can manually open
it.
-
Working with VWG Controls
Starting to Work with VWG
41
To open the Properties window of a control:
1. On the Design View, select the control whose properties you want
to set.
2. Perform one of the following:
Open the View menu, and select the Properties Window
option.
Click the Properties Window button on the Standard
toolbar.
Right-click the control, and select Properties from the context
menu.
The Properties window appears.
To set a control property:
Select the desired property on the Property window, and change its
value:
Note: You can select multiple controls and change their common
properties all at once.
The new property value you entered is applied to the selected
control.
-
Starting to Work with VWG
VWG Getting Started Guide 42
Creating VWG User Control and Adding It to a Form
To add a new User Control:
1. On the Solution Explorer, right-click the project and select Add New Item:
The Add New Item dialog box appears:
-
Working with VWG Controls
Starting to Work with VWG
43
2. From the Installed Templates left pane, select Visual WebGui.
3. From the middle pane, select Visual WebGui UserControl.
4. In the Name box, type a name for the new UserControl, or accept
the default name.
5. Click the Add button to create a new UserControl.
A new UserControl is created, and it appears on the Solution
Explorer:
6. Open the UserControl in the Designer. Then, add to it controls and
customize it:
-
Starting to Work with VWG
VWG Getting Started Guide 44
7. Save the UserControl by clicking the Save button on the Standard
toolbar.
8. Build your solution or project by right-clicking it and selecting
Build from the context menu.
9. Open a form in the Designer, and then open the Toolbox.
The UserControl you created appears:
-
Working with VWG Controls
Starting to Work with VWG
45
10. Drag the UserControl onto the form:
When you start the application, the UserControl you created
appears in the forms that include it:
-
Starting to Work with VWG
VWG Getting Started Guide 46
Working with VWG Libraries
A VWG library is a storage unit for capabilities, functionalities, and
designs that you want to add to your application, and re-use across
different projects and applications. For example, if you created a User
Control or a Custom Control, which you would like to use in different
applications, it is best practice to create them in a library.
VWG library consists of the Properties/My Project and References
folders, and an empty UserControl, which you can either use or not
according to your needs.
C#
VB.NET
-
Working with VWG Libraries
Starting to Work with VWG
47
Creating a New VWG Library
Note: The instructions below describe how to create VWG library in a
separate solution. However, you can also create VWG library as part of
an existing solution.
To create a new VWG library:
1. Open Visual Studio.
2. Open the File menu, and select New Project.
- or
On the Start Page of Visual Studio, click the New Project link.
The New Project dialog box opens:
-
Starting to Work with VWG
VWG Getting Started Guide 48
Note: To create a library in an existing solution, on the Solution
Explorer, right-click the solution, and select Add New Project. The Add New Project dialog box appears.
3. From the Installed Templates left pane, select Visual WebGui.
Note: If two languages are installed in your Visual Studio, each of
them contains Visual WebGui template. Verify that you are
selecting the Visual WebGui template in the language with which
you want to work.
4. From the middle pane, select Visual WebGui Library.
5. In the Name box, type a name for the new library, or accept the
default name.
6. In the Location box, select a save location.
7. In the Solution Name box, type a name for the new solution, or
accept the default name.
Notes:
To add the new library to an existing solution, type here the
name of the solution.
If you open the New Project dialog box when an existing
solution is already opened in Visual Studio, a Solution drop-
down list appears in the dialog box as well. Select from the
Solution drop-down list whether to create a new solution for
the new library, or whether to add the new library to an
existing solution:
-
Working with VWG Libraries
Starting to Work with VWG
49
8. Verify that the Create directory for solution checkbox is
selected.
9. Click OK.
A new VWG library is created:
You can now start creating the content of the new VWG library.
Note: It is recommended not to store resources, such as images
and other external files, in a library. It is best to store resources
directly in the application. If needed, you can store resources in a
library, but this requires a more advanced setting.
-
Starting to Work with VWG
VWG Getting Started Guide 50
Using VWG Libraries in Solutions
Before you can start using VWG library in a certain solution, you need
to do the following steps:
1. [Optional] Add VWG library to the solution. (See below)
2. Reference VWG library to the solution. (See page 52)
Adding VWG Library to a Solution
To add VWG library to a solution:
1. Open the existing solution in Visual Studio.
2. On the Solution Explorer, right-click the solution, and select Add Existing Project:
The Add Existing Project dialog box appears:
-
Working with VWG Libraries
Starting to Work with VWG
51
3. Locate the library you want to add to the solution, and click the
Open button.
The library is added to the solution:
Before you can start using the library, you need to reference it to
the solution, as described in the following section.
-
Starting to Work with VWG
VWG Getting Started Guide 52
Referencing VWG Library to a Solution
You can reference VWG library to a solution with or without adding the
entire library to the solution.
To reference VWG library after adding the library to the solution,
see the section below.
To reference VWG library as an assembly without adding the library
to the solution, see page 54.
To reference VWG library to a solution when the library is included in the solution:
1. When the library is already part of the solution, on the Solution
Explorer, right-click the References folder of the application
project, and select Add Reference from the context menu:
The Add Reference dialog box appears:
-
Working with VWG Libraries
Starting to Work with VWG
53
2. On the Add Reference dialog box, open the Projects tab, select
the library you want to add as a reference to the project, and click
OK.
The selected library is added to the References folder of the
project:
Now you can add the library content to the project.
-
Starting to Work with VWG
VWG Getting Started Guide 54
To reference VWG library to a solution without adding the library to the solution:
1. Before you can reference an external VWG library to a solution,
you need to build the library.
To build the library, open it in Visual Studio. Then, on the Solution
Explorer, right-click the solution, and select Build Solution from
the context menu:
2. To reference the library to the project, open the project in Visual
Studio. On the Solution Explorer, right-click the References folder
of the application project, and select Add Reference from the
context menu:
-
Working with VWG Libraries
Starting to Work with VWG
55
The Add Reference dialog box appears:
3. On the Add Reference dialog box, open the Browse tab, and
locate the library you want to add as a reference to the project.
Then, open the bin folder of the library, select the library dll file,
and click OK:
-
Starting to Work with VWG
VWG Getting Started Guide 56
The selected library is added to the References folder of the
project:
-
Extending VWG Project
Starting to Work with VWG
57
Extending VWG Project
Adding References
Notes:
In the following section some distinction is made between "with
sources" and "without sources" installations. "With sources"
installation means installing with sources installation package, and either work with the source code in that installation, or work
with VWG SVN source code. "Without sources" installation means
working with a standard VWG framework version, with no access to
its source code.
The standard set of assemblies that are required for developing
VWG projects using VWG framework "without sources" includes:
Gizmox.WebGUI.Client
Gizmox.WebGUI.Common
Gizmox.WebGUI.Forms
Gizmox.WebGUI.Server
Gizmox.WebGUI.Forms.Themes
When using with sources installation, the following assemblies are required for a standard development as well:
Gizmox.WebGUI.Common.Design
Gizmox.WebGUI.Forms.Design
To use new controls and functionalities, you need to add as references
the following assemblies that contain them:
Gizmox.WebGUI.Forms.Professional
Gizmox.WebGUI.Forms.Office
Gizmox.WebGUI.Forms.Converters (for the RichTextBox only)
Gizmox.WebGUI.Forms.Extended
When using "with sources" installation, to work with new features and
functionalities in the Designer, you also need to add as references the
following assemblies:
Gizmox.WebGUI.Forms.Professional.Design
Gizmox.WebGUI.Forms.Office.Design
All of the design-time assemblies are already in the GAC and therefore
you do not need to manually add them as references.
-
Starting to Work with VWG
VWG Getting Started Guide 58
To add a reference to VWG project:
1. On the Solution Explorer, right-click the References folder, and
select Add Reference from the context menu:
The Add Reference dialog box appears:
2. From the .NET tab or Browse tab of the Add Reference dialog
box, select the assemblies you want to add to your project, and
click OK.
The selected assemblies are added to your project.
Note: Make sure that the Copy Local property of all Gizmox
assemblies is set to True.
-
Extending VWG Project
Starting to Work with VWG
59
Registering New Controls
Most of the standard out-of-the-box VWG controls do not require
registration. However, there are some controls that you need to
register before you can start use them.
If a control that requires registration is used in your project, and it is
not registered, once you run the application, a runtime exception is
thrown.
You can either register each control separately, or you can register at
once all the controls that have the same namespace. Registering a
namespace is quicker than registering each control individually.
However, since everything you register is downloaded to the client,
and it might influence your application performance, you should
consider which method is best for you.
You can register the controls using the Property pages of your
project, which are integrated in your VWG project, or using the
Web.config file.
-
Starting to Work with VWG
VWG Getting Started Guide 60
Registering Namespaces and Controls Using the Property Pages
To register controls and namespaces using the Property pages of your project:
1. To open the Property pages, on the Solution Explorer, right-click
your project and select Properties:
Notes:
To open the Property pages of your project, you can also
perform the following:
C# - Double-click the Properties folder in your project.
VB.NET Double-click the My Project folder in your project.
When using VWG Express Studio for Visual Studio Express and
Visual Web Developer Express, VWG Integration tabs are not
available on the Property pages. For these versions, you
should manually register the controls using the Web.config
file, as described on page 64.
-
Extending VWG Project
Starting to Work with VWG
61
The Property pages appear:
2. Click the Registration tab on the left to open it, and on the
Controls section, click the Add button:
-
Starting to Work with VWG
VWG Getting Started Guide 62
The Choose Controls dialog box appears:
4. Perform one of the following:
Note: You can select and register multiple namespaces and
controls.
To register a namespace click the Namespace tab to open it, select the check box of the namespace you want to register,
and click OK:
The selected namespace is now registered.
-
Extending VWG Project
Starting to Work with VWG
63
To register a control click the Controls tab to open it, select the check box of the control you want to register, and
click OK:
Note: To easily locate a control, enter the control name in the
Filter box.
The selected control is now registered.
The controls and namespaces you registered appear on the
Controls section of the Registration tab:
-
Starting to Work with VWG
VWG Getting Started Guide 64
Registering Namespaces and Controls Using the Web.config File
To register controls and namespaces using the Web.config file:
1. To open the Web.config file, on the Solution Explorer, double-click
it:
The Web.config file appears:
-
Extending VWG Project
Starting to Work with VWG
65
2. On the Controls section, register a namespace or a control
according to the following:
To register a namespace use the following example to register the required namespaces:
The registration of a namespace consists of the following:
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=d50c2c7452ba77d9
To register a control use the following example to register the required controls:
The registration of a control consists of the following:
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
-
Starting to Work with VWG
VWG Getting Started Guide 66
The version number of the VWG assembly:
Version=4.0.5701.0
Note: For the list of available versions, see the Note in the
above section.
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=d50c2c7452ba77d9
Manually Adding Controls to the Toolbox
After referencing the required assemblies to your project, the controls
that are included in them should appear on your Toolbox. However,
there might be cases when some of the controls do not appear on the
Toolbox and you need to add them manually.
To manually add individual controls to the Toolbox:
1. On the Toolbox, right-click the All VisualWebGui section, and
select Choose Items from the context menu:
-
Extending VWG Project
Starting to Work with VWG
67
The Choose Toolbox Items dialog box appears:
Note: To easily locate a control, enter the control name in the
Filter box.
2. On the .NET Framework Components tab, select the check
boxes of controls you want to add to the Toolbox, and click OK.
The selected controls are added to your Toolbox.
Notes:
The new controls might be added to your Toolbox not in an
alphabetical order. To place them in the right order, right-click
the All VisualWebGui section, and select Sort Items
Alphabetically from the context menu.
In some cases, duplicate controls appear in the Toolbox. This
may happen when you manually add controls to the Toolbox,
and then upgrade VWG framework version. To remove the
redundant controls, right-click the Toolbox, and select Reset
Toolbox from the context menu. Then, close your form, and
re-open it in the Designer. This procedure clears the Toolbox,
and then adds the default controls to it. However, you may
need to manually add again the new controls that are described
in this appendix.
If you followed the necessary steps and you still do not see the
new controls, follow these steps:
1. Remove the existing references to Gizmox assemblies.
2. Add again references to the required Gizmox assemblies.
-
Starting to Work with VWG
VWG Getting Started Guide 68
3. Build the project or solution, and make sure you do not
have any compilation errors.
4. Close Visual Studio.
5. Re-open Visual Studio.
6. Add again the controls to the Toolbox.
Compiling and Running VWG Application
You can compile and run your VWG application with or without
debugging.
Notes:
Before running the application, click the Save All button on
the Standard toolbar.
Verify that one of the forms is set as a Start Form (see page 34).
To run the application without debugging:
Press Ctrl+F5 on your keyboard,
- or
Open the Debug menu, and select the Start Without Debugging
option.
To run the application with debugging:
Press the F5 key on your keyboard,
- or -
Click the Start Debugging button on the Standard toolbar.
To stop debugging:
Open the Debug menu, and select the Stop Debugging option.
- or
Click the Stop Debugging button on the Debug toolbar.
-
Compiling and Running VWG Application
Starting to Work with VWG
69
When the application starts running, it is opened in your default
browser, and the form you set as a Start Form appears:
Note: VWG does not create a new form with the wgx extension.
When the application starts, the wgx extension is automatically added
to the form that was defined as a Start Form.
-
Creating a Simple VWG Application
VWG Getting Started Guide 70
Chapter 3: Creating a Simple VWG Application
This chapter provides step-by-step instructions on the creation of VWG
HTML Mobile and Web Desktop applications.
VWG Application Creation Workflow
The creation of a basic VWG application consists of the following steps:
1. Create a new VWG application project.
2. Define one or more Forms (classes derived from the Form class)
for the windows in your application.
3. Set one form as the entry point for your application.
4. Use the Designer to add controls to your forms (such as TextBoxes
and CheckBoxes), and then configure the controls by setting their
properties and attaching event handlers to them.
5. Add code to your form classes to provide functionality.
6. Build your application.
-
Creating VWG Application
Creating a Simple VWG Application
71
Creating VWG Application
To create VWG application:
1. Open Visual Studio.
2. Open the File menu, and select New Project.
The New Project dialog box opens:
3. From the Installed Templates left pane, select Visual WebGui.
Then, from the middle pane select Visual WebGui Application.
Note: If two languages are installed in your Visual Studio, each of
them contains Visual WebGui templates. In this case, verify that
you are selecting the Visual WebGui template in the language with
which you want to work either C# or VB.NET.
4. In the Name box, enter a name for the project.
5. In the Location box, select the saving location.
6. In the Solution name, accept the default name or change it.
7. Click OK to begin the process of creating a new VWG application
project.
Note: VWG application is basically ASP.NET project with some
unique configurations.
-
Creating a Simple VWG Application
VWG Getting Started Guide 72
A new VWG project is created:
8. [Optional] Rename the Form1.cs/ Form1.vb to a name that
represents its content and your application. To rename a file, on
the Solution Explorer right-click the file, select Rename from the
context menu, and enter a new name.
A message appears, asking you to confirm the renaming
throughout the project:
Click Yes to confirm the renaming of the file.
-
Creating VWG Application
Creating a Simple VWG Application
73
9. Each project needs to have at least one form that is set as the
entry point for the application. To set an entry point, on the
Solution Explorer, right-click the Form1.cs/ Form1.vb, and select
the Set As Start Form option from the context menu:
Note: For more information about the Start Form, see page 34.
10. Open the Designer View by right-clicking the Start Form file, and
selecting View Designer from the context menu.
The form appears in the Designer View.
-
Creating a Simple VWG Application
VWG Getting Started Guide 74
11. To start adding controls to your form, open the Toolbox by
selecting from the View menu the Toolbox option, and expand
the All Visual WebGui Controls section:
-
Creating VWG Application
Creating a Simple VWG Application
75
12. Design your form by dragging and dropping the appropriate VWG
controls to it:
13. Configure the controls you added by setting their properties using
the Properties window.
14. Add events to the controls, by clicking the Events button on
the Properties pane, and attaching the required event handlers:
Note: Double-clicking a control on the Design View registers the
default event of the control, and opens the Code Editor.
-
Creating a Simple VWG Application
VWG Getting Started Guide 76
15. Add additional events, actions, and functions using the Code
Editor:
16. Save your application, by clicking the Save button on the Standard
toolbar.
17. Start your application by opening the Debug menu and selecting
either the Start Debugging or Start Without Debugging option:
-
Creating VWG Application
Creating a Simple VWG Application
77
Your VWG application appears:
-
Creating a Simple VWG Application
VWG Getting Started Guide 78
Creating Your First VWG Application
In this section, you are provided with step-by-step instructions for
creating a simple VWG application, which allows users to enter their
first and last names. After entering the data into these two text boxes
on the Web page, the users click a Login button, and their First Name
and Last name appear in a label below the button.
The following figure shows the sample login VWG application that you
will create:
Notes:
This application sample is based on a sample outlined in
http://msdn.microsoft.com/en-us/library/ms973868.aspx
The instructions below demonstrate how to create VWG application
in C#. However, VB.NET code is provided as well.
-
Creating Your First VWG Application
Creating a Simple VWG Application
79
To create a sample VWG application:
1. Open Visual Studio.
2. Open the File menu, and select New Project.
The New Project dialog box opens:
3. From the Installed Templates left pane, open the Visual C#
section, and select Visual WebGui.
4. From the middle pane select Visual WebGui Application.
5. In the Name box, enter VWGApp as the project name.
6. In the Location box, select the saving location.
7. Click OK to begin the process of creating the new VWG application
project.
-
Creating a Simple VWG Application
VWG Getting Started Guide 80
A new VWG project is created:
8. On the Solution Explorer, in your new VWGApp project folder, there
is VWG form named Form1.cs. Right-click it, select Rename from
the context menu, and change the form name to Login.
A message appears, asking you to confirm the renaming
throughout the project:
-
Creating Your First VWG Application
Creating a Simple VWG Application
81
9. Click Yes to confirm the renaming of the file.
10. Define the Login.cs file as the entry point of the application. To
perform this, right-click the file, and select the Set As Start Form
option from the context menu:
-
Creating a Simple VWG Application
VWG Getting Started Guide 82
11. Open the Designer View by right-clicking the Login.cs file, and
selecting the View Designer option from the context menu.
12. Open the Toolbox, and expand the All Visual WebGui section.
13. Create the following form by dragging and dropping the
appropriate VWG controls to the form:
First Name Label control
Blank box- TextBox control
Last Name Label control
Blank box TextBox control
Login Button control
Your name will appear here! Label control
-
Creating Your First VWG Application
Creating a Simple VWG Application
83
14. Set the properties of these controls according to the following
table:
Control Type Property Value
Label Name Label1
Text First Name
Font Tahoma,Bold
TextBox Name txtFirst
Text
Label Name Label2
Text Last Name
Font Tahoma,Bold
TextBox Name txtLast
Text
Button Name btnSubmit
Text Login
Label Name lblName
BackColor White
BorderColor Black
BorderStyle Insert
Padding Left, Top, Right,
Bottom = 10
Text Your name will
appear here!
-
Creating a Simple VWG Application
VWG Getting Started Guide 84
15. Select the form, and on the Properties window of the form, change
the value of the BackColor to LightBlue:
16. At this point, you can run the application and see VWG Login form
appears in your browser. Although this page does not have any
functionality yet, this exercise is a good test to make sure
everything is running up to this point.
To run this sample application, press F5 in your keyboard.
-
Creating Your First VWG Application
Creating a Simple VWG Application
85
You should now see the VWG form you created displayed in your
default browser:
At this stage, you can already enter data into the two text boxes.
However, if you click the Login button, nothing will happen
because you have not set the button to do anything yet. You will
next learn how to make this Login button do something.
Now you should add some code to the button. The code you add
will cause the button to post the data you entered in the text
boxes, and fill in the appropriate data in the label below the button
control.
17. End the application by closing down the browser.
Note: If your default browser is not Internet Explorer, closing the
browser may not stop the application. If the application stays
running after closing the browser, click the Stop button in the
Standard toolbar of Visual Studio.
18. While looking at the Login page in Design View, double-click the
Login button control. The Code Editor is opened with a Click event
for the btnSubmit control.
Note: Double-clicking a control on the Design View registers the
default event of the control, and opens the Code Editor. Since the
default event of a button is a Click event, double-clicking a button
registers this event.
-
Creating a Simple VWG Application
VWG Getting Started Guide 86
19. Now you will add code that retrieves the text property from both
the txtLast and txtFirst text boxes, and places the data into the
label control below the Login button.
20. Fill in the Click event procedure so it looks like the following code:
C#
private void btnSubmit_Click(object sender, EventArgs e)
{
this.lblName.Text = this.txtFirst.Text + " " + this.txtLast.Text;
}
VB.NET
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs)
Handles btnSubmit.Click
Me.lblName.Text = Me.txtFirst.Text & " " & Me.txtLast.Text
End Sub
21. Start the application by pressing F5 or Ctrl+F5 on your keyboard.
The application starts. When you enter text in the First Name and
Last Name boxes, and then click the Login button, the text of the
two boxes appears below the button:
You have now successfully created VWG application.
-
Understanding Images and Resources Use in VWG
Working with Images and Other Resources
87
Chapter 4: Working with Images and Other
Resources
This chapter describes how to perform the basic procedures required
for working with images and other resources.
Note: This chapter mainly focuses on adding static images to VWG
applications and controls. However, the procedures described here are
applicable to other static resources as well. These resources are all
types of files that are not composed of code or any other binary
information, such as doc and RTF files, PDFs, and XMLs.
Understanding Images and Resources Use in VWG
VWG is based on ASP.NET, and has a Web architecture and
deployment structure. Therefore, as with any Web application, images
used in VWG applications are saved on the server, not locally on the
client. When a Web page that has an image is opened in a browser,
the browser sends a request to the server, asking for the content of
the image. This type of request for content is called a Gateway
request. Upon receiving the Gateway request, the server Gateway
Handler locates the actual image stored on the server, whether it is a
physical image on disk, an image embedded in an assembly, a
database, or somewhere else. When the image is located, the Gateway
Handler sends back the image binary content as a response. The
browser is then responsible for inserting the image binary content into
the page and displaying it.
When working with Web architecture, you cannot use references to
physical addresses of images or any other files. Since the images are
actually stored on the server, if you use physical addresses for
referencing them, the client browser will look for the image on the
client machine and not on the server. To reference images that are
stored on the server and to present them on the browser, it is
necessary to use URL addresses. The URL is sent to server as a
Gateway request, and it informs the Gateway program on the server
from where it should retrieve the image.
For example, an image named "duck.gif", located in the
"Resources/Images" directory on "www.visualwebgui.com" has the
URL: http://www.VisualWebGui.com/Resources/Images/duck.gif.wgx.
-
Working with Images and Other Resources
VWG Getting Started Guide 88
However, when you want to add static images that are located on your
production server to your VWG application, you do not need to enter
their actual URLs. To simplify the referencing of resources located on
the server, VWG has a ResourceHandle class, which converts the addresses of images that are stored in your project to URLs.
There are different types of ResourceHandles, such as
ImageResourceHandle, IconResourceHandle,
AssemblyResourceHandle, and more. Each of them handles a
specific type of resource, but they all convert a resource reference to a
URL.
Each VWG project has a default location for storing images, and the
ResourceHandle creates URL references to images that are stored
there. All you need to do is to save your images in the default image
location of your project, and to add them to your forms using the
appropriate controls. For each image that is added to a form, an
instance of the ImageResourceHandle is automatically created in the code, converting the image address to a URL.
You are not, however, required to place images in your project file.
The images can be in any place that can be accessed through the
internet, meaning all they need to have is a valid URL. When adding
images that are located in external locations, you need to use the
UrlResourceHandle, as described on page 101.
Static Images Use Workflow
When adding static images or other resources, such as documents, to
VWG projects, you first need to create for them default folders in your
project. After storing the resources in their default folders, you can
add them to VWG controls and applications.
Adding a static image to your VWG application consists of the following
steps:
1. Creating a default storage location for the images in your project.
2. Adding your images to the default storage location.
3. Adding to the form a control that can include an image.
4. Adding an image to the control by using the Image property in the
Properties windows.
-
Defining the Default Location of Images and Other Resources
Working with Images and Other Resources
89
Defining the Default Location of Images and Other
Resources
By default, when you add images to your application through the Form
Designer, the Designer looks for images in the Resources\Images
and Resources\Icons directories, located in the root directory of the
VWG Application project.
Note: The division between the Images and Icons directories is for
organizational purposes only. You can store images and icons in both
directories.
To use VWG default location of images, create the required folders
as described in the following section.
To change VWG default location of images, see page 91.
To create custom folders for other types of resources, see page 96.
Using the Default Location of Static Images
To use the default location of images:
1. To create a storage folder for images, on the Solution Explorer,
right-click your project, and select Add New Folder from the context menu. Then, rename the new folder and call it Resources.
2. Create a sub-folder in the Resources folder, and name it Images:
-
Working with Images and Other Resources
VWG Getting Started Guide 90
3. To add your images to the project, open the Images sub-folder by
right-clicking it, and selecting the Open Folder in Windows
Explorer from the context menu.
Windows Explorer is opened:
4. Add to the Images sub-folder the images you want to incorporate
in your application. Then, close Windows Explorer and return to
Visual Studio.
Note: You can also add your images to the project by pasting
them in the Images sub-folder in the Solution Explorer.
-
Defining the Default Location of Images and Other Resources
Working with Images and Other Resources
91
Changing the Default Location of Images
For organizational purposes, VWG uses by default one folder to store
all the static resources of the application. Therefore, in the following
steps, you are first instructed to create a Resources folder within
your project, to host the new default folder.
To change the default location of images:
1. To create a folder for the new storage location, on the Solution Explorer, right-click your project, select Add New Folder, and name the folder Resources.
Note: You can also use another name for the folder. However,
since the Resources folder is VWG default folder name for storing
resources, it is recommended to use it.
2. Open the Property pages, by right-clicking your project and
selecting Properties from the context menu.
Notes:
To open the Property pages of your project, you can also
perform the following:
C# - Double-click the Properties folder in your project.
VB.NET Double-click the My Project folder in your project.
When using VWG Express Studio for Visual Studio Express and
Visual Web Developer Express, Visual WebGui Integration tabs
are not available on the Property pages. For these versions,
you should manually change the default image location using
the Web.config file, in the Directories section.
The Property pages appear.
-
Working with Images and Other Resources
VWG Getting Started Guide 92
3. On the Property pages, select the General tab on the left to open
it:
The default location of images that can be added to the project is
defined in the Directories section.
Note: The Directories section contains the following items:
Icons - a path that defines the icon directory.
Images - a path that defines the images directory.
Generated - a path that defines the generated resources
directory and is required for using custom controls.
Data a path that defines the data directory which should contain data related files.
4. To change the default location of images, on the Directories
section select the Images row, and click the Browse button on
the right.
-
Defining the Default Location of Images and Other Resources
Working with Images and Other Resources
93
The Browse For Folder dialog box appears:
5. Locate your project folder, and create in the Resources folder a
new default folder for the application images, by using the Make
New Folder button:
Note: Due to security constraints of web applications, this folder
must be located within the project folder, not outside of it.
6. Click OK to save your new folder.
-
Working with Images and Other Resources
VWG Getting Started Guide 94
You return to the General tab, where the new folder you defined
appears in the Directories section:
Note: When entering a location of a folder, it is recommended to
use a relative path within your VWG application folder. This will
prevent unnecessary problems later on, when the application will
be deployed to a Web server.
7. Save and close the Property pages.
8. On to the Solution Explorer, click the Show All Files button to
display the new folder you created:
-
Defining the Default Location of Images and Other Resources
Working with Images and Other Resources
95
9. [Optional] Right-click the new folder, and select Include In
Project from the context menu:
The new folder is now included in the project and it becomes
visible.
10. To add your images to the new folder, copy them from their
current location and past them in the new folder:
-
Working with Images and Other Resources
VWG Getting Started Guide 96
The images you want to add to your VWG application are now
physically located in the new default folder you created. When you
add them to controls using the Image property, they are located in
the Images sub-folder under the Directories folder:
Adding a Custom Folder for Resources
Adding a custom folder for resources that are not images, is done
similarly to the way you create a new default storage location for
images.
Notes:
Creating separate folders for storing different types of resources is
for organizational purposes only. If it better suits your needs, you
can store different types of resources solely on the Images folder.
Using a custom folder for resources requires a custom Gateway to
return the resource content to the browser. Creating a custom
Gateway is a more advanced procedure, and therefore it is not
covered in this Guide.
-
Defining the Default Location of Images and Other Resources
Working with Images and Other Resources
97
To add a custom folder for resources:
1. On the Solution Explorer, create a new sub-folder in the
Resources folder for the resources you want to add to the project:
2. Register the new Resources/Documents folder using