ajax world 08 silverlight2 overview

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

Silverlight 2 Technical Overview

Brad AbramsProduct Unit Manager

[email protected]

http://blogs.msdn.com/BradA

Note: this a very demo heavy talk, so I will not be going through All these slides… they are here for reference only Microsoft Silverlight

cross-browsercross-platformcross-device

Plug-in for building and delivering thenext generation of

.NET based

media experiencesand

rich interactive applications

for the Web

Browser Devices,Mobile

DesktopServer,Services

Why Silverlight?

Rich Experiences

BrowserDevices,Mobile

DesktopServer& Services

Silverlight is a .NET technology

.NET

Silverlight extends your .NET Reach.

Silverlight Benefits Why Silverlight Matters at AjaxWorld?• Silverlight and Ajax – Many applications will use BOTH!• Silverlight:

• Media• UX• Consistency between client/server programming models• Local storage, FileDialogs, cross-domain networking

• Ajax:• Ajax code manipulating Silverlight UI elements• C#\VB code in Silverlight manipulating HTML DOM elements


Silverlight Components

XAML

Browser Host

IntegratedNetworking

Stack

DOMIntegration Installer JavaScript

Engine

Presentation Core

.NET for Silverlight

Inputs

KeyboardMouse

Ink

Media

WMV / VC1WMAMP3

Controls

LayoutEditing

UI Core

2D VectorsAnimation

Text

ImagesTransforms

DRM

Media

Dynamic Languages

Ruby Python

BCLGenerics Collections

Web Services

RESTRSS

SOAP

POXJSON

Data

LINQ LINQ-to-XML

ControlsExtensible Controls

Common Language Runtime

ASP.NETAJAX Libs

<asp:xaml><asp:media>

Server Silverlight 1

Silverlight 2

Legend

Media and User Interface

Presentation Core – Graphics

• 2D Graphics• Vector based• Standard shapes and Paths• Masking and clipping• Transformations: skew, rotate, scale, translate, matrix

• Animation Basics• Time-based• Support linear, discrete and spline animation• Animatable property types:

• Double, Color, Point• Animations and graphics can be defined using XAML or code• H.264

Presentation Core - VideoQuality•High Definition video•VC-1 codec•H.264 (Silverlight 3)•Adaptive streaming

Interactivity•Video is a first classcitizen•Media Markers•Video brush

Cost of ownership•Windows Media Server•Byte range seeking•Windows Live Streaming•Throttling (with IIS7)

Formats

•Video: VC-1, WMV v7,v8,v9•Audio: WMA V7, V8, V9,MP3, WMA 10 Pro, H.264

Content protection

•PlayReady DRM for onlineviewing

IIS7 Media Pack Highlights

Bitrate Throttling

• Control how much media issent to clients.

• Auto-detects encoded bitrateof video file.

Web Playlists

• Client-side playlist withserver-side state.

• Client cannot alter state.

Declarative Programming Through XAML

Extensive 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>

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

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

VB.NET


Controls

• Microsoft ships the basic set ofcontrols• Ship with source • Modeled after WPF controls• Extensible

• Rich partner ecosystem fordomain specific controls

Styling• Property bag setting 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.

Data Templates

<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]}

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 codeBinding binding = new Binding("Nasdaq.Points");binding.Mode = BindingMode.OneWay;TextBlock tb = new TextBlock();tb.SetBinding(TextBlock.TextProperty, binding);

DeepZoom• Navigates images of any size and resolution optimizing

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


.NET, Base Class Library, DynamicCLR

Refactoring .NET

LINQ

• LINQ = Language INtegrated Query• Allows query expressions to benefit from compile-time syntax

checking, static typing & Intellisense• Works on any IEnumerable<T>-based source

• Supports querying of in-memory data sources• Other LINQ technologies forthcoming:

• XLINQ = LINQ for XML• DLINQ = LINQ for relational data

var filteredPlayers = from p in players where p.HomeRuns > 20 orderby p.HomeRuns descending select p;

Return all players with more than twenty home runs, sorted

Dynamic Language Run-time• Open Source engine and languages• Script Server (Chiron) for local development.• Debugging support

class App:def __init__(self):self.scene = Application.Current.LoadRootVisual("app.xaml")def start(self):self.scene.Message.Text = "Welcome to Silverlight and IronPython!"App().start()

class Appdef initialize@scene = System::Windows::Application.Current.LoadRootVisual "app.xaml"enddef [email protected]_name('message').text = "Welcome to Silverlight and IronRuby!" endend App.new.start

Import("System.Windows.Application")function App() { this.scene = Application.Current.LoadRootVisual("app.xaml") }App.prototype.start = function() {this.scene.Message.Text = "Welcome to Silverlight and Managed JScript!" }app = new App app.start()

Networking

Networking• Asynchronous HTTP requests

• GET/POST• Access to most headers, cookies,

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

• Cross-domain support via policy file


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>

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)• For Beta1, site of origin only, cross-domain for RTW

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);}

Extending the Browser Sandbox(safely)

OpenFileDialog• 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) {

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


HTML and SilverlightIntegration

HTML/AJAX and .NET integration

webpage

HTML Silverlight

HTMLHTML+

Silverlight

webpage

Working with HTML/Javascript

HtmlObject

ScriptObject

HtmlDocumentHtmlWindow

HtmlElement

Access the HTML DOM from ManagedCode

HTML access available in new namespace

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

using System.Windows.Browser;

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 JavaScript

1.- Mark a property, method or event as [Scriptable]

HtmlPage.RegisterScriptableObject ("EntryPoint", this);

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

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

2.- Register a scriptable object

3.- Access the managed object from script

Tooling and .NET platform


Designer/Developer Collaboration

Desktop

Media& RIA

Server, Services

Tooling

DesignerLook, behavior, brand,and emotional connection

DeveloperFunction, deployment, data,

security, operational integrity

Server Vista

XAML

-100% Free (as in free beer)-Full development experience (from data to Web Services to client UI todebugging)-Does not require Windows on the web server or on client OS

Silverlight Tools for Visual Studio 2008

Silverlight in the .NET platform

Silverlight and ASP.NET/AJAXIntegration

• Two ASP.NET server controls• Both ship in SDK: System.Web.Silverlight.dll• Deploys to /bin folder• Available at design-time within Visual Studio

• Corresponding AJAX types• Both server controls provide client-side Javascript types as well

Silverlight and WPF• Silverlight is a subset of WPF

• Plus a few extra web features and its own codecs• Reuse strategy

• Same skills• Same tools• Same XAML and UI• Silverlight code should run on WPF with minor changes


Silverlight and .NET: Better Together• Highly productive development framework

• Multi-language support• Latest developer innovations (e.g. LINQ, Generics)• AJAX integration

• Great tools• Visual Studio• Expression Studio

• Cross-platform & cross-browser plugin• Works with Safari, Firefox and Internet Explorer• Mac OS X and Windows• Any web server• Fast, easy install process

• Securely extends your web browser’s sandbox• Off-line storage, OpenFileDialog, Sockets, cross-domain

More Information: http://silverlight.net

THANK YOU!

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

More details Content Protection


Byte-range Seeking Support• Enables seeking to non-downloaded portions of a file stored

on *any* HTTP 1.1-enabled web server.• Win-win for content distributors and viewers

• Distributors save on bandwidth on non-viewed parts of media.• Viewers get smaller latencies when seeking.

• When Seek is called on the MediaElement• New byte-range request is made, if needed;• Silverlight keeps track of downloaded portions of the file;• Playback continues from new position.

• Supported almost everywhere.

Isolated Storage Quota

Microsoft Confidential

// Use application for storage scope (EG URL where application is fromwww.microsoft.com/silverlight/app.xap and any DLLs loaded into this app domain)IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();// The application knows it needs at least 5MB of isolated storage spaceint spaceNeeded = 524288; // = 512K in bytes// Check to see how much space is remainingif (isf.RemainingSize < spaceNeeded){ // Request more quota space. This call will not work if not called from a WPF event if (!isf.IncreaseQuotaTo(isoStore.Quota + spaceNeeded)) { // The host did not allow the quota increase, meaning we do not have // enough isolated storage space to do what we want; do not continue. return; }}// We have at least 512K of isolated storage space available.// Proceed with using it...// NOTE it is possible the host allocated more than 512K of space// ...// Find out what the new quota isDebug.WriteLine("New quota size " + isf.Quota.ToString() );

Isolated Storage Dictionary

• Dictionary access for settings• Wraps low level IsolatedStorage• Values are serialized using the WCF Data Contract serializer

Microsoft Confidential

LocalSettings localSettings = new LocalSettings();//Add key, value pairlocalSettings.Add(“Title”,”Programming in Silverlight”);//Add key,value using indexerlocalSettings [“Price”] = 15;//Add key, value using Set methodlocalSettings.Set(“Price”, 15);//Confirm is a key exists and then retrieve its valueif(localSettings.Contains(Title)) title = (string) localSettings[“Title”];//Remove key from storelocalSettings.Remove(“Price”)// Explicitly commit settings. Also committed when object goes out ofscopelocalSettings.Save();

WebClient

• Easy to use, events-based async• Download string, stream• Progress information

webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(DownloadCompleted);webClient.DownloadProgressChanged += new DownloadProgressChangedEventHandler(DownloadProgressChanged);

webClient.DownloadStringAsync("http://www.data.com/data.xml");...

void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e){ Stream stream = e.Result; // Use stream}

HttpWebRequest/Response

• Primary API for HTTP/HTTPS• Greater control (GET & POST, headers, etc)

private void MakeAsyncRequest(){ HttpWebRequest request = (HttpWebRequest) WebRequest.Create("http://foo.com/api?token=89"); IAsyncResult asyncResult = request.BeginGetResponse( new AsyncCallback(ResponseCallback), request);}

private void ResponseCallback(IAsyncResult ar){ HttpWebRequest request = ar.AsyncState as HttpWebRequest; WebResponse response = request.EndGetResponse(ar); Stream responseStream = response.GetResponseStream();

// Use stream}

HTTP Restrictions: Details• HTTP GET and POST

• No PUT, DELETE, …

• Setting headers on HTTP GET: only same domain• Response headers: can only read Content-Type

• Response codes: only success/fail• No 403/404/etc, no message body• Redirects: Work (may be blocked in cross-domain)

• Cannot override the browser• Can’t control / turn off caching• Can’t control HTTP Authentication credentials• Can’t read/write cookies• Can’t control HTTPS Client-Side Certificates• Can’t read HTTPS Server-Side Certificates


Working with HTML/Javascript• Scriptability

• Expose managed properties/methods/events to Javscript• ScriptableType and ScriptableMember indicate managed

entry points on a type• HtmlPage.RegisterScriptableObject

• Name of the scriptable entry point• Managed instance that backs the entry point

• Scriptable entry points are exposed off the Content propertyof your Silverlight control.• myControl.Content.CustomName.SomeManagedPropertyOrMethod

Working with HTML/Javascript• Scriptable type interoperability

• Primitive types marshal by-value in both directions• Complex managed types are returned by-reference to Javascript• Javascript types usually must be copied into equivalent managed

types prior to being passed in to managed code.• Uses JSON serialization

• Can pass Javascript types by-reference as instances ofScriptObject

Working with HTML/Javascript• Scriptable type interoperability

• Can return HtmlWindow, HtmlDocument and HtmlElementinstances directly to Javascript

• Managed arrays act like Javascript arrays• Custom managed types act like Javascript objects• Custom managed dictionaries also act like Javascript objects

• Converting Javascript object graphs to managed objects:• Use createManagedObject helper method that is automatically

attached to each scriptable entry point

ajax world 08 silverlight2 overview

Technology