Building Rich Internet Applications Using Microsoft

Silverlight

Saurabh Pantblogs.msdn.com/saurabh

Agenda• Overview• Getting Started• Build an Application

– Networking– XML Parsing– Controls– Data Binding– Local Storage– OpenFileDialog

• Q&A

Silverlight 1.0

Silverlight 2.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

• Silverlight V1.0 Shipped Q307• Silverlight V2.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

• Silverlight Apps 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 Sessions http://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 Silverlight 2.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 pyramidsThe overhead of pyramids is 33%:

Deep Zoom – How does it work?

Preprocessing tool breaks image into 256 x 256 tilesThen 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– 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– 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