Building Rich Internet Applications Using Microsoft Silverlight

Building Rich Internet Applications Using Microsoft Silverlight Saurabh Pant blogs.msdn.com/saurabh

Agenda • Overview • Getting Started • Build an Application • Networking • XML Parsing • Controls • Data Binding • Local Storage • OpenFileDialog • Q&A

Silverlight1.0

Silverlight2.0

Silverlight 2.0 Features • 2D, Graphics • Audio, Video • Animations • Text, Text Input • Controls • Layout • Styles/Templates • Data Binding • Networking • HTTP/S and Sockets • .NET Support • C# and VB.NET • LINQ • XML APIs • Generics • HTML Integration • JSON Serializer • Local storage • Crypto APIs (AES) • Threading • *Feature in bold part of Silverlight 1.0

Silverlight Roadmap • SilverlightV1.0 Shipped Q307 • SilverlightV2.0 • Beta 1 Q108 [non-commercial go-live] • Beta 2 [go live] • Tools • Expression Suite and Visual Studio Silverlight support available • Interactive Designer support in Visual Studio later this year

Packaging • Code is compiled into assemblies (.dll) • XAML is embedded into assembly • Application is packaged into ZIP archive • File extension: .xap • Advantages • Reduces on-the-wire size, faster disk I/O • Easy to generate, update • Flexible packaging model • Assemblies and resources can be demand loaded

Silverlight Sandbox • SilverlightApps lives in the browser Sandbox • Developers cannot extend the sandbox • Silverlight extends it in a secure way • Local storage • FileOpenDialog • Sockets • Cross domain HTTP(S) requests

Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects • Step 3: Build Main (Master) View • Step 4: Create a Details View • Step 5: Use Local Storage • Step 6: Use FileOpenDialog

MSN Video Service • Video Catalog at http://catalog.video.msn.com/ • Secured via a Silverlight policy file

List Binding with Data Templates {{FileName=“Html.html”, FileImageUrl=“html.jpg”}, {FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}} • Data Template: • Data (.NET Object): • Bind using ItemsControl (List Control):

Silverlight MIX 08 Sessionshttp://sessions.visitmix.com • Scott Guthrie Key Note • Building Rich Internet Applications in SL 2.0 - Part I & II • Integrating Media in Silverlight Applications • Encoding Video for Microsoft Silverlight Delivery Scenarios • Creating Rich, Dynamic User Interfaces with Silverlight 2 Controls • Silverlight and the Advertising Opportunity • Working with Data and Web Services in Microsoft Silverlight2.0 • Extending the browser programing model with Sliverlight • Lighting Up Your AJAX Applications with Silverlight

Backup

Data Binding • Property Binding • One way, two way and one time • Use “DataContext” property • Supports value converters • Collection/List Binding • Support data templates (repeater) • Use “ItemsSource” property

Deep Zoom • Provides seamless viewing & zooming of huge images • Loads only the data necessary to show the part of an image the user is viewing • Effectively turns a large image into an efficiently scaling vector

Deep Zoom– How does it work? • Uses tiled image pyramids • The overhead of pyramids is 33%:

Deep Zoom – How does it work? • Preprocessing tool breaks image into 256 x 256 tiles • Then generates pyramids of tiles at lower resolutions

Deep Zoom– How does it work? • When the image is displayed on the client the lowest resolution tiles are shown first • Then as the higher quality tiles are downloaded, they are smoothly blended in

Deep Zoom in Silverlight • Exposed through the MultiScaleImage • Preprocessing tool outputs image tiles and XML description file • Working with the Expression team to get this into the next version of Blend

Building Rich Internet Applications Using Microsoft Silverlight