Building Rich Internet Applications Using Microsoft Silverlight

Mike HarshMicrosoft Corporation

Joe StegmanMicrosoft Corporation

Agenda

Part 2 (Mike)Control TemplatingCustom ControlsCustom LayoutOpenFileDialogHTML IntegrationDeep ZoomLocal StorageQ&A

Part 1 (Joe)OverviewGetting StartedBuild an Application

NetworkingXMLControlsData Binding

Silverlight 2 Runtime Features

2D, GraphicsAudio, VideoAnimationsText, Text Input*Controls*Layout*Styles/Templates*Data Binding*Networking

HTTP/S and Sockets*

* New in Silverlight 2

.NET Support*C# and VB.NET*

LINQ*XML APIs*Generics*HTML Integration*

JSON SerializerLocal storage*Crypto APIs (AES)*Threading*

Silverlight 2 SDK Libraries

Dynamic Languages*JScriptIronRubyIronPython

Additional Controls*LINQ for XML*XML Serialization*Syndication APIs (RSS)*

* New in Silverlight 2

Silverlight Roadmap

Silverlight V1 Shipped Q307Silverlight V2

March 5th Beta 1 (non-commercial go-live)Q208: Beta 2 (go live)

ToolsExpression Suite and Visual Studio updates for all public Silverlight releasesVisual Studio Designer support (Cider) later this year

Getting Started

an old-ish dog with new-ish tricksand a new dog doing old tricks

demo

Build an Application

Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) ViewStep 4: Create a Details ViewStep 5: Add Search and UX Animations

Build an Application

Step 1: Get DataNetwork data from site of originNetwork data from cross domain (x-domain)*Local data

Silverlight Sandbox

Silverlight lives in the browser SandboxDevelopers cannot extend the sandboxSilverlight extends in a secure way

Local storage (isolated storage)Similar to cookies

FileOpen dialogSockets

Beta 1: Site of origin, port restrictions

Cross domain HTTP(S) requestsSupport Silverlight and Subset of Flash policy files

Build an Application

Step 1: Get DataGet data from http://catalog.video.msn.com/Secured via a Silverlight policy file

Networking

demo

Build an Application

Step 1: Get DataStep 2: Convert XML data to .NET objects

Options:LINQ to XML XMLReaderXML Serialization

Convert XML to Objects(XML -> List<VideoSource>)

demo

Build an Application

Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) View

Beta 1 ControlsCanvasFileOpenDialogGridImageItemsControlMediaElementMultiScaleImageStackPanelTextBoxTextBlockButtonPopup

CheckBox*DataGrid*DateTimePicker*GridSplitter*Hyperlink*ListBox*Calendar*RadioButton*Slider*ToggleButton*Tooltip*WatermarkTextBox*

* ship in a separate libraryNote: additional controls to follow between Beta 1 and final

release

Layout

Layout containersCanvas, Grid, StackPanel, Border

Layout propertiesWidth, MinWidth, MaxWidth, ActualWidthHeight, MinHeight, MaxHeight, ActualHeightMargin and Padding

Layout extensibility

Data Binding

Property BindingOne way, two way and one timeUse “DataContext” propertySupports value converters

Collection/List BindingSupport data templates (repeater)Use “ItemsSource” property

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):

Build an Application

Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) View

Use Data Binding, Layout and Templates

Build the Master View

demo

Build an Application

Step 1: Get DataStep 2: Convert XML data to .NET objectsStep 3: Build Main (Master) ViewStep 4: Creating a Detail View

Make a re-usable controlStep 5: Add Search and UX Animations

Time permitting

Finishing the Application

demo

Related Sessions

Integrating Media in Silverlight ApplicationsThursday, March 6 8:30 AM - 9:45 AM, San Polo 3501A

Encoding Video for Microsoft Silverlight Delivery Scenarios

Wednesday, March 5 3:00 PM - 4:15 PM, Delfino 4105

Creating Rich, Dynamic User Interfaces with Silverlight 2 Controls

Thursday, March 6 10:15 AM - 11:30 AM, Lando 4204

Silverlight and the Advertising OpportunityWednesday, March 5 4:30 PM - 5:45 PM, San Polo 3501A

Working with Data and Web Services in Microsoft Silverlight 2

Wednesday, March 5 1:30 PM - 2:45 PM, Delfino 4105

Lighting Up Your AJAX Applications with SilverlightFriday, March 7 10:00 AM - 11:15 AM, Lando 4204

Building RIAs Using Silverlight 2Mike HarshProgram ManagerMicrosoft Corporation

Part 2 – Making Apps Sticky

AgendaReview part 1Control TemplatingCustom Controls & LayoutsLocal StorageHTML IntegrationOpenFileDialogDeep ZoomQ&A

What Joe Showed You…

Silverlight 2.0 has a rich UI framework built-inCan provide AJAX++ experiences with very little codeHowever…

You can take your app to 11 with Silverlight 2.0

Silverlight 1

Silverlight 2

Styling / Skinning

Customize the look of an application without changing it’s behavior3 levels of customization:

Styling / Skinning

Customize the look of an application without changing it’s behavior3 levels of customization:

Styling / Skinning

Customize the look of an application without changing it’s behavior3 levels of customization:

Styling / Skinning

Customize the look of an application without changing it’s behavior3 levels of customization:

Styling / Skinning

Silverlight UI customization is designed to easily enable the styling and skinning modelsEasy for designers and developers to understandDesigned for toolabilitySkins can be easily ported to WPF

Styling / Skinning

Parts Based Model:Control authors define parts of a controlAdd metadata so tools can discover parts and customize them in a templateTemplates are defined in XAML and are reusable

DownButton

UpButtomThumb

Track

Custom Control Template

demo

<ControlTemplate <Storyboard x:Name="STATE_MousePressed"> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty=“fill"> <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2F2727"/></ColorAnimationUsingKeyFrames> </Storyboard> <Rectangle Fill="Black" x:Name="ELEMENT_Rectangle"/></ControlTemplate>

+ =

Custom Controls & Layouts

.NET programming model brings componentization and reuse to Silverlight

Custom XAML elements can be created using .NET inheritanceLayout engine can also be extendedWPF attached property model allows existing components to learn new tricksClasses can be used to encapsulate common functionality

Custom Layout Container

demo

Local Storage

Cookies on steroidsProvides 10MB of app specific local storageCan be expanded per app by prompting the userUses .NET IsolatedStorage APIs

Storing Previous Search

demo

HTML DOM Integration

Silverlight apps are browser appsInteracting with the browser host is critical

Interact with HTML elements and script objects through .NET codeExpose .NET objects to javascript

HTML DOM Integration

Typical HTML DOM pattern

Browser History Integration

demo

Open File Dialog

Allows an end-user to choose a fileApplication gets access to a streamSupports multi-selection and file extension filteringEnables:

File uploading (w/ HttpWebRequest)Viewing local images (w/ Image element)Playing local media (w/ MediaElement)

Local Video Playback

demo

Image Deep Zoom

Provides seamless viewing & zooming of huge imagesLoads only the data necessary to show the part of an image the user is viewingEffectively turns a large image into an efficiently scaling vector

Image Deep Zoom

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 firstThen 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 firstThen 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 firstThen as the higher quality tiles are downloaded, they are smoothly blended in

Image Deep Zoom

Exposed through the MultiScaleImagePreprocessing tool outputs image tiles and XML description file

Using Deep Zoom

demo

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