I am a Mobile Phone Developer now!

The MIX10 Announcement from Microsoft that the Silverlight is the development platform for Windows Phone 7 series makes me and other Silverlight developers the happiest. Without any additional learning, now we are all mobile platform developers! Moreover, the tools required to develop a mobile phone application (including the simulator) is freely available now; even before the actual Windows Phone 7 mobile phone devices are out there in the market.

The excellent post from Shawn Burke says how easy it is to develop a mobile app using Silverlight by comparing it with the iPhone app development. Read it here.

He agrees that MVC pattern is fairly complex and difficult to understand when you first walk up to it.  And that is why Microsoft chose “double click, write code!” pattern for mobile development. Cool... ain't it?

Desklighter Update: Beta 2 with more customization options

The latest version of the Desklighter tool is now available for free download from IdentityMine Blendables Labs: http://blendables.com/labs/Desklighter/Default.aspx

 

“Desklighter is a windows utility that creates standalone windows applications from Silverlight xap files. Desklighter helps you in sharing your Silverlight applications as independent executables without having to worry about the hosting infrastructure. Unlike Silverlight Out-of-Browser(OOB) applications that run only on the installed computer, executables created by Desklighter are truly portable.”

See some sample games and demos created using Desklighter at http://sites.google.com/site/silverlightoffline

This new version of Desklighter has a settings panel providing more options to customize the executable application window. The settings available are Height and Width to control default application window size, border type (Re-sizable, fixed, none), application icon, background color, and window title. If the Silverlight application is expecting initial parameters, that can be supplied as well. It also supports transparency and it is possible to create custom shaped Silverlight standalone applications by setting the Background as 'Transparent' and choosing the 'No Border' option.

The recently released Silverlight 3.0 Out-of-Browser (OOB) feature opens up a lot of new scenarios as explained by Ashish Shetty. It surely is a great feature and will evolve to provide more options with upcoming releases of Silverlight. But it doesn’t help you in making your application portable. OOB helps in storing a hosted Silverlight application onto your desktop for running it from outside the browser. These applications will run only from the systems where they were installed.

However, applications created using Desklighter can be copied to another computer and it will work from it without any issues. If the computer doesn’t have Silverlight installed, the application will show a banner (default ‘No Silverlight’ experience) prompting the user to download and install the Silverlight plug-in.

Note that Desklighter is best suited for making already existing self contained Silverlight applications (where all the dependent resources are available within the xap file) portable. Examples include games, demos, proof-of-concepts, presentations, electronic brochures, tools and utilities.

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.

Desklighter Update: Beta 1.1 with 64 bit support

Thanks to one user (aquaseal) who reported that Desklights are not displaying the Silverlight content on 64 bit systems. We have fixed this issue and a new version of Desklighter (Beta 1.1) is now available for download from Blendables Labs.

Another update we released with this version is the icon feature for Desklights. Earlier, Desklights were showing the default windows executable icon and now it is changed to a Desklight exe icon.

Update: http://ctlabs.blogspot.com/2009/09/desklighter-update-beta-2-with-more.html

Desklighter – carry the light along

Today is a great day for me. At IdentityMine, I’ve been working on a software tool named as ‘Desklighter’ since some time back and now it is released to public as a free beta version through our product website’s labs section at http://blendables.com/labs/Desklighter/Default.aspx.

Desklighter is a windows utility that can convert a Silverlight application into a standalone desktop application. The output from Desklighter is a single executable file that can display the Silverlight content on windows desktops without requiring a hosting server or a browser. Desklighter enables users to carry a Silverlight application off the web to wherever they need it.

Download Desklighter from here and try converting your Silverlight XAP files into windows exes.

The idea of taking the Silverlight application off the web into a portable single file executable opens up a whole new playing field. Now you will be able to carry your favorite Silverlight games from the web in a USB Flash drive to your friends who are not connected to internet. You can now share your exciting ideas materialized in Silverlight without having to worry about the hosting infrastructure. Your flashy Silverlight demo can now be taken to your customer for showcasing during a presentation. You can distribute your stylish e-brochure done in Silverlight in CDs to whomsoever you want. The possibilities are endless.

A Desklight (the EXE created using Desklighter) need to have the Silverlight plug-in (currently Silverlight 2 Beta 2) installed to run on windows desktops. Below is a screen shot of a sample Desklight. You can download more samples from http://sites.google.com/site/silverlightoffline.

Information about a Desklight including the Desklighter version used to create it can be found when executed from a command line with 'info' as the argument.

Another available command line argument is ‘debug’, which displays the Desklight’s server information while the Silverlight content is getting served. Use this if you see some issues while running a Desklight to know what is happening behind the screens.

Read the complete technology story behind Desklighter here.

The name ‘Desklighter’ was chosen to represent Desktop + Silverlight. My colleague Hariprashanth was the one who created all the graphics work for Desklighter. The logo is made up of four ‘D’s (representing Desklighter) with the windows logo colors (representing desktop).  Hari did an excellent work in giving it a stylish look.

I would like to thank all my colleagues here at IdentiyMine for extending their support and providing valuable feedback during the development of Desklighter. The wish list for the next version of Desklighter is growing,  thanks to the innovative ideas from them.

Please let us know what you think about this tool, and what you would like to see in its future versions.

Update - New Version Released: http://ctlabs.blogspot.com/2009/09/desklighter-update-beta-2-with-more.html

Silverlight – Lighting up the web!

“Microsoft Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.

By using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow.”

That’s the quote from Microsoft on www.silverlight.net about this new technology that takes the richness and power of WPF to the web world.

When I first learnt about Silverlight, the available version was 1.0 and was using Javascript as its coding language. After knowing that .NET support is on its way and getting chance to try my hands on the pre-release builds, I waited for version 2.0 to come. The beta version of Silverlight 2.0 was released last week.

Silverlight is a browser plug-in that allows the browser to use some of the user’s local computational horsepower. The plug-in has no external dependencies. For example, Mac users do not need Windows Media Player to play back WMV content. We are already familiar with plug-in technologies like Java Applets and Flash applications. But Silverlight brings all the power of WPF in animation, graphics, video, etc. And with version 2.0, the CLR (Common Language Runtime) is going cross platform and developers can use their favorite .NET language to write code that runs on the client from within a browser.