Building Rich Interactive Applications with Silverlight

Andrew, Dani and Dr. Z MSDN Roadshow development architecture you Maryland Pennsylvania Virginia Washington DC Building Rich Interactive Applications with Silverlight Zhiming Xue Z Architect Evangelist zxue@microsoft.com blogs.msdn.com/zxue

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

Silverlight v1.0 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 Runtime Java Script DOM API XAML Media (video, audio) Presentation Core Servicing Component 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 Alpha 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 WPF Subset XML Silverlight 1.1.NET Framework HTML Bridge App Model & Services Framework Libraries BCL Execution Engine Runtime Java Script DOM API XAML NET LINQ Media (video, audio) Presentation Core Dynamic Language Runtime Browser Hosting Friction-free Installer & Updater

Presentation Core Silverlight Architecture Browser Host.NET for Silverlight Data WPF Networking MS AJAX Library DOM Integration Application Services LINQ XLINQ DLR Ruby Python Extensible Controls BCL Generics Collections CLR Execution Engine XAML REST RSS SOAP POX JSON Legend V1.1 Deploy UI Core Inputs DRM Friction-Free Installer Auto- Updater Vector Text AnimationImages KeyboardMouse Ink Media VC1 WMA MP3 Media Controls Layout Editing Legend V1.0

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 Personal Computer running Windows Requirement 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 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/

Silverlight Installation Experience

Silverlight Streaming

Light up the Web

Silverlight Roadmap Today Beyond Silverlight 1.0 Silverlight 1.1 Alpha Refresh Silverlight 1.1 Expression Studio Expression Blend 2 August Preview Expression Media Encoder Silverlight Tool Alpha for Visual Studio Orcas Beta 2 Expression Studio 2 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.