This article should give you a general idea how to set up your environment for developing and deploying a Visual WebGui Silverlight application. From Visual WebGui version 6.2 the development experience of Silverlight has changed a bit.

The first thing you should do is make sure that you have Microsoft Visual Studio 2005 or 2008 installed (in order to be able to customize themes and control’s XAML, you will need Visual Studio 2008).

Since you will be using MS Silverlight 3.0, you need to know that Microsoft states very clearly that beginning with this Silverlight version, two or more versions of Silverlight installed on one machine will make Silverlight completely unusable on that machine.
As a result, you need to make sure you remove all previous versions of MS Silverlight from your machine.

Before installing the VWG framework on your machine:
You will need to first download and install the following components, in the order that they are located in the following list:

* If you have MS Visual Studio 2008 installed and don’t have Service Pack 1 on it, you will need to download and install it from here.
* Download and install the ‘Silverlight 3 Beta Tools for Visual Studio ’ from here. This installation is for Visual Studio 2008 only.
* Download and install the ‘Silverlight Toolkit ’ from here.
* If you do not have the ‘MS Expression Blend ’ for MS Silverlight 3.0 you can download and install it from here.

This component is optional. You only need it if you want to be able to create new or edit existing XAML with this graphical design tool.
 

Now that we have our VWG application let’s open Form1 in design mode and add a few controls.

First add a toolbar docked to the top.

Next I’ve added a Resources folder and Images to the solution and use them for the toolbar buttons.

Add a few buttons to the toolbar by clicking the buttons property in the control Properties window and set the button Image property to one of the images we added.

Let’s add few more controls just that our demo application will have some context.

Now let’s run our application and see the result.
From version 6.2 Visual WebGui is fully integrated into Visual Studio. This integration gives you a very easy to use application configuration interface. You can read more about it here.
Let’s enable the integration between VWG and VS. Right click on the project and select “Enable Visual WebGui”.

Let’s select the starting form of our application right click on Form1.cs and select “Set As Start Form” this will set the form as the main form and the starting point of the application much like the Main form in Winforms.

Now to make sure that our application will run as a Silverlight application. Open the project property page in the Deployment section. In this section you can select what presentation layers will be created for the application the default is just DHTML.

Beginning with VWG v6.3.9 and VWG v6.4 Preview2 you can specify the MS Silverlight run-time version you want to support.
The VWG Silverlight extension can only support one MS Silverlight run-time version at a time, so you should always update your application’s SL runtime to the latest released one.

Let’s mark Silverlight as a valid presentation layer. This action will add the Server Silverlight assembly to our project and will generate the necessary XAP file that holds the Silverlight and VWG assemblies that need to be download to the client.

Visual WebGui uses a WGX extension to route the requests to the VWG server and the SWGX extension to the VWG Silverlight server. You can customize the extension that you want to use in the Deployment section and later on set this extension in the IIS (We will see this later on).

We will leave the default extension and just update the starting form to start with the SWGX extension because we want to see the application as a Silverlight application. Open the project property page in the Web section and set the start page to start with Form1.swgx instead of starting with Form1.wgx and run our application .

Now that we have our application let’s look in to the packager that creates the XAP file. This file contains the compressed client side assemblies and resources of a Silverlight application. This file is downloaded to the client and runs the application

The XAP file is generated automatically and by default contains six files as described in the app manifest file.

If you open the property page Deployment section you can edit the XAP file structure of your application. Click the advanced button to see XAP package creator.
The default XAP (the orange folder) holds basic Silverlight and VWG Silverlight assemblies. It’s recommended not to remove these files as they are needed to start the application.

To the default XAP the packager will add any theme DLL that is declared in the registration section as a Silverlight Theme assembly.

If you use in your application controls that are not part of the fifty out of the box controls that come with Visual WebGui you need to register them in the registration section like this.

The packager allows you to create more XAP folders. This allows you to create an incremental download of the application DLL’s. Instead of downloading all the application you can download all the necessary DLL according to stages in the application. In the control registration I've added registration to controls from the Gizmox.WebGUI.Forms.Office assembly. Let’s add another form and add the Ribbon bar control to it.

This form will be only if the user clicks button2 in form1.

This means that there is no need to this assembly unless the users does a specific action. Therefore I will place the assembly not in the default XAP but in a secondary XAP file that I will add by clicking the add button in the packager tool. This XAP file will be downloaded only if the user opens form2.

Once we have our application ready we need to deploy it to the server. Open the folder containing the project and select the Bin folder, Client Bin folder and Web.Config file. These are the only files that we need to deploy the application (If you have resources you should add them too).

Once you uploaded the files to the server open the Internet Information Services (IIS).

Create a folder under the root directory and place those files in there.

In the IIS right click on the folder and open the folder’s properties. Click on create button and create a new Virtual Directory

Treat the site as a regular ASP.NET site.

Now we need to register the Visual WebGui extensions under the default site in the IIS. Right click on the default site and click on properties. Go to the “Home Directory” tab and click on Configuration.

In the application configuration click edit on the .aspx extension and copy the path from the executable textbox. Click the cancel button to close the edit window..

Now click on the Add button to add a new extension. In the executable textbox paste the path that we just copied from the aspx extension and in the Extension text box enter .wgx (don't miss the dot before WGX it’s there for a reason). Last uncheck the Verify that file exists check box. And do the same with the Visual WebGui Silverlight extension .swgx (same here the dot is needed).

If you are asked to apply the extensions on other virtual directories select all and click OK.

This would be a good place to mention that Silverlight applications require that the .XAP file will be registered.
Right-click on the computer name and select Properties. Click on the MIME-Types button to open the list of registered files extensions. Click on the New button to add the MIME-Type if it’s missing. For file extension use .XAP and for the MIME-Type use application/x-silverlight.

Now we can run the application.

We have learned in this article how to create a basic Visual WebGui Silverlight application.
We have seen how to use the application configuration such as the registration of controls and themes and how to configure the application package (XAP) structure.
And finally we’ve seen how to deploy or Visual WebGui Silverlight application to the server and how to configure the IIS.

-- Eyal Albert @ Eyal.Albert (at) Gizmox.com