Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version...

193
Getting Started Guide

Transcript of Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version...

Page 1: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Getting Started

Guide

Page 2: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

This documentation and any related computer software help programs (hereinafter referred to as the

“Documentation”) is for the end user’s 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 user’s 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 user’s 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.

Page 3: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 4: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 5: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 6: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 7: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 8: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Introduction

VWG Getting Started Guide 8

VWG

Visual Development

ASP.NET Infrastructure

Web Server

Web Browser

IIS

Page 9: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 10: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 11: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 12: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 13: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 14: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 15: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 16: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 17: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 18: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 19: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 20: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 21: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 22: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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]

Page 23: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 24: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 25: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 26: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 27: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 28: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 29: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 30: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 31: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 32: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 33: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 34: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 35: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 36: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the 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.

Page 37: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 38: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 39: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 40: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 41: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 42: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 43: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 44: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 45: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 46: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 47: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 48: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 49: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 50: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 51: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 52: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 53: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 54: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 55: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 56: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Starting to Work with VWG

VWG Getting Started Guide 56

The selected library is added to the References folder of the

project:

Page 57: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 58: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 59: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 60: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in 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.

Page 61: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 62: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 63: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 64: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 65: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

<Control Type="Gizmox.WebGUI.Forms.*, Gizmox.WebGUI.Forms.Professional,

Version=4.0.5701.0,

Culture=neutral,

PublicKeyToken=6b5c571512bede7c" />

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:

<Control Type="Gizmox.WebGUI.Forms.ExpandableGroupBox,

Gizmox.WebGUI.Forms.Professional, Version=4.0.5701.0, Culture=neutral,

PublicKeyToken=6b5c571512bede7c" />

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

Page 66: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 67: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 68: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 69: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 70: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 71: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 72: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 73: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config 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.

Page 74: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 75: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 76: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 77: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating VWG Application

Creating a Simple VWG Application

77

Your VWG application appears:

Page 78: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 79: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 80: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 81: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 82: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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

Page 83: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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!

Page 84: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 85: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 86: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 87: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 88: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 89: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 90: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 91: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 92: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 93: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 94: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 95: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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:

Page 96: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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.

Page 97: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

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 either the Property pages or the Web.config file, as described on steps ‎2-‎6,

pages 91-93.

3. To locate a resource that is stored in the new custom folder, use

the following:

C#

var Path = Context.Server.MapPath("~/Resources/Documents/Sample.rtf");

// or

var Path2 = VWGContext.Current.Config.GetDirectory("Documents") + "Sample.rtf";

VB.NET

Dim Path As String = Context.Server.MapPath("~/Resources/Documents/Sample.rtf")

' or

Dim Path2 as string = VWGContext.Current.Config.GetDirectory("Documents") +

"Sample.rtf"

Page 98: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Images and Other Resources

VWG Getting Started Guide 98

Adding Static Images to VWG Controls

You can add static images to VWG controls either from the default

Images folder or from an external location:

To add images from the default storage folder in your project, see

the section below.

To add images from an external location, see page 101.

Note: VWG also enables you to add dynamic resources to applications,

meaning resources that are code-based, and whose content is

dynamically generated on the server upon receiving a Gateway

request. However, adding dynamic resources is done using a custom

Gateway and it is a more advanced procedure, and therefore it is not

covered in this Guide.

Adding Images from the Default Storage Folder

Before adding images to VWG controls, make sure that you created for

them a default storage location in your project, and that you saved the

required images in the storage folder.

To add a static image:

1. Open in the Designer View the form to which you want to add an

image. Then, drag onto the form a control that can contain images,

such as the PictureBox control:

Page 99: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Adding Static Images to VWG Controls

Working with Images and Other Resources

99

2. On the Properties window of the control, click the Ellipsis button

next to the Image property:

The Select Resource dialog box opens:

The Images sub-folder displays the images you can add to your

control.

Page 100: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Images and Other Resources

VWG Getting Started Guide 100

3. Select the image you want to add to your control, and click OK.

The image is added to your form:

4. Save the form, and run your project.

The picture you added now appears in your application:

Page 101: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Adding Static Images to VWG Controls

Working with Images and Other Resources

101

Adding Images from an External Location

You can add images to VWG controls from external locations, such as

virtual directories and non-production servers, using the

UrlResourceHandle class. This procedure is done through code.

Notes:

When using the UrlResourceHandle, you need to make sure that

your application has read access to the file in the remote directory.

Images located in a Database can be retrieved using the

DatabaseResourceHandle class.

To add an image from an external location:

1. Open in the Designer View the form to which you want to add an

image. Then, drag onto the form a control that can contain images,

such as the PictureBox control.

2. Now you need to add the picture location using an

InitializeComponent function. In this example, the Form_Load

event is used.

On the Designer View, select the form. Then, on the Properties

window of the form, click the Events button, and double-click

the Load event:

Page 102: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Images and Other Resources

VWG Getting Started Guide 102

The Code Editor is opened:

3. On the Form_Load event handler, enter the following code to add

your image to the control:

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_imag

e.jpg");

}

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_imag

e.jpg");

End Sub

Note: When adding an image from an external location using code,

the image will not be shown in the Designer View.

Page 103: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Adding Static Images to VWG Controls

Working with Images and Other Resources

103

4. Save your project and run it. The image you added appears in your

application:

Page 104: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 104

Chapter 5: Working with Databases

This chapter describes how to use data binding to connect VWG

controls to databases.

Using Data Binding to Connect Databases to VWG Controls

The simplest way to connect a database to VWG control is by using

Data Binding. Data binding is the process that establishes a connection

between the application UI and its business logic. If the binding has

the correct settings and the data provides the proper notifications,

then, when the data changes its value, the elements that are bound to

the data reflect changes automatically.

For more information about data binding, see:

http://msdn.microsoft.com/en-us/library/ms752347.aspx

Binding data to VWG control is done using the DataSource property of

the control. There are several controls that have the DataSource

property:

1. CheckedListBox

2. ComboBox

3. DataGridView

4. ErrorProvider

5. ListBox

6. ListView

7. VirtualDataGridView

When data is bound in the Designer to VWG control using the

DataSource property, a BindingSource object is automatically created.

All VWG controls can access the existing BindingSource objects in the

application, using their DataBindings property. The DataBindings

property enables to bind a property of a control to the property of

existing BindingSource object.

Page 105: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

105

Notes:

The BindingSource object implements a CurrencyManager, which is

designed to keep track of the currently active item from its

underlying DataSource. Only one item from that DataSource is

considered active at any given time. When you data bind a control

property to a property of the BindingSource object, its value will be

the value of the currently active item of the underling DataSource.

The following sections use NorthWind sample database, supplied by

Microsoft. You can download NorthWind database from here:

http://www.microsoft.com/en-us/download/details.aspx?id=23654

To work with the NorthWind sample database, you need either SQL

Server 2000, 2005, or 2008 installed.

Bind Data to a Control

The data binding in VWG is done the same way it is done in desktop

development.

Note: In this section, a data source is bound to a DataGridView

control.

To bind data to a control:

1. On the Solution Explorer, create a new folder called App_Data.

Then, add to it the NORTHWND.MDF database file:

Page 106: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 106

2. Open Form1 in the Designer View.

3. Drag and drop onto the form the control to which you want to bind

data:

Note: In this example, a DataGridView control is being used.

4. Open the Properties window of the control. Then, in the

DataSource property, click the arrow on the right, and then click

the Add Project Data Source link:

Page 107: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

107

The Data Source Configuration Wizard appears:

5. Select Database as the data source type, and click Next.

The Choose a Database Model page appears:

Page 108: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 108

6. Select Dataset as the database model, and click Next.

The Choose Your Data Connection page appears:

7. Click the New Connection button to create a connection to your

database

The Add Connection dialog box appears:

This dialog varies according to the Data Source you select.

Page 109: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

109

8. To select a data source, click the Change button.

The Choose Data Source dialog Box appears:

The Choose Data Source dialog box allows you to select the data

source and provider you want to use for this connection.

9. Select the Data source and Data provider:

Data source- lists the available data sources for the

connection. Select Microsoft SQL Server Database File.

Data provider - lists the available data providers available for

the selected data source. Select .NET Framework Data

Provider for SQL Server.

Always use this selection – when selected, the current

selections for data source and data provider will be the default

for future connections.

10. Click the Continue button.

You return to the Add Connection dialog box.

Page 110: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 110

11. On the Add Connection dialog box, to add your database file,

click the Browse button to open a File dialog box:

12. Select the NORTHWND.MDF database file to add it to your

project, and click the Open button.

You return to the Add Connection dialog box.

13. [Optional] To test the data connection you added, click the Test

Connection button. A connection test is performed, and a

confirmation message appears:

To continue, close the confirmation message.

Page 111: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

111

14. To save your setting, on the Add Connection dialog box, click OK.

You return to the Choose Your Data Connection page:

Note: If the new data connection does not appear the Choose

Your Data Connection page, select it from the drop-down list.

15. Click Next. The Save the Connection String to the Application

Configuration File page appears:

The name that appears here is the connection name that is added

to the Web.config file.

Page 112: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 112

16. Click Next. The Choose Your Database Objects page appears:

The Choose Your Database Objects page displays the tables,

views, stored procedures, and functions that you can include in

your dataset.

17. Select the database objects you want to include in your dataset. By

default, no objects in the database are selected. In this example,

select the Tables and Views check boxes:

Page 113: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

113

18. Click Finish to save your selection and close the wizard.

You can now view the data that you added to your project:

The DataSource property of the control now includes the

DataSet you added:

The database file you selected is now added to your project as

a new data source:

Page 114: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 114

After you build your solution, TableAdapters for the tables and

views you selected are added to the Toolbox:

Page 115: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

115

19. Now you need to add one of the tables to the control.

On the Properties window of the control, click the arrow next to the

DataSource property. Then, from the NORTHWNDDataSet that

appears in the DataSource property, select the table you want to

present:

A BindingSource component is automatically created for the table

you attached to the DataSource, as well as the relevant DataSet

and TableAdapter objects:

Page 116: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 116

20. Now you need to add a Table Adapter to fill in the table with data.

On the Designer View, select the form. Then, on the Properties

window of the form, click the Events button, and register a

Load event to the form:

The Code Editor appears:

Page 117: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Bind Data to a Control

Working with Databases

117

21. On the Code Editor, call the Fill method to fill with values the

relevant DataTables in the DataSet using Table Adapters, as

follows:

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

22. Save the changes you made, and compile and run the application.

The table you added now appears in your VWG application:

Page 118: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 118

Creating a Master/Detail Relationship between Controls

A Master/Detail relationship enables you to display data from related

tables in one page. The master control displays a collection of items in

the form of a table or a list. The detail control displays detailed

information about a specific item within the master collection. When

the user select an individual row or item in the master control, the

details of the selected item are presented in the detail control.

In the following sections, two examples for creating a Master/Detail

relationship are described:

Connecting a ComboBox and TextBox controls in Master/Detail

relationship, see below.

Connecting two DataGridView controls in Master/Detail

relationship, see page 131.

Note: You can also create a Master/Detail relationship between two

tables by using the Hierarchical Grid feature, as described on .NET

HTML5 and Enterprise Mobile - User Guide - Preview Version 0.2.

Connecting a ComboBox and TextBox Controls in Master/Detail Relationship

In this Master/Detail example, a ComboBox control acts as the master

control, while two TextBox controls act as the detail controls. The

master ComboBox displays a list of customer IDs, while the two

TextBoxes display the company name and country of the selected

customer ID:

Page 119: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

119

To connect a ComboBox and TextBox Controls in Master/Detail

relationship:

1. On the Solution Explorer, create a new folder called App_Data.

Then, add to it the NORTHWND.MDF database file:

2. Open Form1 in the Designer View.

3. From the Toolbox, drag and drop onto the form the following:

ComboBox control

Two TextBox controls

Page 120: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 120

4. Open the Properties window of the ComboBox control. Then, in the

DataSource property, click the arrow on the right, and then click

the Add Project Data Source link:

The Data Source Configuration Wizard appears:

Page 121: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

121

5. Select Database as the data source type, and click Next.

The Choose a Database Model page appears:

6. Select Dataset as the database model, and click Next.

The Choose Your Data Connection page appears:

Page 122: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 122

7. Click the New Connection button to create a connection to your

database.

The Add Connection dialog box appears:

8. To select a data source, click the Change button.

The Choose Data Source dialog Box appears:

9. Select the Data source and Data provider:

Data source - select Microsoft SQL Server Database File.

Data provider - select .NET Framework Data Provider for

SQL Server.

