Out Of Browser (OOB) - Part II : Silverlight

Share |

This post is the Part II of Out of Browser (OOB). The part I can be found here

In part I, we saw what is OOB, what are the ways to take the application offline and how the application gets the update from the server. In this part we will see an example. The example is simple one, we create an application that will tell us whether it is running in browser or out of browser, whether it is connected to internet or not.

Out Of Browser (OOB) - Part I : Silverlight

Share |

Out of Browser Feature

                      Silverlight 3 applications are no longer restricted to running in a browser. They can be run in a browser or it they can be detached from the browser and run from the desktop. These out-of-browser applications allow you to bring the richness of Silverlight 3 applications directly to the desktop without the restriction of running within a browser. With the release of Silverlight 3 Beta 1, Microsoft introduced the ability for Silverlight applications to run outside the browser. These “Out Of Browser” (OOB) applications are installed on the desktop, and have associated shortcuts just like traditional Windows applications. Silverlight OOB applications are still limited by the same security sandbox as their "in-browser" counterparts, so all the security and local access rules still apply as if they were running inside of a browser.

Offline Feature

                 While the OOB feature is really useful, Microsoft also introduced the capability to run OOB applications offline. There are several different implementations and options for Disconnected Silverlight OOB applications, but updating an existing Silverlight 3 application to run disconnected can be achieved in just three easy steps. We will look at these steps further in this document.

How OOB Works

Detaching the application:

               The first time users view the application, it will be in the web context in a page. If the application is enabled for OOB experiences, the user can detach the application. There are two ways through which you can detach the application to run in OOB mode, as follows:

1.    Through the right click context menu

2.      Via a user-initiated action (e.g. context menu or button click or some function in the application that calls Application.Current.Detach()).

This action takes the browser and creates an OOB application as follows.

• The application (XAP) is requested again via the browser
• The XAP gets stored locally in a low trust location along with metadata, which includes the origin URI of the XAP as well as metadata, most importantly for this discussion the ETag information of when it was downloaded (essentially a timestamp).

Launching the OOB application:

               If we close the application and launch it again from the desktop, it initiates a startup of the application. In this instance, the application looks at its metadata for the origin URI of the XAP and makes a request therewith. It compares the HTTP response data (code and ETag) for comparison. If the application wasn’t updated, then the application launches and all is well.  In fact, inspecting the request it would look something like this for our application:

GET /silverlight/oob/ClientBin/OutOfBrowser.xap HTTP/1.1
If-Modified-Since: Thu, 19 Mar 2009 03:52:35 GMT
User-Agent: Silverlight
Host: timheuer.com
X-P2P-PeerDist: Version=1.0
Accept-Encoding: peerdist
  
  
HTTP/1.1 304 Not Modified
Last-Modified: Thu, 19 Mar 2009 03:52:15 GMT
Accept-Ranges: bytes
ETag: "f2e3a81746a8c91:445"
X-Powered-By: ASP.NET
Date: Thu, 19 Mar 2009 03:55:18 GMT 

                        Here, in line no. 09, we can see the response “HTTP 304 Not Modified”. No further information is sent and we can see that no content was even delivered, because the application hasn’t changed. At the API level, we can detect the changes made in the application since its last run using the ExecutionStateChanged event handler, and checking if the current ExecutionState is ExecutionStates.DetachedUpdatesAvailable, in the App.xaml file.

public App()
{
    this.ExecutionStateChanged += new 
        EventHandler(App_ExecutionStateChanged);
}
void App_ExecutionStateChanged(object sender, EventArgs e)
{
    if (App.Current.ExecutionState == 
         ExecutionStates.DetachedUpdatesAvailable)
    {
        MessageBox.Show("Restart the app to use the latest version.");
    }
}

                               In the above case, the ExecutionStateChanged event is not triggered on a state change of DetachedUpdatesAvailable.

