A Straightforward Approach to Silverlight Component Design

icrosoft recently took WPF/E (which stood for Windows Presentation Foundation Everywhere) out of the labs and released it as Silverlight, a new technology that lets you run XAML-based content—including animations and interactivity—in a web browser in a manner similar to Adobe Flash or Sun’s Java. At this time Microsoft supports Silverlight on both Apple’s OS X and on Microsoft Windows XP SP2 (and later) operating systems. It also supports the most common browsers: IE 6.0+, Mozilla 1.5.0.8+, and Mozilla derivatives such as Firefox.

With the announcement, Microsoft made available two separate releases that have widely differing functionality. Silverlight 1.0 supports development using a subset of XAML and JavaScript, while Silverlight 1.1 (currently in alpha release) adds managed code support for a subset of the .NET managed code libraries.

If you have any previous XAML background, it’s important to note that a lot of the staple approaches you may be familiar with from building Windows Presentation Foundation (WPF) applications will not work in Silverlight, which uses only a subset of WPF’s capabilities. Silverlight does not support most of the WPF component primitives, such as Buttons and TextBoxes, and it supports only one layout type: the absolute positioning layout. As a result, porting an existing WPF application to Silverlight will force a total rewrite of all the UI-related code.

At present, you can choose among several options for building a Silverlight component. You can use Expression Blend or Visual Studio Orcas (both in beta as of this writing), but you don’t need such advanced tools—you can use plain old Notepad. You don’t even need a compiler to develop Silverlight controls!

This introduction includes two short examples that will show you the basics to get started with Silverlight. The first example shows the minimal amount of code necessary to get Silverlight to display an ellipse in a browser. The second example covers how to develop a simple button navigation control for a web site. Both examples require nothing but Notepad and the Silverlight end-user runtimes.

Getting Started
To use the examples included in this article, you don’t have to get the development kit. To show off how easily you can get started with Silverlight development, everything in this article was built using nothing but Notepad, the Silverlight 1.0 Beta end-user runtimes, and a pre-defined JavaScript library.

To get started, download the Silverlight 1.0 Beta, and the pre-defined JavaScript file in the sample code for this article. You do not need to install any add-ons to your web server to make Silverlight work. In fact you don’t even have to have a web server; Silverlight applications will run just by clicking a local HTML file that uses Silverlight.

Build a Basic Example
All HTML files that host Silverlight controls have a few common characteristics that you’ll need to include those in your code. First, you need to include a

In your createMySilverlightControl function, call Sys.Silverlight.createObject(), which accepts parameters that define what XAML file to use, some properties specifying where and how you want your Silverlight application to run, and any custom parameters you want to pass in to it. The Simple.html file shown above references the Simple.xaml file shown below:

   
 
Figure 1. Simple Ellipse: Here's a simple ellipse drawn by Silverlight in Firefox.

Together, these two XAML and HTML files provide a minimal example of a Silverlight application. This simple demo doesn't do much—but it does display the green ellipse shown in Figure 1.

The XAML code creates a 100 x 40-pixel Canvas control containing a green ellipse with a black border. It has no defined interactivity; in other words, clicking on it or mousing over it doesn't do anything. For a primer on how XAML is structured, take a look at the article Developing Lookless controls with WPF. For a list of elements supported in Silverlight—a fairly small subset of those supported in WPF—take a look at the Silverlight 1.0 reference.

Build a More Useful Example
Now that you've seen the basic steps involved in embedding a Silverlight control on a web page, here's the procedure to build a more useful navigation button control that includes a mouseover effect as shown in Figure 2.

 
Figure 2. ButtonNav Control: The ButtonNav control is used three times on this page. You can see a mouseover effect applied to the Silverlight button.

You can't attach JavaScript mouse events to just any element in your XAML, only to the Canvas control. Listing 1 contains the HTML (ButtonNav.html) file and Listing 2 contains the XAML (ButtonNav.xaml) file for this control. In the XAML excerpt below, MouseEnter, MouseLeave, and LeftMouseButton down events define the JavaScript handlers to handle specific mouse events:

   

The JavaScript handlers themselves are in the HTML file (see Listing 1) that hosts the XAML control:

   function Button_MouseEnter(sender, eventArgs)   {      sender.findName("RolloverEffect").Visibility="Visible";   }      function Button_MouseLeave(sender,eventArgs)   {      sender.findName("RolloverEffect").Visibility="Hidden";   }      function Button_ClickButton(sender,eventArgs)   {      alert('Clicked:'+ sender.findName("ButtonLabel").Text);   }

Each JavaScript event handler receives two parameters similar to their equivalents in managed code: sender is the Silverlight control that fired the event, and eventArgs is an object that provides information about the event. In the event handler's JavaScript you can reference any XAML element that has a valid x:Name attribute by calling the findName() method. After you have a reference to the XAML element, you can change any of the attributes available on the element.

The JavaScript function AddButton() shown in Listing 2 adds a button dynamically. It creates an HTML

tag, assigns a unique ID to it, and then adds it to the page's DOM. It creates the Silverlight ButtonNav control using the Sys.Silverlight.createObject call discussed earlier, passing in the new

as the container and the button's text label as a custom parameter. It also sets ButtonLoaded as the JavaScript event handler to fire when the XAML is loaded and ready. Here's the ButtonLoaded event handler code:

   function ButtonLoaded(sender, eventArgs)   {      var parameters = sender.initParams;      var lbl = sender.content.findName("ButtonLabel");      lbl.Text=parameters;   }

The handler retrieves the parameter value passed from Sys.Silverlight.createObject by calling sender.initParams. It then gets a reference to the TextBlock control in the XAML file (the TextBlock that displays the label named ButtonLabel) by calling sender.content.findName("ButtonLabel"). Finally, it sets the TextBlock's Text property to the passed parameter value.

You may have noticed that the mouse event handlers call findName() on the sender parameter, while the ButtonLoaded event calls findName() on the sender.content property. The difference occurs because the Silverlight control you've created is the source of the mouse events, while the control's container is the source of the Loaded event.

The Button_MouseEnter and Button_MouseLeave event handlers achieve the button rollover effect by simply toggling the visibility of a mostly transparent ellipse filled with a gradient. By default, this ellipse is hidden; the MouseEnter event handler causes it to become visible, while the Button_MouseLeave event handler causes it to become invisible.

Silverlight provides a much needed alternative to Flash. Still, each technology has strong points and weak points—and Silverlight is no exception. Silverlight has probably the smoothest integration into the browser, including Firefox, I've seen. Web application developers will find Silverlight useful for adding graphical client-side controls integrated with your page widgets. Developers wanting to create media viewing applications will also like Silverlight's advanced media playback options.

Although Notepad proved sufficient for creating everything you've seen here, I recommend you learn to work with Expression Blend when you're ready to move on from simple examples and create graphically richer Silverlight controls. As a developer, it's important to know how to edit the XAML and how the XAML works, but Expression will let you skip much of the manual coding.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: