How to distribute a Silverlight OOB Application?

Table of Contents

• Introduction
• Background
• Step1 : Creating a Silverlight OOB Application
  • Creating a Project
  • Configuring OOB Settings
  • Publishing Application as .XAP
• Step2 : Configuring CD-ROM Installation
  • Basic to Silverlight OOB Installation
  • Basic to Silverlight OOB Silent Installation
  • Basic to HTA File
  • Creating the Folder Structure
  • Configuring Silverlight Runtime Detection
  • Configuring OOB Application Installation
  • Configuring CD-ROM Installation Launch
• Step3 : Demo
• Summary

Introduction

One of the new features introduced in Silverlight 4 is the silent installation of Silverlight Out-of-Browser application. This means, without user intervention, you can directly install them to their machines. You don’t have to open the browser window to install the OOB app. This is perfect for CD-ROM distribution. You can even automate the process from the CD/DVD media; if the user already has permission to auto run external media.

Here in this article, I will first create a simple OOB Silverlight application and then show you the steps to install it as OOB application silently.

Step1 : Creating a Silverlight OOB Application

In this first step, we will first create a Silverlight Application and design the UI. As our goal in this article is to deploying the application as OOB, hence we will not focus deeply into the UI. Later we will configure the application for OOB and after the successful build; we will publish the .XAP file to a local folder. If you already know about these steps can skip to the next Step.

Creating a Project

1. Open your Visual Studio 2010 IDE
2. Go to File –> New –> Project or just press Ctrl + Shift + N to open the New Project dialog
   
3. In the “New Project” dialog Window, expand “Visual C#” and click on the “Silverlight” from the left panel
4. Now in the right panel, only the Silverlight Templates will be visible
5. Select “Silverlight Application” from the right panel
6. Give a proper name for the Project (e.g. SilverlightDistributionDemo)
7. Choose proper location for the Solution by clicking the “Browse” button
8. Click “Ok” to continue. This will open the “New Silverlight Application” dialog where you can choose the Silverlight version and Silverlight Hosting Project settings
   
9. Be sure to select the “Silverlight 4” from the options pane and hit Ok” to continue

This will create the basic Silverlight project for you. Now design your application as per your requirement. For this sample application, I will create a basic UI. Here is the XAML code for that:

<UserControl x:Class="SilverlightDistributionDemo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    Height="300" Width="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <Border Background="#FFFFA0" Margin="20" CornerRadius="15" 

                BorderThickness="1" BorderBrush="Red">

            <TextBlock Text="Silverlight OOB Application Installer Demo" 

                       HorizontalAlignment="Center" VerticalAlignment="Center" 

                       FontSize="30" FontWeight="Bold" Foreground="Red"

                       TextWrapping="Wrap" TextAlignment="Center"/>

        </Border>

    </Grid>

</UserControl>

Here is the output of the Silverlight UI, if you run it in your Browser Window:

Configuring OOB Settings

So, our application UI is ready. Now, we need to configure the application to launch in outside browser window. Hence start with the configuration settings. Follow the simple steps mentioned below and you will be done:

1. From your solution explorer, right click on the Silverlight project and go to Properties. This will open the following properties pane in your screen:
   
   
2. Select “Silverlight” from the left panel
3. In the right panel, select the “Enable running application out of the browser” as shown in the above screenshot. This will enable the application to run outside the browser window
4. Now click on the “Out-of-Browser Settings …” button. This will open up another dialog window on your screen
   
   
5. Give the application Height & Width in this screen. You can also configure running the application in full trusted mode. Also you can configure the Window style here. For this demo, it is not require and hence I am leaving it as it is by default
6. Click “Ok” to save the “Out-of-Browser Settings”
7. Save the properties by clicking File –> Save or just by pressing the Ctrl + S key combination

Now your application is ready for running outside the browser. To check this, press F5 to run the application. This will first build the project and run it inside the browser window and you will see the UI as you created. Right click on the application UI and you will see a context menu popped up in the screen. It has two menu items called “Silverlight” and “Install <Application_Name> onto this computer…”. The second option will only visible if your application supports running as OOB.

Clicking on the Install menu will start the installation wizard. Wait, our mission is not to install like this. We have to install the application silently from the deployment directory silently, without opening the browser window. We will discuss it step-by-step at latter part of the article.

Publishing Application as .XAP

Build the solution. Once you successfully built your solution, go to the “ClientBin” directory present in the Web application project. Here you will see the published XAP file. Copy this file to a specific folder location for later use.

Here in this example, we don’t have any other dependent services. Hence, just copying the .xap file is perfect for us. But in case, you have some other dependency files you need to publish the project. To do this, right click on the web application project and click “Publish…” menu to launch the publish web wizard.

Select the “File System” as the Publish Method and follow the instructions to publish the Silverlight application. Copy the required files from the published folder to a specific location for later use.

Step2 : Configuring CD-ROM Installation

Now it’s time to configure our application deployment from CD-ROM. Everything should be done silently, means it should check whether the required Silverlight version is installed in the installation PC and based on that it should run either the Silverlight installation or directly start deploying the application as out-of-browser. Let’s do it step-by-step.

Basic to Silverlight OOB Installation

Before jumping into the deployment steps, let us discuss how OOB installation works. Silverlight 4 now has support for installing out-of-browser application silently. When you install Silverlight plug-in, it also installs a .exe file named "sllauncher.exe" which you can find in your "Program Files\Microsoft Silverlight\" directory. This EXE file now has the capability to install your Silverlight OOB application silently without opening the browser window. If you have already installed your OOB application, it will create a shortcut to launch the application from desktop or start menu. Right click on the shortcut & go to its properties. You will notice that the target location is set to "Microsoft Silverlight" and the target is set to something similar to the following line:

"C:\Program Files\Microsoft Silverlight\sllauncher.exe" 744317312.localhost

That is responsible for launching the XAP file as your Out-of-Browser application.

Basic to Silverlight OOB Silent Installation

Let's come to write some scripts to install your XAP silently as out of browser Silverlight application. Hope, you already published our sample application (.xap) after configuring it as out of browser to your local drive in a specific folder (say, C:\MySilverlightApps\XAP). For our case, the complete path of the XAP is: "C:\MySilverlightApps\XAP\SilverlightDistributionDemo.xap".

Now open your Notepad and write the following code in a single line:

"C:\Program Files\Microsoft Silverlight\sllauncher.exe"

        /install:"C:\MySilverlightApps\XAP\SilverlightDistributionDemo.xap"

        /origin:http://www.kunal-chowdhury.com/private/apps/XAP/SilverlightDistributionDemo.xap

        /shortcut:desktop+startmenu

        /overwrite  

Here, you have to pass the location of your XAP file as a parameter value to the "/install" flag.

You can specify the URL for future update location of the application by setting the "/origin" flag. When you call the CheckAndDownloadUpdateAsync() method from code, it will try to get the update from the specified location.

You can specify the shortcut location of the application by setting the value to the "/shortcut" flag. If you just set desktop or start menu as the value to the flag, it will create the shortcut in desktop or start menu depending on the parameter you set. If you use "desktop+startmenu" as the value to the parameter, it will install it both in the desktop and start menu of your operating system.

Basic to HTA File

HTML Applications (HTAs) are full-fledged applications. These applications are fully trusted and display only the menus, icons, toolbars, and title information that the Web developer sets. In short, HTAs pack all the power of Windows Internet Explorer - its object model, performance, rendering power, protocol support and user interface of the browser. HTAs can be created using the normal HTML and Dynamic HTML (DHTML) tags. You need to save the file as “.hta” to execute the Html Application.

The HTA:APPLICATION tag in the following example specifies application features not available in DHTML. As prescribed by the attributes, this application has neither border (border), nor title bar (caption), nor standard program icon (sysMenu). The application title appears in the Windows task list but not in the taskbar (showInTaskBar), and only one instance of the application is permitted to run at a time (singleInstance).

<HTML>