Updating the OOB application

                Now suppose the application has been updated and uploaded to the server. The next time the user launches the application, the same requests happen.

               Again, the requests are made sending the metadata information. In this case, though, there is an update. What happens next is two-fold. Along with the response being sent with a new timestamp/ETag, the request also includes the bits of the updated application. Looking at the request, it would look like:

GET /silverlight/oob/ClientBin/OutOfBrowser.xap HTTP/1.1
If-Modified-Since: Thu, 19 Mar 2009 03:52:35 GMT
User-Agent: Silverlight
Host: timheuer.com
X-P2P-PeerDist: Version=1.0
Accept-Encoding: peerdist
 
 
HTTP/1.1 200 OK
Content-Length: 15557
Content-Type: application/x-silverlight-app
Last-Modified: Thu, 19 Mar 2009 03:56:29 GMT
Accept-Ranges: bytes
ETag: "ce39d0ae46a8c91:445"
X-Powered-By: ASP.NET
Date: Thu, 19 Mar 2009 03:56:45 GMT
 . . . 

                 Where “<data>” in the snippet above would actually be the bytes (notice the Content-Length and Content-Type headers) of the updated XAP. Two things happen now:

• Application.Current.ExecutionState changes to a DetachedUpdatesAvailable state.
• The XAP in the local storage location is updated to the new bits.

              Now right now there is no option to decline the updated bits. If the app is updated, the users will get them. Re-launching the application (from the local machine) would start up again with the newly downloaded bits, and the updated request would look again similar to the first:

GET /silverlight/oob/ClientBin/OutOfBrowser.xap HTTP/1.1
If-Modified-Since: Thu, 19 Mar 2009 03:56:49 GMT
User-Agent: Silverlight
Host: timheuer.com
X-P2P-PeerDist: Version=1.0
Accept-Encoding: peerdist
 
 
HTTP/1.1 304 Not Modified
Last-Modified: Thu, 19 Mar 2009 03:56:29 GMT
Accept-Ranges: bytes
ETag: "ce39d0ae46a8c91:445"
X-Powered-By: ASP.NET
Date: Thu, 19 Mar 2009 03:57:12 GMT

                    Thus, when an application is detached, metadata is stored about that application. At each launch, it does a check against that metadata to see if an update is visible. If the application is offline, it won’t block the application from launching.

In the next part, we will see an example.

Hope this helps. Happy Coding ! ! !


                

Value Converter - Part II : Silverlight

Share |

This post is the Part II of Value Converter. The Part I can found here

http://www.silverdigita.com/2011/03/value-converter-part-i-silverlight.html

In part I, we saw about the interface IValueConverter and the members of the interface i.e. Convert and ConvertBack. Now let’s see an example. In this example, we will see how to format the decimal value. First of all, let’s create a class that implements IValueConverter interface (let’s call this class Formatter).

Value Converter - Part I : Silverlight

Share |

              In Silverlight, when you’re binding data to controls there will be times when the data needs to be modified when it is binded to the control or when it goes back to the source property (during TwoWay binding).  You can always write code to change a given value, but in many cases it’s much easier to write a simple value converter instead that can be re-used. Although a separate property can be created in the source object that handles the formatting, a value converter can be created and re-used. To create a ValueConverter, first you need to add a class to your silverlight project and implement an interface IValueConverter. The IValueConverter interface defines two members Convert and ConvertBack. Convert is used to convert the data when it is propagating from the binding source to binding target i.e. from the source object to the control. ConvertBack work the other way round. 

How to : Use the UserState property while making async WCF service calls

Share |

                In Silverlight, all the WCF service calls are asynchronous. After the call to the WCF service is completed, a Completed event is called at the Silverlight UI side.Sometimes it becomes necessary to determine which task raised the Completed event.In this case you can use the "UserState" property to determine this.

Silverlight Load Process

Share |

The flow chart in the image below shows the load process for the Silverlight Applications. The flow chart is self explanatory.



Silverlight Load Process


