DODN2009 - Jump Start Silverlight

JumpStart: Silverlight

Clint EdmonsonArchitect EvangelistMicrosoftEmail: clinted@microsoft.comWeb: http://www.notsotrivial.netTwitter: @clinted

What is Silverlight?

Silverlight Experience

Rich Internet Applications• Cross platform, cross-browser, cross device plug-in• Fast, seamless installation• Vector based layout and

animation engine• Productive design &

development environments

Refactored subset of .NET & WPF

Development Tools

Development Tools•XamlPad•XamlPadX•Kaxaml• Silverlight Spy• Expression Blend• See my and Denny’s sessions later today for more!

•Visual Studio 2008 + Silverlight SDK

Anatomy of a Silverlight Application

Silverlight Component

(XAML, .NET)

AJAX Control(Script)

ASP.NET AJAX Server Control

Silverlight on the Server• Silverlight works with any server• Only requirement is to serve up XAML, assemblies etc.• Leverage JavaScript to improve experience

• ASP.NET AJAX adds further integration to the experience• <asp:xaml>• <asp:media>• More coming…

Silverlight Architecture

XAML

Browser Host

Integrated Networking

Stack

DOM Integration

InstallerJavaScript

Engine

Presentation Core

.NET for Silverlight

Inputs

KeyboardMouse

Ink

Media

WMV / VC1WMAMP3

Controls

LayoutEditing

UI Core

2D VectorsAnimation

Text

ImagesTransform

s

DRM

Media

Dynamic Languages

Ruby Python

BCL

GenericsCollections

Web Services

RESTRSS

SOAP

POXJSON

Data

LINQ LINQ-to-XML

WPF for SilverlightExtensible Controls

Silverlight Common Language Runtime

ASP.NET AJAX

<asp:xaml><asp:media>

Server

XAML Primer

Declarative Programming Through XAML

Extensible Application Markup Language•Toolable, declarative markup•Code and content are separate•Compatible with Windows Presentation

Foundation

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100

VB.NET

Control Libraries

Controls

• 60 Native Controls

• Open Source Toolkit

• Rich third party ecosystem for domain specific controls

• Canvas, Grid, & StackPanel will become your new best

friends

Data Binding

Databinding• Two way data binding from User interface to business

objects • Notification via INotifyPropertyChanged• DataContext is inherited via Visual Tree

• From XAML <TextBlock Text="{Binding Nasdaq.Points, Mode=OneWay}"/>

• From code Binding binding = new Binding("Nasdaq.Points");binding.Mode = BindingMode.OneWay;TextBlock tb = new TextBlock();tb.SetBinding(TextBlock.TextProperty, binding);

Data Templates

DataTemplate

<DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF“ BorderThickness="1" Margin="10" Padding="3"> <TextBlock FontSize="18" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border></DataTemplate>

class Car{ string Image {get;set} string Model {get;set]}

Advanced Features

Flexible User Experience Options• Seamless installation & auto-update•Change download progress look & feel• Full screen mode•Out of Browser Experience• Start menu & desktop shortcuts• Internet connection detection

Styling• Resource definition templates to define look & feel

Templating • Replace the ‘parts’ that define the look of a control to

create a completely different look, but behavior is the same.

Isolated Storage• Stream based access to a private file/directory structure• Patterned after .NET Framework IsolatedStorage classes• Read and write string or binary data• Store is per application XAP• Application code to request size increase

• User prompt to accept quota increase• Quotas fall into predetermined size slots• Code must initiate increase size call from within user

input/event

OpenFileDialog, SaveFileDialog• Provides native OS experience• Sandboxed API returns safe filename and readable

stream• Support for multiple files

// Create file dialogOpenFileDialog ofd= new OpenFileDialog();ofd.Filter = "Text Files (*.txt)|*.txt|All files (*.*)|*.*";if (ofd.ShowDialog() == DialogResult.OK) {

HTML/AJAX and .NET integration

Javascript

.NETlanguage

webpage

HTMLSilverlig

ht

