Geeks With Blogs
Light Up the Web Blog about programming in Silverlight

“Out Of Browser (OOB)” for Silverlight is a possibility to install RIA application on local computer and run it without web browser or even internet connection (occasionally connected applications). That’s why we have in title abbreviation RDA (Rich Desktop Application).

In this article I would like to present how it’s working and how to implement it in our application. It also contains demos, descriptions and a lot of images.

Demo

First we start with already working application, created for MIX09 conference. To run it, please go to this link: Run DEMO - Chess. This demo require Silverlight 3.0 SDK installed – download.



To install game, we need to click „Install Chess Now” button or click right mouse button on application and choose install option. During installation we can decide where we would like to place shortcut to our game. We are not able to set where we would like to have all application’s files, but only shortcuts.

In Windows we can put shortcut on desktop or/and menu start. MAC’s user can drag and drop it  whenever they want. Of course in Windows we can also move installed shortcut later but we cannot change it during installation.


As you can see, installation process is a little supervised by Silverlight and not allow to modify too much.

“Out of browser” applications can work without connection to internet and synchronize data when this connection will be available. To store data we can use Isolated Storage memory, which after installation can contains 25MB of data without asking user. When we run application in browser, we can use only 1 MB without user permission. But in both situations, we are able to ask user and extend this limits.

To uninstall application, click right mouse button on application and choose uninstall option.

Let’s create our own OOB application

Let’s create simple Hello World application. This application will detect if it have access to the internet and if it work in browser or out of browser.

I. Simple installation
First step is a open Visual Studio and create new project “SilverlightApplication”. Then we open file „AppManifest.xaml” from “Properties” folder. Inside we should see commented code.


<Deployment.ApplicationIdentity>

     <ApplicationIdentity ShortName="Out of Browser Silverlight Application" Title="Window Title of your Silverlight Application">   

       <ApplicationIdentity.Blurb>Description of your Silverlight application</ApplicationIdentity.Blurb>


     </ApplicationIdentity>
</Deployment.ApplicationIdentity>

This commented code is responsible for turning on installation option and determine descriptions and used icons. After we uncomment this code we can run application and install it on our computer.

Before we do that, let’s add simple TextBlock in file MainPage.xaml to see where is our application and that it’s working.

<UserControl x:Class="SilverlightOOBApplication.MainPage"

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

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

    Width="400" Height="300">

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

        <TextBlock Text="Hello World" />

    </Grid>
</UserControl>
 

Now let’s run our HelloWorld. To install it, click right mouse button and choose „Install Out of Browser Silverlight … onto this computer„ .


Then choose place where would like to put shortcut to our application. We can install it on desktop or/and in start menu.

Now we should see HelloWorld in nice window. Our application work the same way like in browser but we don’t need connection to the internet and web browser.

II. Customize installation

First of all we can set parameters like “ShortName” used for example to name shortcut, “Title” as a local window’s title and “ApplicationIdentity.Blurb” as a description used for example in tooltips.

Let’s set this parameters. For example “ShortName” we will set to “Welcome App”, “Title” to “This is welcome application” and “ApplicationIdentity.Blurb” to “This is Hello World application and it makes nothing”.

AppManifest.xaml:
<Deployment.ApplicationIdentity>
 <ApplicationIdentity
      ShortName=" Welcome App "
      Title=" This is welcome application ">

    <ApplicationIdentity.Blurb>This is Hello World application and it makes nothing 

    </ApplicationIdentity.Blurb>

 </ApplicationIdentity>
</Deployment.ApplicationIdentity>
 
In addition user is able to add some icons. Let’s open AppManifest.xaml file and add information about them in xml, like in the code below. Images can be in png format and we need to set their “Build Action” properties to “Content”.

We need to create four images in different sizes (16x16, 32x32, 48x48, 128x128). They will be used as a icons on your desktop, icon in window or during the installation. Example of AppManifest.xaml can looks like this one:

<Deploymentxmlns="http://schemas.microsoft.com/client/2007/deployment"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >   
  <
Deployment.Parts>    </Deployment.Parts>
 
  <Deployment.ApplicationIdentity>

    <ApplicationIdentity ShortName="Welcome App"Title="This is welcome application. ">

     <ApplicationIdentity.Blurb>This is Hello World application and it makes nothing

     </ApplicationIdentity.Blurb>   

     <ApplicationIdentity.Icons>
      <IconSize="16x16">images/icons/user-16.png</Icon>
      <IconSize="32x32">images/icons/user-32.png</Icon>
      <IconSize="48x48">images/icons/user-48.png</Icon>
      <IconSize="128x128">images/icons/user-128.png</Icon>
     </ApplicationIdentity.Icons>
    </ApplicationIdentity>
 
  </Deployment.ApplicationIdentity>
</Deployment>
 
III. How to check if application run locally or in browser

In case we would like to know if application was run in browser or locally, we can check it using Startup event and read state of „Application.Current.RunningOffline” variable.

public partial class App : Application
{
        public App()
        {

            this.Startup += this.Application_Startup;

...
 }
 

