Tuesday, August 18, 2009

Silverlight 3 Offline / OOB/ Out Of Browser Feature

Introduction

It is possible to configure Silverlight-based applications so that users can install them from their host Web pages and run them outside the browser. This feature is known by the name ‘OOB’ or ‘Out-of-Browser’ support, and sometimes just ‘Offline’ support.

Try a sample online or download the source code.

Configuration

  • Go to the Project Properties window (Right click on the Silverlight project in Visual Studio 2008 and choose ‘Properties’).
  • On the ‘Silverlight’ tab, select ‘Enable running application out of the browser’.
  • Click on the ‘Out-of-Browser Settings…’ button.
  • Fill or change the details like Window Title (Appears in the title bar of the out-of-browser application window), Width and Height (Indicates the dimensions of the out-of-browser application window; default is 800x600), Shortcut name (Appears in the out-of-browser installation dialog box and on the installed application shortcut or shortcuts), and Download description (Appears as a tooltip on the installed application shortcuts). Also assign application icon in a set of standard sizes (The operating system chooses the most appropriate icon to display in the installation dialog box, the application window, Windows Explorer, and Windows taskbar/Macintosh dock bar). These icons must be ‘png’ files and need to be added to the project initially with ‘Build Action’ set as ‘Content’. Optionally, 'Enable GPU Acceleration' can be turned on for graphics rich applications to enhance graphics performance by using hardware acceleration.


The values in the ‘Out-of-Browser Settings’ dialog box is used to generate an ‘OutOfBrowserSettings.xml’ file located in the project Properties folder. Any changes to this file are reflected in the designer. This file is used to populate the application manifest (AppManifest.xaml) with the specified values.
<OutOfBrowserSettings ShortName="MySloob Application" 
                      EnableGPUAcceleration="False" 
                      ShowInstallMenuItem="True">
  <OutOfBrowserSettings.Blurb>MySloob Application on your desktop; at home, at work or on the go.</OutOfBrowserSettings.Blurb>
  <OutOfBrowserSettings.WindowSettings>
    <WindowSettings Title="MySloob Application" Height="400" Width="600" />
  </OutOfBrowserSettings.WindowSettings>
  <OutOfBrowserSettings.Icons>
    <Icon Size="16,16">Icons/MySloob16.png</Icon>
    <Icon Size="32,32">Icons/MySloob32.png</Icon>
    <Icon Size="48,48">Icons/MySloob48.png</Icon>
    <Icon Size="128,128">Icons/MySloob128.png</Icon>
  </OutOfBrowserSettings.Icons>
</OutOfBrowserSettings>
Installation
When an application is properly configured for OOB, a new right-click menu option will be available as ‘Install <ApplicationName> Application onto this computer…’. Clicking on this will launch the installer dialog where the user can choose to create shortcuts on Start menu and Desktop. When ‘OK’ is clicked, the application will be installed to the local computer and it will be launched in a new application window. ‘Remove this application…’ right-click menu will now be available within this application to uninstall it from the computer.




Internals
If you look at the installed application’s shortcut properties, you will see that the target points to ‘C:\Program Files\Microsoft Silverlight\sllauncher.exe 1527765212.localhost’.

If you search for that random number (in my case: 1527765212) in Windows explorer, you will find a folder like this:

C:\Users\<user.name>\AppData\LocalLow\Microsoft\Silverlight\OutOfBrowser\1527765212.localhost

sllauncher.exe is the ‘Microsoft Silverlight Out-of-Browser Launcher’ application that gets installed along with Silverlight. It is a win32 application that loads the Silverlight application in its own browser host.

When you install a Silverlight OOB application, the XAP file is downloaded to the local computer and is stored in a folder within the user’s local app data called as ‘offline application cache’. The folder is named with a unique AppId which consists of a random number and the source of origin of the application (in this case: localhost). This folder will also have the application meta data and an index.html which has an object tag to load the Silverlight application.

