What introduction would be complete without a “Hello World” application? In this section, you’ll have the chance to look at all the pieces that make up a Silverlight application and how they work together. Although the application you build will be very simple, the principles of building a much more complex application are the same—and you’ll be well on your way to understanding Silverlight development! You’ll need no special tools—everything you do can be done with a simple text editor. You’ll revisit these files again in Chapter 5, “Programming Silverlight with JavaScript.”

Step 1: Silverlight.js

The first thing you’ll need is the Silverlight.js file. This file contains everything you need to create a Silverlight component on your page. Silverlight is a browser plug-in that renders XAML and exposes a JavaScript programming interface. Browser plug-ins are implemented using special HTML tags called object and embed. Different browsers handle them differently, so instead of having to adjust them for a particular type of browser, it’s a lot easier just to use the Silverlight.js file, which deals with the different browser implementations for you. It is available in the Silverlight Software Development Kit (SDK), which by default installs to \PROGRAM FILES\Microsoft Silverlight 1.0 SDK. You’ll find Silverlight.js in the Resources directory. To use the file, simply include it with your Web project and provide a link on any page that will host the Silverlight control (you’ll see this in Step 5 later in this section).

Step 2: XAML

A Silverlight user interface (UI) is defined using XAML—XML Application Markup Language. Some great resources to get you started with XAML can be found in the Silverlight Quick-Starts, task-based examples that provide tutorials to help you learn the features of Silverlight. The QuickStart tutorials are available at http://www.silverlight.net/quickstarts.

Our simple first application will use a XAML Canvas that contains a TextBlock control which, as its name suggests, renders text:

<Canvas 
    xmlns=http://schemas.microsoft.com/client/2007
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Width="640" Height="480" 
    Background="White" 
    x:Name="Page"> 
    <TextBlock Width="195" Height="42" Canvas.Left="28" Canvas.Top="35" 
          Text="Hello World!" TextWrapping="Wrap" x:Name="txt"/> 
</Canvas>

This simple piece of XAML contains two components. The first component is the root Canvas element, which is present in every Silverlight XAML and defines the overall drawing surface. As you can see, we are using a 640 × 480 white Canvas. The second component is the TextBlock element I mentioned earlier. It renders the text “Hello World!” on the Canvas. This new XAML document should be saved and named. For this example, use the file name Page.xaml.

Keep in mind that XAML is just XML, so all of the conventions of XML apply. You can see that the TextBlock is a child node of the Canvas, and that XML attributes are used to define the properties of the objects. This allows for some cool scenarios, such as generating UI on demand from server applications using ASP.NET, Personal Home Page (PHP), or Java. We’ll look at some of these possibilities later in this book.

Step 3: CreateSilverlight.js

It’s good practice to host the code for creating the Silverlight component on your page in a separate JavaScript file. Although not essential, it is a useful step that promotes clean separation of code.

By convention, you would name this file CreateSilverlight.js, but of course you can name it anything you like as long as you reference it correctly when you assemble your HTML. Following is an example function that instantiates the Silverlight control in the browser:

function createSilverlight() { 
Silverlight.createObjectEx({ 
    source: "Page.xaml", 
    parentElement: document.getElementById("SilverlightControlHost"),
    id: "SilverlightControl", 
    properties: { 
            width: "100%", 
            height: "100%", 
            version: "1.0" 
        }, 
        events: { 
            onLoad: handleLoad 
        } 
    }); 
}

This function calls the createObjectEx function, which is implemented in Silverlight.js, an essential file that you added to your site in Step 1 of this example. You’ll notice that an event handler, handleLoad, has been added to handle the Load event. You’ll see how this is implemented in Step 4.

Step 4: Your Application Logic

This simple application allows you to click on the text block and cause the text to change from “Hello World!” to “You clicked me!” The code for this application is shown here:

var SilverlightControl; 
var theTextBlock; 
function handleLoad(control, userContext, rootElement)
{ 
    SilverlightControl = control; 
    theTextBlock = SilverlightControl.content.findName("txt");
    theTextBlock.addEventListener("MouseLeftButtonDown", "txtClicked"); 
} 
function txtClicked(sender, args) 
{ 
    theTextBlock.Text = "You clicked me!"; 
}

The handleLoad method was defined as an event handler in the createSilverlight function. When Silverlight renders the control, it calls this method, passing it a reference to the control, the contents of the userContext variable (which can be set in the createSilverlight), and a reference to the root canvas element. You’ll see all of this again in more detail in Chapter 5.

The handleLoad method locates the text block (named txt) and adds an event listener to its listener collection. The event that it is listening for is MouseLeftButtonDown, and when this event fires, the txtClicked function is invoked and the text is changed accordingly. This code should be saved to a new file named code.js and included in your project.

When you implement an event handler, as I have done with handleLoad, your function should accept parameters for sender (the originator of the event) and args (arguments associated with the event).

Step 5: Your HTML Page

Now it’s time to put it all together with an HTML page that references each of the JavaScript files and embeds the Silverlight control. Following is the full HTML markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  
    <html > 
    <head> 
        <title>ZeroHero</title> 
        <script type="text/javascript" src="Silverlight.js"></script> 
        <script type="text/javascript" src="CreateSilverlight.js"> 
    </script> 
        <script type="text/javascript" src="code.js"> 
    </script> 
    <style type="text/css"> 
        .silverlightHost { 
            height: 480px; 
            width: 640px; 
        } 
    </style> 
</head> 
<body> 
    <div id="SilverlightControlHost" class="silverlightHost"> 
        <script type="text/javascript"> 
            createSilverlight(); 
        </script> 
    </div> 
</body> 
</html>

Upload all these files to your Web server and you’re done.

This might have seemed to be a lot of work just to get a “Hello World” application working, but it also introduced you to the general principles involved with developing a Silverlight 1.0 application. You saw how to use Silverlight.js and CreateSilverlight.js, write XAML, load XAML into Silverlight, hook up events, and create run-time event handlers. The remainder of this book will examine those topics in more detail.