Silverlight 2 for Developers

1. Silverlight 2 for Developers Alex Golesh Silverlight Lead, Senior Consultant alexg@sela.co.il http://blogs.microsoft.co.il/blogs/alex_golesh/

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

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

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

5. Why Silverlight? Server, Services Desktop Browser Devices, Mobile Rich Experiences

6. Silverlight is a .NET technology Server & Services Desktop .NET Browser Devices, Mobile Silverlight extends your .NET Reach.

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

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

9. Silverlight Architecture Silverlight 1 .NET for Silverlight Server Data WPF for Silverlight Inputs Media Silverlight 2 LINQ LINQ-to-XML Extensible Controls Keyboard WMV / VC1 Web Services ASP.NET AJAX Libs Mouse WMA Legend REST RSS SOAP Dynamic Languages BCL POX JSON MP3 Ink <asp:xaml> Ruby Python Generics Collections <asp:media> Common Language Runtime XAML UI Core Controls DRM 2D Vectors Images Layout Media Animation Transforms Editing Text Presentation Core Integrated Networking Stack DOM Integration JavaScript Engine Installer Browser Host

10. Media and User Interface

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

12. Presentation Core - Video Quality Interactivity • High Definition video • VC-1 codec • Video is a first class citizen • Media Markers • Video brush Cost of ownership Formats • Windows Media Server • Adaptive streaming • Byte range seeking • Windows Live Streaming • Throttling (with IIS7) • Video: VC-1, WMV v7,v8,v9 • Audio: WMA V7, V8, V9, MP3, WMA 10 Pro Content protection • PlayReady DRM for online viewing

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

14. Demo XAML, Code Behind

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

16. Demo Controls, Toolkit

17. Styling and Templating support • Controls supports styling • Controls supports templating

18. DataTemplate Data Templates class Car { string Image {get;set} string Model {get;set] } <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"> <TextBlockFontSize="18" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border> </DataTemplate>

19. Databinding Binding binding = new Binding("Nasdaq.Points"); binding.Mode = BindingMode.OneWay; TextBlocktb = new TextBlock(); tb.SetBinding(TextBlock.TextProperty, binding); • Two way data binding from User interface to business objects • Notification via INotifyPropertyChanged • DataContext is inherited via Visual Tree • From XAML • <TextBlockText="{Binding Nasdaq.Points, Mode=OneWay}"/> • From code

20. Demo Styling, DataBinding

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

22. Demo DeepZoom

23. Networking

24. Networking • Asynchronous HTTP requests • GET/POST • Access to most headers, cookies, • Uses browser networking stack • Caching, authentication, proxy , compression

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

26. Sockets • TCP only • Asynchronous API • No explicit bind and no listen/accept support • Restricted ports ( 4502-4534) void Connect(AddressFamily family) { SocketAsyncEventArgsconnectArgs = 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); }

27. Cross-domain support <?xmlversion="1.0"?> <!DOCTYPEcross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-fromdomain="*" /> </cross-domain-policy> • 2 formats: • Flash policy file • Silverlight policy file Cross-domain.xml • <?xmlversion="1.0"?> • <access-policy> • <cross-domain-access> • <policy> • <allow-from> • <domainuri="http://customers.shop.com"/>" • <domainuri="http://partner.com/app.xap"/> • </allow-from> • <grant-to> • <grantpath="/sales/serialnumbers.xml" /> • <grantpath="/partners"include-subpaths="false"/> • </grant-to> • </policy> • </cross-domain-access> • </access-policy> clientaccesspolicy.xml

28. Demo CarAdsWebService, Flickr API REST

29. Extending the sandbox(safely)

30. OpenFileDialog • Provides native OS experience • Sandboxed API returns safe filename and readable stream • Support for multiple files

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

32. HTML and Silverlight Integration

33. HTML/AJAX and .NET integration webpage HTML Silverlight .NET language Javascript webpage HTML HTML + Silverlight

34. Access the HTML DOM from Managed Code usingSystem.Windows.Browser; Static HtmlPage class provides entry point HtmlPage.Navigate("http://www.microsoft.com"); String server = HtmlPage.DocumentUri.Host; Hookup events, call methods, or access properties HtmlElementmyButton = HtmlPage.Document.GetElementByID("myButtonID"); myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked)); private void myButtonClicked(object sender, EventArgs e) { ... } HTML access available in new namespace

35. Access Managed Code from JavaScript [ScriptableMember] public voidSearch(stringName) { ... } 2.- Register a scriptable object HtmlPage.RegisterScriptableObject ("EntryPoint", this); 3.- Access the managed object from script var control = document.getElementById("SilverlightControl"); control.Content.EntryPoint.Search(input.value); 1.- Mark a property, method or event as [Scriptable]

36. Demo HTML DOM

37. Tooling and .NET platform

38. Designer/Developer Collaboration =

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

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

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

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

44. Questions?

45. Summary • More Information & Downloads • Silverlight Homepage • http://silverlight.net/ • Silverlight Quick Starts • http://silverlight.net/quickstarts/ • Silverlight Showcase • http://silverlight.net/Showcase/ • My blog • http://blogs.microsoft.co.il/blogs/alex_golesh/ • Get in touch • alexg@sela.co.il

46. THANK YOU!