<HEAD>

  <TITLE>My Monster Application</TITLE>

  <HTA:APPLICATION ID="oMyApp" 

    APPLICATIONNAME="monster" 

    BORDER="none"

    CAPTION="no"

    ICON="/graphics/creature.ico"

    SHOWINTASKBAR="no"

    SINGLEINSTANCE="yes"

    SYSMENU="no"

    WINDOWSTATE="maximize">

</HEAD>

</HTML>

To launch an HTA, double-click its program icon, run it from the Start menu, open it through a URL, or start it from the command line. After starting, the HTA renders everything within the body tag and displays the value set in the title tag as the window title.

Want to read more about HTA file? Read it from MSDN:

• HTML Applications (HTA)
• Introduction to HTML Applications

Creating the Folder Structure

Before going into the depth, we need to finalize our folder structure. Create a root folder and name it properly. Create two folders inside it & name them as “Silverlight” and “XAP” respectively. Download the latest Silverlight runtime installer from Microsoft Site and save it inside the “Silverlight” directory. Put the application XAP that we published earlier into the “XAP” folder.

The other three files shown in the above screen represents one autorun.inf, one batchInstall.cmd and install.hta. We will create those files later in this article and discuss accordingly.

Configuring Silverlight Runtime Detection

Now we have to detect whether the Silverlight version is installed in client PC. It can be done using the JavaScript. You can use the Silverlight.js file which comes with every Silverlight application project. In our case, the whole file is not require and hence I took a little portion from it and modified as per our requirement.

First of all, we will create a function and inside it, we will create an ActiveXObject named “AgControl.AgControl”. From this instance of agcontrol, we will be able to know about the installed version of Silverlight. If it throws exception, means that, Silverlight is not installed in local PC. In other case, it will return the current installed version of Silverlight. Be sure to check the version in descending order.

Here is the whole code snippet:

        function GetSilverlightVersion() {

            // initialize the silverlightVersion to -1.

            var silverlightVersion = -1;

            getSilverlightVersion = function () {

                try {

                    // create the ActiveX Object of AgControl.

                    // This is the core of Silverlight runtime.

                    var control = new ActiveXObject('AgControl.AgControl');

                    // will execute if your latest Silverlight version is 4.

                    if (control.IsVersionSupported("4.0")) {

                        silverlightVersion = 4;

                    }

                    // will execute if your latest Silverlight version is 3.

                    else if (control.IsVersionSupported("3.0")) {

                        silverlightVersion = 3;

                    }

                    // will execute if your latest Silverlight version is 2.

                    else if (control.IsVersionSupported("2.0")) {

                        silverlightVersion = 2;

                    }

                    // if Silverlight version is not supported by your app,

                    // set it as 0 (zero).

                    else {

                        silverlightVersion = 0;

                    }

                    control = null;

                }

                catch (e) {

                    // if any exception while creating the ActiveX Object,

                    // will set the silverlightVersion as -1.

                    silverlightVersion = -1;

                    alert("Unable to create the ActiveX Object from Browser window.");

                }

            }

            // call to the inner function to detect the Silverlight.

            getSilverlightVersion();

            // return the version of the Silverlight.

            return silverlightVersion;

        }

Now depending upon your Silverlight version, you can install the require Silverlight version. This thing also you can do using JavaScript. Wait, you can do this using JavaScript, but if you run from browser window, it will not work. To do this, we are using the HTML Application (.hta). For this, create another JavaScript method and create a WScript.Shell instance object from the ActiveXObject and call the Run() method by passing the required parameters. Here is the code for that:

        function InstallSilverlight() {

            WshShell = new ActiveXObject("WScript.Shell");

            WshShell.Run("Silverlight\\Silverlight.exe /q", 0, true);

        }

You can see that, in the Run() method I passed the location of the Silverlight runtime installer as the first parameter. You can see that, I used “/q” as the argument for Silverlight installer. This silently installs the Silverlight in the local PC. As a second parameter I used “0” (zero). This ensures that, the executed application window will remain hidden. So, the end user will not see the installation window. The third parameter ensures whether the call will wait for the application to exit. If you pass “true”, it will wait until the executed application exits in memory. Once that application closes, it will continue running the next line of the script.

As per our requirement, we need to wait until the Silverlight runtime installs in the user’s machine and hence we used “true” as the third parameter.

Configuring OOB Application Installation

Now, we will create a batch file to execute the XAP installation silently. Open your notepad and write the following code inside it:

@ECHO OFF

@"%ProgramFiles%\Microsoft Silverlight\sllauncher.exe" 

    /install:"XAP\SilverlightDistributionDemo.xap" 

    /shortcut:desktop+startmenu 

    /origin:http://www.kunal-chowdhury.com/Private/XAP/SilverlightDistributionDemo.xap 

    /overwrite

@EXIT

The first line “@ECHO OFF” will hide the prompt of the console while executing. The second line in the above code is a bunch of 5 lines. You must need to write them in a single line. Due to proper formatting of the code snippet and help you to understand it properly, I splitted them in 5 lines. While writing in the notepad, be sure to write those 5 lines in a single line entry. In the second line, you need to call the sllauncher.exe, which comes with the Silverlight runtime. sllauncher.exe is responsible to install/execute a silverlight OOB application. See the parameters that I used there. The first parameter “/install” tells the application to install the .XAP file from the specified location. The second parameter tells the application to install the shortcut of the OOB application in either desktop, startmenu or both places. The third parameter tells to check for updated version in the sepecified link. The forth parameter instructs to overwrite the existing .xap (if any, already installed). In the third line “@EXIT” calls the exit method of the batch file to shutdown the batch processing.

Once you write the above code in notepad, save it as a .cmd file. Give a proper name while saving (in our case, it is “batchInstall.cmd". Save in proper location, as mentioned in the folder structure.

Now, you need to call this batch file from the HTML application file. Write another JavaScript function and call the Run() method of the WScript.Shell object with the proper parameters. In this case, we will use “false” as the third parameter as we don’t need to wait for the installer to install the OOB application.

Here is the full JavaScript code for you:

    function InstallSilverlight() {

        WshShell = new ActiveXObject("WScript.Shell");

        WshShell.Run("Silverlight\\Silverlight.exe", 0, true);

        }

    function InstallOOBApplication() {

        WshShell = new ActiveXObject("WScript.Shell");

        WshShell.Run("batchInstall.cmd", 0, false);

        }

    function Install() {

        var silverlightVersion = GetSilverlightVersion();

        if(silverlightVersion == 4) {

            InstallOOBApplication();

        }

        else {

            InstallSilverlight();

            InstallOOBApplication();

        }

        self.opener = this;

        self.close();

    }

In the above code, we created another JavaScript method named “Install()”, which actually checks the current installed version of Silverlight. If the required version is available in user’s PC, it will start installing the OOB Application. If the Silverlight or required version is not present, it will start installing the Silverlight first. As we instruct the Run() method to wait for the installation, the OOB Application installation will start once the Silverlight installation completes. Finally terminate the HTA application from the memory.

Now last part in this is to call the Install() method on page load. Use the following code for that:

<body onload="Install();">

</body>

Now save all this JavaScript code in a .hta file. Here is the full code inside your .HTA file:

<html>

<head>

    <title>Application Executer</title>

    <HTA:APPLICATION ID="oMyApp" 

        APPLICATIONNAME="Application Executer" 

        BORDER="No"

        CAPTION="No"

        SHOWINTASKBAR="No"

        SINGLEINSTANCE="Yes"

        SYSMENU="No"

        SCROLL="No"

        Width="0"

        Height="0"

        maximizeButton="false"

        WINDOWSTATE="minimize">

    <script type="text/javascript" language="javascript">

        function GetSilverlightVersion() {

            // initialize the silverlightVersion to -1.

            var silverlightVersion = -1;

            getSilverlightVersion = function () {

                try {

                    // create the ActiveX Object of AgControl.

                    // This is the core of Silverlight runtime.

                    var control = new ActiveXObject('AgControl.AgControl');

                    // will execute if your latest Silverlight version is 4.

                    if (control.IsVersionSupported("4.0")) {

                        silverlightVersion = 4;

                    }

                    // will execute if your latest Silverlight version is 3.

                    else if (control.IsVersionSupported("3.0")) {

                        silverlightVersion = 3;

                    }

                    // will execute if your latest Silverlight version is 2.

                    else if (control.IsVersionSupported("2.0")) {

                        silverlightVersion = 2;

                    }

                    // if Silverlight version is not supported by your app,

                    // set it as 0 (zero).

                    else {

                        silverlightVersion = 0;

                    }

                    control = null;

                }

                catch (e) {

                    // if any exception while creating the ActiveX Object,

                    // will set the silverlightVersion as -1.

                    silverlightVersion = -1;

                    alert("Unable to create the ActiveX Object from Browser window.");

                }

            }

            // call to the inner function to detect the Silverlight.

            getSilverlightVersion();

            // return the version of the Silverlight.

            return silverlightVersion;

        }

        function InstallSilverlight() {

            WshShell = new ActiveXObject("WScript.Shell");

            WshShell.Run("Silverlight\\Silverlight.exe /q", 0, true);

        }

        function InstallOOBApplication() {

            WshShell = new ActiveXObject("WScript.Shell");

            WshShell.Run("batchInstall.cmd", 0, false);

        }

        function Install() {

            var silverlightVersion = GetSilverlightVersion();

            if(silverlightVersion == 4) {

                InstallOOBApplication();

            }

            else {

                InstallSilverlight();

                InstallOOBApplication();

            }

            self.opener = this;

            self.close();

        }

    </script>

</head>

<body onload="Install();">

</body>

</html>

Save the file in your root directory where batchInstall.cmd is present. Make sure that your file structure is proper.

Configuring CD-ROM Installation Launch

It’s time for us to run the installer automatically once you insert the CD/DVD installation drive or double click the drive to open. To do this, you have to add a “autorun.inf” file in the root directory where the .hta & .cmd batch files are present (see the folder structure above). Be sure that, the installer will automatically launch, if the end user has enabled the autorun functionality. By default it is enabled.

Write the following code in your “autorun.inf” file:

[autorun]

open = install.hta

shell\install = &Install

shell\install\command = install.hta

The first line will tell the OS to autorun the file. The second line instructs the OS to autorun the mentioned file from the mentioned location. The third line will add a “Install” menu item in the context menu of the drive when you insert the CD media. It will have the installer file location, which is mentioned in the fourth line.

Read more about Autorun.inf file and it’s options from here: Autorun.inf, What is it?

Step3 : Demo

It is very difficult to demo it here. To test it, uninstall your Silverlight plug-in from your PC. Then run the install.hta file from the folder as shown in the below diagram:

This will call the “Install()” method of the JavaScript and check for the installed Silverlight version. As it didn’t find the Silverlight installed there, will start installing the Silverlight runtime silently. Once installed successfully, it will start installing the OOB Application silently. No UI will be visible for the user to interact with (this was our requirement). Once the installer installs the OOB application, you will see the OOB icon immediately in your desktop & start menu.

Double click it to run the application from desktop or click to execute from start menu.

Now, again run the “install.hta” file. It will call the JavaScript method “Install()”. The function will check whether the required Silverlight version installed in user PC & as the required version matches the original installed version, it will skip to the OOB application installation part. It will overwrite the existing XAP if it is already present.

Summary

I hope, you got the basic idea of the installation process from it. I used HTA file to demonstrate it in better way. It will be easy for you to read the JavaScript code and understand it properly. The next step for you is to create an original installer file by using the concept mentioned here.

If you like this article, please vote for it. Appreciate you for your feedbacks/comments/suggestions. Thank you for reading the article.

Download

- Silverlight OOB Application Installer (Source Code)

About the Author

Kunal Chowdhury is a Microsoft MVP in Silverlight,. He has a very good skill over Silverlight, XAML & C#. He worked in various Silverlight & WPF projects including Windows 7 Multitouch applications and delivered a quality output every time. He received various awards related to Software Development. During his pass time, he always busy to answer in online forums, writing articles and blog postings to share his knowledge across the world. You can reach him in his Blog - http://www.kunal-chowdhury.com/ He also Tweets. Follow him in Twitter - @kunal2383