460 likes | 673 Views
Silverlight 2 for Developers. Alex Golesh Silverlight Lead, Senior Consultant alexg@sela.co.il http://blogs.microsoft.co.il/blogs/alex_golesh/. Agenda. Silver… what? Why Silverlight? Give Me the Details! How Silverlight? When Silverlight? Q&A Summary. What is Silverlight?.
E N D
Silverlight 2 for Developers Alex Golesh Silverlight Lead, Senior Consultant alexg@sela.co.il http://blogs.microsoft.co.il/blogs/alex_golesh/
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
Why Silverlight? Server, Services Desktop Browser Devices, Mobile Rich Experiences
Silverlight is a .NET technology Server & Services Desktop .NET Browser Devices, Mobile 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 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
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 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
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
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
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>
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
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 ( 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); }
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
Demo CarAdsWebService, Flickr API REST
OpenFileDialog • Provides native OS experience • Sandboxed API returns safe filename and readable stream • Support for multiple files
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/AJAX and .NET integration webpage HTML Silverlight .NET language Javascript webpage HTML HTML + Silverlight
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
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]
Demo HTML DOM
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
Tooling Server, Services Desktop Server Vista XAML Media & RIA Designer Look, behavior, brand,and emotional connection Developer Function, deployment, data,security, operational integrity
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
When Silverlight? • Silverlight v1.0 • RTM • Silverlight 2 • RTW • Future release: • Silverlight for Mobile • “Next Version” of Silverlight
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