SILVERLIGHT Part-I
SILVERLIGHT
Get Started Building A Deeper Experience Across The Web
This article discusses:
- An introduction to Silverlight and XAML
- Building a simple Silverlight app
- Generating Silverlight apps dynamically on the server
- Creating a XAML service
To reach the Web community at large, Silverlight needs to run successfully on a number of popular operating systems and in the most popular browsers. As a result, the first release supports the Firefox and Safari browsers running on Mac OS X as well as Firefox and Internet Explorer® running on Windows. More operating systems and browsers should be supported as the product evolves. In addition to these capabilities, Silverlight is also completely self-contained and has no dependencies on other products such as Windows Media® Player for video playback or the Microsoft .NET Framework 3.0 for XAML parsing.
In this article, you get a high-level overview of the architecture of Silverlight, and get hands-on experience building several Silverlight applications, starting with a basic Hello World application. I then walk you through building a simple media player. You also see how, while Silverlight is a client-side technology, it fits into a larger server-oriented picture, including the ability to be used on servers running PHP or Java.
Introducing Silverlight
At its core, Silverlight is a browser plug-in that renders XAML, exposing its internal Document Object Model (DOM) and event model to the browser in a scriptable manner. Thus, a designer can put together a XAML document containing graphics, animations, and timelines and a developer can hook these up to code in a page to implement functionality. As XAML is based on XML, the document defining the UI that gets downloaded to the client is text-based and thus friendly to search engines and firewalls. In addition, the XAML may be assembled and emitted at run time by a server application, providing not only a rich graphical experience, but also a highly customizable and dynamic one.
The anatomy of a simple Silverlight application, using a static XAML file defining its UI and JavaScript for event handling, is shown in Figure 1. The browser instantiates the plug-in and, as part of this process, loads the XAML file. Events within this file, such as clicking on a button, are captured by the browser and processed by JavaScript. As the DOM of the Silverlight content is exposed, the JavaScript code can also dynamically update the Silverlight contents, changing the state of the rendered content.
Figure 1 Sample App
The architecture that supports the Silverlight application is shown in Figure 2. The main programming interface is the JavaScript DOM API. This allows you to respond to events raised within the Silverlight XAML (such as when content has finished loading or when an animation is complete). You can also call methods to manipulate the presentation (such as starting an animation or pausing video playback). Underneath this is the XAML parsing engine. The parser creates the in-memory XAML DOM for use by the presentation core, which handles the rendering of the graphics and animations defined by the XAML. In addition, the runtime contains the codecs necessary for playback of WMV, WMA, and MP3 multimedia content.
Figure 2 Silverlight Architecture
Finally, the runtime contains the presentation core, which manages the rendering process. This presentation runtime is built into a browser plug-in that supports several flavors of Windows as well as Mac OS X, using any of several browsers as discussed previously. The end result is a self-contained graphics and media rendering engine that may be plugged into the browser and scripted via JavaScript.
XAML is an XML-based language that may be used to define graphical assets, user interfaces, behaviors, animations, and more. It was introduced by Microsoft as the markup language used in Windows Presentation Foundation, a desktop-oriented technology that is part of the .NET Framework 3.0. It was designed to help bridge the work between designers and developers in creating applications.
Traditionally, designers used one suite of tools and resources for creating an application, and developers used their own separate tools. The mismatch between toolsets had the potential to adversely affect the resulting application. Microsoft introduced the new Expression suite of tools, particularly Microsoft Expression® Design and Microsoft Expression Blend, to allow design professionals to put together graphical artifacts and user interfaces respectively, expressing the end result as XAML, which a developer can then take and build an application from.
The XAML used by the first release of Silverlight differs from that used by Windows Presentation Foundation in that the former is a Web-oriented subset of the full XAML available for the desktop. As such, if you are familiar with Windows Presentation Foundation XAML, you’ll notice some things missing such as the
In XAML you define elements using XML tags. At the root level of every Silverlight document is a Canvas tag, which defines the space on which UI elements will be drawn. This Canvas should contain the XML namespace declarations that Silverlight needs.
A Canvas can have one or more children, including child Canvases that can create their own children. Children of a Canvas have relative positions to their parent Canvas, not to the root Canvas. Here’s an example of a Canvas containing a Rectangle, and the rectangle is placed 25 pixels from the top-left corner of its parent.
Inside the XAMLSilverlight XAML supports a number of shapes that can be orchestrated into complex objects. The basic supported shapes are Rectangle, Ellipse, Line, Polygon, PolyLine, and Path. Most of these are self-explanatory. PolyLine allows you to define a series of joined line segments. Path allows you to define a nonlinear path (like a scribble) across the Canvas.
Brushes determine how objects are painted on the screen. Their contents are painted using a Fill and their outlines are painted using a Stroke. There are solid-color brushes, gradient brushes, and image brushes. Solid color brushes are implemented using either a fixed color on the fill attribute (such as Fill="Black" used in the previous example) or using SolidColorBrush as an attached property like this:
Colors can be defined by name (141 named colors are supported) or by hex RGB definition.
Gradient brushes are implemented by defining a gradient range and a number of gradient stops across a normalized space. For example, say you wanted a linear gradient to move from right to left, changing from black to white through the shades of gray as you go. You would specify a gradient stop at 0 (the beginning of a normalized line) that is black, and a gradient stop at 1 (the end of a normalized line) that is white. Silverlight will then paint the gradient for you. Gradients may also be painted in two dimensional space, with a normalized rectangle defining the space (0,0 is top-left and 1,1 is bottom-right). So to define a rectangle filled with a 2D gradient with red in the top-left, black in the bottom-right, and a smooth gradient between them, you would use XAML like this:
Objects may also be painted using ImageBrushes, and the image will be clipped or stretched as appropriate. So, for example, you can specify to fill an Ellipse using an ImageBrush with XAML like this:
Text can be rendered in XAML using the TextBlock tag. This gives you control over aspects of the text such as content, font, size, wrapping and more. Here are some examples:
In addition, Silverlight supports keyboard events that can be used to implement text input. You can define a keyboard event (KeyDown or KeyUp) on the root element, and use the event arguments to derive which key was pressed.
