Stephen Kennedy Silverlight 3 Deep Dive


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • Introduced in .NET 3.5 SP1, further support in .NET 4.0 Allows you to annotate your classes with what it means for an instance to be valid Place it on properties When value is set, annotations get evaluated and an exception is thrown if they fail Silverlight 3 controls automatically react to exceptions and display an error state (a visual state)
  • Note the order is important
  • 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 />