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

Blendability
Barry Gervin
bgervin@objectsharp.com
ObjectSharp, Founding Partner
www.ObjectSharp.com/blogs/barry

We should...

But sometimes we...

We Should...

But sometimes we...

What is “Blendability”?
“Ability to work on a project in Expression Blend”
“Developers and Designers can work within their own tools, in harmony with each other, throughout the development lifecycle”
“Valuing the declaration of intention in our code overthe fine grain control of proceduraloperations.”

does it blend?

Not Blendable!

It Blends!

Blendability

Demo: Blend Tooling
Design Time Attributes, Sample Data, Visual State Manager

XML Data Source
Attractive option for designers, but...
Generates unique syntax
Difficult to move to CLR object binding.

Practices
Techniques
Data Binding
Model Concerns (Change Notification)
MVVM
Value Converters
Control Templates
Triggers, Actions & Behaviours
Source Code Management

Model Concerns
publicstringViewModelProperty { get{ returnthis.viewModelProperty; } set{ this.viewModelProperty = value; this.NotifyPropertyChanged("ViewModelProperty"); }
}

Model Concerns
publicclassItemCollection : ObservableCollection<Item> { .. }
...
privateItemCollection _myCollection =
newItemCollection(); //make it blend!publicItemCollectionMyCollection{ get { returnthis._myCollection; } }

Model-View-ViewModel
Pattern created by John Gossman from WPF team
Inspired by MVC, MVP & Martin Fowler’s PresentationModel pattern
Excellent choice for Bindability
Lots of evolution, popularity, frameworks

Why MVVM?
Separation of Concerns (UI & Business Logic)
Event driven code is not very unit testable
Views & View Models don’t have to be changed by changes in each other.
Blendability

MVVM
.DataContext
View
ViewModel
Model
{Binding .. }
Window
User Control
POCO,
EF/L2S Entity
DTO,
WCF Proxy
Domain / Service / Repository

With Model-View-Presenter
View
Model /Business Layer
Presenter
Selection
Save

With Model-View-ViewModel
View
Model / Business Layer
ViewModel
{Binding}
Selection
{Binding}
Save
{Binding}

ViewModel Construction
publicpartialclassMainView : UserControl
{
publicMainView() { this.DataContext = newMyViewModel(); InitializeComponent(); }
}
Not very blendable, neither is DI.

ViewModel Construction
<UserControl.Resources><local:MainViewModelx:Key="MainViewModelDataSource"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
DataContext="{Binding Source={StaticResourceMainViewModelDataSource}}" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}">
Nice!

MVVM Demo
Invoking Actions, Update the UI

ViewModel Instantiation
View Constructor
Dependency Injection
XAML (Easiest Blendability)
ViewModelLocator Service

MVVM Frameworks
MVVM Toolkit
Composite WPF (Prism)
MVVM Foundation
MVVM Light Toolkit
Onyx

Defined as part of a binding definition:
<TextBox.Background> <Binding Path=“AccountBalance"> <Binding.Converter> <local:BalanceToBrushConverter/> </Binding.Converter> </Binding></TextBox.Background>
Blendable, but do you always want to do this?
Value Converter in XAML

Value Converter vs. View Model
Full Name = LastName + “, “ + FirstName
Better candidate on the Model or ViewModel
Ask yourself...
How reusable is this?
Will I need to test this as part of the test for the View Model?

Control Templates
Expressing Intention

Interactivity without Code
Silverlight 2
Storyboards with Animations, triggered playback
Interactive Controls
Data Bindings
Data Templates
...and code, frequently common code

Silverlight 3 & 4
Triggers & Actions (a la WPF)
Action = Object that is invoked to perform operation
Change Property
Open Window
Trigger = Event that causes some behaviour
Clicked
Timer

Silverlight 3 & 4
Behaviours
Self-Contained
Reusable
“snippets” of interactivity code, Trigger + Action?
Assigned to art board content
Works in Blend
Excellent for Prototyping AND Production

Behaviours
Inherit from Behaviour<T>
Override
OnAttached
<T> AssociatedObject
programmatically add xaml, storyboards, etc.
Assign event handlers
Implement Event Handlers (i.e. Triggers)
Begin Storyboard
Set Propertys, etc.

Behaviours
Add interactivity without code.

Triggers, Actions & Behaviours
Trigger: Event that causes a behaviour
Action: Behaviour that is invoked on some trigger.
Behaviour:
Much more, but think Trigger + Action

Custom Behaviour
publicclassInverseColorClickBehavior :
Behavior<FrameworkElement>{
protectedoverridevoidOnAttached(){
base.OnAttached();
this.AssociatedObject.MouseLeftButtonDown +=
newMouseButtonEventHandler(
AssociatedObject_MouseLeftButtonDown );
}
privatevoidAssociatedObject_MouseLeftButtonDown( object sender,
MouseButtonEventArgs e ){
this.AssociatedObject.Effect = this.AssociatedObject.Effect == null ? this.AssociatedObject.Effect = this.inverseColor : this.AssociatedObject.Effect = null;}
}
Determines type of AssociatedObject, and what you can do?
Event handlers, customize element.
Don’t forget to clean up in Detached!

Blend Design Time Support
Category Support in Asset Library
Categories in Asset Library using a “MetadataStore”
Icons
PNG image as Embedded Resource and naming in a specific format:Namespace.ControlName.[Expression].[small|medium|etc].png
“Installing” Behaviors
COPY TO %ProgramFiles%Microsoft ExpressionBlend 3LibrariesSilverlightv3.0

Issues
“How do I turn a sketchflowprototype into production application?”
You DON’T want to do this
You DO want to create multiple prototypes
You DO want to take the best of each
You DO want to use XAML elements via Copy & Paste.

Counter Points
“I don’t use ____ instead of blend for the generation of UI elements into XAML.”
Lots of code-behind
Old School, pre-xaml education
Unfortunate Anti-Pattern

Takeaways
Work towards incorporating Design process throughout lifecycle.
Enable that with tools & practices.
Don’t give up to easy, but don’t be a purist either!

Resources
Expressionblend. Codeplex.com
Expression Blend Design Gallery
Behaviours
Samples
Themes

Thanks to our contributors

http://blogs.objectsharp.com	637
http://www.slideshare.net	4
http://webcache.googleusercontent.com	3
http://translate.googleusercontent.com	1

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

by Barry Gervin on May 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 645

Statistics

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