Getting started with Silverlight

ArticleDirectory

• Add controls to a video player
• Processing events in Javascript

Release date: 2006-12-26 | Updated on:

Laurence Moroney

Microsoft Corporation

Applicable:

•	Microsoft Silverlight (formerly "WPF/e ")
•	Microsoft Expression Blend

Summary: This white paper provides a high-level overview of Silverlight and introduces the next-generation Web Application of Silverlight.ProgramApplicability of the Development stack.

Content on this page

	What is Silverlight?
	Evolution of web development: Turning to Web. Next
	Build a simple Silverlight Application
	Create a UI for video players
	Learn more about Silverlight calls
	Conclusion

What is Silverlight?

Silverlight is a new Web rendering technology that can run on various platforms. With this technology, you will have an interactive experience with rich content and brilliant visual effects, whether in a browser, on multiple devices, or on a desktop operating system (such as Apple Macintosh). The rendering technology XAML (eXtensible Application Markup Language) in Microsoft. NET Framework 3.0 (Windows programming infrastructure) follows the Windows Presentation Foundation, which is the basis of the Silverlight rendering function.

This White Paper will guide you through the basics of Silverlight and how to use Microsoft's many tools, including Microsoft Expression blend, Microsoft Visual Studio 2005, and XAML, to build a rich graphic site. First, let's take a look at the background information about the development process of Silverlight and its position in the development field.

Back to Top

Evolution of web development: Turning to Web. Next

CERN's Tim Berners-Lee invented the modern Web as a system that allows the storage and link of static documents on a network-based system. In the next few years, with the development and maturity of innovation, "activity" Documents naturally become a new stage of modern web development, which will be generated upon receiving access requests, the document contains time-or user-specific information. CGI and other technologies have become the basis for implementation at this stage. With the passage of time, the function of generating documents on the Web has become extremely important, and the technical development has also gone through CGI, Java, ASP, and reached the ASP. NET stage.

ASP. NET has set a milestone in enabling developers to adopt the server development model and quickly develop high-quality web applications using the same best tools in the Visual Studio series.

It turns out that user experience is a major obstacle in Web applications. In this regard, technical restrictions make Web applications unable to provide the same rich user experience as client applications that use local data.

XMLHttpRequestObjects (released by Microsoft as part of Internet Explorer 5 in 2000) have become the basis of Asynchronous JavaScript and XML (Ajax) technologies, enabling web applications to respond more dynamically to user input, because this technology only refreshes a small part of the web page, and does not need to reload all content. Innovative Ajax-based solutions (such as Windows Live local ing) allow web applications to go further and provide a user experience similar to that of clients.

Silverlight is the next development phase in which application developers and designers can present potential user experience to their customers. To achieve this, it allows designers to demonstrate their creativity and save their work in a format that can directly affect the web. In the past, designers used tools with rich output functions to design websites and user experiences. However, in terms of implementation capabilities of these designs, developers were limited by the web platform. In the Silverlight model, designers can build the desired user experience and express it as XAML. Subsequently, developers can use the Silverlight runtime to directly merge the XAML into a webpage. Therefore, the cooperation between the two can be closer than ever before, so as to provide a rich client user experience.

Because XAML is XML, It is text-based and provides firewall-compatible and easy-to-check instructions for these rich content. Although other technologies (such as Java applets, ActiveX and flash) can be used to deploy richer content than DHTML, CSS, and JavaScript, they send binary content to the browser. This makes it difficult to carry out security review, not to mention the difficulty of updating, because the entire application must be re-installed after any changes, which is not a friendly user experience, and the page may be stuck. If Silverlight is used, the server generates a new XAML file when you need to change the rich content. Next time you browse this page, the user will download this XAML and update the experience without any reinstallation.

The core of Silverlight is the browser enhancement module, which is used to render the XAML and draw the generated graphics on the browser interface. Its download volume is small (less than 2 MB). You can install it when you click a site containing Silverlight content. This module exposes the underlying framework of The XAML page to JavaScript developers to achieve page-level content interaction. In this way, developers can perform their own work, such as writing event handlers or using JavaScriptCodeTo process the content of the XAML page.

However, there have been enough theoretical discussions! Let's take a look at our first Silverlight project through practice.

Back to Top

Build a simple Silverlight Application

Let's take a look at Microsoft Expression blend and use this tool to create a very simple application in The XAML format for Silverlight. To create a Silverlight application in blend, select File> new project. The new project dialog box is displayed. See figure 1.

Figure 1. Use expression blend to create a new Silverlight Project

Select OK to create a new project. This project will contain a default HTML page, some JavaScript of this pageSource codeA XAML document and the JavaScript source code and Silverlight. js of this XAML document.

Silverlight. js contains the code used to download and instantiate the Silverlight control. It is provided to users as part of the Silverlight SDK.

Default.html is a standard HTML webpage. The webpage contains three Javascript script references pointing to silverlight.js?default.html. JS (including application-specific code for installing Silverlight) and scene. XAML. JS (which contains the Event Handlers for the application events defined in XAML ).

It is designed as an independent page (default.html), separate from the instantiation logic (default.html. JS), design (scene. XAML), and Event code (scene. XAML. JS. However, there have been enough theoretical discussions. Now we are developing a simple application.

Back to Top

Create a UI for video players

Add a video file to the project. To do this, right-click the project files in the project files window in the upper-right corner of the screen, and select Add existing item... (add existing project ).

When you select a WMV file and add it to the project, the file is displayed in the project browser, and a media element is added to the view.

Figure 2. Add media elements to the XAML View

Now you can run your project. The browser will start and play your video!

You can edit XAML to stop automatic video playback. The XAML designer has two tabs on the right: Design and XAML. Select the "XAML" tab to open the XAML Editor, as shown in 3. Use this editor to edit the XAML text for the media element and add the property autoplay = false.

Figure 3. Edit the XAML in The XAML Editor

Now, if you run this application, you will see that the Silverlight content does not play although it presents the first frame of the video.

Add controls to a video player

Add two text blocks for the application. The text content is play and stop, and the names are txtplay and txtstop respectively. After the process is completed, the XAML should be as follows:

 
<Canvasxmlns = "http://schemas.microsoft.com/client/2007" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" width = "640" Height = "480" background = "white"> <mediaelement autoplay = "false" X: name = "movie_wmv" width = "320" Height = "240" canvas. left = "128" canvas. top = "56" Source = "movie. WMV "stretch =" fill "/> <textblock X: Name =" txtplay "width =" 72 "Height =" 24 "canvas. left = "136" canvas. top = "336" text = "play" textwrapping = "Wrap"/> <textblock X: Name = "txtstop" width = "80" Height = "24" canvas. left = "136" canvas. top = "368" text = "stop" textwrapping = "Wrap"/> </canvas>
 

Next, add the event handler declaration to the text block in XAML. To this end, you can use the mouseleftbuttondown attribute to declare the handler that clicks the mouse. In the txtplay text block, add an event handler for doplay; In the txtstop text block, add an event handler for dostop. After the process is completed, the XAML should be as follows:

<Textblock X: Name = "txtplay" width = "72" Height = "24" canvas. left = "136" canvas. top = "336" text = "play" textwrapping = "Wrap" mouseleftbuttondown = "javascript: doplay"/> <textblock X: name = "txtstop" width = "80" Height = "24" canvas. left = "136" canvas. top = "368" text = "stop" textwrapping = "Wrap" mouseleftbuttondown = "javascript: dostop"/>
 

Now, if you click a text block, an event is triggered. You can use the JavaScript function to capture and process the event.

Processing events in Javascript

Scene. XAML. js created by the template can be used to capture and process user events in JavaScript. Since you have specified doplay and dostop event handlers in XAML, they should be implemented here. The Code is as follows:

 
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 example, the Silverlight control is called silverlightcontrol, And the Javascript variable that references the control is called thehost. The preceding name will be used to search for media elements (movie_wmv in this example) later. When a movie is added to a project, this media element is created for you. The element name is based on the movie name. Therefore, if the movie name is movie. wmv, the media element is called movie_wmv. If other movies are used, the control also uses other names.

The media element can be played or stopped by using the play and stop methods.

Because the media element is referenced, you can call the preceding method to stop or start a movie, as shown in figure 4.

Figure 4. Run the application

So far, you have built your first Silverlight application! For more resources about Silverlight, see the new Silverlight Developer Center and http://www.silverlight.net /.

Back to Top

Learn more about Silverlight calls

The HTML page calls createsilverlight () on the default.html. js source code page ().

SYS. 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 call uses many attributes, including those used to define the XAML, Silverlight control appearance, and onload and onerror event handlers to be rendered.

Source: property is used to define the XAML to be rendered by the Silverlight control. This attribute can be an external file (as shown in this example) or a name <SCRIPT> tag containing the XAML page.

When adding a Silverlight control on the page, add the control to the name <div>. Parentelement: attribute should be used as the <div> name.

The ID of the control is specified by the ID: property.

The physical properties (such as height, width, and version) of the control are set by the array in the property loaded to properties. To view all the attributes, see the Silverlight SDK documentation.

Back to Top

Conclusion

This White Paper provides a high-level overview of Microsoft Silverlight and describes how Silverlight applies to the next-generation Web Application Development stack. As you can see, XAML is like a consortium that combines designer specifications, developer tools, and user-oriented delivery. You have a general understanding of expression blend, how to use it to define the UI for webpages, and how to program them using JavaScript.

The content you learned in this article only covers the functionality of Silverlight. This technology contains many features that you can now use to start building the next web. This is an interesting journey. Come and try it!