Hope this helps. Happy Coding !


Windows Authentication - Silverlight

Share |

The Windows Authentication can be implemented in two ways, First is by making a WCF service call and second is using JavaScript.

The First method, with detailed steps can be found on this link

http://rouslan.com/2009/03/20-steps-to-get-together-windows-authentication-silverlight-and-wcf-service/

The second method (which I feel is mush better/faster than first) is described below.

Application_Exit event - App.xaml (Silverlight)

Share |

Before the Silverlight application exit, you can confirm whether the user really wants to exit or not.

Read and Display RSS Feeds - Silverlight

Share |

The SyndicationFeed class in Silverlight makes it easy to parse the feed response. The process of reading a feed is as simple as reading a RSS feed using the WebClient class, loading the stream into the SyndicationFeed class and binding it to the Silverlight UI.

To use the SyndicationFeed class you need to add reference to System.ServiceModel.Syndication

The steps are as follows,

Implicit Styling - Silverlight 4

Share |

Styling in Silverlight is similar to styling in HTML with CSS. It helps you keep your markup (HTML, XAML) code clean by putting all the properties into a separate file. At runtime, both the markup and the styles defined in the external style sheet are merged and give the look to the application as it was intended.

Styling was already available in Silverlight. However, up until Silverlight 4, not all of the functions had been implemented (as compared to WPF). The most striking one was the default or implicit styling. Assume you are creating a Silverlight application and all controls of a specific type, for example all Buttons throughout the application should have a particular font size, font weight etc. In previous versions of Silverlight, we had to create a style and apply this style on every instance of the Button. There was no way to tell Silverlight that a particular style was supposed to be the style that had to be applied on all controls of a certain type.

Star Sizing in Grid Layout - Silverlight

Share |

In Silverlight, you have choice of using one of the following containers to create a layout for your application or control

• Canvas
• Grid
• StackPanel

Most of us end up with Grid as container for all controls, unless you are developing applications that require precise placement of controls based on exact position co-ordinates or your creating come kind of animation. Therefore it is important that you understand how Grid layout works.

Debug Error - Silverlight 3

Share |

Unable to start debugging. The Silverlight managed debugging package isn’t installed.

Recently, when I setup my SL 3.0 development environment on my new laptop, I can across a new error “ Unable to start debugging. The Silverlight managed debugging package isn’t installed.”

“Fig: SL Error - Unable to start debugging “

If you installed latest version of Silverlight (Silverlight 4), it may break the your current Silverlight development environment. After in the Silverlight 4 installation, if you try to debug any Silverlight 3 project, you will get a message from Visual Studio 2008, saying “Unable to start debugging. The Silverlight managed debugging package isn’t installed.”

To fix this error, install the Silverlight Developer Run time. To get it Click here

 

My first encounter with Silverlight

Share |

