Brave new world

 By Tim Anderson

With version 2.0, Microsoft's Silverlight platform comes of age. Tim Anderson finds out what you need to make the most of it.

HardCopy Issue: 41 | Found In: Development | Published: 01/09/2008 | Last Revision: 06/04/2010

Silverlight was first announced at Microsoft’s Professional Developers Conference in September 2005. “We’re introducing something called WPF/E, the Windows Presentation Foundation/Everywhere,” said platform Vice President Jim Allchin. “We’re going to create an interactive experience on devices and the PC. It’s a strict subset of the Windows Presentation Foundation. It’s a lightweight download.” Since that brief introduction, the product now called Silverlight has grown in importance. It is not just an alternative to Adobe’s Flash for designers who want to embed video or add a dash of multimedia pizzazz to Web pages; with version 2.0 (currently in Beta) it becomes a cross-platform application runtime that brings the .NET Framework to the Apple Macintosh as well as Windows. Silverlight 2.0 is a browser plug-in, and therefore only useful for browser-hosted applications, but nevertheless opens up new possibilities for .NET developers. Silverlight 1.0, which lacks the .NET runtime, is a capable multimedia plug-in but less interesting for application developers. Silverlight is a variant of Windows Presentation Foundation (WPF) which means that it renders XAML, Microsoft’s XML language for defining a graphical user interface. WPF is part of .NET 3.0, released along with Windows Vista at the end of 2006, but despite some strong features it’s fair to say that WPF on the desktop has not yet been a storming success. There are several reasons for the slow take-up. First, most developers need to support older versions of Windows, and although .NET 3.x can be installed on Windows XP, it is a heavy runtime requirement. Second, unless you need its visualisation capabilities there is no compelling business case for WPF on the desktop. Microsoft itself undermined WPF adoption by saying it is not suitable for line-of-business applications, and that developers should stick with Windows Forms, the older .NET GUI library. These disadvantages do not apply to Silverlight. Judging by the Beta, Microsoft has succeeded in keeping the download size small (currently 4.6Mb) and the installation smooth, both on Windows and Mac. Instead of the large download and potentially troublesome setup of .NET 3.x, users simply download the plug-in from Microsoft’s site and the application runs. Silverlight is strategically important for Microsoft. There is an industry trend towards cloud computing where applications are hosted on the Internet and run on a variety of devices without the need for local installation. The Silverlight runtime is a good fit for this type of application, particularly in combination with ASP.NET and other Microsoft server technologies. It is also an interesting possibility for developers of Windows desktop applications who may be scratching their heads over how to accommodate Mac users.

Live Mesh is not just for synching files: it will also be a runtime environment for Silverlight.

Earlier this year Microsoft announced Live Mesh which synchronises files across the Internet and multiple devices. One of the interesting possibilities in Live Mesh is that it can be used to deploy and run applications offline. Like Silverlight, Live Mesh is also heading to the Mac and to mobile devices. Silverlight will work smoothly with Live Mesh, enabling rich applications that work cross-platform and offline with automatic data synchronisation. The .NET Framework in Silverlight 2.0 is a cut-down version but according to Microsoft is built from the same codebase as the full edition. The main differences are that the class library is much smaller and file access is restricted to a protected area on the hard drive called Isolated Storage, specific to your application. There is no support for calling native APIs through PInvoke or for COM Interop, both for security reasons and to avoid cross-platform problems.

Silverlight versus Flash

Silverlight has obvious competition from Adobe’s well-established Flash player which is another cross-platform runtime with strong multimedia capabilities. Adobe has its own XML GUI language, called MXML, and an IDE based on Eclipse called FlexBuilder. Flash does have some advantages over Silverlight, including better cross-platform support and the ability to run as a desktop application using AIR (Adobe Integrated Runtime). Flash already runs on many mobile devices, whereas Silverlight is currently desktop-only, although device support is promised. Designers like Flash because it integrates well with Adobe’s popular design tools, particularly PhotoShop and the Flash IDE. The one thing Flash does not have is the .NET Framework. The advantage of Silverlight is that it can execute C# and VB code. Furthermore, XAML is arguably more powerful than MXML and more deeply integrated with the runtime. Another factor is that Silverlight developers can use Visual Studio. Silverlight is also getting good support from third-party component vendors. There is unlikely to be an outright victor here, but Silverlight makes good sense for existing Windows developers.

Getting to know XAML and WPF

XAML (eXtensible Application Markup Language) is an XML language for defining a graphical user interface. It is a declarative programming language which can express many of the same statements that could alternatively be written in a language like C#, giving developers a choice over whether to write applications that are more code-centric or more XAML-centric. Object properties in code, for example, map to attributes of XAML elements, and you can set them in either place. XAML is part of WPF which was designed with the lofty goal of replacing the Win32 GUI API with something more modern, scalable and flexible. Anyone who has struggled with Win32 problems, like what happens when the user enables Large Fonts, will understand why Microsoft is keen to replace it. WPF applications scale nicely because positioning is controlled by layout managers, and including multimedia and animation within WPF is a breeze because they are native concepts. The Win32 API gives you a choice between using standard controls, or designating them owner-drawn and immediately taking on a lot of low-level drawing work. By contrast, WPF is designed to be easily customised, giving designers freedom. This is accomplished with a rich containment model, styles and templates, and vector graphics. Silverlight supports a subset of the full WPF API. The 3D API is missing, for example. However Microsoft intends Silverlight and WPF to be as compatible as possible.

Developing for Silverlight

The primary tool for Silverlight development is Visual Studio 2008 Standard or higher, though as with other .NET SDKs it is also possible to compile Silverlight applications from the command line. Most developers will install Silverlight Tools, which installs both the SDK and an add-on for Visual Studio, though note that the installation procedure may change for the final release. It is vital to read the installation instructions carefully since Visual Studio has many dependencies and installing updates in the wrong order can break it. The Silverlight Tools add two new project types to Visual Studio: Silverlight Application and Silverlight Class Library. Since Silverlight applications are hosted in Web pages you need at least an HTML page to host the new code for testing, and Visual Studio gives you the choice of a simple test page or a new Web site or Web application. Once a project is created, you can use the Silverlight designer. Each Silverlight form is an instance of the UserControl class. Currently the Visual Studio designer can render Silverlight XAML but cannot generate it, so the suggested workflow is to type XAML code into the editor and check its appearance in the designer. Typing XAML is fine for buttons and list boxes, but not for more sophisticated designs. Microsoft has another tool aimed at designers, namely Expression Blend. The Expression range can be confusing. There are five Expression products, as follows: * Expression Web is a Web design tool that is the successor to FrontPage and competes with Adobe’s DreamWeaver. * Expression Design is a vector graphics drawing tool which imports and exports a variety of formats including XAML and PhotoShop. The idea is that you can create designs for use within WPF or Silverlight. * Expression Blend is an interface design tool designed to work in tandem with Visual Studio, for WPF and Silverlight applications. The same solutions can be opened in either product. * Expression Media is for media cataloguing. * Expression Encoder is for converting and touching up video for Silverlight playback. The entire suite is bundled as Expression Studio and some components, such as Expression Design, are only available as part of the suite. Unfortunately there are version complications caused by the tight integration of Expression Blend and Visual Studio. Expression Studio 2 targets Silverlight 1 or WPF up to .NET Framework 3.5. In order to work with Silverlight 2.0 you need Expression Blend 2.5 and .NET Framework 3.5 Service Pack 1, both in Beta at the time of writing. Another way of looking at this is that Expression Blend 2.5 is the advanced visual designer for Silverlight 2.0. In the Beta, Blend is actually the only visual designer; but according to Scott Guthrie, Corporate VP of the .NET Developer Division, a fully interactive designer for Visual Studio is in preparation. In the meantime developers have to use both applications to get full use of Silverlight’s design capabilities.

Working with data

Using Expression Blend with Visual Studio

A new project can begin either in Expression Blend or Visual Studio. Here we’ve started a new Silverlight 2 project in Expression Blend 2.5 and are using the Asset Library to select controls for the user interface. The property editor is more visual than the equivalent in Visual Studio, although you can directly edit the generated XAML should you wish.

Double-clicking the Click event in Expression Blend automatically opens the project in Visual Studio, where you can work on the code. Silverlight has a code-behind model similar to that in ASP.NET. Once the code is added you can click Run to test the application.

One of the attractions of Silverlight for .NET developers is its integration with the rest of Microsoft’s platform. That said, there is no direct integration in the client, because it is isolated within the browser and may not be running on Windows. Calling the native API or COM is disallowed, as is file access beyond secure Isolated Storage. This means that getting data in and out of a Silverlight application is a job for Web services. Silverlight includes a SOAP client that understands ASP.NET and Windows Communication Foundation (WCF) Web services, subject to some limitations, and can also call REST (Representational State Transfer) Web services provided they do not require HTTP PUT and DELETE. One possibility is to use Silverlight with ADO.NET Data Services, which is a REST API. The Silverlight library includes serialisers for XML and JSON (JavaScript Object Notation), and supports LINQ (Language Integrated Query) to XML. Here’s a quick look at how this works in Visual Studio. The first step is to create a Silverlight project hosted by a Web application or site. In the Web application, you would create some Web services that return data, and possibly others that update data. The most natural approach is to use some kind of object-relational layer to deliver data as serialised objects. You can have Visual Studio do this automatically with LINQ to SQL, or use your own custom classes, or just a simple array of data. You can publish methods as Web services by marking them with attributes. For example, with WCF you use [OperationContract]. Visual Studio has a Silverlight Web service wizard that ensures use of Basic HTTP Binding which is required for compatibility. On the Silverlight side you then set a reference to your Web service. Visual Studio generates classes that make it easy to code against. The programming model is asynchronous so the application remains responsive even if the Web service is slow to return. This means that when you call a Web service method, it returns immediately. When the data arrives it fires a Completed event, and it is in this event handler that you write code to display the data. Silverlight has data-aware components, including a DataGrid, and third parties are also coming up with bindable controls. You can update data by sending new or changed objects back to the server. Sending literal SQL is not recommended as it is a security risk. Silverlight has limited support for securely authenticated Web services. The SOAP client is cut-down compared to that in the full .NET Framework and does not support WS-Security or WCF Sessions. One possible approach is to use HTTPS and ASP.NET Sessions to keep track of logged-in users, or you could write custom code to implement other kinds of security.

Silverlight Controls

The most efficient way to use Silverlight is with the standard controls since the user will already have these installed. The current Beta includes 39 controls starting with basic layout controls such as the Canvas, which supports absolute positioning, and the Grid, which is for table-style layout. A Tab control lets you have multiple tabs within a single Silverlight page. Other standard controls include lines, shapes and borders, buttons and checkboxes, ListBox and TextBox, Calendar and DatePicker and a bindable DataGrid. The MediaElement control is for audio or video content. In general, Silverlight controls are a subset of those in the full WPF though the mapping is not perfect; for example WPF does not have a DataGrid yet. As with Adobe’s Flash, Silverlight is intended to make it relatively easy to create highly customised user interfaces. There are several ways this is enabled. First, WPF is flexible about where you place content, allowing all sorts of possibilities that are hard to achieve with traditional Windows programming. The content of a button, for example, is not limited to a text label but can be almost any WPF content, such as a canvas with a video or a collection of shapes and images. Controls also support templates which means you can define a bunch of visual properties and then apply them to standard controls, overriding what they use by default. There is also a Visual State Manager which allows you to replace the standard appearance for different control states such as Pressed or Focused. The MultiScaleImage is a special control linked to Microsoft’s Deep Zoom technology. Using Deep Zoom you can easily upload very large images and display them on a Web page within Silverlight without requiring a lengthy download. The user can then navigate and zoom in on portions of the image, getting the benefit of all the detail. Deep Zoom is not just eye-candy but has many practical applications, such as allowing engineers to inspect fine detail on photographs or navigate large drawings, or letting potential customers study the exact specification and appearance of a motor car.

Components for Silverlight

An encouraging development for Silverlight is that third-party component vendors are already supporting the platform. Infragistics has announced NetAdvantage for Silverlight Data Visualisation, with a focus on charts and gauges. Dozens of chart and gauge types enable great flexibility over how data is visualized. The company is also working on a hierarchical data grid.

ComponentOne Studio for Silverlight has a range of controls including a rich text editor.

ComponentOne is offering ComponentOne Studio for Silverlight, currently a Community Tech Preview. This includes nearly thirty controls including a datagrid, a ZIP compression library, a rich text box, an upload tool, an image rotator and a ComboBox. DevExpress has the AgDataGrid Suite, an advanced hierarchical grid with several interesting features. The Virtual StackPanel Row Container lets you simulate an unlimited number of rows. It also has grouping and sorting against multiple columns and animation effects for things like group row expansion. Another Silverlight product is the AgLayoutControl which enables more advanced layout management. So what is the use of Silverlight? It turns out to be broad. It can be used for rich media within Web pages. Video embedded into a page is more user-friendly than those which open in separate players, and with Silverlight you can easily arrange and control video content programmatically. Video is being increasingly used for training, advertising and broadcasting. A second strong area for Silverlight is data visualisation. This takes many forms, from simple charts and reports to more complex data modelling. Thirdly, Silverlight is a capable application runtime, giving developers the performance of local processing with the flexibility and zero deployment of Web applications. The main limitation is lack of access to local resources. There is a clear trend towards rich internet applications and Silverlight lets .NET developers transition to that model while using familiar languages and tools.

Be the first to comment about this article...