Stephen Kennedy Silverlight 3 Deep Dive


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Stephen Kennedy Silverlight 3 Deep Dive

  1. 1. SMTC<br />WenemRmnrnr<br />XNXNXNNXNX<br />SNS, EndndjHsmnwmd<br /><br />August 29, 2007<br />Silverlight 3 Best Practice Do’s and Don’ts<br />
  2. 2. Stephen Kennedy (<br />Presenter<br />
  3. 3. Design Patterns<br />Development<br />Optimizations<br />Overview<br />
  4. 4. Design patterns<br />Silverlight 3 <br />
  5. 5. Model View Controller/Presenter Pattern<br />Problem: Decoupling data display logic from the business logic that maintains and updates it<br />Solution: MVC Pattern separates the modeling of the domain, presentation, and actions based on user input into three separate classes:<br />Model:<br />Manages behavior/data of the application domain<br />responds to requests for information about its state (usually from View)<br />responds to instructions to change its state (usually from Controller).<br />View:<br />Manages the display information<br />Controller:<br />Informs the Model to change its state by interpreting inputs from keyboard, mouse and external instructions.<br />
  6. 6. Developed by Martin Fowler, and is an extension of MVP<br />Again, the View is separated from its behavior and state<br />A Presentation Model is introduced, which acts as an abstraction of the view – so the view is merely a rendering of the Presentation Model<br />View has a reference to Presentation Model, but Presentation Model has no reference to view<br />Presentation Model<br />
  7. 7. MVP/MVC nice for web and thick client<br />Good for ASP.NET,WinForms, WPF (as a start)<br />Good for Silverlight as a start<br />What you’re used to<br />
  8. 8. Identical to Presentation Model, but engineered by John Gossman to utilize WPF Dependency Properties and Commands to bind UI to abstraction<br />Ideal as it allows abstraction, called the ViewModel, to be tested<br />Also allows for any UI to bind to ViewModel fields to show and modify the data<br />XAML controls / Elements bind to properties in the ViewModel class<br />Use Model-View-ViewModel Pattern<br />
  9. 9. Model<br />POCO – no Dependency Properties / Routed Events<br />No UI knowledge - pure data<br />Design Patterns: MVVM<br />
  10. 10. View Model<br />No knowledge of the view<br />Exposes the model(s) / custom properties used in the view<br />Use ObservableCollection&lt;T&gt; for collections of data<br />Implement INotifyPropertyChanged for custom properties<br />Should be able to act as a command line interface to the view<br />No Dependency Properties<br />Design Patterns: MVVM<br />
  11. 11. View<br />Binds to the ViewModel (DataContext)<br />Use converters to bind visual elements to ViewModel / Model properties<br />ie: Model’s Temperature  Colour Brush<br />Events are hooked up through either code-behind or commanding<br />Commanding better, but no OOB support in SL<br />Silverlight Extensions project on CodePlex<br />Custom Behaviors<br />Composite Application Guidance/Library (Prism)<br />Design Patterns: MVVM<br />
  12. 12. View and ViewModel Binding<br />ViewModel.cs<br />App.xaml.cs<br />ModelData md;<br />public ViewModel()<br />{<br /> md=new ModelData();<br />}<br />public string Data<br />{<br /> get{ return md.Data;}<br /> set{ md.Data = value;}<br />}<br />public App() {<br />View view = new View();<br />view.DataContext= new ViewModel(); //…<br />} <br />View.xaml<br />...<br />&lt;TextBox <br />Content=“{Binding Data}” ... /&gt;<br />...<br />
  13. 13. Can use “regular” property procedures in ViewModel<br />If binding a collection to a DataGrid, etc., prefer the ObservableCollection&lt;&gt; (or non-generic equivalent) to sync updates back to the Model automatically<br />MVVM Data Binding<br />
  14. 14. MVVM Collection Item Binding<br />The View should never bind to the data directly, but bind to a ViewModel<br />If a collection of data is to be displayed in the View, the main ViewModel should expose an ObservableCollection of an additional ViewModel class that exposes properties, and thus, data<br />Property ...<br />Property ...<br />Property ...<br />Property ...<br />Property ...<br />Property ...<br />public ObservableCollectionMyOC ...{<br />return new ObservableCollection&lt;ViewModel2&gt; ...<br />} <br />Property ...<br />Property ...<br />Property ...<br />&lt;DataGridItemsSource=“<br />{Binding MyOC}” .../&gt;<br />Property ...<br />Property ...<br />Property ...<br />Property ...<br />Property ...<br />Property ...<br />ViewModel2<br />The View<br />ViewModel1<br />
  15. 15. Issue: changing property values in ViewModel does not always update bound control in View<br />Solution: have ViewModel implement INotifyPropertyChanged interface, and raise PropertyChanged event in each property<br />Or better yet, create a base ViewModel class and have each ViewModel subclass it<br />Property Binding<br />
  16. 16. Attached Properties in XAML can also be used in lieu of missing Command <br />Create Command, expose as property in ViewModel<br />Create static class with Attached Property<br />Add namespace to XAML screen<br />Place Attached Property in desired control<br />Commands and Attached Properties<br />
  17. 17. Attached Property<br />
  18. 18. ViewModel and XAML with Attached Property<br />
  19. 19. The View knows about the ViewModel, but the ViewModel does not know about the View<br />ViewModel is assigned to the DataContext of the View (Silverlight XAML)<br />In xaml.cs codebehind for page<br />In App.xaml.cs<br />In XAML via Resource<br />Other<br />Associating ViewModel with View<br />
  20. 20. Create ViewModel base class (implement INotifyPropertyChanged)<br />Have all ViewModels subclass base<br />Expose NO models to View directly<br />Use Attached Properties as ‘workaround’ to lack of Commands in Silverlight controls<br />Possibly Behaviors …<br />Good practices …<br />
  21. 21. Development<br />Silverlight 3<br />
  22. 22. Easy to get sloppy – name all controls/elements<br />UI elements should have the same naming convention as your private class variables (that’s what they become)<br />ie: &lt;Button x:Name=“_submitButton” /&gt;<br />Prefix every resource with a “namespace”<br />“Storyboards.FlashUserImage”<br />“Brushes.ButtonBackground”<br />“Templates.GiftsListBox”<br />Development<br />
  23. 23. Use new Data Annotations framework (.NET 3.5/4.0)<br /><ul><li>[Required]
  24. 24. [Range(1,100)]
  25. 25. [StringLength(15)]
  26. 26. [RegularExpresion(“^M.*”)]
  27. 27. [CustomValidation(typeof(MyValidator, “MyValidationMethod”))</li></ul>Can be applied at class or property level<br />Data Annotations are your friend<br />
  28. 28. Import System.ComponentModel.DataAnnotations<br />Annotate properties/methods<br />Can specify custom validation method<br />TIP: Use a convention pattern<br /><ul><li>Create an interface (ie: IValidatableValidate() method)
  29. 29. Use a method name convention (use a constant)</li></ul>Data Annotations<br />
  30. 30. Pull common control appearance into styles<br />Break app-wide resources into multiple files<br />(by merging resource dictionaries into App.xaml)<br /><ul><li>RD_Converters.xaml
  31. 31. RD_Colours.xaml
  32. 32. RD_Sizes.xaml
  33. 33. RD_Brushes.xaml
  34. 34. RD_Styles.xaml
  35. 35. RD_Templates.xaml
  36. 36. …</li></ul>Styles and Resources<br />
  37. 37. Optimizations<br />Silverlight 3<br />
  38. 38. Use Visibility rather than Opacity to hide objects<br />Use transparent control backgrounds sparingly<br /> Avoid long-running JavaScript tasks and more<br />Performance Tips …<br />
  39. 39. Never make the user wait and wonder<br />Progress, progress, progress<br />Minimize XAP size (this initial download)<br />Make services prime, but remember<br />Progress, progress, progress<br />User interaction <br />
  40. 40. Resizing<br />Blending<br />Drawing resultant pixels onscreen<br />ALL can be done with GPU acceleration enabled<br />In &lt;object&gt; tag<br />&lt;parm name=“enableGPUAcceleration” value=“true” /&gt;<br />Hardware optimization<br />
  41. 41. Q&A<br />Silverlight 3<br />