Blendability<br />Barry Gervin<br />bgervin@objectsharp.com<br />ObjectSharp, Founding Partner<br />www.ObjectSharp.com/bl...
We should...<br />
But sometimes we...<br />
We Should...<br />
But sometimes we...<br />
What is “Blendability”?<br />“Ability to work on a project in Expression Blend”<br />“Developers and Designers can work wi...
does it blend?<br />
Not Blendable!<br />
It Blends!<br />
Blendability<br />
Demo: Blend Tooling<br />Design Time Attributes, Sample Data, Visual State Manager<br />
XML Data Source<br />Attractive option for designers, but...<br />Generates unique syntax<br />Difficult to move to CLR ob...
Practices<br />Techniques<br />Data Binding<br />Model Concerns (Change Notification)<br />MVVM<br />Value Converters<br /...
Model Concerns<br />publicstringViewModelProperty { get{ returnthis.viewModelProperty; } set{ this.viewModelProperty = val...
Model Concerns<br />publicclassItemCollection : ObservableCollection<Item> { .. }<br />...<br />privateItemCollection _myC...
Model-View-ViewModel<br />Pattern created by John Gossman from WPF team<br />Inspired by MVC, MVP & Martin Fowler’s Presen...
Why MVVM?<br />Separation of Concerns (UI & Business Logic)<br />Event driven code is not very unit testable<br />Views & ...
MVVM<br />.DataContext<br />View<br />ViewModel<br />Model<br />{Binding .. }<br />Window<br />User Control<br /><ul><li>P...
EF/L2S Entity
DTO,
WCF Proxy</li></ul>Domain / Service / Repository<br />
With Model-View-Presenter<br />View<br />Model /Business Layer<br />Presenter<br />Selection<br />Save<br />
With Model-View-ViewModel<br />View<br />Model / Business Layer<br />ViewModel<br />{Binding}<br />Selection<br />{Binding...
ViewModel Construction<br />publicpartialclassMainView : UserControl<br />{ <br />publicMainView() { this.DataContext = ne...
ViewModel Construction<br /><UserControl.Resources><local:MainViewModelx:Key="MainViewModelDataSource"/><br /></UserContro...
MVVM Demo<br />Invoking Actions, Update the UI<br />
ViewModel Instantiation<br />View Constructor<br />Dependency Injection<br />XAML (Easiest Blendability)<br />ViewModelLoc...
MVVM Frameworks<br /><ul><li>MVVM Toolkit
Composite WPF (Prism)
MVVM Foundation
MVVM Light Toolkit
Onyx</li></li></ul><li>Defined as part of a binding definition:<br /><TextBox.Background>    <Binding Path=“AccountBalance...
Value Converter vs. View Model<br />Full Name = LastName + “, “ + FirstName<br />Better candidate on the Model or ViewMode...
Control Templates<br />Expressing Intention<br />
Interactivity without Code<br />Silverlight 2<br />Storyboards  with Animations, triggered playback<br />Interactive Contr...
Interactivity without Code<br />Silverlight 3 & 4<br />Triggers & Actions (a la WPF)<br />Action = Object that is invoked ...
Interactivity without Code<br />Silverlight 3 & 4<br />Behaviours<br />Self-Contained<br />Reusable<br />“snippets” of int...
Behaviours<br />Inherit from Behaviour<T><br />Override<br />OnAttached<br /><T> AssociatedObject<br />programmatically ad...
Behaviours<br />Add interactivity without code.<br />
Triggers, Actions & Behaviours<br />Trigger: Event that causes a behaviour<br />Action: Behaviour that is invoked on some ...
Custom Behaviour<br />publicclassInverseColorClickBehavior :<br />Behavior<FrameworkElement>{ <br />protectedoverridevoidO...
Upcoming SlideShare
Loading in...5
×

Will your code blend? : Toronto Code Camp 2010 : Barry Gervin

2,987

Published on

XAML getting you down? Tired of the repetition of trial by error WPF or Silverlight development? If you’re not using Expression Blend to build your XAML, you’re doing it all wrong. Let’s take a look at the common pitfalls that new Silverlight developers fall into that make their code unblendable, and then leverage the patterns and techniques that allow us to unlock the virtues of Expression Blend. Testability, blendability, inner peace and maintainability are just 1 hour away

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,987
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Category Support in Asset LibraryWe can support Categories in Asset Library using a “MetadataStore”IconsWe can assign icons by setting a PNG image as Embedded Resource and naming in a specific format:Namespace.ControlName.[Expression].[small|medium|etc].png“Installing” BehaviorsCOPY TO %ProgramFiles%Microsoft ExpressionBlend 3LibrariesSilverlightv3.0
  • Will your code blend? : Toronto Code Camp 2010 : Barry Gervin

    1. 1. Blendability<br />Barry Gervin<br />bgervin@objectsharp.com<br />ObjectSharp, Founding Partner<br />www.ObjectSharp.com/blogs/barry<br />
    2. 2. We should...<br />
    3. 3. But sometimes we...<br />
    4. 4. We Should...<br />
    5. 5. But sometimes we...<br />
    6. 6.
    7. 7.
    8. 8. What is “Blendability”?<br />“Ability to work on a project in Expression Blend”<br />“Developers and Designers can work within their own tools, in harmony with each other, throughout the development lifecycle”<br />“Valuing the declaration of intention in our code overthe fine grain control of proceduraloperations.” <br />
    9. 9. does it blend?<br />
    10. 10. Not Blendable!<br />
    11. 11.
    12. 12. It Blends!<br />
    13. 13. Blendability<br />
    14. 14. Demo: Blend Tooling<br />Design Time Attributes, Sample Data, Visual State Manager<br />
    15. 15. XML Data Source<br />Attractive option for designers, but...<br />Generates unique syntax<br />Difficult to move to CLR object binding.<br />
    16. 16. Practices<br />Techniques<br />Data Binding<br />Model Concerns (Change Notification)<br />MVVM<br />Value Converters<br />Control Templates<br />Triggers, Actions & Behaviours<br />Source Code Management<br />
    17. 17. Model Concerns<br />publicstringViewModelProperty { get{ returnthis.viewModelProperty; } set{ this.viewModelProperty = value; this.NotifyPropertyChanged("ViewModelProperty"); } <br />}<br />
    18. 18. Model Concerns<br />publicclassItemCollection : ObservableCollection<Item> { .. }<br />...<br />privateItemCollection _myCollection =<br />newItemCollection(); //make it blend!publicItemCollectionMyCollection{ get { returnthis._myCollection; } } <br />
    19. 19. Model-View-ViewModel<br />Pattern created by John Gossman from WPF team<br />Inspired by MVC, MVP & Martin Fowler’s PresentationModel pattern<br />Excellent choice for Bindability<br />Lots of evolution, popularity, frameworks<br />
    20. 20. Why MVVM?<br />Separation of Concerns (UI & Business Logic)<br />Event driven code is not very unit testable<br />Views & View Models don’t have to be changed by changes in each other.<br />Blendability<br />
    21. 21. MVVM<br />.DataContext<br />View<br />ViewModel<br />Model<br />{Binding .. }<br />Window<br />User Control<br /><ul><li>POCO,
    22. 22. EF/L2S Entity
    23. 23. DTO,
    24. 24. WCF Proxy</li></ul>Domain / Service / Repository<br />
    25. 25. With Model-View-Presenter<br />View<br />Model /Business Layer<br />Presenter<br />Selection<br />Save<br />
    26. 26. With Model-View-ViewModel<br />View<br />Model / Business Layer<br />ViewModel<br />{Binding}<br />Selection<br />{Binding}<br />Save<br />{Binding}<br />
    27. 27. ViewModel Construction<br />publicpartialclassMainView : UserControl<br />{ <br />publicMainView() { this.DataContext = newMyViewModel(); InitializeComponent(); } <br />}<br />Not very blendable, neither is DI.<br />
    28. 28. ViewModel Construction<br /><UserControl.Resources><local:MainViewModelx:Key="MainViewModelDataSource"/><br /></UserControl.Resources><br /><Grid x:Name="LayoutRoot"<br />DataContext="{Binding Source={StaticResourceMainViewModelDataSource}}" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}"><br />Nice!<br />
    29. 29. MVVM Demo<br />Invoking Actions, Update the UI<br />
    30. 30. ViewModel Instantiation<br />View Constructor<br />Dependency Injection<br />XAML (Easiest Blendability)<br />ViewModelLocator Service<br />
    31. 31. MVVM Frameworks<br /><ul><li>MVVM Toolkit
    32. 32. Composite WPF (Prism)
    33. 33. MVVM Foundation
    34. 34. MVVM Light Toolkit
    35. 35. Onyx</li></li></ul><li>Defined as part of a binding definition:<br /><TextBox.Background>    <Binding Path=“AccountBalance">        <Binding.Converter>            <local:BalanceToBrushConverter/>        </Binding.Converter>    </Binding></TextBox.Background><br />Blendable, but do you always want to do this?<br />Value Converter in XAML<br />
    36. 36. Value Converter vs. View Model<br />Full Name = LastName + “, “ + FirstName<br />Better candidate on the Model or ViewModel<br />Ask yourself...<br />How reusable is this? <br />Will I need to test this as part of the test for the View Model?<br />
    37. 37. Control Templates<br />Expressing Intention<br />
    38. 38. Interactivity without Code<br />Silverlight 2<br />Storyboards with Animations, triggered playback<br />Interactive Controls <br />Data Bindings<br />Data Templates<br />...and code, frequently common code<br />
    39. 39. Interactivity without Code<br />Silverlight 3 & 4<br />Triggers & Actions (a la WPF)<br />Action = Object that is invoked to perform operation <br />Change Property<br />Open Window<br />Trigger = Event that causes some behaviour<br />Clicked<br />Timer<br />
    40. 40. Interactivity without Code<br />Silverlight 3 & 4<br />Behaviours<br />Self-Contained<br />Reusable<br />“snippets” of interactivity code, Trigger + Action?<br />Assigned to art board content<br />Works in Blend<br />Excellent for Prototyping AND Production<br />
    41. 41. Behaviours<br />Inherit from Behaviour<T><br />Override<br />OnAttached<br /><T> AssociatedObject<br />programmatically add xaml, storyboards, etc.<br />Assign event handlers<br />Implement Event Handlers (i.e. Triggers)<br />Begin Storyboard<br />Set Propertys, etc.<br />
    42. 42. Behaviours<br />Add interactivity without code.<br />
    43. 43. Triggers, Actions & Behaviours<br />Trigger: Event that causes a behaviour<br />Action: Behaviour that is invoked on some trigger.<br />Behaviour: <br />Much more, but think Trigger + Action<br />
    44. 44. Custom Behaviour<br />publicclassInverseColorClickBehavior :<br />Behavior<FrameworkElement>{ <br />protectedoverridevoidOnAttached(){ <br />base.OnAttached(); <br />this.AssociatedObject.MouseLeftButtonDown += <br />newMouseButtonEventHandler( <br />AssociatedObject_MouseLeftButtonDown );<br />}<br />privatevoidAssociatedObject_MouseLeftButtonDown( object sender, <br />MouseButtonEventArgs e ){ <br />this.AssociatedObject.Effect = this.AssociatedObject.Effect == null ? this.AssociatedObject.Effect = this.inverseColor : this.AssociatedObject.Effect = null;}<br />}<br />Determines type of AssociatedObject, and what you can do?<br />Event handlers, customize element.<br />Don’t forget to clean up in Detached!<br />
    45. 45. Blend Design Time Support<br />Category Support in Asset Library<br />Categories in Asset Library using a “MetadataStore”<br />Icons<br />PNG image as Embedded Resource and naming in a specific format:Namespace.ControlName.[Expression].[small|medium|etc].png<br />“Installing” Behaviors<br />COPY TO %ProgramFiles%Microsoft ExpressionBlend 3LibrariesSilverlightv3.0<br />
    46. 46. Issues<br />“How do I turn a sketchflowprototype into production application?”<br />You DON’T want to do this<br />You DO want to create multiple prototypes<br />You DO want to take the best of each<br />You DO want to use XAML elements via Copy & Paste.<br />
    47. 47. Counter Points<br />“I don’t use ____ instead of blend for the generation of UI elements into XAML.”<br />Lots of code-behind<br />Old School, pre-xaml education<br />Unfortunate Anti-Pattern<br />
    48. 48. Takeaways<br />Work towards incorporating Design process throughout lifecycle.<br />Enable that with tools & practices.<br />Don’t give up to easy, but don’t be a purist either!<br />
    49. 49. Resources<br />Expressionblend. Codeplex.com<br />Expression Blend Design Gallery<br />Behaviours<br />Samples<br />Themes<br />
    50. 50. Thanks to our contributors<br />

    ×