HTMLHTML +

Silverlight

webpage

Access the HTML DOM from Managed Code

HTML access available in new namespace

HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;

HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;

using System.Windows.Browser;using System.Windows.Browser;

HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

Static HtmlPage class provides entry point

Hookup events, call methods, or access properties

Access Managed Code from JavaScript1.- Mark a property, method or event as [Scriptable]

HtmlPage.RegisterScriptableObject ("EntryPoint", this);HtmlPage.RegisterScriptableObject ("EntryPoint", this);

[ScriptableMember]public void Search(string Name) { ... }

[ScriptableMember]public void Search(string Name) { ... }

var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);

var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);

2.- Register a scriptable object

3.- Access the managed object from script

Streaming Media ExperienceCost effective, high quality video for all major browsers• Based on WMA and WMV ecosystem• Media processing tools provided for live and on-

demand publishing• Supports HD video encoding• Scales gracefully to lower end hardware• Digital Rights Management support

DeepZoom• Navigates images of any size and resolution

optimizing network bandwidth and download size. • Seamless transitions as you zoom and pan.

Easy Line of Business AppsCost effective, high quality video for all major browsers• Navigation Framework• RIA Data Services

Designer + DeveloperExperience

Designer/Developer Collaboration

=

Desktop

Media& RIA

Server, Services

Tooling

DesignerLook, behavior, brand,and emotional connection

DeveloperFunction, deployment, data,

security, operational integrity

Server Win7

XAML

Next Steps…• Community Site: http://silverlight.net • Main Product Site:

http://www.microsoft.com/silverlight • MSDN Center: http://msdn.microsoft.com/silverlight • Online Forums: http://silverlight.net/forums• Online SDK:

http://msdn2.microsoft.com/bb188266.aspx

• Top Silverlight Blogs• Tim Sneath: http://blogs.msdn.com/tims • Mike Harsh: http://blogs.msdn.com/mharsh • Joe Stegman: http://blogs.msdn.com/jstegman • Laurence Moroney: http://blogs.msdn.com/webnext • Ernie Booth: http://blogs.msdn.com/ebooth

• Follow @MSExpression on Twitter

Thank you!

Clint EdmonsonArchitect EvangelistMicrosoftEmail: clinted@microsoft.comWeb: http://www.notsotrivial.netTwitter: @clinted

Networking

Networking • Asynchronous HTTP requests• GET/POST • Access to most headers, cookies,

• Uses browser networking stack • Caching, authentication, proxy , compression

Web Services• SOAP 1.1 • Basic profile• A few restrictions (e.g. SOAP Faults not supported)

• Asynchronous invocation• Follows cross-domain policy restrictions• Generated proxies support data binding

Sockets • TCP only • Asynchronous API • No explicit bind and no listen/accept support • Restricted ports (4502-4534) • Cross Domain based on provisioning server

void Connect(AddressFamily family){ SocketAsyncEventArgs connectArgs = new SocketAsyncEventArgs(); connectArgs.RemoteEndPoint = new DnsEndPoint( Application.Current.Host.Source.Host, 4502); connectArgs.Completed += new EventHandler<SocketAsyncEventArgs>(OnConnectCompleted); socket = new Socket(family, SocketType.Stream, ProtocolType.Tcp); if (!socket.ConnectAsync(connectArgs)) OnConnectCompleted(socket, connectArgs);}

Cross-domain support • 2 formats: • Flash policy file• Silverlight policy file

<?xml version="1.0"?><!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"><cross-domain-policy> <allow-access-from domain="*" /></cross-domain-policy>

Cross-domain.xml

clientaccesspolicy.xml

<?xml version="1.0"?><access-policy> <cross-domain-access> <policy> <allow-from> <domain uri="http://customers.shop.com”/>" <domain uri="http://partner.com/app.xap"/> </allow-from> <grant-to> <grant path="/sales/serialnumbers.xml" /> <grant path="/partners" include-subpaths="false"/> </grant-to> </policy> </cross-domain-access></access-policy>