Out of Browser is a feature of Silverlight 3+ Applications, where the user can install the application to the desktop and you as a developer can provide more functionality, especially when application is installed as trusted.

If you want to explore where the OOB applications are located in users hard drive, how they are launched and how to allow the user to install Silverlight Application from CD, continue reading.

Important methods, properties for OOB in Silverlight

Application.IsRunningOutOfBrowser (Gets a value that indicates whether the application was launched from the out-of-browser state.)
Application.Install() (Attempts to install the application so that it can run outside the browser.)
Application.InstallState (Gets the current out-of-browser installation state of the application.)
InstallState Enumeration (Defines constants that indicate the installation state of an application that is configured to run outside the browser.)

A complete guidance on Out of Browser Support in Silverlight.

Where to find installed OOB applications?

A list of all silverlight applications is available in a hidden folder
C:\Users\{user name}\AppData\LocalLow\Microsoft\Silverlight\OutOfBrowser\
Notice also a folder sibling …\Silverlight\is\ which is an isolated storage for running Silverlight apps.

Name of the files in this folder is done by the address of the location (e.g. localhost, microsoft.com). Most of these files are empty, but those which are installed for OOB mode has some information within. Open that file and you will see the ID of the application and the whole URL where the original (web version) is located. ID with name of file creates ApplicationID (e.g. 972856442.localhost, 3326975874.zdechovan.com) which we will use to launch our application in a section below.

How to launch a Silverlight OOB?

There is an application sllauncher.exe, that is used to launch Silverlight application in Out of Browser mode. This application is located in C:\Program Files\Microsoft Silverlight\sllauncher.exe.

To run a silverlight application you have to pass some parameters to this sllauncher, if you try to run it without any of them, you’ll see the usage pattern:

SLLauncher.exe [app_id] [debug] [/install:<file path to XAP>]
[/emulate:<file path to XAP>] [/overwrite] /origin:<original app uri>
/uninstall /shortcut:<desktop|startmenu|desktop+startmenu|none> [/pid]

You can experiment with a lots of variations of parameters set up if you wish, for me, the most importat is to set a shortcut, which will launch our application. It’s because I experienced a problem, that after install from application the shortcut was corrupted and didn’t work.

Working shortcut should contain {path to sllauncher}/sllauncher.exe {ApplicationId} so for example C:\Program Files\Microsoft Silverlight\sllauncher.exe 972856442.localhost in my case.

If you want to debug your OOB application simply add a debug parameter.

I found an article Installing Silverlight applications without the browser involved by Tim Heuer about how to use  sllauncher to install/uninstall a silverlight application.

I’m working on a Silverlight demo LoB application as a part of my bachelor thesis and I made a UI prototype with a couple of screens containing sample data and some basic functionality like navigating through screens, autocomplete boxes, some pop-up windows…

At first, check out the SketchFlow prototype (or just PDF exported document) which I’m going to describe here, to see whether the rest of article is interesting for you.

Download the source code of the project.

Why to do WPF/Silverlight UI prototypes in SketchFlow?

We usually build the software for our customers and therefore we have to check regularly whether our work really meets their expectations.

To avoid reconstruction of the user interface near the end of the development, project teams tends to do UI prototypes. This way we could get the feedback from our managers and customers about the basic design elements like layout, UI components used, data that is shown, etc.

SketchFlow enable to create UI mocks that looks like hand-drawn, but with real XAML elements and C#(or VB) code so there is a great chance, that in the end you can reuse a lot of the XAML code for the real project. Plus you can easily create Sample Data Sources with “lorem ipsum” style data.

To enrich the communication process between you and the customer there are some feedback controls to draw and write notes in the running prototype and then export it.

I will explore the whole process of creating SketchFlow prototype in the next couple sections.

Basic Orientation in SketchFlow Project

Overview of Expression SketchFlow

The most important parts of the environment are SketchStyles assets, that are actually styles applied on dozens of classic UI controls.

Another important tool is SketchFlow Map where you can create connected screens, organize component screens and visually tag them to express some king of grouping.

In the right panel there are by default Properties (of selected component) and Data panels. In Data panel you can create collections of sample data or import data sources from XML files.

In some cases you would like to create some basic animations of the content and this can be done with the animation panel.

If you can’t find some of these panels you can show them by the Window submenu in the Main menu.

Create navigation screen with views as component screens

At first, you should see the first blank screen in your project. You can place there some Sketchy controls to create the user interface on that screen.

SketchFlow Map

This will be the first screen in your project and by clicking on buttons in the SketchFlow map you can create screens that are connected to this screen.

You can also create new screen separately and after that connect the screen to another existing screen.

To create a component screen I recommend to create some basic stuff at the source screen first, place it in some Grid and than raise context menu on that Grid in the Objects and Timeline panel and choose Make into component screen.

Group UI controls into Layout element

Make element into...

Then you can see in Objects and Timeline that the Grid changed to the “NewComponentName” and you can edit its contents and its code-behind in separated files.

In my case I have a TabControl in every screen (Products, Customers…)  and TabItems content is transformed to separate Component screens. I have the navigation of my app as a separate UserControl, to enable placing it in all Screens, but still edit it in one place.

To enable navigtion between the screens from the screen by clicking on some buttons, you have to open the context menu on selected button and choose Navigate To and selected the desired screen. Only screens to which current screen is connected could apper here.

Create Sample Data and bind UI controls to it

You can easily create new collections of sample data, that contains simple/complex properties and sub-collections. After creating a new property you should set the type and some details (size, max length, etc.).

SketchFlow Sample Data

There is also an option to edit pre-generated values and set the count of sample records in a collection.

Image type property should be linked to a directory that contains sample images.

Binding works the same way like in normal WPF/Silverlight project. I recommend to set the DataContext of the LayoutRoot grid to the ProjectDataSource and then just bind ItemsSource properties of ListBoxes, Grids on the screen to sample data collections.

How to create sketchy controls that are not included in default SketchStyles

SketchFlow Apply sketchy resource

There is limited amount of controls that could be drag’n'dropped from the SketchStyles panel.

In my prototype I used AutocompleteBox, DataPicker and maybe some other controls, that should be styled the sketchy way, as well.

A lot of these extra controls are derived or contain some primitive UI controls. AutocompleteBox is derived from standerd TextBox and therefore we can apply TextBox-Sketch resource to it.

In other controls we could at least change the Font to Buxton Sketch and set colors of control to grayscale ones.

Publish the project, Export to Microsoft Word, Manage the Feedback

In the Main menu, you can Package the SketchFlow project and that will export your prototype to a specified folder. Actually the only files you need for publishing on the web or to deliver to customer are Silverlight XAP file and an HTML document that hosts that Silverlight application. Show my published project.

The other interesting function is Export to Microsoft Word, where the SketchFlow generates a Word document with the SketchFlow Map and all the Navigation and Component Screens. Show my exported document saved as PDF.

SketchFlow project Feedback

In the running project, the user can navigate through the left sidebar or by clicking on buttons in screens.

In the left sidebar there is also a Feedback panel where the user can write, draw feedback and then export it and send the exported file to development team.

You as a developer could import/add feedback files from your customers (or managers) via the Feedback panel (on the left from the Objects and Timeline).

Useful links about Expression SketchFlow

In the end, I will share with you some links about SketchFlow I’ve already collected.

How to: Create a sketchy Siverlight GroupBox in Blend/SketchFlow (ondrejsv, 17th January 2010)

How to: Create a new format for sample data in Blend/SketchFlow (ondrejsv, 17th January 2010)

Using SketchFlow to Create Better Prototypes (Simon Guest, 29th April 2009)

Getting in-depth with SketchFlow (Alex Knight, 26th October 2009)

Sketch Flow: From Concept to Production – MIX ‘09 video (Christian Schormann, 20th March 2009)

SketchFlow tutorial

Thanks for reading.

Download the source code of this project.

Layout

Out of Browser

Installation

I tried to experiment with the Google Search API for non-javascript environments. It accepts requests via RESTful interface and returns results via JSON.

You have to encode your search request in this way:
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Silverlight&rsz=large&start=10
It means to search for Silverlight, return 8 results (large result size), start with result at index 10.

