Building Silverlight Applications Using .NET (Part 2 of 2)


Published on

This session demonstrates building a rich interactive application (RIA) using Silverlight. We cover how to use Microsoft Visual Studio to create applications, how to create UI using XAML markup and code, how to build a custom control, how to retrieve data from a Web service, znc how to manipulate data with XML and LINQ. (This is the second in a two-part series.)

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Silverlight Applications Using .NET (Part 2 of 2)

  1. 1. Nick Kramer Jamie Cool .NET Framework Team .NET Framework Team Microsoft Corporation Microsoft Corporation
  2. 2. Tons of stuff – 2+ talks worth! Part 2 Part 1 HTTP Networking + XML Silverlight + .NET Overview Web Services Getting Started LINQ Working with UI HTML Integration Building custom controls Rounding it out
  3. 3. Web deployment Need a ubiquitous platform Need a secure sandboxed environment Rich UI experiences beyond server generated HTML Need a highly capable UI model Signifigant client-side application logic Need a highly productive development environment
  4. 4. Highly productive development Framework Multi-language support, like C# & VB Contains the latest innovation from Microsoft (ex. LINQ) AJAX integration Great tools with Visual Studio & Expression Cross-platform & cross-browser plugin Works with Safari, Firefox and IE on MAC & Windows Fast, easy install process
  5. 5. Browser Host .NET for Silverlight WPF Data Networking MS AJAX Extensible Controls REST LINQ XLINQ POX Library RSS BCL DLR JSON DOM Generics Collections SOAP Ruby Python Integration Legend CLR Execution Engine Application V1.1 Services Legend XAML V1.0 Deploy Presentation Inputs UI Core DRM Keyboard Mouse Ink Friction-Free Media Core Text Vector Installer Media Controls Animation Images Auto- Layout Editing VC1 WMA MP3 Updater
  6. 6. .NET for Silverlight is a factored subset of full .NET Desktop ~50 MB (Windows only) Silverlight + .NET Alpha ~ 4 MB (cross platform) Additional pieces of .NET available in a pay-for-play model Same core development Framework The shared apis & technologies are the same The tools are the same Highly compatible Minimal changes needed to move from Silverlight to Desktop However, not binary compatible by default
  7. 7. All apps run in the sandbox Conceptually similar to the HTML DOM sandbox Apps run just like HTML pages – just click a URL No elevation prompts. No way to get out of the sandbox Includes some additional functionality: Safe isolated storage Client based file upload controls Cross domain support in-work
  8. 8. Install the following: Silverlight V1.1 Alpha Visual Studio “Orcas” Beta 1 Silverlight Tools Alpha for Visual Studio quot;Orcasquot; Beta 1 Expression Blend 2 May Preview ASP.NET Futures Everything you need is at Links to downloads & docs VS object browser a great way to view APIs
  9. 9. A .NET silverlight app includes at least: A root html file - Default.htm Script load files - CreateSilverlight.js & Silverlight.js A root xaml & assembly - YourApp.xaml & YourApp.dll A .NET Silverlight app is also likely to include: Other application libraries (your's, Microsoft's or 3rd parties) Application resources (ex. xaml) – optionally embedded in assembly Packaging Loose file support in Alpha 1 Zip package support planned
  10. 10. XAML = eXtensible Application Markup Language Flexible XML document schema Examples: WPF, Silverlight, Workflow Foundation More compact than code Enables rich tooling support While still preserving good readability and hand-coding within text editors
  11. 11. <Canvas xmlns=quot;; > <TextBlock FontSize=quot;32quot; Text=quot;Hello worldquot; /> </Canvas> Hello world
  12. 12. <TextBlock FontSize=quot;32quot; Text=quot;Hello worldquot; /> = TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = quot;Hello worldquot;;
  13. 13. Is a Drawing Surface Children have relative positions: <Canvas Width=quot;250quot; Height=quot;200quot;> <Rectangle Canvas.Top=quot;25quot; Canvas.Left=quot;25quot; Width=quot;200quot; Height=quot;150quot; Fill=quot;Yellowquot; /> </Canvas> The Canvas The Rectangle
  14. 14. Position relative to first Canvas parent: <Canvas Background=quot;Light Grayquot;> <Canvas Canvas.Top=quot;25quot; Canvas.Left=quot;25quot; Width=quot;150quot; Height=quot;100quot; Background=quot;Redquot;> <Ellipse Canvas.Top=quot;25quot; Canvas.Left=quot;25quot; Width=quot;150quot; Height=quot;75quot; Fill=“Whitequot; /> </Canvas> </Canvas>
  15. 15. <Canvas> <Rectangle/> </Canvas> = Canvas canvas = new Canvas(); Rectangle rectangle = new Rectangle(); canvas.Children.Add(rectangle);
  16. 16. <Canvas> <Rectangle Canvas.Top=quot;25quot;/> </Canvas> Top property only make sense inside a Canvas When we add new layouts, do we add new properties to Rectangle? Solution: attached properties!
  17. 17. <Rectangle Canvas.Top=quot;25quot; Canvas.Left=quot;25quot;/> = Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25);
  18. 18. All elements support them Transform Types <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> Moves <MatrixTransform /> Scale, Skew and Translate Combined
  19. 19. <TextBlock Text=quot;Hello Worldquot;> <TextBlock.RenderTransform> <RotateTransform Angle=quot;45quot; /> </TextBlock.RenderTransform> </TextBlock>
  20. 20. Property values can be complex objects Use “property elements” to represent them in XML <SomeClass.SomeProperty>
  21. 21. <TextBlock> <TextBlock.RenderTransform> <RotateTransform Angle=quot;45quot; /> </TextBlock.RenderTransform> </TextBlock> = TextBlock block = new TextBlock; RotateTransform transform = new RotateTransform(); Transform.Angle = 45; block.RenderTransform = transform;
  22. 22. MouseMove KeyUp MouseEnter KeyDown MouseLeave GotFocus MouseLeftButtonDown LostFocus MouseLeftButtonUp Loaded
  23. 23. <Canvas xmlns=quot;…quot; xmlns:x=quot;…quot; MouseEnter=quot;OnMouseEnterquot;> </Canvas> = Canvas canvas = new Canvas(); canvas.MouseEnter += OnMouseEnter; // or more explicitly: canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);
  24. 24. <Canvas xmlns=quot;…quot; xmlns:x=quot;…quot; Height=quot;100quot; Width=quot;100quot; Background=quot;Redquot; x:Name=“canvas” /> </Canvas> Private Sub something _ (ByVal o As Object, ByVal e As MouseEventArgs) _ Handles canvas.MouseEnter rectangle.Fill = New SolidColorBrush(Colors.Green) End Sub
  25. 25. <Canvas xmlns=quot;…quot; xmlns:x=quot;…quot; Height=quot;100quot; Width=quot;100quot; Background=quot;Redquot; MouseEnter=quot;OnMouseEnterquot; /> </Canvas> void OnMouseEnter(object sender, MouseEventArgs e) { … }
  26. 26. Name your xaml element so you can use it in code <Rectangle x:Name=“rect”/> void OnMouseEnter(object sender, MouseEventArgs e) { rect.Height = 75; }
  27. 27. Custom Element = custom class (Markup = object model) Use XML namespaces <prefix:CustomClass/> XML namespace declaration tells where to find class xmlns:prefix= quot;clr-namespace:SomeNamespace; assembly=SomeAssembly.dllquot;
  28. 28. Derive from Control Eg, public class MyControl : Control Define the look of the control in xaml Call InitializeFromXaml(xaml) Remember the return value
  29. 29. Have a public parameterless constructor Eg, public MyControl() Create public properties Create public events
  30. 30. In terms of graphics/UI/XAML: v1.1 = v1.0 + managed code (CLR) + XAML extensibility + Control class (user control) + sample controls
  31. 31. 1.1 alpha 1.1 thinking WPF Button Sample Yes Yes TextBox (edit) No Yes Yes Scrollbar Sample Yes Yes Slider Sample Yes Yes ListBox Sample Yes Yes CheckBox No Yes Yes RadioButton No Yes Yes ComboBox No Yes Yes
  32. 32. 1.1 alpha 1.1 thinking WPF TreeView No No Yes 3rd party Accordion No No 3rd party DataGrid No No UserControl Yes Yes Yes
  33. 33. 1.1 alpha 1.1 thinking WPF Canvas Yes Yes Yes Grid (table) No Yes Yes StackPanel No Yes Yes Viewbox No Yes Yes
  34. 34. 1.1 alpha 1.1 thinking WPF Mouse events Partial Yes Yes Keyboard Partial Yes Yes events <.Resources> Partial Yes Yes Data binding No Yes Yes styling No Yes Yes
  35. 35. 1.1 alpha 1.1 thinking WPF 3D No No Yes Hardware No No Yes acceleration Out of browser No No Yes Off-line No No Yes Cross-platform Yes Yes No
  36. 36. HTTP Networking + XML Web Services LINQ HTML Integration Rounding it out Resources
  37. 37. Browser based headers/cookies passed with request Restricted to same domain access in the Alpha Cross-domain coming Make the HTTP Request Uri dataLocation = new Uri(quot;http://localhost/playerdata.xmlquot;); BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); Process the response StreamReader responseReader = new StreamReader(response.GetResponseStream()); string RawResponse = responseReader.ReadToEnd();
  38. 38. Core XML reading & writing capabilities in the alpha RAD XLINQ support coming Initialize the reader XmlReader xr = XmlReader.Create(new StringReader(RawResponse)); Find a node & read it’s value xr.ReadToFollowing(quot;Playerquot;); string playerNodeText = xr.Value; string playerNameAttribute = xr.GetAttribute(quot;Namequot;);
  39. 39. VS based Proxy Generator enables strongly typed access ASP.NET JSON services supported in the Alpha WCF & SOAP support coming The Web Service to Call [WebMethod] public List<Player> GetPlayerList() { ... } Call the Web Service from the client baseballService = new BaseballData(); playerList = baseballService.GetPlayerList().ToList();
  40. 40. Sync & Async web services supported in the Alpha General purpose RAD async support coming Start the async web service call baseballService.BeginGetPlayerList( new AsyncCallback(OnPlayerDataLoaded), null); Handle the web service completion event private void OnPlayerDataLoaded(IAsyncResult iar) { playerList = baseballService.EndGetPlayerList(iar).ToList(); }
  41. 41. Works with any Web server Only requirement is to serve Silverlight files to the browser Ex. xaml, assemblies, resources ASP.NET is a great platform for Silverlight applications Use ASP.NET & WCF services from Silverlight Integrate Media into an ASPX page Integrate Silverlight content into an ASPX page Leverage ASP.NET AJAX Extensions and ASP.NET Futures (May 2007) Other integration points under way…
  42. 42. LINQ = Language INtegrated Query Allows query expressions to benefit from compile-time syntax checkking, static typing & Intellisense Works on any IEnumerable<T> based info source Return all players with 20+ home runs, sorted var filteredPlayers = from p in players where p.HomeRuns > 20 orderby p.HomeRuns descending select p;
  43. 43. Supports querying on in memory datasources Other LINQ technologies forthcoming: XLINQ = LINQ for XML Query, parse, create XML DLINQ = LINQ for relational data Query, edit, create relational data
  44. 44. HTML access availble in new namespace using System.Windows.Browser; Static HtmlPage class provides entry point HtmlPage.Navigate(quot;;); String server = HtmlPage.DocumentUri.Host; Hookup events, call methods, or access properties HtmlElement myButton = HtmlPage.Document.GetElementByID(quot;myButtonIDquot;); myButton.AttachEvent(quot;onclickquot;, new EventHandler(this.myButtonClicked)); private void myButtonClicked(object sender, EventArgs e) { ... }
  45. 45. Mark a property, method or event as Scriptable: [Scriptable] public void Search(string Name) { … } Register a scriptable object: WebApplication.Current.RegisterScriptableObject(quot;BaseballDataquot;, this); Access the managed object from script: var control = document.getElementById(quot;Xaml1quot;); control.Content.BaseballData.Search(input.value);
  46. 46. Other interesting HTML integration scenarios: Persisent links Fwd/Back Integration Notes: Simple type marshalling only in the Alpha Complex type support on the way
  47. 47. Enables debugging of Silverlight code on the MAC Requires a proxy client installed on the MAC Proxy & setup instructions can be found at: C:Program FilesMicrosoft Visual Studio 9.0SilverlightMacIntel Proxy must be running prior to browser activation
  48. 48. Dynamic Languages Javascript, Python, Ruby Application Services Isolated Storage Safe File Open ASP.NET Integration Find out more about these technologies in upcoming sessions…
  49. 49. Talk Time Tues – 11:45 Just Glue It! Dynamic Languages in Silverlight Tues – 11:45 Developing ASP.NET AJAX Controls with Silverlight Deep Dive on Silverlight Media Integration Tues - 2:15 Wens – 9:45 Extending the Browser Programming Model with Silverlight Wens – 11:30 Building Rich, Interactive E-commerce Applications Using ASP.NET and Silverlight
  50. 50. Give us feedback Features you like? Features you don’t? What do you want to build? What existing code & skills will you leverage?
  51. 51. Font, size, and color for text have been formatted for you in the Slide Master Use the color palette shown below See next slide for additional guidelines Sample Fill Sample Fill Sample Fill Sample Fill Sample Fill Sample Fill
  52. 52. Name Title Group
  53. 53. Name Title Group
  54. 54. Name Title Group
  55. 55. © 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.
  56. 56. Backup
  57. 57. Silverlight Factored CLR Execution engine .NET Framework Full type system (generics, WPF HTML Bridge collections, etc..) App Model & Services Framework Libraries Factored Framework libraries DLR XML NET (Ruby, Pyt hon) Leightweight subset of .NET for LINQ BCL V1.1 web applications Execution Engine Extensible Platform Presentation and Media Runtime V1 Updater denables a model for agile Controls evolutoin of the platform Inputs (Key, Mouse, Ink) Browser Sandboxed assemblies can be Hosting Media (VC1, WMA, MP3) deployed with the application UI Core (Text, Vector, Animation) Friction-free Installer & Updater