Page 123: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

123

10. Click the Continue button.

You return to the Add Connection dialog box.

11. On the Add Connection dialog box, to add your database file,

click the Browse button to open a File dialog box:

12. Select the NORTHWND.MDF database file to add it to your

project, and click the Open button.

You return to the Add Connection dialog box.

Page 124: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 124

13. [Optional] To test the data connection you added, on the Add

Connection dialog box, click the Test Connection button.

14. To save your setting, on the Add Connection dialog box, click OK.

You return to the Choose Your Data Connection page:

15. Click Next. The Save the Connection String to the Application

Configuration File page appears:

The name that appears here is the connection name that is added

to the Web.config file.

Page 125: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

125

16. Click Next. The Choose Your Database Objects page appears:

The Choose Your Database Objects page displays the tables,

views, stored procedures, and functions that you can include in

your dataset.

17. Expand the Tables node and select the Customers table:

Page 126: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 126

18. Click Finish to save your selection and close the wizard.

A bindingSource component is automatically created for the table

you attached to the DataSource, and the value of the

DataSource is bindingSource1:

19. On the Properties window of the ComboBox control, in the

DisplayMamber property, click the arrow on the right, and select

CustomerID:

The CustomerID data items will be displayed in the ComboBox list.

Page 127: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

127

20. Now you need to add a Table Adapter to fill in the list with data.

Open the Properties window of the form. Then, click the Events

button, and register a Load event to the form:

The Code Editor appears:

Page 128: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 128

21. On the Code Editor, call the Fill method to fill with values the

DataTable in the DataSet using a Table Adapter, as follows:

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

22. Return to the Design View, and open the Properties window of the

first TextBox control. Then, open the (DataBindings) property,

click the arrow next to its Text property, and select bindingSource1 CompanyName:

The CompanyName data will be displayed in the first TextBox.

Page 129: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

129

23. Open the Properties window of the second TextBox control. Then,

open the (DataBindings) property, click the arrow next to its Text property, and select bindingSource1 Country:

24. [Optional] Add Label controls above the controls as headings:

Page 130: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 130

25. On the Solution Explorer, right-click Form1, and select Set As

Start Form from the context menu.

26. Save the changes you made, and compile and run the application.

The Master/Detail application appears:

When the user selects a customer ID from the Customer ID

ComboBox, its company name and country appear in the

TextBoxes on the right.

Page 131: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

131

Connecting Two DataGridView Controls in Master/Detail Relationship

In this Master/Detail example, one DataGridView control acts as the

master control, while a second DataGridView control acts as the detail

control. The master DataGridView displays general information about

orders, while the detail DataGridView displays additional details about

these orders:

Note: In this example, another way to connect to databases is

described.

Page 132: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 132

To connect two DataGridView Controls in Master/Detail

relationship:

1. On the Solution Explorer, create a new folder called App_Data.

Then, add to it the NORTHWND.MDF database file:

2. On the Solution Explorer, right-click the project, and select Add

New Item from the context menu.

The Add New Item dialog box appears:

Page 133: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

133

3. On the Installed Templates pane, select Data. Then, on the

middle pane, select DataSet.

4. On the Name box enter: NorthWind.

5. Click the Add button, to add the new DataSet to your project.

The NorthWind DataSet is added to your project:

6. Open the Server Explorer, by opening the View menu, and

selecting the Server Explorer option.

The Server Explorer appears:

Page 134: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 134

7. On the Server Explorer, right-click the Data Connections node,

and select Add Connection from the context menu:

The Add Connection dialog box appears:

8. On the Add Connection dialog box, select the following:

Data source - select Microsoft SQL Server Database File.

Database file name – use the Browse button to locate and

add the NORTHWND.MDF file you stored in the App_Data

folder.

Page 135: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

135

[Optional] Test Connection – click this button to test the

connection to the database.

9. After you created the new database connection, click OK.

The NORTHWND data connection is added to the project, and it

appears on the Server Explorer:

10. On the Solution Explorer, double-click NorthWind.xsd to open its

design surface:

Page 136: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 136

11. On the Server Explorer, expand the NORTHWND\Tables node,

select all the tables, and drag them onto the NorthWind.xsd design

surface:

The tables are displayed on the NorthWind.xsd design surface:

Page 137: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

137

12. Build your solution, by opening the Build menu and selecting the

Build Solution option.

The NorthWind DataSet and TableAdapters are added to the

Toolbox:

13. Open Form1 in the Designer View.

14. From the Toolbox, drag and drop onto the form the following:

NorthWind DataSet

OrdersTableAdapter

Order_DetailsTableAdapter

Page 138: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 138

The selected components are added at the bottom of the form:

15. Register a Load event to the form by double-clicking it.

The Code Editor is opened:

Page 139: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

139

16. On the Form_Load event handler, enter the following code:

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

17. Save your project and return to the Design View.

18. On the Toolbox, open the Data section, and drag and drop onto

the form a BindingSource component:

Page 140: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 140

The BindingSource is added at the bottom of the form:

19. Select bindingSource1 on the form. Then, on its Properties

window, select the following:

In the DataSource property, click the arrow on the right, and

select northWind1:

Page 141: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

141

In the DataMember property, click the arrow on the right, and

select Orders:

20. From the Toolbox, drag a second BindingSource component and

drop it onto the form:

Page 142: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 142

21. Select bindingSource2 on the form. Then, on its Properties

window, select the following:

In the DataSource property, click the arrow on the right, and

select bindingSource1:

In the DataMember property, click the arrow on the right, and

select FK_Order_Details_Order:

Page 143: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

143

Note: The FK_Order_Details_Orders is a foreign key

relationship, which is defined between the two tables inside the

SQL NorthWind database. It was automatically added to your

DataSet when you dragged and dropped the two tables onto

the DataSet design surface.

22. From the Toolbox, drag a DataGridView control and drop it onto

the form:

Page 144: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 144

23. On the Properties window of the DataGridView, in the DataSource

property, click the arrow on the right, and select bindingSource1:

24. On the Properties window of the DataGridView, set the value of the

IsSelectionChangeCritical property to True:

Note: The IsSelectionChangeCritical property informs the client

whether it should treat some subset of its events as critical or not.

If event is considered as not critical, it will enter into the event

queue, and will not be delivered immediately to the server when it

fires.

Page 145: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Creating a Master/Detail Relationship between Controls

Working with Databases

145

25. From the Toolbox, drag a second DataGridView control and drop it

onto the form:

26. On the Properties window of the second DataGridView, in the

DataSource property, click the arrow on the right, and select

bindingSource2:

Page 146: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Working with Databases

VWG Getting Started Guide 146

27. [Optional] Add Label controls above the two DataGridView controls

as headings:

28. On the Solution Explorer, right-click Form1, and select Set As

Start Form from the context menu.

29. Build and run the solution.

The Master/Detail application appears:

When the user selects an item or a row on the Orders table, its

details appear in the Order Details table.

Page 147: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

General Deployment Requirements and Guidelines

Deploying VWG Applications on IIS

147

Chapter 6: Deploying VWG Applications on IIS

This chapter provides you with guidelines and instructions on how to

deploy your VWG application.

General Deployment Requirements and Guidelines

IIS Server Installation

VWG applications are basically ASP.NET applications. Therefore, to

deploy VWG applications, you need to install IIS (Internet Information

Services) with ASP.NET support on your hosting server.

Different deployment settings are required according to the Visual

Studio version you used for development, and the version of IIS

installed on the hosting server.

The following sections describe in brief how to install different versions

of IIS, and provide the requirements for each version installation.

Note: Detailed instructions on the installation of IIS 7.5 on a Windows

2008 R2 server are provided on page 153. You can use these

instructions as guidelines for installing your IIS version.

IIS 5.1 Installation Requirements

IIS 5.1 is commonly running on Windows XP machine.

To install IIS 5.1:

Select Control Panel Add or Remove Programs

Add/Remove Windows Components Internet Information

Services (IIS).

The only required component is the World Wide Web Service.

However, it is recommended to also add the Internet Information

Services Snap-In to administer it.

Page 148: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 148

IIS 6 Installation Requirements

IIS 6 is commonly running on Windows 2003 server.

To install IIS 6:

Select Control Panel Add or Remove Programs

Add/Remove Windows components Application Server

Internet Information Services (IIS).

The only required component is the World Wide Web Service.

However, it is recommended to also add the Internet Information

Services Manager to administer it.

IIS 7.5 Installation Requirements

IIS 7.5 is commonly running on Windows 2008 R2 server or on

Windows 7 workstation.

To install IIS 7.5 on Windows 2008 R2 server:

Select Server Manager Roles Web Server (IIS).

Notes:

On Windows 2008 R2 server, IIS 7.5 has a server role

For step-by-step instructions on the installation process of IIS 7.5

on Windows 2008 R2 server, see page 153.

To install IIS 7.5 on a Windows 7 workstation:

Select Control Panel Programs Programs and Features

Turn Windows features on or off Internet Information

Services.

For both of these platforms, you most likely have to change the

defaults for what will be installed.

The ASP.NET and ISAPI Extensions are required. These

extensions are located in:

Windows 2008 R2 server – Web Server (IIS) Role

Services Web Server Application Development. For more information, see step ‎5, page 155.

Windows 7 workstation – Turn Windows features on or off - Internet Information Services World Wide Web

Services Application Development Features.

Select the management tools options in the Web Management

Tools section, to administer IIS.

Page 149: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

General Deployment Requirements and Guidelines

Deploying VWG Applications on IIS

149

IIS Server and VWG SDK Framework

It is recommended NOT to install VWG framework SDK on the IIS

server. This may cause conflicts and problems if you are running more

than one VWG application on that server.

ASP.NET Framework Version

Before VWG application can be successfully deployed to IIS server, the

required framework version of ASP.NET must be installed on that

server, and to be fully registered with IIS.

The following ASP.NET frameworks are required:

For Visual Studio 2005 (which requires VWG .NET 2.0) and

Visual Studio 2008 (which requires VWG .NET 3.5) - use

ASP.NET 2.0 framework.

Notes:

These VWG versions will not run on ASP.NET 4.0 framework.

ASP.NET 2.0 is included in the Microsoft .NET 2.0 framework

installation.

For Visual Studio 2010 (which requires VWG .NET 4.0) - use

ASP.NET 4.0.

Notes:

VWG .NET 4.0 will not run on ASP.NET 2.0.

ASP.NET 4.0 is included in the Microsoft .NET 4.0 framework

installation.

If the required ASP.NET framework is either not installed on the

server, or is installed on the server but not correctly registered with

IIS, you will not be able to properly set your application or application

pool. In that case, you may need to install the required framework

and/or to run the aspnet_regiis.exe application to correctly register it.

For more information about your IIS and ASP.NET framework version,

consult MSDN documentation.

Page 150: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 150

Deployment Method

Visual Studio offers an automatic deployment capability. This

automatic deployment procedure copies certain folders and files from

your project folder to the application virtual folder in IIS directory.

However, this automatic deployment operation may leave out files or

folders that are required for your application, and their lack will

prevent you from successfully run your VWG application. Therefore, it

is recommended to perform the deployment steps manually as

described in this Guide, at least when you deploy your VWG

application for the first time.

Deployment Location on IIS

The default folder of IIS server is c:\inetpub.

Each IIS server has one or more Web Sites. Each Web Site has a

separate folder on c:\inetpub, and multiple virtual folders and/or

multiple Web applications can be included in it.

The default Web Site, which is installed with every new installation of

IIS, is c:\inetpub\wwwroot folder.

Before you manually deploy a Web application to the default Web Site

(or any other Web Site on your server), you need to create a new

folder inside the Web Site folder, on c:\inetpub\wwwroot.

This new folder will be the root folder of your VWG Web application, to

which you copy the required deployment contents. After your

application root folder has been created, you will convert it to a Web

application.

Notes:

To create a new folder on IIS for your VWG application, see page

156.

To convert your VWG folder into a Web application, see page 173.

The name you give to your Web application will determine the URL you

will use when accessing it. The URL for your VWG application,

assuming you are using localhost, will be

http://localhost/yourapplication/yourform.wgx

Page 151: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

General Deployment Requirements and Guidelines

Deploying VWG Applications on IIS

151

Deployment Contents

To deploy your VWG application, you need to copy some of its

contents to the root folder of your application on IIS. This folder will be

c:\inetpub\wwwroot\yourApplication.

Depending on the contents of your VWG application, you need to copy

to IIS the following:

[Mandatory for all VWG applications] bin folder (without the *.pdb

and *.xml files) and Web.config file

Resources folder

*.aspx and *.asax files

