Building Rich Interactive Applications with Silverlight

Zhiming Xue “Z”Architect Evangelist

zxue@microsoft.comblogs.msdn.com/zxue

Andrew, Dani and Dr. Z MSDN Roadshow

development | architecture | you

Maryland | Pennsylvania | Virginia | Washington DC

Agenda• What is Microsoft Silverlight

• Architecture and components

• OS and Browser Compatibility

• Feature matrix between v1.0 and v1.1

• Silverlight Tools

• Demos

• Silverlight project template

• Programming Silverlight 1.0 using XAML and JavaScript

• Programming Silverlight 1.1 using XAML and .NET

• Silverlight Deployment

• Silverlight Roadmap and Resources

Platform Characteristics

• Small and factored• Silverlight 1.0 RC is 1.4MB (compressed)

for personal computers and

4.8MB (compressed) universal binary

for Mac (PowerPC and Intel).

• Sandboxed Application Model

• Cross-platform, cross-browser• support all major browsers on

both Mac OS X and on Windows (Firefox, Safari, and Internet Explorer)

Components

• Audio and Video (WMV, WMA, MP3) and Imaging (PNG, JPG)

• WMV v7, v8, v9, VC-1

• Vector graphics, text and animations

• Basic elements that allow for the construction of higher level components

• Canvas, shapes, input and eventing

• JavaScript programming model

Silverlight v1.0

Silverlight v1.0

Servicing Component

Runtime

Presentation Core

Media (video, audio)

XAML

Java Script DOM API

Browser

Hosting

Video Formats Supported• Windows Media Audio and Video (WMA, WMV7–9) and VC-1, as well as MP3

audio.

• Additional formats may be available by the final release based on customer feedback.

• VC-1 is an industry-standard video format• Recognized by the Society of Motion Picture and Television Engineers (SMPTE)

• Windows Media Video 9 (WMV-9) is the Microsoft implementation of the SMPTE VC-1 standard video codec.

• Ships in all HD-DVD and Blu-ray Disc–certified electronics, hardware, and tools.

• VC-1 is the Xbox 360 video game console's official video codec,

• There are actually 15 companies in the VC-1 patent pool as of 8/17, 2006.

• Silverlight supports 720p, HD quality with considerable performance benefits over other solutions.

• 720p assumes a widescreen aspect ratio of 16:9, and a horizontal resolution of 1280 pixels for a total of about 0.92 million pixels.

• Performance is dependent upon CPU capabilities of your computer and configurations.

• Silverlight will take advantage of Windows Server features for streaming.

Silverlight v1.1 AlphaSilverlight 1.1

.NET Framework

Execution Engine

HTML BridgeWPF Subset

XMLDynamic

Language

Runtime

App Model & Services

Friction-free Installer & Updater

Runtime

Presentation Core

Media (video, audio)

XAML

Java Script DOM API

Framework Libraries

Browser

Hosting

BCL

NET

LINQ

Platform Characteristics

• Small and factored• 4.49 MB (exe file on Windows)

• Sandboxed Application Model

• Cross-platform, cross-browser• support all major browsers on

both Mac OS X and on Windows (Firefox, Safari, and Internet Explorer)

Components

• Friction-free installer

• Native presentation runtime

• Factored CLR and .NET Framework

• Dynamic Language Runtime

• IronPython, IronRuby, Managed JavaScript, Managed VB

Legend

V1.1

Legend

V1.0

.NET for Silverlight

XAML

Pre

sen

tati

on

Co

reNetworking

JSON

RESTPOX

RSS

Data

LINQ XLINQ

DLR

Ruby Python

WPF

Extensible Controls

BCL

Generics Collections

Inputs

KeyboardMouse Ink

Media

VC1 WMA MP3

Browser Host

MS AJAX

Library

DOM

Integration

UI Core

Images

Vector Text

Animation

DRM

Media

Controls

Layout Editing

CLR Execution Engine

Deploy

Friction-Free

Installer

Auto-

Updater

Application

Services

SOAP

Silverlight Architecture

Compatible Operating Systems and Browsers

Operating System IE 7 IE 6 Firefox 1.5 Firefox 2 Safari

Windows Vista Yes - Yes Yes -

Windows XP Yes Yes Yes Yes -

Windows 2000 - Soon** Soon** Soon** -

Windows Server 2003

(excluding IA-64)Yes Yes Yes Yes -

Mac OS 10.4.8+ (PowerPC) - - Yes* Yes* Yes*

Mac OS 10.4.8+ (Intel-based) - - Yes Yes Yes

* Silverlight 1.0 Only ; ** Silverlight 1.1 Only

Min Requirements

Components Requirement

Personal Computer running

Windows

X86 or x64 500-megahertz (MHz) or

higher processor with 128-

megabytes (MB) of RAM

Mac OS 10.4.8+ (PowerPC) PowerPC G4 800-MHz or higher

processor with 128-MB of RAM

Mac OS 10.4.8+ (Intel-based) Intel Core Duo 1.83-gigahertz (GHz)

or higher processor with 128-MB of

RAM

Silverlight Runtimes - Feature Matrix

Silverlight Runtimes - Feature Matrix

Silverlight Tools• Visual Studio .NET

• Silverlight offers a flexible and consistent programming model that supports AJAX, Python, Ruby, and .NET languages such as VB and C#, and integrates with existing Web applications.

• Use Microsoft Visual Studio 2005 to build their Silverlight application.

• Microsoft Visual Studio 2008 Beta 2 is the next generation development tool for Windows Vista, the 2007 Office system, and the Web.

• Building the latest AJAX enabled Web site and developing Silverlight applications

• Expression Studio• Expression Blend 2 August Preview: enable designers to create compelling user

experiences for Silverlight.

• Expression Design: create rich visual elements for Silverlight applications.

• Expression Media Encoder Preview Update: enables rapid import, compression and Web publishing of digital video imported from a variety of popular formats, including AVI and QuickTime, into WMV.

• Expression Media Encoder is a template-driven system that integrates seamlessly into existing Web publishing workflows for both live and on-demand content delivery.

A Silverlight Project• the Silverlight.js and CreateSilverlight.js files which initializes

the Silverlight plugin for use in HTML pages

• a XAML file for the UI, and

• code-behind files for the application code.

• Silverlight applications are debugged in a manner similar to ASP.NET applications.

Demo -- Silverlight 1.0

• Creating a Silverlight 1.0 Application using Visual Studio

• Hello World

• Add animation to video player, including video playlist

• Test sample application in IE and Firefox browser

Silverlight Object Model

Silverlight Code Execution Sequence• Start HTML web page (testpage.html)

• Load javascripts and run createSilverlight() in testpge.html.js

• Call createObjectEx (loading page.xaml and page.xaml.cs)

• calls createObject in silverlight.js

• Check browser versions; Build HTML code

• Load the control if installed; Redirect to Silverlight download site

• Handle errors

• Load events and create delegates

• Add Silverlight Function

• Modify elements in (page.xaml and page.xaml.cs)

• <Canvas/>, <TextBlock/>, <MediaElement/>, …

• Add your javascripts to scene.xaml.js

• handleLoad

• addEventListener

• handleMouseUp, handleMouseEnter, handleMouseLeave

• sender.findName

Demo – Silverlight 1.1

• Creating a Silverlight 1.1 Application using Visual Studio

• Consume web services

• Use “Add Silverlight Link” in dev project

• Silverlight XML

• Silverlight and Dynamic Language Runtime

• Managed javascript

• Ironpython

• Silverlight Surface

• Silverlight Rocks (game by Andy Beaulieu)

Demo – AJAX Futures July 2007 CTP

• Add Xaml file to ASP.NET page

• Add media control to ASP.NET page

Silverlight Debugging• Use debugger for javascript

• enable script debugging in the browser

• Set breaking points for .net code

How is Silverlight Deployed?

• Cross platform (Windows, Mac, cross browser)

• 15 second on-demand install within a browser

• Small 1.4 to 5MB core runtime download

• Side by side and non-impactful (no reboot)

• Default upgrade model keeps machines always current with new releases

Where to Get Silverlight

• http://www.microsoft.com/silverlight

• http://www.silverlight.net/GetStarted/

Where to Get Silverlight

• http://www.microsoft.com/silverlight

• http://www.silverlight.net/GetStarted/

Silverlight Installation Experience

Silverlight Streaming

Light up the Web

Silverlight Roadmap

• Expression Studio

• Expression Blend 2 August Preview

• Expression Media Encoder

Today Beyond…

• Silverlight 1.0

• Silverlight 1.1 Alpha Refresh

• Silverlight Tool Alpha for

• Visual Studio „Orcas‟ Beta 2

• Expression Studio 2

• Silverlight 1.1

• Silverlight Tools for

Visual Studio „Orcas‟

Upcoming Events• Boston ReMIX07, October 8-9, 2007

• ArcCouncil

• Architect Roundtables

• Future MSDN Roadshow Events

Check my blog at blogs.msdn.com/zxue

Resources• Silverlight Community and Support

• http://www.silverlight.net

• http://msdn2.microsoft.com/en-us/asp.net/bb187454.aspx

• Silverlight Developer Center

• http://msdn2.microsoft.com/en-us/asp.net/bb187358.aspx

• Silverlight Streaming Service

• https://silverlight.live.com/?wa=wsignin1.0

• Getting Started with Silverlight (whitepaper)

• http://msdn2.microsoft.com/en-us/library//bb404300.aspx

• Expression Product Page

• http://www.microsoft.com/expression/

More Resources• SWF2XAML Converter

• http://www.mikeswanson.com/swf2xaml/

• Blogs

• http://geekswithblogs.net/WynApseTechnicalMusings/Default.aspx

• http://blogs.msdn.com/mharsh

• http://blogs.msdn.com/jstegman

• Gallery

• http://silverlight.net/community/communitygallery.aspx

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.