sllauncher.exe takes this AppId (Examples: 1527765212.localhost, 1930341777.wayfarer.bizhat.com) as a parameter and then sets its window according to the metadata available in the specified offline application cache. It then loads the index.html in its browser host which in turn will display the Silverlight application.
metadata:
ShortcutName=MySloob Application
Name=MySloob Application
Title=MySloob Application
Description=MySloob Application on your desktop; at home, at work or on the go.
AppID=1527765212.localhost
RuntimeVersion=3.0.40624.0
FinalAppUri=file:///C:/Temp/MySloob/MySloob/Bin/Debug/MySloob.xap
OriginalSourceUri=file:///C:/Temp/MySloob/MySloob/Bin/Debug/MySloob.xap
SourceDomain=localhost
WindowHeight=400
WindowWidth=600
EnableGPUAcceleration=False
TrimmedName=MySloob Application
TrimmedTitle=MySloob Application
TrimmedSourceDomain=localhost
CustomIcon=1
LaunchPath=C:\Users\sameer.thiruthikad\AppData\LocalLow\Microsoft\Silverlight\OutOfBrowser\1527765212.localhost\index.html

index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
  <!-- saved from url=(0014)about:internet -->
<head>
  <style type='text/css'>
    html, body { height: 100%; overflow: auto; }
    body { padding: 0; margin: 0; }
    #silverlightControlHost { height: 100%; }
  </style>
</head>
<body scroll="no" onload="document.getElementById('_sl').focus()">
    <div id="silverlightControlHost">
      <object id='_sl' data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
          <param name="source" value="offline://1527765212.localhost"/>
          <param name="background" value="White"/>
          <param name="enableGPUAcceleration" value="False"/>
          <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
              <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
          </a>
      </object>
      <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>
</body>
</html>

Sample Application

There are a set of classes and methods available in Silverlight to install an application through code, to check for updates, to determine network status, etc. These are illustrated through the sample below:

XAML:
<Grid x:Name="LayoutRoot"
          Background="Beige">
        <StackPanel  HorizontalAlignment="Center">
            <TextBlock Text="Welcome to 'MySloob' - A sample Silverlight Out-Of-Browser Application!"
                       HorizontalAlignment="Center" />
            <TextBlock x:Name="uxDescription"
                       Text="()"
                       HorizontalAlignment="Center" />
            <Button x:Name="uxInstall"
                    Margin="20"
                    Height="50"
                    Width="200"
                    Content="Install Me"
                    Click="uxInstall_Click" />
            <Ellipse Height="100"
                     Width="{Binding ElementName=uxSlider,Path=Value}">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="Orange"
                                      Offset="0" />
                        <GradientStop Color="Red"
                                      Offset=".5" />
                        <GradientStop Color="Yellow"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Slider x:Name="uxSlider"
                    Margin="25"
                    Width="300"
                    Value="200"
                    Minimum="100"
                    Maximum="300" />
            <Button x:Name="uxCheckUpdate"
                    Height="50"
                    Width="200"
                    Content="Check Update"
                    Click="uxCheckUpdate_Click" />
            <TextBlock x:Name="uxOOBStatus"
                       Margin="0,25,0,0"
                       Foreground="Blue"
                       Text="OOB Status"
                       HorizontalAlignment="Center" />
            <TextBlock x:Name="uxInstallStatus"
                       Foreground="Brown"
                       Text="Install Status"
                       HorizontalAlignment="Center" />
            <TextBlock x:Name="uxNetworkStatus"
                       Foreground="Black"
                       Text="Network Status"
                       HorizontalAlignment="Center" />
            <TextBlock Text="Last Modified: 2009-August-18, 05:00 PM IST by Sameer C Thiruthikad"
                       HorizontalAlignment="Center" />
        </StackPanel>
    </Grid>
C# Code:
public MainPage()
{
    InitializeComponent();

    UpdateUI();
    Application.Current.InstallStateChanged += new EventHandler(app_InstallStateChanged);
    Application.Current.CheckAndDownloadUpdateCompleted += new CheckAndDownloadUpdateCompletedEventHandler(app_CheckAndDownloadUpdateCompleted);
    System.Net.NetworkInformation.NetworkChange.NetworkAddressChanged += new System.Net.NetworkInformation.NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);
}

private void uxInstall_Click(object sender, RoutedEventArgs e)
{
    try
    {
        Application.Current.Install();
    }
    catch (InvalidOperationException)
    {
        MessageBox.Show("The application is already installed.");
    }
}

void app_InstallStateChanged(object sender, EventArgs e)
{
    UpdateUI();
}


private void uxCheckUpdate_Click(object sender, RoutedEventArgs e)
{
    Application.Current.CheckAndDownloadUpdateAsync();
}

