Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

02 wp7 building silverlight applications

2,145 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

02 wp7 building silverlight applications

  1. 1. Building <br />Silverlight <br />Applications<br />Jason Lee<br />Ethos Technologies<br />
  2. 2. Agenda<br /><ul><li>Windows Phone 7 Platform Overview
  3. 3. Silverlight & XNA
  4. 4. Silverlight on Windows Phone 7
  5. 5. Development Tools
  6. 6. XAML
  7. 7. Play Time
  8. 8. DataBinding
  9. 9. MVVM
  10. 10. Q & A</li></li></ul><li>WP7 Platform Overview<br />Silverlight<br />Controls, Drawing, Navigation etc.<br />XNA<br />Input, Content, Graphics, Audio etc.<br />Windows Phone 7 Framework<br />Sensors, Camera, Launchers & Choosers, Push Notifications etc.<br />Common Base Class Library<br />I/O, Text, Collections, Net, LINQ etc.<br />
  11. 11. Silverlight & XNA<br /><ul><li>When to choose Silverlight
  12. 12. Comfort with XAML, event-driven application development
  13. 13. Vector Graphic
  14. 14. Rapid creation of a Rich Internet Application-style UI
  15. 15. Built-in controls
  16. 16. Embed video as part of screen
  17. 17. When to choose XNA
  18. 18. High-performance game
  19. 19. 3D
  20. 20. Familiar with Direct3D or even OpenGL
  21. 21. Or… both
  22. 22. Possible to combine both Silverlight and XNA in Mango release.</li></li></ul><li>Silverlight on WP7<br /><ul><li>Based On Silverlight 4
  23. 23. Applications hosted on client device, not in browser.
  24. 24. Most features are Included :
  25. 25. Implicit Styles
  26. 26. DataBinding Enhancements
  27. 27. Icommand Support
  28. 28. Some are NOT Included :
  29. 29. Printing, MouseWheel
  30. 30. Right-Click
  31. 31. Drag and Drop
  32. 32. Phone Specific Additions
  33. 33. Gestures / Touch
  34. 34. Tasks (Phone Call, SMS, Email, Camera, etc.)
  35. 35. Performance Optimization</li></li></ul><li>Development Tools<br /><ul><li>Visual Studio
  36. 36. Great tool for coding, debugging, publishing
  37. 37. Only C# is supported for phone development
  38. 38. Can do some simple layout design
  39. 39. Expression Blend
  40. 40. Great tool for design
  41. 41. Has some overlap with Visual Studio
  42. 42. Principles
  43. 43. Even if you are so called “coding guy”, don’t be political, use them both, use them well.</li></li></ul><li>Introduction to XAML<br /><ul><li>XAML is
  44. 44. Extensible Application Markup Language.
  45. 45. Describing UI in the form of XML.
  46. 46. Used in WPF and Silverlight UI composition.
  47. 47. Everything done in XAML, can be done in C#.
  48. 48. Features
  49. 49. XML structure is ideal for describing hierarchical, nested Visual Tree.
  50. 50. Much more easier than C# to define/declare UI Elements, Templates, Styles, DataBindings.
  51. 51. Principle
  52. 52. UI related work goes to XAML, controlling work goes to C#.
  53. 53. For ambiguous situations, try them both and pick up the one you like.</li></li></ul><li>Example of XAML<br />Grid<br />1<br />Phone Page<br />Don’t Sleep<br />2<br />StackPanel<br />3<br />4<br />5<br />
  54. 54. Play Time !<br /><ul><li>Goals
  55. 55. Get familiar with development tools and project structure
  56. 56. Get familiar with basic controls
  57. 57. See it in action, get excited</li></li></ul><li>Key Points<br /><ul><li>Theme Aware
  58. 58. Two themes : Dark & Light
  59. 59. A number of Accent Colors
  60. 60. Thus, try NOT use specific color and font, use predefined resources instead.
  61. 61. Careful with Sizing
  62. 62. Phone resolution may defer, that’s why we need Auto-Size.
  63. 63. Auto-Size is great, but costs performance.
  64. 64. Thus, try NOT use too much Auto-Size, especially for hierarchical structure.
  65. 65. Appropriate Keyboard
  66. 66. Phone is small, we can’t show everything.
  67. 67. Show optimum keyboard to make users happy.
  68. 68. InputScope is what you want to look into.</li></li></ul><li>DataBinding<br /><ul><li>What is DataBinding
  69. 69. DataBinding is glue that joins presentation code(View) with controlling logic code(ViewModel) at runtime.
  70. 70. Make it possible to loose couple presentation layer and logic layer.
  71. 71. DataBinding Modes
  72. 72. Three different binding modes: OneTime, OneWay, TwoWay
  73. 73. Fundamental APIs
  74. 74. INotifyPropertyChanged
  75. 75. DependencyProperty</li></li></ul><li>Why DataBinding ?<br /><ul><li>The world before DataBinding was a mess
  76. 76. Tight coupling between Presentation and Logic code.</li></ul>Presentation<br />Code Behind<br />Property<br />Get Data<br />TextBox<br />TextBox<br />TextBox<br />Save Data<br /><ul><li>Get Data
  77. 77. Set TextBox.Text = OriginalValue
  78. 78. OnTextBox_TextChanged</li></ul> => Do Something<br /><ul><li>ChnagedValue = TextBox.Text
  79. 79. Save Data</li></li></ul><li>DataBinding Explained<br />Binding Source<br />Binding Target<br />CLR Object<br />Dependency Object<br />Binding Object<br />Property<br />Dependency Property<br />
  80. 80. DataBinding Modes<br />Person<br />TextBox<br />Person<br />TextBox<br />Person<br />TextBox<br />OneWay <br />TwoWay<br />OneTime<br />FirstName<br />Text<br />FirstName<br />Text<br />FirstName<br />Text<br />INotifyPropertyChanged<br />
  81. 81. DataBinding in XAML (1)<br /><ul><li>Defining Singular Data Source
  82. 82. Set DataContext property of any UI Element
  83. 83. If the UI Element is a container control, all its containing sub-UI Elements inherit the same data source.</li></ul>Grid<br />Person<br />DataContext=“{Binding Person}”<br />Text=“{Binding FirstName}”<br />TextBox1<br />FirstName<br />StackPanel<br />Text=“{Binding MidName}”<br />TextBox2<br />MidName<br />Text=“{Binding LastName}”<br />TextBox3<br />LastName<br />
  84. 84. DataBinding in XAML (2)<br /><ul><li>Defining Collection Data Source
  85. 85. Set ItemsSource property of listcontrol (parent control).
  86. 86. List control generates a number of child-elements, applying each child’s DataContext with corresponding data source.
  87. 87. The look of each child is defined by parent control’s ItemTemplate.</li></ul>ListBox<br />People<br />ItemsSource=“{Binding People}”<br />Person 1<br />ListBoxItem<br />Person 1<br />Person 2<br />ListBoxItem<br />Person 2<br />Person 3<br />ListBoxItem<br />Person 3<br />
  88. 88. Commanding<br /><ul><li>So far so good for property binding, </li></ul> how about event/method then?<br /><ul><li>We need a way to combine UI element’s event and corresponding method
  89. 89. Binding between event and method
  90. 90. Command binding is done through ICommandinterface.
  91. 91. One common practice is DelegateCommand Implementation. </li></li></ul><li>MVVM<br /><ul><li>MVVM Design Pattern
  92. 92. Model-View-ViewModel
  93. 93. An alternative approach for MVC design pattern
  94. 94. Specially suitable for WPF/Silverlight
  95. 95. Advantages
  96. 96. Separation of concern
  97. 97. Reusability
  98. 98. Testability
  99. 99. Approaches
  100. 100. View First, ViewModel First
  101. 101. Principle
  102. 102. Design pattern is just a guideline for most common cases, you don’t have to do everything by applying it.
  103. 103. Remember, simple is the best!</li></li></ul><li>MVVM Explained<br />Data Binding<br />ViewModel<br />View<br />Method<br />Button<br />Call Service<br />Albums<br />Albums<br />Selected Album<br />Tracks<br />Call Service<br />Songs<br />
  104. 104. Page & Navigation<br /><ul><li>A phone page
  105. 105. Derives from PhoneApplicationPageclass
  106. 106. Has a Title property
  107. 107. Optionally contains and shows ApplicationBar
  108. 108. Navigation
  109. 109. Silverlight on Windows Phone uses a Page-based navigation model
  110. 110. Similar to web page navigation model
  111. 111. Pages are identified by a unique URI
  112. 112. Key APIs
  113. 113. NavigationService.Navigate(Uri source)
  114. 114. NavigationService.GoBack()
  115. 115. Virtual void OnNavigatedFrom(NavigationEventArgs e)
  116. 116. Virtual void OnNavigatedTo(NavigationEventArgs e)</li></li></ul><li>Navigating Back<br /><ul><li>Pay attention to Back key
  117. 117. The built in hardware Back key is used to navigate back to previous page
  118. 118. No code required to navigate back
  119. 119. To prevent navigating back</li></li></ul><li>Navigation & Parameter<br /><ul><li>To pass parameters
  120. 120. To receive parameters</li></li></ul><li>! & ?<br />Thank You ! <br />Any Questions ?<br />

×