I built a simple silverlight client, that makes requests to this service by WebClient(class), convert the JSON result to an XML and then parse it to a collection of GoogleSearchResult(class) objects shown in ItemsControl.

I tested the new WebBrowser control in which, you can preview desired search result. Because it works only in Out of Browser mode I practiced utilization of InstallState and IsRunningOutOfBrowser properties to provide install button and determine whether application runs OoB or not.

CodePlex

Download and look at the source code it you would like to see my implementation of using Google Search API in Silverlight client.

I published the source code of this project at CodePlex: slgooglesearch.codeplex.com.

MIX '09 logo

I’ve found a lot of useful videos about Rich Internet Application, Silverlight and .NET RIA Services.

Visit MIX 09 web site to see all videos related to Microsoft Technologies or continue reading and watch my recommended webcasts.

***

I. User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Come hear how creating great user experiences for business applications can result in both improved productivity and significant support cost savings. Learn how to use proven user experience patterns in cost effective ways with Silverlight 3, including rich data display, data input and advanced data validation, and application navigation.

Watch video

II. Consuming Web Services in Microsoft Silverlight 3

Come hear how to work with external REST, SOAP, and Windows Communication Foundation (WCF) services from Silverlight. Learn how to securely and efficiently communicate with services using Binary XML, debug services with improved Faults support, and implement server-to-client “push” using the new Add Service Reference for Duplex functionality.

Watch video

III. Escaping Flatland in Application Design Rich User Experiences

Learn how technology and rich application design can not only enhance seemingly ordinary interactions but also engage users like never before. We showcase examples of how to create more compelling user experiences on the Web and desktop. To top it off, we walk through building a highly interactive application making use of these principles.

Watch video

IV. Building Amazing Business Centric Applications with Microsoft Silverlight 3

Come hear how simple it is to build end-to-end data-intensive Silverlight applications with the new set of features in Silverlight 3 and .NET RIA Services. Explore Silverlight improvements that help to enable rapid development for business applications and to make your development process more productive.

Watch video

V. NET RIA Services – Building Data-Driven Applications with Silverlight and ASP.NET

Learn how Microsoft is simplifying the traditional n-tier application pattern by bringing together ASP.NET and Silverlight. Learn about patterns for working with data, implementing reusable and independently testable application logic, and application services that readily scale with growing requirements.

Watch video

VI. Microsoft Silverlight Is Ready for Business

Come learn how to build a Silverlight business application today with the new UI features including DataGrid, DataForm, validation and navigation. Also see an example of how to connect to services using a LINQ enabled, Entity Framework-backed, data management solution.

Watch video

VII. High-Speed RIA Development with the Microsoft Silverlight Toolkit

Come learn how the Silverlight Toolkit can help jumpstart development of stunning Web experiences, and learn how to use the latest controls to create more immersive, more manageable user experiences. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced debugging and unit testing techniques for building components that work across Silverlight and Windows Presentation Foundation (WPF).

Watch video

VIII. Building Accessible RIAs in Microsoft Silverlight

Learn how to maintain compliance with a growing number of accessibility standards (including 508 in the U.S., WCAG 2.0, and others) by using Silverlight to produce fully accessible RIAs that are policy compliant. See how to use the new User Interface Automation (UIA) technology included in Silverlight by walking through the design and development decisions made when building Buttercup, a Silverlight based DAISY talking book reader.

Watch video

IX. What’s New in Microsoft Silverlight 3

Take a tour of the new features in Silverlight 3 including a dive into some of the new experience oriented features like pixel shaders, perspective 3D, animation enhancements, bitmap APIs and improvements to the media stack. Also hear about new Silverlight base framework additions including updates to the style model, data binding improvements, improved resource handling and improvements to the web services stack. This session will also introduce the Silverlight 3 out of browser model.

Watch video

X. Building Microsoft Silverlight Controls

Learn how to encapsulate structure, animation, and logic inside custom controls that handle theming, layout, validation, and data binding. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced design, coding, debugging, and testing techniques for building components that work interchangeably in Silverlight and Windows Presentation Foundation (WPF).

Watch video

I hope you enjoy some of these webcasts