void app_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)
{
    if (e.UpdateAvailable)
    {
        MessageBox.Show("An application update has been downloaded. Please restart.");
    }
    else
    {
        MessageBox.Show("There is no update available.");
    }
}

void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)
{
    UpdateUI();
}

private void UpdateUI()
{
    if (Application.Current.InstallState == InstallState.Installed)
    {
        this.uxInstall.IsEnabled = false;
    }
    else
    {
        this.uxInstall.IsEnabled = true;
    }

    this.uxOOBStatus.Text = "OOB Status: " + Application.Current.IsRunningOutOfBrowser.ToString();
    this.uxInstallStatus.Text = "Install Status: " + Application.Current.InstallState.ToString();
    this.uxDescription.Text = "(" + Deployment.Current.OutOfBrowserSettings.Blurb + ")";
   
    bool online = System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable();

    if (online)
    {
        this.uxNetworkStatus.Foreground = new SolidColorBrush(Colors.Green);
        this.uxNetworkStatus.Text = "Network Status: Online";
    }
    else
    {
        this.uxNetworkStatus.Foreground = new SolidColorBrush(Colors.Red);
        this.uxNetworkStatus.Text = "Network Status: Offline";
    }
}
Try this sample online or download the source code.

Tuesday, August 11, 2009

My Windows 7 Experience

I installed Winodws 7 on my work computer yesterday. It is the latest Operating System from Microsoft after Vista. I was using Vista since long and had felt it was much better than XP. The initial release had many issues but the service pack that followed (SP1) fixed most of them. But still there were many areas for improvement in Vista, especially on the performance side.

win7

Windows 7 has successfully addressed many such pain areas in Vista and it performs better. Apart from the multi-touch support, there aren't many new visible features, as the Win 7 team has focused more on performance and compatibility issues.

It installed quickly and booted fast. The Enterprise edition (there are many editions to choose from) took only around 9 GB of my hard disk space after installation. The changing desktop background images are nice. The changes in taskbar look and behavior will not be missed. ‘Show desktop’ is now at the right most corner and has a new ‘peek’ feature. The quick launch bar is missing and taskbar takes up that role as well. Here you will have to do ‘Pin to Taskbar’ on applications in start menu to make them stick to task bar as quick launch icons. Then you wonder how to launch another instance of an application as the quick launch icon turns to a minimized application during launch. Well, learn a new short cut (Shift + Click) to do this. There are many such new features that is supposed to make our lives better. :)

I installed all my work applications and favorite tools and configured them to my liking. All of them worked without any issues. The touch feature in Windows 7 require a supporting hardware. We have one big HP Touch Smart system here where the touch features work nicely.

Monday, August 03, 2009

Microsoft Tag

A High Capacity Color Barcode (HCCB), also branded Microsoft Tag, is a type of barcode that uses shapes, instead of black-and-white lines or squares used by other barcode systems. HCCB is not intended to replace traditional barcodes, but rather enhance them by allowing more information to be stored.

Custom Tag

Creating Tags
  • Go to http://tag.microsoft.com
  • Associate your Live id (hotmail email address is fine) with the Tag site and sign in.
  • Click on the 'Create Tag' button and follow the directions.
  • Tag can be of type Url, Contact card, or plain text.
  • Once tag is created, the information we provided is stored in Microsoft servers and a unique id is associated with it. This id is encoded in a graphical image to generate the tag.
  • Click on the 'Render' button to get the generated tag in the format of your choice (png, pdf, jpg, etc).
  • It is also possible to get it in custom format so that it can be used by overlaying on another image.
Using Tags
  • The tags can be used anywhere in web (sites, blogs, etc.) as images.
  • Tags can be printed and used on real world objects like books, product package, etc.
  • They can even be printed big for displaying on a hoarding.
Reading Tags
  • Tags are read using a mobile device having camera.
  • The device need to have a software named 'Microsoft Tag Application' or simply 'Tag Reader' which can be installed freely from http://gettag.mobi.
  • Start this application in your device and just point the camera onto to a tag to read it.
  • It works by decoding the id encoded in the image and then connecting to internet to get the associated details from Microsoft servers.

To see more samples, visit my workshop page on this at: wayfarer.bizhat.com/techbites/workshop/tag.html