Additional folders and files

Notes:

If your VWG application does not include Resource folders (images,

icons or other data), *.aspx and *.asax files, or any other unique

folders and files, all you need to copy to IIS is the bin folder and

Web.config file.

If your application uses .aspx pages or has a global application

class (Global.asax), you need to copy the aspx file to the root

folder as well. This means that you only copy the *.aspx and

*.asax files, not the designer files.

If there are any other files or folders that need to be present on

your application root folder at runtime, you need to copy those as

well. That includes any html files as well as any specific files or

folders your application requires to be present (such as the

App_Data folder).

Using *.wgx as an Extension

By default, VWG applications use the *.wgx extension. The instructions

in this Guide assume you use this extension when deploying to IIS.

However, using *.wgx as an extension is not mandatory, and you can

change it and use another extension. Since this is a more advanced

procedure, the use of a different extension is not covered in this

Guide.

Page 152: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 152

VWG Application Deployment Workflow

After creating VWG application using Visual Studio, you can deploy it

to IIS. For a successful deployment, first you need to install IIS with

ASP.NET support. Then, you need to set the following configurations

on IIS:

1. Create a Web application for VWG project on IIS, see page 156.

2. Copy required folders and files from your VWG project to the Web application folder on IIS, see step ‎2, page 157

3. Create an application pool for VWG applications, see page 158.

4. Configure handler mappings, see page 162.

5. [Optional - for a deployment machine that has a 64bit operating

system] Enable 32bit applications to run from IIS, see page 171.

6. Convert your VWG folder into a Web application and set its

application pool, see page 173.

Deploying VWG Application using IIS 7.5 on Windows 2008

R2 Server

The following instructions describe how to install IIS 7.5 on Windows

2008 R2 server, how to configure IIS 7.5, and how to perform all the

necessary steps for VWG application deployment.

These instructions assume that you have already created VWG

application using Visual Studio, and that this application includes a

Resources folder, but no other extra files or folders that need to be

deployed. The instructions also assume that you will use the *.wgx

extension for the deployed application, and that Form1.wgx is your

Start Form.

Note: You can use these instructions as guidelines for working with

other IIS versions.

Page 153: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

153

Installing IIS 7.5 on Windows 2008 R2 Server

To install IIS 7.5 on Windows 2008 R2 Server:

Note: On Windows 2008 R2 server, IIS 7.5 has a server role.

1. Select Start Administrative Tools Server Manager.

2. In the Server Manager, right-click Roles, and select Add Roles.

The Add Roles Wizard appears:

3. On the Roles pane, select the Web Server (IIS) check box, and

click Next.

Page 154: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 154

The Web Server (IIS) page appears:

4. On the Web Server (IIS) page, click the Role Services link on

the left pane.

The Select Role Services page appears:

Page 155: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

155

5. On the Role Services pane, open the Web Server

Application Development section, and select the ASP.NET and

ISAPI Extensions check boxes. These options are required for

VWG applications.

6. [Optional] If you want to manage IIS locally from your machine, in

the Web Management Tools section, select the IIS

Management Console check box.

Note: This Guide assumes that you are using the IIS

Management Console.

7. [Optional] Add additional Role Services according to your needs.

Note: For more information about Role Services in IIS7.5 see:

http://technet.microsoft.com/en-us/library/cc753473.aspx

8. Click Next.

The Confirm Installation Selections page appears:

9. Click the Install button to start installing IIS 7.5, and follow the

wizard steps until the end of the installation.

After the installation is completed, you can start the VWG

deployment procedure, as described in the following sections.

Page 156: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 156

Creating a Web Application for VWG Project on IIS

To deploy VWG project you created in Visual Studio, you need to add it

to an application that is located on IIS. You can either create a new

application or use an existing one. This section describes how to create

a new Web application for your VWG project.

To create a Web Application for VWG Project on IIS:

1. Using Windows Explorer, create a new folder called VWGApp in

c:\inetpub\wwwroot:

Page 157: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

157

2. Locate your VWG project folder, and copy the bin and Resources

folders, as well as the Web.config file to

c:\inetpub\wwwroot\VWGApp folder:

At this point you have actually deployed your VWG application to

IIS, but you need to configure it on IIS before it can be used. The

next step is creating an application pool for your VWG application.

Page 158: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 158

Creating an Application Pool for VWG Applications

You can either create a new application pool for your VWG application

or configure an existing one. This section describes how to create a

new application pool for your VWG project.

To create an application pool:

1. Open IIS Manager.

Note: IIS Manager is usually located in the Control Panel –

System and Security - Administrative Tools:

Page 159: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

159

IIS Manager is opened:

2. Now you can start creating a new application pool for your VWG

application.

On the Connections pane on the left, expand the server node and

select the Application Pools node. Then, on the Actions pane on

the right, click the Add Application Pool link:

Page 160: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 160

Note: You can also right-click the Application Pool node on the

Connections pane, and select Add Application Pool from the

context menu.

The Add Application Pool dialog box appears:

3. Configure the new application pool as follows:

Name - You can give the application pool any legal name you

choose. In this case, call the new application pool:

VWGAppPool.

.NET Framework version – Select the appropriate .NET

Framework version:

If you built your application using Visual Studio 2005 or

2008, select .NET Framework v2.0.50727.

If you built your application using Visual Studio 2010, select

.NET Framework v4.0.30319.

Note: If the required ASP.NET framework has not been

installed on the server or has not been registered with IIS, it

will not appear in the drop-down list. In that case, you need to

install it on the server and register it with IIS according to the

IIS documentation on MSDN.

Managed pipeline mode – By default, VWG application

requires the use of Classic mode.

Note: In order to use Integrated mode pipeline, you need to

adjust the settings in your Web.config file. This procedure is not

described in this Guide.

Page 161: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

161

Your Add Application Pool dialog box should look similar to the

following:

4. On the Add Application Pool dialog box, click OK to create a new

application pool.

The new application pool is created, and it appears in the

Application Pools pane:

Page 162: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 162

Configuring Handler Mappings on IIS

Handler Mapping Guidelines

To deploy VWG application, you need to set Handler Mappings for the

*.wgx extension.

Handler mappings are inherited within the IIS Web Site folder

structure. This means that if you add handler mappings for *.wgx on

the Default Web Site, they will be inherited by your new VWGApp

application. Therefore, you can set the handler mappings at the level

of the VWG application, but it is recommended to set the handler