I joined TCS on November 2008 as a Fresher. We had to undergo two months ‘Initial Learning Program’ (ILP) training. The phase I of my ILP (basic training) was at Trivandrum and the second phase (technology training) was at Pune on Java/J2EE. The phase I of my ILP was awesome, had never been before to Kerala. It is really ‘God’s own country’ and I thanks TCS for conducting my first phase of my training at Trivandrum :-). After completion of first phase of training, we had 15 days time [paid holiday :-)] to join the base branch (Pune) for second phase of training. The second phase of training was also good. After successfully completing both the phases of ILP, we were now ready to join the project. My mind was flooded with thoughts like will I get a project (as it was recession time), will I get a billable project [I joined as a Fresher :-)], will my friends also get the same project etc. Finally, after waiting for a period of 7 days [yes, I know 7days of bench period is very less and that too at the time of recession it’s negligible, but for a ‘Fresher’ it’s considerable period ;-) ] I got a call for a project [and new thoughts started to flood my mind :-) ]. I was eager to hear about the project, my role in the project etc. Soon there was an end to my eagerness, when I heard that there is one project on Microsoft Office SharePoint Server (MOSS), one on IBM DB2 and one on Microsoft Silverlight. We had a choice to select our project. I was confused on which project should I choose as there was no project on Java/J2EE on which I was trained and If I don’t select any project then I had to be on bench for indefinite time [I was hearing all this technologies for the first time MOSS, Silverlight and DB2 :-) ]. We were given an overview of each project and our role in the project and one day’s time to give our choice. Therefore, I had just one day to select my technology from MOSS, Silverlight and DB2. I had discussion with my senior’s, my college professor’s and even with my sister. The conclusion of all the discussion was to go for MOSS but my heart was saying to go for Silverlight. I do not know why I was attracted towards Silverlight and I end up giving my name for the Silverlight project. After I gave my name for the project, I was regretting a lot why I opted for Silverlight when everyone had suggested me MOSS. Soon this regression ended when I meet my supervisor Harikumar Pillai [I did not meet him actually, as he was working in TCS-Mumbai office, so we had a conversation over call] and my team. Along with me were Aarti, Charika and Vidit as my colleagues and Harikumar as our supervisor, in the Silverlight project. We called our team as RIA team. This is how I got encountered and started with Silverlight.

I feel happy when I think about those days when I used to regret for not choosing MOSS and going for what my heart said.

Silverlight Versions

Share |

~ Silverlight 1.0
The first version of Silverlight is Silverlight 1.0, which was developed under the codename ‘Windows Presentation Foundation / Everywhere’ (WPF/E) and released in September 2007. It consist of the core presentation framework which is responsible for the UI, interactivity and user input, basic UI controls, graphics and animation, media playback, Digital Rights Management and DOM integration. It consists of the following components:
– Input – handling input from devices like keyboard, mouse etc.
– UI core – managing rendering of bitmap images (including compressed raster images like JPEG), vector graphics, text and animations.
– Media – playback of MP3, WMA Standard, WMV7, WMV8 and WMV9/VC-1 streams.
– XAML – to allow the UI layout to be created using XAML markup language.

The first version of Silverlight did not include .Net framework. Therefore, to modify the UI programmatically, we need to make use of scripting language supported by Silverlight, which was JavaScript. Silverlight provides various shapes like line, eclipse and rectangle. It also provides support for text, images, media and animations. In addition, you can make your custom shapes using the basic shapes provided by Silverlight.

~ Silverlight 2.0
Silverlight 2.0 (previously known as Silverlight 1.1) was released in October 2008. Silverlight 2.0 includes a version of .Net framework implementing the same Common Language Runtime version as .Net framework 3.0, so it can execute programs written in any .NET language. Therefore, from Silverlight 2.0, Silverlight supports managed language like C#, VB.NET. The XAML (pronounced as ‘ZAMEL’), which is responsible for defining the UI for the Silverlight application, can now be augmented by a code behind file. The following figure shows the Silverlight Architecture,

The Silverlight platform as a whole consists of two major parts, Core Presentation Framework and .Net Framework for Silverlight, plus an installer and update component.
Core Presentation Framework : Components and services oriented toward the UI and user interaction, including user input, lightweight UI controls for use in Web applications, media playback, digital rights management, data binding, and presentation features, including vector graphics, text, animation, and images. Also includes the Extensible Application Markup Language (XAML) for specifying layout.
.Net Framework for Silverlight : A subset of the .NET Framework that contains components and libraries, including data integration, extensible Windows controls, networking, base class libraries, garbage collection, and the common language runtime (CLR).

~ Silverlight 3.0
Silverlight 3.0 was released in July 2009. Silverlight 3 includes an increased number of controls – including but not limited to DataGrid, TreeView, various layout panels, DataForm for forms-driven applications and DataPager for viewing paginated data. Some of these controls are from the Silverlight Toolkit. In addition, Silverlight 3 includes a navigation framework to let Silverlight applications use the hyperlinked navigation model as well as enabling deep-linking (linking directly to specific pages) within Silverlight applications.
Silverlight 3 supports perspective 3D which enables 3D transformations of 2D elements. These transformations, as well as many 2D operations like stretches, alpha blending etc are hardware accelerated. Custom animations, including transforms and blends, can be created on Silverlight elements using HLSL to make use of pixel shaders. A Bitmap API is provided to let Silverlight 3 applications manipulate bitmaps
UI elements in Silverlight 3 supports element-to-element binding – which allows one element to be bound to the state of another element, as well as a validation mechanism for data binding. Unlike Silverlight 2, which allowed the applications to save files only to the local isolated storage, Silverlight 3 applications can save to any location on the file system via the system Save File dialog. However, the path where the file is saved will still be hidden from the Silverlight application
Silverlight 3 supports Out-of-Browser experiences, i.e., Silverlight applications can be installed to the system for offline access (provided the application manifest is designed to allow local installation) where they run outside the browser. They are launched using the Start Menu or desktop shortcuts, and run without the browser window. Applications can check whether they are running inside a browser or not. When running outside of a browser, HTML interop is disabled. In addition, access to the Function Keys is enabled. Locally installed Silverlight applications still run in a sandbox.
Installed Silverlight 3 applications automatically check for updates asynchronously on every launch and updates are automatically installed. Running instances of the applications are informed when updates are available.
~ Silverlight 4.0
Silverlight 4.0 beta was released in November 2009. The updates in Silverlight 4.0 include,
Tooling - New IDE Visual Studio 2010 and Expression Blend 3.0
Printing API - The most awaited feature in Silverlight. With Silverlight 4.0, you can now provide printing from your Silverlight application.
Localization - Silverlight 4.0 now supports 30+ languages.
Webcam and Microphone support - Silverlight now provides support for Webcam and microphone.
Local File Access - Now you can access the user's local file system (with the user's permission offcourse).
Right to Left Support - Silverlight 4.0 supports right to left display of text.
Other features include Com-Interop, Toast API, MEF etc.

What is Silverlight ? Part III

Share |

In the Part II, we looked into the presentation and programming model for the web and the need that gave rise to a new technology Silverlight. So Silverlight is a technology that is used to develop RIA (web applications that are similar to desktop application) delivered through the way of browser plug-in. With Silverlight (and AJAX), the goal is to create web applications that are more like desktop applications, and ultimately, to create applications that are indistinguishable from the desktop applications.
"Silverlight is  Cross-Browser, Cross-Platform programmable plug-in for delivering richer user experiences on the net." definition of Silverlight :-) Silverlight was previously known by its code name, Windows Presentation Foundation Everywhere (WPF/E). It runs on all popular browser like IE, Firefox, Safari, Opera, Chrome (Silverlight 4.0) and on various OS such as Windows, Mac OS etc. 

Fig: Silverlight Application event and method handling

Applications that run in the browser typically are made up of HTML.This markup contains the calls to instantiate the Silverlight plug-in. As users interact with the Silverlight application they raise events that can be captured by either JavaScript or .Net framework functions. In turn, program code can make method calls against the elements in the Silverlight content to manipulate it, add new content, or remove existing content. Finally, XAML can be read by the plug-in and rendered. The XAML itself can exist inline in the page, externally as a static file or as dynamic XAML returned from the server.

The main programming interface is the JavaScript DOM API.XAML parsing engine. The parser creates the in-memory XAML DOM for use by the presentation core, which handles the rendering of the graphics and animations defined by the XAML.In addition, the runtime contains the codecs necessary for playback of WMV, WMA, and MP3 multimedia content.Finally, the runtime contains the presentation core, which manages the rendering process. This presentation runtime is built into a browser plug-in that supports several flavors of Windows as well as Mac OS X, using any of several browsers.

After the 3 parts of "What is Silverlight?", hope so that you got an idea about What Silverlight is ?

What is Silverlight ? Part II

Share |

In the Part I, I talked about RIA. In this part we will look for the need that gave rise to a new technology "Silverlight". The following figure shows the presentation and programming model for the web.

fig: Presentation and Programming model for the web

You can see in the figure, to develop desktop application XAML is used for presentation and .Net framework for programming. The desktop applications have the power of .NET framework. On the other hand, to develop desktop application CSS/DHTML/HTML is used for the presentation and JasvaScript/AJAX/ASP.NET for programming. Although AJAX brings the feel of RIA to the web applications, it is purely browser-server communications i.e it helps to eliminate the flicker [flicker is when you click on some link the page is blank for some time till the data is received from the server.Not the photo sharing site ;-) ] but it does not provide rich User Interface (UI), high multimedia content etc (as XAML does in desktop applications).

Silverlight combines the best of both worlds (desktop and web). XAML is used for presentation and AJAX/.Net framework(from Silverligt 2.0 onwards) for programming. There is a particular value in the combined set of tools, technologies, and services included in the Silverlight platform: They make it easier for developers to create rich, interactive, and networked applications. Although it is certainly possible to build such applications using today's Web tools and technologies, developers are hindered by many technical difficulties, including incompatible platforms, disparate file formats and protocols, and various Web browsers that render pages and handle scripts differently. A rich Web application that runs perfectly on one system and browser may work very differently on another system or browser, or may fail altogether. Using today's large array of tools, protocols, and technologies, it is a massive and often cost-prohibitive effort to build an application that can simultaneously provide the following advantages:
• Ability to create the same user experience across browsers and platforms, so that the application looks and performs the same everywhere.
• Integration of data and services from multiple networked locations into one application using familiar .NET Framework classes and functionality.
• A media-rich, compelling, and accessible user interface (UI).
• Silverlight makes it easier for developers to build such applications, because it overcomes many of the incompatibilities of current technologies, and provides within one platform the tools to create rich, cross-platform, integrated applications.

I think, we are now clear on why there was need for another technology and the reason for the existence of Silverlight.

In the part III we will actually see what is Silverlight?

What is Silverlight ? Part I

Share |

The first question that arises when you hear about Silverlight "What is Silverlight?"
It's a new technology from Microsoft to develop next generation Rich Internet Applications (RIA's). Having said that, gives rise to another question "What is RIA ?" The name says it all, Rich Internet Applications. 
Wikipedia definition on RIA,
"Rich Internet Applications (RIAs) are web applications that have most of the characteristics of desktop applications, typically delivered either by way of a standards-based web browser, via a browser plug-in, or independently via sandboxes or virtual machines."
The definition can be summarized as "Web applications that have the features and functionality of traditional desktop applications." Features of RIA include :

• Richness
• High Performance
• Compatibility
• Advanced Communications
• Security

Advantages of RIA include :

• Every user interaction does not require request/web server response.

• Data can be obtained from server without redrawing entire page.

• Combines the best of desktop, web and communications.

• Efficiently utilize network bandwidth by transmitting only portion of the data that is changed.

Read more at Wikipedia on RIA.

There are different technologies from different vendors to develop RIA's like AJAX,JavaFX, Adobe Flex/Flash/AIR, Silverlight etc. So Silverlight is a technology from Microsoft to develop RIA. When a user interacts with your site, he should be in control of the site and not the vice-versa. Let me explain, When you click on a link on some web page, the page is blank for some time [ the browser (client) sends the request to the server, the server process the request and sends the data back to the browser (client), this process takes some time ]. For this time the user has to wait until the data is displayed (called as 'Flicker' ). With the help of AJAX, you can reduce the 'flicker'. AJAX is not a new technology but a new way to do the same old things. AJAX is purely a browser - server communication i.e it helps to eliminate the flicker but it does not provide rich UI, high multimedia content etc. To accomplish this, RIA technologies were introduced (JavaFX, Flash/Flex, Silverlight etc). We will discuss this further in Part II.