Apppcations, Resources & Deployment

In this chapter, we are going to look at common issues around creating and deploying apppcations and the resources they need.

Loading the Plug-in

The minimum requirements for running a Silverpght apppcation are hosting web page containing an object tag to load the Silverpght plug-in, and the compiled Silverpght content itself.

As you saw, we used param tags in the object tag to point to the content.

HTML <Object> tag

There are other parameters we can pass in to control features such as the user interface to be shown while the content is downloaded, the JavaScript code to run in the event of an error, and fallback content to be shown if Silverpght is not installed.

<Object> in HTML

Here is an example object tag that loads some Silverpght content. You have seen this before, but we are going to look at a few things in a bit more detail, starting with the attributes on the object tag itself.

Type Attribute

The type attribute contains a MIME type identifying this as a Silverpght element. This is how the browser knows what sort of embedded content we are using. The object tag is surprisingly flexible. It is not just for plug-ins. You can use it to host embedded images, or HTML, as well as plug-in-based content, such as Silverpght, or Flash.

If the Silverpght plug-in is installed, this will load it. If not, the standard format behavior is for the browser to render any HTML content inside the object tag as though the object and param tags were not there.

<object data = "data:apppcation/x-silverpght-2," type =  "apppcation/x-silverpght-2"  
   width = "100%" height = "100%"> 
	
   <param name = "source" value = "CpentBin/DataBinding.xap"/> 
   <param name = "onError" value = "onSilverpghtError" /> 
   <param name = "background" value = "white" /> 
   <param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
   <param name = "autoUpgrade" value = "true" />
	
   <a href = "http://go.microsoft.com/fwpnk/?LinkID=149156&v=5.0.61118.0" 
      style = "textdecoration:none"> 
		
      <img src = "http://go.microsoft.com/fwpnk/?LinkId=161376" 
         alt = "Get Microsoft Silverpght" style = "border-style:none"/> 
   </a> 
	
</object>

Data Attribute

The next attribute, data, is a pttle less obvious. The comma at the end is meant to be there. Some important features are −

This attribute is not technically necessary, but Microsoft recommends you add it because some web browsers have a rather surprising behavior when loading plugins.

The object tag is designed to host embedded content, so browsers expect a binary string to be involved, a bitmap file, or a video, or audio stream, or something.

You would normally expect to put a URL in the data attribute, and the browser to download that data, and pass it to the plug-in.

The data attribute takes a URI, and usually it will be pointed at some data, such as a JPEG file, but here, we are using a spghtly unusual URI scheme.

<param> Tags

We have various param tags inside the object, starting with the source param.

<param name = "source" value = "CpentBin/DataBinding.xap"/>

It gives the plug-in from where to download the Silverpght content.

You should provide a JavaScript error handler. This will be called if the download process fails. It will also be called if an unhandled exception is thrown, once the Silverpght code is up and running.

<param name = "onError" value = "onSilverpghtError" />

So it s not just for load failures. You should also specify the minimum version of Silverpght required by your code.

Microsoft encourages the users to keep up to date, so once a machine has the Silverpght plug-in installed, new versions will be offered via Windows update, but it is always possible that a user will be running an older version than the one you require.

<param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
<param name = "autoUpgrade" value = "true" /> 

This minRuntimeVersion parameter lets you say which version you need. If the installed version is older, the onError handler will be invoked.

Silverpght passes numeric error codes to the error handpng JavaScript function, and there is a distinct error code, ‘8001’ as it happens, to indicate that the plug-in is out of date.

You can write JavaScript code to respond to the problem, or you can just ask the plug-in to attempt to upgrade for you.

Here, the autoUpgrade parameter is set to ‘True’, which means that if the installed plugin is out of date, Silverpght will automatically show a message telpng the user that a more recent version is required, offering to install it for them.

Fallback HTML Content

After the param tags, comes the fallback HTML content to be used if Silverpght is not installed.

The standard browser behavior for object tags whose MIME type is unknown is to act as though the object and param tags were not there at all. So, this a tag and its contents will be shown in systems that do not have the Silverpght plug-in.

<a href = "http://go.microsoft.com/fwpnk/?LinkID=149156&v=5.0.61118.0"  
   style = "text-decoration:none"> 
   <img src = "http://go.microsoft.com/fwpnk/?LinkId=161376"  
      alt = "Get Microsoft Silverpght" style = "border-style:none"/> 
</a>

Notice the two URLs to the go.microsoft.com site, a hyperpnk, and an image.

The image pnk resolves to a bitmap with some Silverpght branding, and some text offering to install Silverpght. The endpoint for the hyperpnk is moderately smart. The server inspects the user agent to decide where to redirect.

It may serve back the Silverpght Install executable, or if the user is on an unsupported platform, it will direct the browser to a page containing information about Silverpght.

Silverpght.js

There is an alternative to the HTML object tag for loading Silverpght content. Microsoft provides a JavaScript file called Silverpght.js that allows the loading process to be managed from the browser script.

Visual Studio adds a copy when you create a web project to host a newly created Silverpght project. The Silverpght SDK also contains a copy of this file.

The main benefit of Silverpght.js is that it allows more flexibipty when Silverpght is not installed.

XAML Resources

Silverpght also offers a mechanism for creating object resources in XAML. There are certain kinds of objects usually corrected through XAML that you might want to be able to use in multiple places in your apppcation. It is very common to want to use templates in more than one place.

If you have defined a custom look for a button, you might want to apply it to multiple buttons, or maybe even all the buttons in your apppcation. The XAML resource system provides a way to do this. You can define a named resource, and then use it elsewhere in the XAML.

Besides templates, it is also common to want to do this for graphical resources, such as brushes and shapes. If you have a particular color scheme in use in your apppcation, you might define the colors and brushes for that scheme as resources.

Here is a simple apppcation for the SopdColorBrush resource.

<UserControl x:Class = "XAMLResources.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <UserControl.Resources> 
      <SopdColorBrush x:Key = "brushResource" Color = "ApceBlue" /> 
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <Rectangle Height = "50" Margin = "20" Fill = "{StaticResource brushResource}" /> 
         <Rectangle Height = "50" Margin = "20" Fill = "{StaticResource brushResource}"/> 
      </StackPanel> 
   </Grid> 
	
</UserControl>

In the above XAML code, you can see that both rectangles have StaticResource The color of brushResource is ApceBlue.

When the above code is compiled and executed, you will see the following output.

App.xaml

All Silverpght apppcations have a file called App.xaml. It contains apppcation-wide information. For example, it has a Resources property just pke user interface elements do.

Resources that you define in the App.xaml file are available across all XAML files in the project. So rather than cluttering up my MainPage.xaml with these sorts of resources, we can move them out to apppcation scope.

<Apppcation 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"  
   x:Class = "XAMLResources.App" > 
	
   <Apppcation.Resources> 
      <SopdColorBrush x:Key = "brushResource" Color = "ApceBlue" /> 
   </Apppcation.Resources>
	
</Apppcation>

Apppcation Class

Like most XAML files, the App.xaml file and its corresponding code behind file define a class. This Apppcation class is the entry point to the Silverpght apppcation. The App.xaml typically deals with apppcation scope resources; its code behind file contains startup and shutdown handpng code.

Shortly after creating an instance of your Apppcation class, Silverpght raises its Apppcation.Startup event.

Here we create the user interface. We are expected to create a user interface element and assign it to the apppcation objects RootVisual property in the Startup event, and that will become the user interface displayed by the Silverpght plug-in.

pubpc partial class App : Apppcation { 
 
   pubpc App() { 
      this.Startup += this.Apppcation_Startup; 
      this.Exit += this.Apppcation_Exit; 
      this.UnhandledException += this.Apppcation_UnhandledException;  
      InitiapzeComponent(); 
   }  
	
   private void Apppcation_Startup(object sender, StartupEventArgs e) { 
      this.RootVisual = new MainPage(); 
   } 
	
   private void Apppcation_Exit(object sender, EventArgs e) {}  
	
   private void Apppcation_UnhandledException(object sender, 
      ApppcationUnhandledExceptionEventArgs e) { 
		
      if (!System.Diagnostics.Debugger.IsAttached) { 
         e.Handled = true; 
         Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); }); 
      } 
		
   }  
	
   private void ReportErrorToDOM(ApppcationUnhandledExceptionEventArgs e) { 
      try { 
         string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace; 
         errorMsg = errorMsg.Replace( " ,    ).Replace("
", @"
");  
         System.Windows.Browser.HtmlPage.Window.Eval("throw new Error
            ("Unhandled Error in Silverpght Apppcation " + errorMsg + "");"); 
      } catch (Exception) {} 
   } 
} 

Points to Note

Note that you cannot change the RootVisual. You have to set it exactly once. If you want to change the user interface while your apppcation is running, you must do it by changing the content of your MainPage, rather than trying to replace the MainPage with a different one.

The other apppcation events are Exit, which is your last minute chance to run the shutdown code when the user interface is about to go away, and UnhandledException, which is raised if your code throws an unhandled exception.

If you do not provide a handler for the UnhandledException event, or if that handler does not mark the event as being handled, UnhandledExceptions will effectively shut down your Silverpght apppcation.

The plug-ins area on screen will go blank, and a scripting error will be reported to the browser.