10 Minute Tutorial - Silverlight: Application Framework

In our last Silverlight tutorial, we created the simplest Hello World application possible, using a single HTML file. Starting at the bare minimum allowed us to see exactly what components go into a Silverlight application without using Visual Studio as a crutch or Javascript as a buffer.

So, while the previous tutorial served its academic purpose, it didn’t necessarily create a good foundation for building future Silverlight applications. In this tutorial, we will put a Silverlight application together in the way recommended by Microsoft.

Prerequisites

QuickStart

If you want to see the end result of this tutorial and you have installed all the prerequisites, then please download the ZIP file below, unzip it and open the app.html file in your browser.

You can see it in action, here.

Lesson

Step 1: Create the HTML

Like last time, let’s start with a single HTML file, app.html, that contains some very basic HTML. We will include the DOCTYPE this time:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Silverlight Application Framework</title>
    </head>
    <body>
    </body>
</html>
Step 2: Add the control host

In the previous tutorial, we embedded an <object> tag directly in the HTML to create our Silverlight control. This time, we’ll create that same <object> tag programatically at runtime using JavaScript. This allows us to abstract browser differences (for example, in some browsers, we might want to use the <embed> tag instead), and use type checking in our initialization parameters (after a fashion. This is Javascript, after all ;) ).

First, we need a tag to contain or “host” our <object> tag:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Silverlight Application Framework</title>
    </head>
    <body>
      <div id=”silverlightControlHost”>
      </div>
    </body>
</html>

Similar to the Microsoft examples that ship with the Silverlight SDK, we’ll put a small script block after this <div> tag to initialize our control:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Silverlight Application Framework</title>
    </head>
    <body>
      <div id="silverlightControlHost">
      </div>
      <script type=”text/javascript”>
          // Find the div by id
          var hostElement = document.getElementById(”silverlightControlHost”);  // Create the Silverlight control
          createSilverlight(hostElement);
       </script>
    </body>
</html>

Within our script block, we make a call to a new function named createSilverlight() passing a reference to the <div> tag hosting our control as its only parameter. I will explain this function in the next step.

I’m no HTML wizard, but I know designers who consider putting a script block at then end of an HTML body and using that to access elements an undependable technique across all browsers. Perhaps by the time Silverlight officially ships, Microsoft will provide some helper functions to easily add Silverlight to the window.onload function in a browser agnostic way. We could do it ourselves, but I want to see what they come up with ;).

Step 3: Add Javascript

We will need two different Javascript files. The first ships with the Silverlight SDK. From the Tools directory, copy the Silverlight.js file into the same directory as your app.html file. This file contains a library of utility functions that help abstract away browser differences when creating Silverlight controls in Javascript.

The second file we create ourselves. Create a new file called createSilverlight.js in the same directory as your app.html file. This file will hold the definition for the createSilverlight() function we called in step 2. Place this code within the createSilverlight.js file:


//creates the silverlight control within the tag specified by controlHostId
function createSilverlight( controlHost )
{
Silverlight.createObjectEx({
   source: "smiley.xaml",
   parentElement: controlHost,
   id: "silverlightControl",
   properties: {
     width: "350",
     height: "350",
     version: "2.0.31005.0",
     background: "white",
     isWindowless: "true",
     enableHtmlAccess: "true"
   },
 
   events: {}
});
}

The Silverlight.js file we copied earlier contains the definition for the Silverlight.createObjectEx we call from our code. And, if you remember from step 2, we passed in a reference to the div as the parameter to this function meaning that the parentElement parameter of our call to createObjectEx will be a reference to that div.

Now, with both files in hand, let’s add script references to those files in our HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Silverlight Application Framework</title>
      <script type=”text/javascript” src=”Silverlight.js”></script>
      <script type=”text/javascript” src=”createSilverlight.js”></script>
    </head>
    <body>
      <div id=”silverlightControlHost”>
      </div>
      <script type=”text/javascript”>
          // Find the div by id
          var hostElement = document.getElementById(”silverlightControlHost”);            // Create the Silverlight control
          createSilverlight(hostElement);
       </script>
    </body>
</html>
Step 4: Add the XAML

Finally, we can add the XAML. Put the smiley.xaml file from the prerequisites it into the same directory as your app.html file. As you probably already guessed, this XAML file simply creates a smiley face. You’ll notice in our call to createObjectEx() during step 3, we passed in a source parameter with the value of “smiley.xaml”. This tells the Silverlight control to render “smiley.xaml” upon control creation.

Conclusion

With all the files in place, you can go ahead and open your app.html file. You should see a smiley face appear in the upper-left corner of your browser. Isn’t he cute? :)

So, in this tutorial, we created a reusable Silverlight application template, according to Microsoft’s recommendations. In future tutorials, we will build upon this foundation to create bigger and yes, more exciting, applications.

Share and Enjoy:
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • Reddit
  • del.icio.us
Related Posts:
No related posts

June 25, 2007 | Filed Under Tutorial, Silverlight 

Comments

Comments are closed.