mappings at a higher level.

When creating a new handler mapping, you need an Executable. An

Executable is a full path and filename to a specific DLL assembly. The

assembly path and filename depend on the .NET Framework version,

and on the bit version of the Web server - either 32bit or 64bit.

To select the appropriate handler mapping according to the bit version

of the Web server, follow these guidelines:

For 32bit Web server – a handler mapping for the .NET framework

version you selected for your application pool only.

For 64bit Web server - handler mappings for both 32bit and 64bit,

for the .NET framework version you selected for your application

pool. Although you do not need both 32bit and 64bit for every

application, it is recommended to add handler mappings for both of

them.

For applications in mixed versions of the .NET framework (when

some applications were built in Visual Studio 2008 while others in

Visual Studio 2010) - it is recommended to add a total of 4 handler

mappings: 32bit and 64bit for the .NET framework 2.x, and 32bit

and 64bit for the .NET framework 4.x.

The Executables you need for each .NET framework version are as

follows:

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

Page 163: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

163

VisualWebGui_x64_.NET4.0 -

C:\Windows\Microsoft.NET\Framework64\v4.0.30319\asp

net_isapi.dll

The easiest way to obtain information on the required Executable from

within IIS, is to use the setup for a standard extension that is already

in place. The most common extension for gathering this information is

the *.ashx extension.

On a standard 64bit IIS server, you can use the following *.ashx

handler mappings:

For VWG 32bit .NET framework 4.0 – *.wgx, with

SimpleHandlerFactory-ISAPI-4.0_32bit Executable.

For VWG 64bit .NET framework 4.0 - *.wgx, with

PageHandlerFactory-ISAPI-4.0_64bit Executable.

For VWG 32bit .NET framework 2.0 - *.wgx, with

SimpleHandlerFactory-ISAPI-2.0 Executable.

For VWG 64bit .NET framework 2.0 - *.wgx, with

PageHandlerFactory-ISAPI-2.0-64bit Executable

Page 164: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 164

Setting Handler Mapping for VWG Applications on IIS

To set handler mappings for VWG application on IIS:

1. On the Connections pane on the left, select the node for which

you want to set the handler mappings. You can select either

VWGApp or a higher node.

2. On the IIS section in the middle pane, double-click the Handler

Mappings option:

The Handler Mappings pane appears:

Page 165: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

165

3. To set a handler mapping for VWG .NET 4.0 32bit, right-click the

SimpleHandlerRFactory-ISAPI-4.0_32bit handler, and select

Edit from the context menu:

The Edit Script Map dialog box appears:

Page 166: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 166

4. On the Edit Script Map dialog box, copy the content of the

Executable box to the clipboard. Then, click OK to close the dialog

box.

You return to the IIS Manager.

5. On the Actions pane on the right, click the Add Script Map

option:

The Add Script Map dialog box appears:

Page 167: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

167

6. Fill in the Add Scrip Map dialog box as follows:

Request path – enter *.wgx.

Executable – paste the Executable you copied from the Edit

Script Map dialog box.

Name – enter a name for the new handler.

Your Add Script Map dialog box should look similar to the

following:

7. On the Add Script Map dialog box, click the Request

Restrictions button.

The Request Restrictions dialog box appears:

Page 168: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 168

8. On the Mapping tab, verify that the Invoke handler only if

request is mapped to: check box is NOT selected.

9. On the Verbs tab, verify that the All verbs option is selected:

10. On the Access Tab, verify that the Script option is selected:

Page 169: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

169

11. On the Request Restrictions dialog box, click OK to save your

settings.

You return to the Add Script Map dialog box.

12. On the Add Script Map dialog box, click OK to save your new

settings.

A confirmation message appears, asking you to confirm the new

handler mapping:

13. On the Add Script Map message box, click Yes to add the new

handler mapping.

Your new handler mapping appears in the Handler Mappings

pane:

Page 170: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 170

14. Repeat steps ‎3-‎12 to set other handler mappings for each .NET

framework version and bit version that you want to support:

For VWG 64bit .NET framework 4.0 - *.wgx, with

PageHandlerFactory-ISAPI-4.0_64bit Executable.

For VWG 32bit .NET framework 2.0 - *.wgx, with

SimpleHandlerFactory-ISAPI-2.0 Executable.

For VWG 64bit .NET framework 2.0 - *.wgx, using

PageHandlerFactory-ISAPI-2.0-64bit Executable.

The handler mappings you created appear in the Handler

Mappings pane:

The handler mappings for IIS 7.5 are ready, and you can now

proceed to the next step of the deployment procedure.

Page 171: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

171

Enabling 32Bit Applications

Note: This section is relevant only for a deployment machine that has

64bit operating system.

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. For example, if you built your

application for x86, you need to enable 32bit. If you are using

components that do not work on 64bit, you need to enable 32bit as

well.

Note: If you are using VWG 6.3x version, you must enable 32bit

applications.

To enable 32bit applications:

1. On the Connections pane on the left, select the Application

Pools node.

The Application Pools pane appears:

Page 172: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 172

2. On the Application Pools pane, right-click the VWGAppPool you

created, and select Advanced Settings from the context menu:

The Advanced Settings dialog box appears:

3. Change the value of the Enable 32-Bit Applications property to

True. Then, click OK to save your setting.

Page 173: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

173

Converting your VWG Folder into a Web Application

At this stage, your VWG project is located in a simple virtual folder on

IIS, and it is not yet a Web application, as the folder icon indicates:

You now need to convert your VWG folder into a Web application, and

to set the proper application pool for the application.

To convert your VWG Folder into a Web application:

1. On the Connections pane, right-click the VWG folder, and select

Convert to Application from the context menu:

Page 174: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 174

The Add Application dialog box appears:

2. To set the application pool of the VWG Web application, on the Add

Application dialog box, click the Select button next to the

Application pool box.

The Select Application Pool dialog box appears:

3. Open the Application pool drop-down list, and select

VWGAppPool:

Page 175: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

175

4. On the Select Application Pool dialog box, click OK.

You return to the Add Application dialog box.

5. On the Add Application dialog box, click OK.

The dialog box is closed, and the icon of VWGApp changes,

indicating that now it is a Web application:

Page 176: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Applications on IIS

VWG Getting Started Guide 176

Running VWG Application from IIS

When you run your VWG from IIS, you need to manually add the

name of your Start Form to the URL in the browser. Alternatively, you

