Improving on the Default Application Loading Screen

After improving the Silverlight installation experience, the next step is to improve the experience for your users while your Silverlight application is being downloaded from the server. You are no doubt familiar with the blue spinning balls animation that is displayed while your application is being downloaded, as shown in Figure 17-4, which provides a generic indicator that something is currently happening. If after half a second the application is still downloading, Silverlight will automatically display this default loading animation until the application has finished downloading.

images

Figure 17-4. The default “Downloading Application” animation

However, as with the default Silverlight installation experience, this simple wait indicator with no associated branding or personalization is not an ideal user experience. Instead, you should replace this animation with your own custom one, commonly referred to as either a preloader or a splash screen.

An application preloader is essentially a XAML page that is requested from the server by the Silverlight plug-in prior to the application itself. Designed to be very small (much smaller than the application), it will be downloaded first and be displayed while the main application continues to download. Whereas the main application will be compiled and compressed into an .xap file, the preloader is not a part of the Silverlight project. Instead, it is a standalone XAML file added to your Web project, and is, therefore, not compiled into an .xap file. This also means that you can't write any code-behind against the CLR; however, you can make use of the JavaScript API (as was used back in Silverlight 1.0) to control the user interface, which can be written in a .js file and downloaded along with the XAML file.

In the following workshops, we're going to create and test a simple application preloader. Figure 17-5 demonstrates what the preloader you will be creating will look like.

images

Figure 17-5. The custom preloader

As you can see, it displays an image with the company logo, tells the user what it's doing, and displays a progress bar and the progress as a percentage.

Images Workshop: Creating the Application Preloader Files

In this workshop, we'll create the files required for the simple application preloader, and get them to a point where the project compiles, although the preloader will be blank.

images Note Follow through these instructions step by step, without jumping around, trying to compile, and so on. This is very important. Unfortunately, the process isn't particularly straightforward, and not going through each step in order, one at a time, is likely to lead to confusion and frustration.

  1. Start by adding a new item to your Web project, using the Silverlight 1.0 JScript Page item template (found in the Silverlight category), and name it AppPreloader.xaml. This template will actually create two files: a XAML file with the name you specified in the Add New Item window, and a JavaScript file with the same name as the XAML file but with a .js extension.
  2. After the file has been created and opened, you'll note that there is no XAML designer support. However, if you close the file and open it again, the designer will appear but will display an error due to it not supporting the referenced default namespace used by Silverlight 1.0.
  3. Delete the contents of both the XAML file and the JavaScript file, as it's just the files you need, not their contents. You will be using a different default namespace than that used in the XAML file created for us, and trying to use the default namespace from the item template will end up just creating problems and confusion for you. Likewise, none of the contents of the JavaScript file are required; you'll add your own code shortly.
  4. Now add the following XAML to the XAML file:
    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    </Grid>

    images Note There is no IntelliSense in the XAML editor as yet. This will come after the next step has been performed.

  5. Click the “Reload the designer” button in the designer. The error that was being displayed will disappear.
  6. Attempting to compile the solution now will result in the following error:
    Project file must include the .NET Framework assembly 'WindowsBase, PresentationCore,
    PresentationFramework' in the reference list.

    With the designer open now, you can have these references automatically added to your project by simply dragging a TextBox from the Toolbox into the designer. Alternatively you can simply type an open angle bracket (<) in the XAML editor, with the designer open, which will have the same effect. You should now be able to successfully compile the project.

Images Workshop: Designing the Application Preloader's Appearance

Now that you have the required files properly configured, you can start adding the content you want to display in the preloader. One of the most important points when creating a preloader is to try to keep it very small. As a general rule, try to keep it less than 5 percent of your application's total size, and no more than 10 KB so that it can download and be displayed to the user as quickly as possible, even on slow connections.

Almost all preloaders display an indicator to the user showing the current progress of the application download. This enables the user to be aware that something is actually happening, and how much longer it might take. The Silverlight plug-in raises an event at a regular interval that you can handle in the JavaScript file, reporting the current progress of the application download. The preloader should also display some branding for both the company and the application.

