Nikhil Kothari Software Architect, Microsoft Corporation WEB317

Quick overview of Silverlight Using Silverlight from ASP.NET applications and server controls Close look at interop between Silverlight and HTML/Script Using Silverlight and.NET capabilities in Ajax scenarios

Cross-platform, cross-browser plugin Silverlight 1.0 Theme: media and rich graphics RC available today XAML and Javascript-based programming model Silverlight 1.1 Theme: Rich Internet Applications Alpha available, RTM summer ‘08.NET-based programming model Full CLR and subset of.NET framework

Presentation XAML subset Shapes, brushes, animation, text Video (wmv) and audio (wma, mp3) Script programming model.NET Framework BCL, Networking, XML, JSON, Data Dynamic Languages WPF Subset HTML and script interop Tooling Visual Studio Expression Other XAML capable tools Silverlight Browser Plugin.NET Framework CLR Execution Engine BCLBCLDLRDLRNetNetDataData WPF Subset HTML/ScriptHTML/Script PresentationPresentation Presentation Engine MediaMedia Graphic s XAMLXAML Scriptable API InputInputTextText

Using XAML, Javascript and Managed code

<embed type=“application/x-silverlight” source=“App.xaml” … /> ….NET Assembly (App.dll) public class MyApp : Canvas { … }.NET Assembly (App.dll) public class MyApp : Canvas { … } XAML Source (App.xaml) XAML Source (App.xaml) Script Helper(App.js) function createApp() { Silverlight.createObject( ‘App.xaml’, …); Silverlight.createObject( ‘App.xaml’, …);} Script Helper(App.js) function createApp() { Silverlight.createObject( ‘App.xaml’, …); Silverlight.createObject( ‘App.xaml’, …);} HTML Page (App.htm) createApp(); createApp(); HTML Page (App.htm) createApp(); createApp(); Script Bootstrapper (Silverlight.js from SDK) Silverlight.createObject(…) { … } Script Bootstrapper (Silverlight.js from SDK) Silverlight.createObject(…) { … } References Invokes helper method

Silverlight plugin within the context of HTML content Both visual and non-visual scenarios Media capabilities Embedding video, audio content Vector graphics and animation Data visualization.NET Framework features Isolated storage, local file access, … Offline storage, async or customizable multi-file upload, etc.

Media is the key Silverlight 1.0 feature ASP.NET provides a media server control to easily embed video Usable without learning XAML or script Flexibility for designer: XAML-based skinning Power to developer: data-binding, client events Demonstrates initial patterns for Silverlight-based server controls Example: chart and other data-bound controls

Customizing and programming against the media control

Silverlight integrates with the HTML page Not just an isolated island of XAML Initialization parameters Pass list of static name/value pairs into control (initParams) Available as WebApplication.Current.StartupArguments Scripting Bridge Creating scriptable APIs in managed code HTML Bridge Managed access to HTML DOM

Allows creating scriptable APIs in managed code Start using Silverlight incrementally within existing Ajax application Scenarios Enables passing data between script and managed code Enables exposing CLR and.NET framework functionality to script Key Concepts Annotate properties, methods, events and types with [Scriptable] Register objects with WebApplication.Current.RegisterScriptableObject Use from script via slControl.content.

Provides access to browser and script objects Get/set properties, handle events Scenarios Enables Silverlight apps to integrate with HTML page (deep linking, history etc.) Enables managed programming against HTML DOM Key Concepts System.Windows.Browser.HtmlPage HtmlDocument, HtmlElement, HtmlTimer HtmlObject, ScriptableObject HtmlObjectHtmlObject ScriptableObjectScriptableObject HtmlPage.WindowHtmlPage.Window HtmlDocumentHtmlDocumentHtmlElementHtmlElement

Offline Storage Read/write data to an application data store Based on.NET isolated storage APIs and functionality IsolatedStorageFile.GetUserStoreForApplication App can partition space into multiple files and directories Currently fixed at 1MB limit; will be configurable, and apps will also be able to prompt the user for increased quota Open File Dialog Allows prompting the user to select files and make available for reading Application is provided file name, and can open a readable stream Networking BrowserHttpWebRequest System.Net programming model on top of XMLHttp Automatically inherits cookies, session, authentication state

Managed chess engine used by Ajax application

Simple data visualization and interaction

Simple text editor with “draft-mode”

Async Multi-file Upload API

XAML Controls Higher-level APIs for storage Dynamic isolated storage quota, prompting the user Cross-domain networking Background and async execution support Richer interop with HTML and script

Community site and starting point for docs, samples, forums, etc. Related Talks Silverlight talks: DEV310 and DEV311 Blogs

© 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.

This session shows how to enhance your ASP.NET and Ajax applications with Silverlight. It demonstrates how you can easily incorporate media experiences using the familiar server-control paradigm and customize it using XAML. Next it demonstrates using XAML vector graphics and animation for data visualization. The session then covers using managed code and.NET framework capabilities such as offline storage, and local file I/O in a manner than naturally fits into your Ajax applications to go beyond key limitations of the browser, while retaining your application’s cross-browser and cross-platform reach.

Using an event to invoke arbitrary methods Until we have true method support Mark the event as scriptable Create a custom event args type that is scriptable Script can subscribe an event handler Do this during the onLoad handler of the Silverlight control itself When managed code raises the event, the scripting bridge will invoke the script handler