Silverlight

MICROSOFT SILVERLIGHT Microsoft Silverlight is a cross-browser, cross-platform, and crossdevice plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. By using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow. Silverlight opens the door for exciting new ways to provide more productive, engaging, and innovative experiences across multiple platforms. Excitingly, developers are able to leverage existing development skills to create these experiences. The XAML Silverlight utilizes a subset of the Windows Presentation Foundation. Similar to WPF, Silverlight is XAMLbased. XAML code can be used to define the look-and-feel of visual components. What Is Silverlight? Silverlight is a new Web presentation technology that is created to run on a variety of platforms. It enables the creation of rich, visually stunning and interactive experiences that can run everywhere: within browsers and on multiple devices and desktop operating systems (such as the Apple Macintosh). In consistency with WPF (Windows Presentation Foundation), the presentation technology in Microsoft .NET Framework 3.0 (the Windows programming infrastructure), XAML (eXtensible Application Markup Language) is the foundation of the Silverlight presentation capability. This white paper will step you through the basics of Silverlight and how you can use the Microsoft stack of tools, including Microsoft Expression Blend, Microsoft Visual Studio 2005, and XAML to build rich graphical sites. First, let's take a primer on the background leading up to Silverlight and where it stands on the development landscape. The Evolution of Web Development: Moving to Web.Next When Tim Berners-Lee at CERN invented the modern Web, it was intended as a system that allowed static documents to be stored and linked on a network-based system. Over the years, innovation grew, with the logical next step being "active" documents that are generated at the time they are requested with time-specific or user-specific information. Technologies such as CGI empowered this. Over time, the ability to generate documents on the Web became paramount, and the technology evolved through CGI, Java, ASP, and then ASP.NET. ASP.NET provided a milestone in the ability for a developer to develop quality Web applications quickly using a server-development paradigm and best-of-breed tools from the Visual Studio line of products. A great barrier in Web applications proved to be the user experience, where technical constraints prevented Web applications from delivering the same richness of user experience that a client application with local data would provide. The XMLHttpRequest object, released by Microsoft as part of Internet Explorer 5 in 2000, became the foundation of Asynchronous JavaScript and XML (AJAX) technology that allowed Web applications to provide a more dynamic response to user input, refreshing small parts of a Web page without requiring a complete reload of content. Innovative solutions built on AJAX, such as Windows Live Local maps, took Web applications a step further in being able to have a client-like user experience. Silverlight is the next step in evolving the potential user-experience richness in which application developers and designers can present to their clients. It does this by allowing designers to express their creativity and save their work in a format that will work directly on the Web. In the past, a designer would design a Web site and a user experience using tools that provide a rich output, but the developer would have to meet the constraints of the Web platform in being able to deliver them. In the Silverlight model, designers can build their desired user experience and express this as XAML. The XAML can then be incorporated directly by a developer into a Web page using the Silverlight runtime. Thus, the two can work more closely than ever before to provide a rich client user experience. As XAML is XML, it is text-based, providing a firewall-friendly, easy-toinspect description of the rich contents. While other technologies—such as Java Applets, ActiveX, and Flash—exist that can be used to deploy richer content than DHTML/CSS/JavaScript, they all send binary content to the browser. This is difficult to audit for security, not to mention difficult to update, as any changes require the entire application to be reinstalled, which is not a user-friendly experience and can lead to stagnation in pages. When Silverlight is used, and a change is needed to the rich content, a new XAML file is generated server-side. The next time the user browses to the page, this XAML is downloaded, and the experience is updated without any reinstallation. At the heart of Silverlight is the browser-enhancement module that renders XAML and draws the resulting graphics on the browser surface. It is a small download (under 2 MB) that can be installed when the user hits the site containing the Silverlight content. This module exposes the underlying framework of the XAML page to JavaScript developers, so interaction with the content on the page level becomes possible, and thus the developer can, for example, write event handlers, or manipulate the XAML page contents using JavaScript code. But, enough with the theory! Let's get hands-on and take a look at our first Silverlight project. Building a Simple Silverlight Application Let's start by taking a look at the Microsoft Expression Blend to create a very simple application in XAML for Silverlight. To create a Silverlight application in Blend, select File->New project and the New Project dialog box opens. See Figure 1. Figure 1. Creating a new Silverlight project with Expression Blend Select OK and a new project will be created. This project will contain a default HTML page, some JavaScript code-behind this page, a XAML document, a JavaScript code behind for the XAML document and Silverlight.js. Silverlight.js contains the code for downloading and instantiating the Silverlight control. This is provided to you as part of the Silverlight SDK. Default.html is a standard HTML Web page. This contains three JavaScript script references, pointing to Silverlight.js, Default.html.js (which contains the application specific code for instantiating Silverlight), and Scene.xaml.js (which contains the event handlers for application events defined in the XAML). This is designed to separate the page (default.html), from the instantiation logic (default.html.js), and the design (Scene.xaml), and the event code (Scene.xaml.js). But, enough with the theory, let’s get down to developing a simple application. Create the UI for a Video Player Add a video file to your project. To do this, right-click the project file in the Project Files window on the top right of the screen, and select Add Existing Item... . When you select a WMV file, and add it to your project, the file will appear in the Project Explorer, and, a Media element will be added to your scene. Figure 2. Adding a Media Element to the XAML Scene You can now run your project, and the browser will launch and play back your video! You can stop the automatic playback of the video by editing the XAML. You will see to the right of the XAML designer that there are two tabs: Design and XAML. Select the XAML tab and the XAML Editor will open. You can see this in Figure 3. Use this to edit the XAML text for the MediaElement to add an attribute AutoPlay=False. Figure 3. Editing the XAML in the XAML Editor Now if you run the application, you’ll see the Silverlight content rendering the first frame of your video, but it will not play it. Adding Controls to Your Video Player Add two text blocks to the application, and give them the text Play and Stop and the names txtPlay and txtStop, respectively. When you are done, the XAML will look something like this:  Next, add the event handler declaration to the XAML for the text blocks. You do this by declaring the handler for a mouse-click by using the MouseLeftButtonDown attribute. On the txtPlay text block, add an event handler to DoPlay, and on the txtStop text block, add an event handler to DoStop. When you are done, the XAML will look like this: Now when the user clicks on one of the text blocks, it will raise an event that you can catch and process from a JavaScript function. Handling the Events in JavaScript The template created a Scene.xaml.js that can be used to capture and process user events in JavaScript. You specified DoPlay and DoStop event handlers within the XAML, so you should implement them here. The code to do this is shown here: function DoPlay(sender, eventArgs) { var theHost = document.getElementById("SilverlightControl"); var theMedia = theHost.content.findName("Movie_wmv"); theMedia.Play(); } function DoStop(sender, eventArgs) { var theHost = document.getElementById("SilverlightControl"); } var theMedia = theHost.content.findName("Movie_wmv"); theMedia.Stop(); In this case the Silverlight Control is called SilverlightControl, and the JavaScript var called theHost references it. This is then used to find the Media element, which in this case is called Movie_wmv. When you added the movie to the project, this media element was created for you, and the name was based on the name of the movie. So if you have a movie called Movie.wmv, this will be called Movie_wmv. If you used a different movie, then the control would be called something else. The media element has Play and Stop methods that can then be used to start or stop the media from playing back. Now that we have a reference to the media element, we can call those methods, and the movie will stop or start. You can see this in action in Figure 4. Figure 4. Running the application You’ve now built your first Silverlight application! For more resources on Silverlight, check out the new Silverlight Developer Center and www.silverlight.net. Understanding the Silverlight Invocation The HTML page makes a call to createSilverlight(), which is present in the code-behind page Default.html.js. Silverlight.createObjectEx({ source: "Scene.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "0.9" }, events: { onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad) } }); This takes a number of properties, including those used to define the Xaml to render, the appearance of the Silverlight control, and the onLoad and onError event handlers. The source: property is used to define the XAML that you want the Silverlight control to render. This can be an external file (as in this case) or a named