can directly enter the full URL of your application into the browser to

view your deployed application.

Note: Using a more advanced procedure, you can run your deployed

VWG application from IIS, without manually adding the Start Form

name. However, this procedure is not covered in this Guide.

To run your VWG from IIS:

On the Connections pane, right-click the VWGApp application, and select Manage Application Browse:

Your default browser appears.

At the end of the URL in the Address Bar, add the name of your

Start Form: Form1.wgx.

- or

Enter the following URL in the Address Bar of your browser:

http://localhost/VWGApp/Form1.wgx

Page 177: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application using IIS 7.5 on Windows 2008 R2 Server

Deploying VWG Applications on IIS

177

Your deployed VWG application appears in the browser:

Page 178: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 178

Chapter 7: Troubleshooting

This chapter describes common problems and provides solutions for

them.

Clearing the Cache of VWG Applications

It is recommended to clear the cache from time to time. Clearing the

cache is especially important after you install a new or a different

version of VWG on your workstation. To solve caching issues, perform

the following procedures.

Clearing the Cache on the Development Workstation

To clear the cache on the development workstation:

1. If Visual Studio is open, close it.

2. Delete your browser cache, as described on Clearing the Cache on

the Client, page 183.

3. Close all running Microsoft Web Server instances on your machine,

including MS Visual Studio Web Servers.

4. Remove the server cache for both MS Visual Studio Web Servers

and MS IIS Server as follows:

Go to:

For applications using ASP.NET 4.0:

C:\WINDOWS\Microsoft.NET\Framework\v4.0.xxxxx\Tempo

rary ASP.NET Files

For applications using ASP.NET 2.0:

C:\Windows\Microsoft.NET\Framework\v2.0.50727\Tempor

ary ASP.NET Files

Delete the content of the Temporary ASP.NET Files folder.

Note: For Vista/Win7 and Visual Studio Development Server this

directory might be different. If you do not find the above path, go

to: c:\users\<username>i\AppData\local\temp\Temporary

ASP.NET Files

5. Open your application in Visual Studio.

6. Delete the obj and bin folders.

Note: [for versions prior to 6.4 only] If Silverlight is deployed,

delete the ClientBin folder as well.

Page 179: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Clearing the Cache of VWG Applications

Troubleshooting

179

7. Remove the existing references to Gizmox assemblies.

8. Add again references to the required Gizmox assemblies.

Note: These steps are designed to verify that the correct version

of assemblies is referenced, and that the assemblies are referenced

from the correct location.

9. Verify that the Copy Local property of all Gizmox assemblies is set

to True:

10. Temporarily disable the caching of the application.

To disable the caching, open the Property pages of the VWG

project. On the General tab, select the Disable Caching check

box:

Page 180: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 180

Important! If this is a production application, remember to

restore the original setting and clear the Disable Caching check

box after you complete the cache clearing process.

Note: You can also configure 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

11. Increase the number of the Private Version of the project.

The Private Version is a version number that VWG uses for various

dynamic and caching data. You can solve many caching problems

by increasing this Private Version number, and rebuilding your

application afterwards. It is not important what number you use,

as long as you are only using it once. Therefore, it is best practice

to increase the version number by one, every time you change it.

When installing a new or a different version of VWG, it is

recommended to increase the Private Version number of your

project as part of your upgrade process.

Increasing the Private Version number produces, among others,

the following results:

It eliminates the relevance of previous client cache.

It eliminates the relevance of previous server cached DLLs.

It eliminates all cached static resources on the virtual directory.

It eliminates all saved dynamic resources on the virtual

directory. Without the Private Version change, these resources

can be removed only by manual deletion, which requires the

shutting down of the server.

Page 181: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Clearing the Cache of VWG Applications

Troubleshooting

181

To increase the number of the Private Version, open the Property

pages of the VWG project. On the General tab, in the Private

Version box, increase the displayed number by one:

Note: You can also increase the number of the Private Version in

the Web.config file:

<WebGUI>

<PrivateVersion Value="1" />

</WebGUI>

12. Clean your solution.

13. Rebuild your solution.

14. If you have a route directory in the root directory of your project,

delete it.

Note: The route directory usually appears in older VWG versions

following the use of the StaticResources property. The

StaticResources is obsolete starting with version 6.4.

15. Delete cached files from various caching locations of Visual Studio.

Visual Studio caches projects on different locations on your

development machine. In extreme cases, this caching may cause

problems. To solve these problems, delete all the files that are in

the caching locations. Before deleting the files, close all running

Visual Studio instances.

Page 182: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 182

Visual Studio caching locations are as follows:

C:\Users\<YourUserName>\AppData\Local\Microsoft\VisualStu

dio\10.0\ProjectAssemblies

C:\Users\<YourUserName>\AppData\Local\Microsoft\WebsiteC

ache

C:\Users\<YourUserName>\AppData\Local\Temp

Notes:

These locations are specific to Window7 operating system, but

similar locations can be located on XP operating systems.

The "10.0" in the path(s) above is for Visual Studio 2010. For

Visual Studio 2008 use "9.0", and for Visual Studio 2005 use

"8.0".

Clearing the Cache on the Deployment Web Server

After clearing the cache on your development machine and deploying

your application to the Web Server, you should verify that all required

DLLs are up to date on the Web Server. Then, if you still have caching

problems, you can perform the following steps to completely clear the

cache on the dedicated Web Server.

To clear the cache on the Deployment Web Server:

1. Shut down IIS, if it is running. This is an extreme step and is not

always feasible. If you cannot stop IIS, you might be unable to

delete some locked files in later steps.

2. Remove the cached assemblies as follows:

Delete the content of the Temporary ASP.NET Files folder

on:

For applications using ASP.NET 4.0:

C:\WINDOWS\Microsoft.NET\Framework\v4.0.xxxxx\Tempo

rary ASP.NET Files

For applications using ASP.NET 2.0:

C:\WINDOWS\Microsoft.NET\Framework\v2.0.xxxxx\Tempo

rary ASP.NET Files

Delete all VWG assemblies (Gizmox.WebGUI.*.dll) from the bin

folder of your application on:

C:\inetpub\wwwroot\YourApplication\bin

3. Increase the Private Version number of the VWG project by using

the Web.config file.

Note: For more information about the Private Version number, see step ‎11, page 180.

Page 183: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Clearing the Cache of VWG Applications

Troubleshooting

183

4. If you have a route directory in the root directory of your project,

delete it.

Note: The route directory usually appears in older VWG versions

following the use of the StaticResources property. The

StaticResources is obsolete starting with version 6.4.

5. Restart IIS, if you stopped it on step 1.

Clearing the Cache on the Clients

To clear the cache of the client browsers:

Note: You can press the Shift+Ctrl+Del keys in all the browsers

mentioned below, to directly open the dialog boxes that enable you to

clear the cache.

IE:

1. Open the Tools menu, and select the Delete browsing

history option.

The Delete Browsing History dialog box appears:

Page 184: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 184

2. To clear the cache, select the Temporary Internet Files check

box, and click the Delete button.

Your cache is cleared, and the Delete Browsing History

dialog box is closed.

FireFox:

1. Open the Tools menu, and select the Options option.

The Options dialog box opens.

2. On the Options dialog box, click the Privacy option on the

Ribbon bar.

The Privacy pane opens:

3. Click the Clear your recent history link.

Page 185: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Clearing the Cache of VWG Applications

Troubleshooting

185

The Clear Recent History dialog box appears:

4. Use the Time range to clear drop-down list at the top of the

dialog box, to select the amount of data you want to delete.

Select the Everything option to delete everything.

5. Select the check box of the Cache option, and click the Clear

Now button.

Note: You do not have to select other items for clearing.

Your cache is cleared, and the Clear Recent History dialog

box is closed.

6. On the Options dialog box, click OK to close it.

Page 186: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 186

Chrome:

1. Click the Customize and control Google Chrome button on

the browser toolbar.

2. Select Tools Clear browsing data.

The Clear Browsing Data dialog box appears:

3. Use the drop-down list at the top of the dialog box, to select

the amount of data you want to delete. Select the beginning

of time option to delete everything.

4. Select the Empty the cache check box.

Note: You do not have to select other items for clearing.

5. Click the Clear browsing data button to clear the cache.

Your cache is cleared, and the Clear Browsing Data dialog

box is closed.

Page 187: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Running VWG Application

Troubleshooting

187

Running VWG Application

When you run VWG application, several common errors may appear,

as described in the following sections.

Error: Directory Listing appears instead of a Form

Problem

When you run VWG application, you get a Directory Listing in your

browser instead of VWG form:

If you are running your application from IIS server, you can also get

an Access Denied error.

Possible Cause

No form in the application was set as a Start Form, and therefore there

is no URL entry point to the application.

Solution

Development Workstation - Visual Studio: Set one of the

forms in your application as a Start Form, as described on Defining

a Form as the Entry Point of the Application, page 34.

Deployment Web Server – IIS: If your application is already

deployed to IIS server, you need to add the Start Form name to

the URL on the Address Bar when you access the application.

For example: http://yoursite/form1.wgx

Page 188: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 188

Error: Could not resolve skin resource of type 'ImageResource'

Problem

When you run VWG app, an error message appears in your browser

stating - "Could not resolve skin resource of type

'ImageResource'":

Possible Causes

There can be many reasons for this error. The most common ones are:

Missing assembly

Wrong assembly version

Caching issues

Page 189: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Running VWG Application

Troubleshooting

189

Solution

To troubleshoot, perform one or all of the following steps:

1. Verify you have referenced Gizmox.WebGUI.Forms.Themes

assembly to your project. Then, verify that the assembly exists in

the bin folder of your application virtual folder (either under your

project folder in Visual Studio, or on IIS virtual folder).

2. Remove the existing references to Gizmox assemblies.

3. Add again references to the required Gizmox assemblies.

Note: These steps are designed to verify that the correct version

of assemblies is referenced, and that the assemblies are referenced

from the correct location.

4. Verify that the Copy Local property of all Gizmox assemblies is set

to True.

5. Verify that every Gizmox assembly (.DLL file) that is referenced in

your project does exist on your application bin folder, and that it is

the correct version of the file.

6. Clear the cache by increasing by one the value of the Private Version number, as described on step ‎11, page 180 .

Page 190: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 190

Error: The resource cannot be found

Problem

When you enter a URL of VWG application in the browser Address bar,

an error message appears in the browser stating - "The resource

cannot be found":

Possible Cause

The form that serves as the entry point to the application is not

registered.

Solution

Every entry point (MainForm) to your VWG application needs to be

registered in the Web.config file, within the Applications section:

<Applications>

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

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

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

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

</Applications>

This means that if you access your application using

http://yoursite/Form2.wgx, then Form2 must be registered in the

Web.config file.

Page 191: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Running VWG Application

Troubleshooting

191

Error: The Control is not registered

Problem

When you run VWG application, an error message appears in your

browser stating - "The Control is not registered:

[control_name]":

Possible Cause

Your application contains an unregistered control, either a custom

control or VWG control that requires registration (such as Extended or

Office controls). The name of the unregistered control appears in the

error message.

Solution

Register the control whose name appears in the error message, as

described on Registering New Controls, page 59.

Page 192: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Troubleshooting

VWG Getting Started Guide 192

Deploying VWG Application

After deploying your VWG application to IIS, several common errors

may appear, as described in the following sections.

Error: The resource you are looking for has been removed, had its name

changed, or is temporarily unavailable

Problem

When you run VWG application from IIS, an error message appears

stating - The resource you are looking for has been removed,

had its name changed, or is temporarily unavailable:

Possible Causes

The form that serves as the entry point to the application is not

registered.

There is no handler mapping for the extension, or the .NET and bit

(32bit/64bit) versions you are using.

Solution

Register the form that serves as the entry point to the application

in the Web.config file, as described on page 190.

Add a handler mapping for the extension you are using, as

described on Configuring Handler Mappings on IIS, page 162.

Page 193: Getting Started Guide - Amazon S3€¦ · VWG Getting Started Guide 3 ... ASP.NET Framework Version ... the integration tabs can also be defined manually in the Web.config file.

Deploying VWG Application

Troubleshooting

193

Unexpected JavaScript Errors

Problem

JavaScript errors appear when you are trying to run your VWG

application.

Possible Cause

Web applications require that the browser will always have the most

recent version of any resource. However, there are many places within

Visual Studio, your Web Server, and your browser that store caching

information, which prevents the resource update. The absence of the

most up-to-date resources, may cause unexpected errors.

Solution

Clear the cache, as described on Clearing the Cache of VWG

Applications, page 178.