Catching the (Silver) Light I’d guess that everyone reading this magazine has heard of Silverlight™. I’ll also guess that not everyone has jumped at the opportunity to “play” with something that had been in beta. The good news is that Silverlight 1.0 is now released! I’ve spent a lot of time with Silverlight since Microsoft made the Community Technology Preview version available as WPF/E. The delta between a Web site without Silverlight and a Web site that allows you to experience the wonderfulness of Silverlight is huge. Before you finish reading this article, I hope you’ll realize how very easy it is to bridge that gap. Some Basics Silverlight is a small ActiveX control that gets instantiated onto your Web page, maybe in more than one place. During the instantiation, the control is told to take direction from an XML file. That’s all there is to it! Everything else is involved in either the wiring-up of getting the instantiation going or learning how to “give directions” to the control. | " |
If you set the canvas background property to #FFC0C0C0, you will get a gray background that enables you to see the edges of the canvas while working with objects.
| " |
To keep this discussion simple, I’ll specifically discuss Silverlight 1.0. Since you can use JavaScript to code Silverlight, I don’t need to talk about pre-release versions of Visual Studio. To get the pieces necessary to add Silverlight to your Web page, first go to http://www.silverlight.net. Choose the Get Started menu. On the next page, under the section called DOWNLOAD THE RUNTIME AND TOOLS, scroll down to "Software Development Kit" and click the link for the "Microsoft Silverlight 1.0 Software Development Kit." Extract the files downloaded to a folder of your choice. There’s plenty of information in there: - QuickStart. A great tutorial. When you finish this article, go through the QuickStart, you won’t be disappointed.
- Silverlight.chm. The Help file documentation. Many sections have example code.
- Resources. JavaScript and schema files.
For the purposes of this article, you want the Silverlight.js file in the Resources folder. The HTML file So that everyone begins the same, let me supply a base HTML file for the starter page I’ll use in this article (Listing 1). If you save the code for Listing 1 to a file with an .htm or .html extension, either drag that file to a browser window or double-click the file in an Explorer window. You should see the browser window of your choice open and the text, "Hello World". Adding Silverlight To add Silverlight to this page, you need to do four things: - Add a link to Silverlight.js.
- Add a DIV tag for the ActiveX control.
- Instantiate a control into the DIV tag.
- Create an XML file to direct the control.
The first three are fairly simple and are highlighted in color in Listing 2. The code shown in Listing 2 is the template that I use for pages. I tweak it from here, but for purposes of this article, you can use this code. I will explain the tweaks below. "Add a link to Silverlight.js" is in red, and is simply a link to the location of the Silverlight.js file mentioned in the downloaded resources. I have a js folder containing any external JavaScript files, and that’s where I put Silverlight.js, hence the js/Silverlight.js reference. "Add a DIV tag for the ActiveX control" is next and in green. This is a standard DIV tag declaration with an ID label of your choice. I chose a background of white just because that’s the normal color I use for article pages. Next is a bit of JavaScript that declares a variable you’ll be using in a minute. The variable is the document element defined by the ID label. If you have multiple canvases on your page, you will need multiple unique DIV tag IDs and unique variable names. "Instantiate a control into the DIV tag" is the most complex part of the HTML side of this process and is in blue. Remember this is a template and you can therefore just drop it into place. You can do this instantiation in a couple different ways. The way I am explaining is the most complex, but gives you the most control. The QuickStart you downloaded with the SDK advocates the use of an external JavaScript module. If you have multiple Silverlight canvases you will end up with either multiple external files or multiple sections in one external file. I’ve chosen to keep this all inside the HTML file that it’s associated with. The approach to take in this section depends on how you plan to present and use your site. The following is a breakout explanation of each section in createObjectEx as used in this article. Changes to the files as advocated by the QuickStart will have similar sections. source: ‘xaml/HelloWorld.xml’
The source defines the location of the XAML file controlling the ActiveX control. I have placed this in a subfolder named XAML and have given it the file extension .xml. Multiple canvas applications would need multiple XAML files. parentElement:pe1
The parentElement is a reference to the variable that the DIV tag defines for the control. Multiple canvas applications would need multiple DIV tags and, therefore, unique parentElements. id:’Ag1’ This ID is a unique ID for the object. width:’300’ The width of the canvas-depends upon the project. height:’300’
The height of the canvas-depends upon the project. background:’#FFFFFFFF’ The color of the canvas itself, including the opacity. In this case, the opacity is 100% and the color is white. isWindowless:’true’ If this is true and the background color of the canvas has an alpha value, Silverlight blends with the HTML page. framerate:’24’ Framerate is the maximum number of frames to display per second. 24 is the default and the maximum is 64. version:’1.0’
The version required to run the page. events The default values are listed. I’ve glossed over “events” and shown the default for “framerate”. The documentation details other parameters in CreateObjectEx that you might want to look at after you get more involved with Silverlight. For the time being, what is here will get the job done. |