        private void Application_Startup(object sender, StartupEventArgs e)

        {
            if (Application.Current.RunningOffline)
            {

                this.RootVisual = new OfflinePage();

            }
            else
            {

                this.RootVisual = new MainPage();

            }
        }
}

So variable „RunningOffline” provide information if program run out of browser or not, and like in code above, allows to choose different start page.

IV. How to check if internet connection is available

Method „NetworkInterface.GetIsNetworkAvailable()” shows actual state of application’s internet connection. It returns true if connection is available. We can also invoke method when internet connection state changes by using „NetworkChange.NetworkAddressChanged” event.

Let’s look at sample code below from ManPage.xaml.cs:

        public MainPage()
        {

            InitializeComponent();

            NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(OnNetworkChange);
        }
 

        void OnNetworkChange(object sender, EventArgs e)

        {
            if (NetworkInterface.GetIsNetworkAvailable())
            {               
                // connected
            }
            else
            {
                // not connected
            }
        }

Inside constructor we add method („OnNetworkChange”) to internet status’s event. When you have two connections on one PC and when you turn off one of them, application will invoke event “NetworkAddressChangedand methodNetworkInterface.GetIsNetworkAvailable()” will return still true. That’s why don’t use flags to monitor state of connection, always use „NetworkInterface.GetIsNetworkAvailable()” method.

On the other hand, connection to network where will be no Internet, is still a connection and method “GetIsNetworkAvailable()” will return true.

V. Application update

When you install application locally, you could probably want to update it when new version will be released. Silverlight make it automatically by downloading it and install with next application’s run. In addition, you can inform user about new version by using “ExecutionStateChanged” + “App.Current.ExecutionState” and displaying for example appropriate message.

App.xaml.cs:
public App()
        {
            ..
            this.ExecutionStateChanged += new EventHandler(App_ExecutionStateChanged);
            ..
        }

void App_ExecutionStateChanged(object sender, EventArgs e)

        {

            if (App.Current.ExecutionState == ExecutionStates.DetachedUpdatesAvailable)

            {

                MessageBox.Show "New application's version is available. Please restart program.");

            }
        }

ExecutionStateChanged” is invoked alwasy when application state changes. “ExecutionStates” contains also atributess like „Detached”, „DetachFailed”, „Detaching” or „RunningOnline”. We can use them to check if for example detaching was finished or is it working online.

As we can see, this type of configuration allows to work with instalation process easly and efficient.
Online Sample

Complete created application you can see here: Live DEMO (Silverlight 3.0 Beta 1)

Source code: link
Under the hood
Let’s look at OOB closely. All installed application works because they were saved locally on hard drive in user space with special given number. This number is used to locate the right application. Save programs are run thanks to sllauncher.exe which we can find in Silverlight folder (C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe).


If we analyze shortcut to our application, we will find that it invoke sllauncher.exe with special parameters.

C:\Program Files\Microsoft Silverlight\<version>\sllauncher.exe <address.id>

Where “version” is a installed Silverlight version and “address.id” is a saved application’s www address with unique given number. Complete shortcut can looks like these:

„C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" localhost.4

or

“C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" www.jacekciereszko.pl.2

In Windows Vista we can find our saved (installed) application in folder

„C:\Users\<user name>\AppData\LocalLow\Microsoft\Silverlight\Offline\<address.id>”

There Silverlight store application’s files: xap, html, etc. In other operation systems this folder can be in different place but the true is that we don’t need them to work with Silverlight with OOB, so don’t be sad if you won’t find your repository.

Please, remember that your application always run in sandbox so after installation it not have any additional rights and it work the same way like in web browser. Using sandbox with Silverlight allows to install RIA application on local computer without administrator rights.

Installed application can detect if internet connection is available, work when this connection is not accessible and react when connection will work again. Thanks to this features, now we are able to create programs occasionally connected (Emissary) and synchronize gathered data once in a while.

Customization

First of all we can change appearance depends if application is installed or work in a browser (like in Chess demo, where in browser version we could only install application locally).

What should be also mentions is that in current version (Silverlight 3.0 Beta 1) we can only set window’s icon, title and position. Microsoft promised more options in next versions.

Debugger

My first problem with OOB was debugger who doesn’t work. Program runs outside of Visual Studio so debugger is not connected to our program. But, we have still “Attach to Process...” command and we can use it to debug programs. It is not what we would like to use, but it’s working.

Disadvantages

Few weeks ago I wanted to create application with „Out of Browser”, Silverlight Navigation and Silverlight Virtual Earth Map Control, but I found out some difficulties and eventually I realized that it won’t work. I had a problem with communication to VirtualEarth map (no support for HTML DOM). So before you start, better make simple “Proof Of Concept”.

Resources
  • Tim Heuera’s great screen cast showing how to create OOB application – link,
  • Chess game – link,
  • Ashish Shetty’s blog with some articles about “Out Of Browser” – link.

Regards,
Jacek Ciereszko


Posted on Sunday, May 31, 2009 11:36 PM | Back to top

Copyright © Jacek | Powered by: GeeksWithBlogs.net | Join free