Silverlight 2 for Developers Alex Golesh Silverlight Lead, Senior Consultant

Agenda Silver… what? Why Silverlight? Give Me the Details! How Silverlight? When Silverlight? Q&A Summary

What is Silverlight? Client Side RIA Application Browser Plug-In Cross-platform, cross-browser, cross-device

What is Silverlight? Browser Plug-In: Silverlight Runtime.NET programming model Vector UI: Text, Graphics, Animation Doesn’t requires.NET on client machine.NET development platform ASP.NET Integration

BrowserBrowserDevices,MobileDevices,Mobile DesktopDesktop Server, Services Why Silverlight? Rich Experiences

Why Silverlight? Enables a rich.NET development platform that runs in the browser Developers can write Silverlight applications using any.NET language (including VB, C#, JavaScript, IronPython and IronRuby).

BrowserBrowserDevices,MobileDevices,Mobile DesktopDesktopServer & Services Server Silverlight is a.NET technology.NET.NET Silverlight extends your.NET Reach.

Why Silverlight? New application model Compressed package format (.XAP) Cross domain package loading Splash screen Supports application localization Accessibility Managed programming model C#, Visual Basic or other DLR Most platforms and Browser

Silverlight.NET Subset.NET for Silverlight is a factored subset of full.NET. NET 3.5 ~200 MB (Windows only) Desktop ~50 MB (Windows only) Silverlight ~4 MB (cross platform) Additional libraries available as extensions Same APIs, tools and skills Highly compatible Moving from Silverlight to desktop.NET with minimal changes Source, but not binary compatible

Silverlight Architecture XAMLXAML Browser Host Integrated Networking Stack DOM Integration Installer JavaScript Engine Presentation Core.NET for Silverlight Inputs Keyboard Mouse Ink Media WMV / VC1 WMA MP3 Controls Layout Editing UI Core 2D Vectors Animation Text Images Transforms DRM Media Dynamic Languages RubyPython BCL Generics Collections Web Services REST RSS SOAP POX JSON Data LINQLINQ-to-XML WPF for Silverlight Extensible Controls Common Language Runtime ASP.NET AJAX Libs 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

Presentation Core - Video Quality High Definition video VC-1 codec Interactivity Video is a first class citizen Media Markers Video brush Cost of ownership Windows Media Server Adaptive streaming 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 Content protection PlayReady DRM for online viewing

Declarative Programming Through XAML Extensive Application Markup Language Toolable, declarative markup Code and content are separate Compatible with Windows Presentation Foundation OK LightBlue XAML Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET

Demo XAML, Code Behind

Controls Core controls in box Button, ListBox, CheckBox, RadioButton, Hyperlink, Slider, ScrollBar, ScrollViewer, ProgressBar, TextInput, etc. Core layout containers in box Grid, Stack panel, Canvas, etc. Other controls shipped as extensions DataGrid, Menus, ToolBar, etc. Controls ship with source

Demo Controls, Toolkit

Styling and Templating support Controls supports styling Controls supports templating

Data Templates DataTemplate <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF“ BorderThickness="1" Margin="10" Padding="3"> 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 From code Binding binding = new Binding("Nasdaq.Points"); binding.Mode = BindingMode.OneWay; TextBlock tb = new TextBlock(); tb.SetBinding(TextBlock.TextProperty, binding);

Demo Styling, DataBinding

DeepZoom Navigates images of any size and resolution optimizing network bandwidth and download size. Seamless transitions as you zoom and pan.

Demo DeepZoom

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 ( ) void Connect(AddressFamily family) { SocketAsyncEventArgs connectArgs = new SocketAsyncEventArgs(); connectArgs.RemoteEndPoint = new DnsEndPoint( Application.Current.Host.Source.Host, 4502); connectArgs.Completed += new EventHandler (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 <!DOCTYPE cross-domain-policy SYSTEM " domain-policy.dtd"> Cross-domain.xml clientaccesspolicy.xml "

Demo CarAds WebService, Flickr API REST

Extending the sandbox (safely)

OpenFileDialog Provides native OS experience Sandboxed API returns safe filename and readable stream Support for multiple files // Create file dialog OpenFileDialog 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 Silverlight Integration

HTML/AJAX and.NET integration webpage HTMLHTMLSilverlightSilverlight HTMLHTML HTML+SilverlightHTML+Silverlight

Working with HTML/Javascript HtmlObjectHtmlObject ScriptObjectScriptObject HtmlDocumentHtmlDocument HtmlWindowHtmlWindow HtmlElementHtmlElement

Access the HTML DOM from Managed Code HTML access available in new namespace HtmlPage.Navigate(" String server = HtmlPage.DocumentUri.Host; HtmlPage.Navigate(" 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) {... } 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) {... } [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

Demo HTML DOM

Tooling and.NET platform

Designer/Developer Collaboration

Platform, Services & Tools web desktop media & RIA web desktop Designer Look, behavior, brand, and emotional connection Developer Function, deployment, data, security, operational integrity Windows Live Services Windows Server 2008

DesktopDesktop Media & RIA Media Server, Services Tooling Designer Look, behavior, brand, and emotional connection Developer Function, deployment, data, security, operational integrity Server Vista XAML

Silverlight and ASP.NET/AJAX Integration 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

When Silverlight? Silverlight v1.0 RTM Silverlight 2 RTW Future release: Silverlight for Mobile “Next Version” of Silverlight

Questions?

Summary More Information & Downloads Silverlight Homepage Silverlight Quick Starts Silverlight Showcase My blog Get in touch

THANK YOU!