| XMLReader/Writer | X |
Obtaining the Tools
To view Silverlight applications on your browser, you need to download one or all of the following runtimes:
□ Microsoft Silverlight 1.0 for Mac
□ Microsoft Silverlight 1.0 for Windows
□ Microsoft Silverlight 2 for Mac
□ Microsoft Silverlight 2 for Windows
When your web browser encounters a Silverlight application and there is no runtime installed, click on the Silverlight icon to download the required version of the runtime.
For developing Silverlight 1.0 applications, you need to download the Silverlight 1.0 SDK from www.microsoft.com/downloads.
For Silverlight 2 applications, the easiest way to get started is to use Visual Studio 2008. In addition to Visual Studio 2008, you also need to download Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 (www.microsoft.com/downloads), which will install the following components:
□ Silverlight 2 Beta 1 runtime
□ Silverlight 2 SDK Beta 1
□ KB949325 for Visual Studio 2008
□ Silverlight Tools Beta 1 for Visual Studio 2008
You can also purchase one or more of the following professional tools to help design your Silverlight applications:
□ Expression Blend 2 — A professional design tool to create Silverlight applications.
□ Expression Media Encoder Preview Update — A feature that will be part of Microsoft Expression Media, a commercial digital asset management (DAM) cataloging program. It enables you to create and enhance video.
□ Expression Design — A professional illustration and graphic design tool to create Silverlight assets.
Architecture of Silverlight
Figure 19-1 shows the architecture for Silverlight 1.0 and 2.
Figure 19-1 Used by permission of Microsoft Corporation
The Presentation Core handles all the interactions with the user (through keyboard, mouse, and so on) as well as the rendering of UI elements such as media and controls. The XAML (Extensible Application Markup Language) component provides a parser for XAML markup (more about this in the next section), which is used as the UI of a Silverlight application. For Silverlight 1.0 applications, the primary means to program the application is JavaScript. In Silverlight 2, you can use either C# or VB.NET. During runtime, the application will be executed by the CLR Execution Engine. Notice that the various features available in the desktop version of the .NET Framework is also available for Silverlight — LINQ, WPF, WCF, BCL, and so forth.
Building a Silverlight UI Using XAML
A typical Silverlight project has four files:
□ An HTML file that hosts the Silverlight plug- in instance
□ A Silverlight.js file that contains all the necessary plumbing code required by Silverlight
□ An XAML file that contains the UI elements that make up a Silverlight application
□ A JavaScript file that contains the logic of your Silverlight application
The following sections show how to build a Silverlight application while presenting the basics of XAML, the UI language of Silverlight applications.
Creating a Bare-Bones Silverlight Application
Let's create a bare-bones Silverlight application by referencing all the necessary files required in a Silverlight application. First, remember to download the Silverlight 1.0 SDK from http://www.microsoft.com/downloads.
Once the SDK is downloaded, double-click on the Silverlightv1.0SDK.msi file to install the files onto your local computer (use the default directory).
Create a new folder in C: and name it Silverlight.
Copy the Silverlight.js file located in the C:Program FilesMicrosoft Silverlight 1.0 SDK ToolsSilverlight.js folder into C:Silverlight.
Using Notepad, create the following HTML file; name it Default.html, and save it in the C: Silverlight folder:
<!DOCTYPE html
PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Our First Silverlight Application</title>
<script type='text/javascript' src='Silverlight.js'></script>
<script type='text/javascript' src='MySilverlight.js'></script>
</head>
<body>
<!-- location for the Silverlight plug-in-->
<div id='SilverlightPluginHost'> </div>
<script type='text/javascript'>
// Retrieve the div element you created in the previous step.
var parentElement =