images Note When implementing preloaders, you will need to stick to using only the controls in the core Silverlight runtime. Essentially, you are limited to using Silverlight 1.0 controls only. Controls available for you to use include the Canvas, Grid, StackPanel, InkPresenter, MediaElement, TextBlock, Image, Rectangle, Line, Ellipse, Path, Polygon, and Polyline. However, other controls such as the ProgressBar (which would be very useful in a preloader), Button, and so on are unfortunately not available.

  1. Add the following XAML to the XAML file that you created in the previous workshop:
    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <StackPanel VerticalAlignment="Center">
            <Image Width="352" Height="111" Source="../Logo.png" />
            <TextBlock HorizontalAlignment="Center" Margin="0,10,0,5"
                       Text="Please wait - downloading..." />
            <Grid HorizontalAlignment="Center">
                <Rectangle Stroke="#FF5F91B4" Height="7" Width="454" />
                <Rectangle Fill="#FF5F91B4" Margin="2,0,0,0"
                        Height="3" Width="450" HorizontalAlignment="Left">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform x:Name="ProgressBarTransform" ScaleX="1"/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Grid>

            <TextBlock Name="ProgressText" Text="0%"
                       HorizontalAlignment="Center" Margin="0,0,0,5" />
        </StackPanel>
    </Grid>

You'll note that instead of using a ProgressBar control in the preloader, we're creating our own “poor man's version” of a progress bar using two Rectangle controls instead. Unfortunately, the ProgressBar control isn't available for us, as it's not in the core Silverlight runtime. Therefore, we need to create our own using only the primitive controls available to us. One rectangle forms the outer border of the progress bar, and an inner rectangle is used as the progress indicator. The trick for this is that you create the progress indicator rectangle, setting its width as it will be when displaying a value of 100 percent, but apply a scale transform that will be used to scale its width in proportion to the progress value it is indicating. By altering the transform's ScaleX property with values between 0 and 1 (in JavaScript code), you will be able to display the progress from 0 percent to 100 percent accordingly. This provides an elegant way to implement the progress bar without needing to worry about calculating the required width in pixels in the JavaScript code. The transform has a name, enabling us to refer to it in the code and adjust the scale accordingly, as you will see in the next workshop.

You will also note the use of the Image control. The Logo.png file it refers to is a file in the Web project, and you are using a relative path to specify its location. Don't be concerned about the fact that the image doesn't appear in the XAML designer; it may not appear there, but it will appear when the preloader is being displayed at runtime.

images Note As with the advice given earlier, you should ensure that any images used are as small as possible, and keep the entire preloader and its resources under 10 KB if you can. You might try running the image through a tool that shrinks the size of images, as these can result in a drastic size reduction. Some of these tools are online tools and, therefore, easy to try. One such tool is available at www.imageoptimizer.net.

Images Workshop: Updating the Application Download Progress

Now that you have the visual aspects of your application preloader in place, you need to update the progress being displayed. This involves updating both the progress bar indicator's scale transform, and the text displaying the progress as a percentage.

The Silverlight plug-in has the following two events it raises that you can handle:

  • OnSourceDownloadProgressChanged
  • OnSourceDownloadComplete

The OnSourceDownloadProgressChanged event will be raised on a regular basis, and you can use the progress property of the EventArgs object passed into the handler as a parameter to determine the progress. This will be a value between 0 and 1, so you can assign this value directly to the ScaleX property of the progress bar indicator's scale transform, and multiply it by 100 to display the value as a percentage.

Add the following code to the JavaScript file in order to update the preloader when the onSourceDownloadProgressChanged event is raised:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    var progress = Math.round((eventArgs.progress * 100));
    var ProgressBarTransform = sender.findName("ProgressBarTransform");
    var ProgressText = sender.findName("ProgressText");

    if (ProgressBarTransform != null)
        ProgressBarTransform.ScaleX = eventArgs.progress;

    if (ProgressText != null)
        ProgressText.Text = progress + "%";
}

images Note This event handler will be wired up in the next section.

The OnSourceDownloadComplete event is called after the application has completed downloading, but is rarely used, as the application will load immediately after it's raised.

Images Workshop: Configuring the Preloader in the HTML File

You now have your application preloader's design in place, and the code to update it when the application's download progress changes. However, you now need to actually wire both of these things up so that the Silverlight plug-in knows about them.

  1. Start by opening up the HTML page that hosts the Silverlight plug-in. In the head tag, add the following reference to the JavaScript file:
    <script type="text/javascript" src="AppPreloader.js"></script>
  2. Now locate the Silverlight plug-in, and add the following two parameters to it:
    <param name="splashscreensource" value="AppPreloader.xaml"/>
    <param name="onSourceDownloadProgressChanged"
           value="onSourceDownloadProgressChanged" />

These two parameters connect everything together, and you're now ready to test it all.

images Note Ensure that the HTML or ASPX page you are modifying is actually the file set as the start page for your Web project. Better yet, delete the page you're not using. Otherwise, you might face some confusion wondering why the preloader isn't being displayed, when you are simply browsing the wrong file when you run your application.

Testing the Application Preloader

Testing the application preloader may initially seem like a simple enough task, but it's actually a deceptively complex process. The issue is that when running your application locally, the download process will generally be extremely fast and the preloader will not have time to actually be displayed, or will be displayed only momentarily. This obviously makes it difficult to test and debug. However, there are some tricks you can use to slow down its display. Let's take a look at some of these.

images Note You might often get errors such as “Failed to download the splash screen” or “Could not download the Silverlight application. Check web server settings.” when debugging your application locally. Alternatively, you could get a blank screen, with neither the preloader nor the application itself loading. This appears to be an issue with the application download in this scenario being faster than it takes to download and display the preloader. This should not be a problem in production environments, however.

Adding a Large File to the Silverlight Project

The easiest thing you can do to try to slow the downloading process and give your application preloader some time to be displayed is to add one or more large files to your Silverlight project in order to increase its size. The larger the project, the longer it will take to download. Simply add a large file to your project, and set its Build Action property to Content by selecting the file in Solution Explorer and then setting the property value in the Properties window. This is a simple way of slowing the download process, but not particularly effective.

Not Assigning the Application's RootVisual

The application preloader is displayed until the RootVisual property of the Application object is assigned. Therefore, if you don't assign a value to this property, the preloader will continue to be displayed indefinitely.

In your Silverlight project, open up the code-behind for the App.xaml file, find the Application_Startup event handler method, and comment out the following line of code:

this.InitializeRootVisual();

Now when you run your project, the preloader will continue to be displayed, without displaying your main application. This trick won't help you in testing your progress bar, but will help in testing the look and feel of your preloader.

images Note Another option is to sleep the thread, using the System.Threading.Thread.Sleep method, for a fixed period immediately prior to initializing the RootVisual.

Using Fiddler

Fiddler is a web debugging proxy that intercepts all incoming and outgoing HTTP/HTTPS connections, enabling you to log and modify the traffic. You can use Fiddler to slow down the downloading of the application, giving you time to view and test the preloader.

images Note You can download Fiddler for free from www.fiddler2.com.

When you open Fiddler, it will immediately start capturing the traffic. Select both the Simulate Modem Speeds and the Disable Caching options from the Rules Images Performance menu. This slows down the traffic to simulate 56k modems speeds, and also disables caching such that when you refresh the page, the application will need to be downloaded from the server again, enabling you to test your preloader again without the application being immediately loaded from the browser cache.

Unfortunately, simply running your application is not enough for this all to work. Fiddler bypasses capturing local traffic, but there is a trick that you can use to ensure that it intercepts your application. Change the use of “localhost” in the URL in your browser's address bar to “127.0.0.1.” (the localhost loopback IP address, followed by another period). This will trick Fiddler into capturing the traffic, and you will find that the application now downloads slowly enough for you to adequately test your preloader. After the application has loaded, you can simply refresh the page to have it downloaded again, because it will not be cached.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset