Microsoft Silverlight

This article is currently being developed as part of an Eduzendium student project. The project's homepage is at CZ:CIS 700 Special Topics 2008. One of the goals of the course is to provide students with insider experience in collaborative educational projects, and so you are warmly invited to join in here, or to leave comments on the discussion page. However, please refrain from removing this notice. Besides, many other Eduzendium articles welcome your collaboration!

Microsoft Silverlight, previously known as Windows Presentation Foundation/Everywhere, is Microsoft's flagship cross-platform, cross-browser web client runtime for developing rich interactive applications such as graphics, animations and video playback. Silverlight extends the web development technique beyond the limitations of traditional HTML and JavaScript.

History

In order to create powerful web applications targeted for major platforms and Web browsers and deliver the next generation of .NET based media experiences and rich interactive applications for the Web, Microsoft developed Silverlight.

In 2003, Microsoft is developing a technology called Windows Presentation Foundation (WPF), formerly code-named Avalon. It is the graphics engine which is implemented in Vista. As the needs for a more powerful web application and Rich Interactive Applications (RIAs) increases, Microsoft uses its WPF technology to develop a powerful media plug-in targeted for major platforms, such as Windows,Mac OS X, and Linux (Moonlight), and Web browsers and deliver the next generation media experiences and .NET based RIAs for the Web.

In September 2007, Microsoft launched Silverlight 1.0. Silverlight 1.0 is built based on XAML (Extensible Application Markup Language) and JavaScript. It runs under the .NET Framework 3.0. It has a code behind written in JavaScript. Industry standard video and audio coded, such as VC-1, WMV, MP3 and WMA, are supported by Silverlight. Silverlight 1.0 did not take long to become a big hit in the media plug-in industry. However, Silverlight 1.0 has several limitations, such as limited built-in User Interface controls and developers can only use javascript as the code behind. Some third party compilers such as Script#, which compiles C# source code into JavaScript, try to work around these limitations.

In response to Silverlight 1.0 limitation, Microsoft introduced Silverlight 1.1 Alpha. In November 2007, Microsoft announced that they were renaming Silverlight 1.1 to Silverlight 2.0. Silverlight 2.0 is currently available as a beta version (Silverlight 2.0 Beta 2). Silverlight 2.0 is the same as Silverlight 1.0 with more built-in User Interface controls and supported by more programming languages such as, C# and Visual Basic.

With the enhanced capabilities and User Controls, Silverlight has gained more and more popularity since it was first released in September 2007. It is used to power the unprecedented online experience NBC Universal is creating for the 2008 Beijing Olympics .

Technology

Overview

Silverlight will now include a mini-CLR (Common Language Runtime) from .NET. And Silverlight definitely plays a very strong role in multimedia. Silverlight isn’t just animations in applets, far from it - it is a very serious development environment that takes desktop performance and flexibility and puts it on the web. For the web service's perspective, the same video sites that will be switching to Silverlight for content delivery will also want to consider one of the new web services announced by Microsoft today. Also, Silverlight on a Windows mobile device as part of a new service.

The CLR

As with the usual .NET runtime, with Silverlight you can code in a number of supported programming languages. At this time the languages supported are C#, Javascript (ECMA 3.0), VB, Python and Ruby. The Python and Ruby interpreters were built by Microsoft and have been released under their shared source license meaning that developers can get access to the code and are able to make contributions to it.

The most remarkable part of the CLR are its speed and its size. First of all, the full Silverlight download with CLR and everything else will weigh in at around 4MB - which with current broadband penetration is effortless. Second of all the CLR is fast, very very fast. In a demonstration today showing a game of chess routines written in .NET competed against native Javascript routines and the result was a speed difference of orders of magnitude. Developers can simple take their existing Javascript and copy it into Silverlight and have it perform multiple times faster than it does in the native browser environment. Further to that, Silverlight applications can access and manipulate the browser DOM (meaning they can reach outside and into the webpage itself) so once the Silverlight runtime is more common expect to see many developers of web applications tap into Silverlight for both a performance increase and for better visual enhancements and user experience.

Multimedia

Online video has traditionally been associated with Flash, and most users are familiar with the constraints that such video has such as quality levels and fullscreen viewing. Using Silverlight you can distribute multimedia as part of the application at quality levels up to 720p (high definition) and also in native full screen (not just a maximized browser screen). The demonstrations shown today were simply gorgeous, and we are finally seeing a web-based video distribution model that can compete with both desktop-based downloads as well as DVD and other offline content.

As with all Silverlight applications, video can be streamed down through IE, Firefox or Safari on both Windows and Mac OSX. If an application is doing just video and audio and doesn’t require the rest of the Silverlight CLR functionality, then the total download including the codecs required to play the stream will be around 2MB (it will be a bit bigger for Mac OSX as it is a universal binary). The install happens automatically, and doesn’t require a restart in IE which will probably result in video content sites being the first major distributors of the Silverlight 1.0 client across browsers. I expect that over time we will see a host of sites, especially those currently serving WMV of other formats into media player embeds, migrate their video serving to Silverlight.

Services

The service is called Silverlight Streaming and it allows users and developers to host their Silverlight content and apps with Microsoft, taking advantage of their extensive global network of datacenters and their content delivery network. Best of all, this service is free, and while currently it is only in alpha it allows users to upload up to 4GB of content, and to stream up to 1 million minutes of online video delivery at 700kbps, around DVD quality. Starting right now, you can build a total video content site using Silverlight at no cost. The future for this service looks good as they will incorporate Silverlight Streaming with the MSN Video ad network to allow you to easily monetize your video streams and participate in a revenue sharing opportunity with Microsoft while removing your distribution costs. There will also be a premium level of content delivery where you will be able to pay for higher levels of usage - the cost for this service is as yet unknown but expect it to be very low.

Mobile

The demo showed both Silverlight applications and media streaming running on a mobile phone - so Silverlight even at this stage is about more than just the desktop browser and desktop market. With windows mobile and Symbian now the two dominant mobile platforms, I can’t see any reasons why we won’t see Silverlight on Symbian as well - thus spreading the platform across the vast majority of both desktops and mobiles, something that alternative platforms have not managed to do.

Standard

Silverlight doesn't comply existing standards. Instead of using the W3C's SVG standard for vector graphics, Microsoft created its own XML-based vector graphics subset for XAML that is structurally similar to SVG. Since the SVG standard is widely used and supported by many applications and development technologies, the strategy of building a completely independent XML-based language for vector graphics limits the extent to which XAML developers can use or adapt existing third-party tools and technologies that are designed to work with SVG, and also limits the power of Silverlight to catch up with browsers that are more functional and standards-compliant.

Features

The main features of Silverlight version 2.0 are as follows:

• Create and manage 2D graphics and animation
• Handle mouse, keyboard, and ink input
• Deliver WMV, WMA, and MP3 media
• Work with JPEG and PNG imaging
• Format and manipulate text
• Communicate with services and download server resources by using the HTTP downloader
• Parse Extensible Application Markup Language (XAML) content and markup
• Navigate Web content by utilizing the JavaScript Document Object Model (DOM)
• Support for managed code such as C#, VB, Python and Ruby
• XAML extensibility
• Control class and sample controls

Examples

How to make an animation using Silverlight?

Creating an animation in Silverlight is different from Flash. The first step to animate an object in Silverlight is to create a Storyboard. Storyboard is an object in Silverlight which controls animations with a timeline. It is equipped with interactive methods to start, stop, pause and resume an animation. There are several type of animations in Silverlight. DoubleAnimation, ColorAnimation, and PointAnimation are the basic type of animations.

DoubleAnimation animates the value of a double property between two target values using linear interpolation over a specified duration. An example of DoubleAnimation is the type of animation which makes use of the opacity property of the object, since opacity property is of type double.

ColorAnimation animates the value of a color property between two target values using linear interpolation over a specified duration. This type of animation is used to animate the colors of its objects.

PointAnimation animates the value of a point property between two target values using linear interpolation over a specified duration. An animation that moves objects or enlarges objects is the type of animation which falls into PointAnimation category.

The more advance types of animations in Silverlight incorporate a set of KeyFrames. DoubleAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, and ObjectAnimationUsingKeyFrames are the advance types of animations. Each of these types of animations animates the value of its object property (such as double, point, color, and object) along with a set of KeyFrames over a specified duration.

An example of simple animation created in Silverlight 2.0 Beta 2 can be found in this link http://nikolas6.com/SilverlightSample/SilverlightSample.html.

(CC) Image: Ganggang Hu
QuestionMark2.jpg

(CC) Image: Ganggang Hu
QuestionMark1.jpg

The easiest way to create a Silverlight animation is by using Microsoft Expression Studio, in particular Expression Blend 2.5 June Preview (latest version of Expression Blend), and Microsoft Visual Studio 2008. The Expression Blend is used to design the layout and most of the stuffs related to the XAML, while the Visual Studio 2008 is used to edit the supported C# code.

In the case of the sample animation above, it uses two still images, which are then shown in sequence to create the illusion of a motion. The first step in doing this is to create a new Silverlight 2 Application project in Expression Blend. It will automatically generate two XAML files called App.xaml and Page.xaml. Each of these files contains a C# code behind, App.xaml.cs and Page.xaml.cs. Furthermore, Page.xaml contains a UserControl and Grid (named "LayoutRoot") objects by default. Once the project files are created, the two still images are then imported to the project folder, which can be done by either selecting the "Add Existing Item" option under "Project" or dragging the images into the Expression Blend project. The images are then inserted into the Grid (LayoutRoot). A Storyboard object is needed to create an animation. So, the next step is to add a new Storyboard to the project. The Storyboard has a time line property which allows user to set how objects behave for a specific duration. At time 00:00:00 (hour:minute:second) set QuestionMark2.jpg file to be visible and QuestionMark1.jpg file to be not visible. Then, at time 00:00:01, change the setting to QuestionMark2.jpg file be not visible and QuestionMark1.jpg file be visible. And finally, at time 00:00:02, set QuestionMark2.jpg file back to be visible and QuestionMark1.jpg file to be not visible. With this interchanging sequences of behavior, the two still images create an illusion of one image that has a motion, just like the example found in this link http://nikolas6.com/SilverlightSample/SilverlightSample.html. To have the behavior repeated several times or forever, Storyboard has a property called "RepeatBehavior" which can be set to 1x, 2x, 3x, and forever. Once the animation is set up, the Storyboard must be set to start the time line. This can be done by editing the code behind Page.xaml.cs. Right click the Page.xaml and select "Edit in Visual Studio". This will open Visual Studio and the solution in which the Page.xaml belongs to. In this case, to start the Storyboard, the code behind should look like the following:

 namespace SilverlightApplication2
 {
   public partial class Page : UserControl
   {
     public Page()
     {
       // Required to initialize variables
       InitializeComponent();
       Storyboard1.Begin();  // Start the Storyboard
     }
   }
 }

Once the modification is done in the code behind, save, rebuild and test the solution.

How to put Silverlight into a web page?

When Silverlight application is compiled, it generates a file type, .xap, in the Bin folder of the project. It is basically a compiled Silverlight application, just like the .swf file in Flash. A .xap file contains an application manifest file, AppManifest.xaml, and .dll files .

To embedded the Silverlight application into a web page, the easiest way is to embed the following code into the HTML page.

 <object data="data:application/x-silverlight," 
 type="application/x-silverlight-2-b2" width="100%" height="100%">
     <param name="source" value="SilverlightSample.xap"/>
 </object>

In the above code, SilverlightSample.xap is the Silverlight application which are embedded into the web page.

Market

Why and Where to use Silverlight?

The main reasons of people using Silverlight are as follows:

• Silverlight supports playback of WMV files, full-screen 720p video and seamless transitions between full-screen and windowed mode without losing the position in the video.
• By separating markup (XAML) from code, Silverlight provides a familiar web metaphor for designers and developers. People can embed XAML directly into HTML pages.
• Silverlight is lightweight, which is just a 1MB download on a PC
• Silverlight is blindingly fast. For example, people can play many videos simultaneously without stuttering or dropping frames.

The same as Flash, the current usage of Silverlight mainly focus on Internet. Microsoft is doing a good job in supporting its Silverlight technology in this aspect. To support the new version of Silverlight, Silverlight 2.0 Beta 2, Microsoft released Microsoft Silverlight Tools Beta 2 for Visual Studio 2008 to allow Silverlight 2 Beta 2 supported by VS 2008 and Expression Blend 2.5 June Preview to allow designers to use Expression Blend with Silverligh 2.0 Beta 2 features. With such supports, Microsoft can attract web developers to develop applications using Silverlight.

Market Share

Although there is no official survey about the percentage of Silverlight installation, the profit of selling server and development tools has reached $3 billion or about 25% of Microsoft's revenue in Q4 2007(ended 6/30/2007), which shows strong potential for Silverlight to take a place in market share.

Allies and Competitors

The relationship of Silveright to other applications

Tafiti is an animated search engine which combines Silverlight with Live Search launched by Microsoft in 2007. This service is designed to "help people use the web for research projects that span multiple search queries and sessions by helping visualize, store, and share research results", and intended to "explore the intersection of richer experiences on the web and the increasing specialization of search".

Silverlight is used as the key technology for Popfly, a Rich Internet Application editor enables users to create mashups, gadgets, Web pages and applications without any prerequisite of technical knowledge or development experience.

In June 2008, Windows Live team released a MSN Toolbar for IE based on Silverlight. The toolbar allows people to search and browse the entire MSN categories from the browser without going to the msn.com site.

Also, CBS Television Stations adopt Silverlight for new user-generated content initiative on the web in order to create an interactive environment where audiences can participate in the local broadcast process.

Competitors

See Silverlight vs. Flash

Silverlight aims to compete with Adobe Flash and the presentation components of Ajax. It also competes with Sun Microsystems’ JavaFX, which was launched a few days after Silverlight. Some people claim that as the future choice of developers who build rich Internet applications, Silverlight makes Flash/Flex look like an absolute toy.

Future Developments

With the ambition to improve the "user experience capabilities" and provide an end-to end development environment that encourages the use of Microsoft technologies and services, Microsoft plans to popularize Silverlight on mobile platform and gain a foothold in the mobile market. Currently, Nokia has signed up to use Silverlight platform for its S60 and S40 mobile devices as well as its Nokia Internet tablets, marking the first mobile win for the Redmond giant’s rich media development framework.

Silverlight will support all major browsers on both Mac OS X and on Windows. Particular care is being taken to account for differences in platform and browser capabilities to ensure a consistent experience including experiences on Firefox, Safari, and Internet Explorer. Microsoft will extend the support for Silverlight on Linux through a partnership with Novell.

The next step of Silverlight's media development is to support Advanced Audio Coding (AAC) audio, MPEG4, H.264 and Flash video. Currently, Microsoft is gathering information from customers about the needed codecs for updating Silverlight when necessary.

According to the long-term goal for Silverlight, Microsoft hopes that "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. By leveraging Silverlight's support for .NET, High Definition video, cost-effective advanced streaming, unparalleled high-resolution interactivity with Deep Zoom technology, and controls, businesses can reach out to new markets across the Web, desktop, and devices." However, there are still some requirements for Silverlight to gain future success.

• Since the design experience for Silverlight is nonexistent right now, it is important for Silverlight to build better design experience, rather than producing XAML that doesn't parse in Expression Blend.
• Make easier tools for designers to design the GUI and interaction of a Silverlight "page" that can then be taken over by developers, in order to create fluent designer-developer workflow.
• Enable extra privileges to Silverlight applications for consuming services from cross-domain locations to build a better development environment.