02 wp7 building silverlight applications

Building
Silverlight
Applications
Jason Lee
Ethos Technologies

Agenda
Windows Phone 7 Platform Overview
Silverlight & XNA
Silverlight on Windows Phone 7
Development Tools
XAML
Play Time
DataBinding
MVVM
Q & A

WP7 Platform Overview
Silverlight
Controls, Drawing, Navigation etc.
XNA
Input, Content, Graphics, Audio etc.
Windows Phone 7 Framework
Sensors, Camera, Launchers & Choosers, Push Notifications etc.
Common Base Class Library
I/O, Text, Collections, Net, LINQ etc.

Silverlight & XNA
When to choose Silverlight
Comfort with XAML, event-driven application development
Vector Graphic
Rapid creation of a Rich Internet Application-style UI
Built-in controls
Embed video as part of screen
When to choose XNA
High-performance game
3D
Familiar with Direct3D or even OpenGL
Or… both
Possible to combine both Silverlight and XNA in Mango release.

Silverlight on WP7
Based On Silverlight 4
Applications hosted on client device, not in browser.
Most features are Included :
Implicit Styles
DataBinding Enhancements
Icommand Support
Some are NOT Included :
Printing, MouseWheel
Right-Click
Drag and Drop
Phone Specific Additions
Gestures / Touch
Tasks (Phone Call, SMS, Email, Camera, etc.)
Performance Optimization

Development Tools
Visual Studio
Great tool for coding, debugging, publishing
Only C# is supported for phone development
Can do some simple layout design
Expression Blend
Great tool for design
Has some overlap with Visual Studio
Principles
Even if you are so called “coding guy”, don’t be political, use them both, use them well.

Introduction to XAML
XAML is
Extensible Application Markup Language.
Describing UI in the form of XML.
Used in WPF and Silverlight UI composition.
Everything done in XAML, can be done in C#.
Features
XML structure is ideal for describing hierarchical, nested Visual Tree.
Much more easier than C# to define/declare UI Elements, Templates, Styles, DataBindings.
Principle
UI related work goes to XAML, controlling work goes to C#.
For ambiguous situations, try them both and pick up the one you like.

Example of XAML
Grid
1
Phone Page
Don’t Sleep
2
StackPanel
3
4
5

Play Time !
Goals
Get familiar with development tools and project structure
Get familiar with basic controls
See it in action, get excited

Key Points
Theme Aware
Two themes : Dark & Light
A number of Accent Colors
Thus, try NOT use specific color and font, use predefined resources instead.
Careful with Sizing
Phone resolution may defer, that’s why we need Auto-Size.
Auto-Size is great, but costs performance.
Thus, try NOT use too much Auto-Size, especially for hierarchical structure.
Appropriate Keyboard
Phone is small, we can’t show everything.
Show optimum keyboard to make users happy.
InputScope is what you want to look into.

DataBinding
What is DataBinding
DataBinding is glue that joins presentation code(View) with controlling logic code(ViewModel) at runtime.
Make it possible to loose couple presentation layer and logic layer.
DataBinding Modes
Three different binding modes: OneTime, OneWay, TwoWay
Fundamental APIs
INotifyPropertyChanged
DependencyProperty

Why DataBinding ?
The world before DataBinding was a mess
Tight coupling between Presentation and Logic code.
Presentation
Code Behind
Property
Get Data
TextBox
TextBox
TextBox
Save Data
Get Data
Set TextBox.Text = OriginalValue
OnTextBox_TextChanged
=> Do Something
ChnagedValue = TextBox.Text
Save Data

DataBinding Explained
Binding Source
Binding Target
CLR Object
Dependency Object
Binding Object
Property
Dependency Property

DataBinding Modes
Person
TextBox
Person
TextBox
Person
TextBox
OneWay
TwoWay
OneTime
FirstName
Text
FirstName
Text
FirstName
Text
INotifyPropertyChanged

DataBinding in XAML (1)
Defining Singular Data Source
Set DataContext property of any UI Element
If the UI Element is a container control, all its containing sub-UI Elements inherit the same data source.
Grid
Person
DataContext=“{Binding Person}”
Text=“{Binding FirstName}”
TextBox1
FirstName
StackPanel
Text=“{Binding MidName}”
TextBox2
MidName
Text=“{Binding LastName}”
TextBox3
LastName

DataBinding in XAML (2)
Defining Collection Data Source
Set ItemsSource property of listcontrol (parent control).
List control generates a number of child-elements, applying each child’s DataContext with corresponding data source.
The look of each child is defined by parent control’s ItemTemplate.
ListBox
People
ItemsSource=“{Binding People}”
Person 1
ListBoxItem
Person 1
Person 2
ListBoxItem
Person 2
Person 3
ListBoxItem
Person 3

Commanding
So far so good for property binding,
how about event/method then?
We need a way to combine UI element’s event and corresponding method
Binding between event and method
Command binding is done through ICommandinterface.
One common practice is DelegateCommand Implementation.

MVVM
MVVM Design Pattern
Model-View-ViewModel
An alternative approach for MVC design pattern
Specially suitable for WPF/Silverlight
Advantages
Separation of concern
Reusability
Testability
Approaches
View First, ViewModel First
Principle
Design pattern is just a guideline for most common cases, you don’t have to do everything by applying it.
Remember, simple is the best!

MVVM Explained
Data Binding
ViewModel
View
Method
Button
Call Service
Albums
Albums
Selected Album
Tracks
Call Service
Songs

Page & Navigation
A phone page
Derives from PhoneApplicationPageclass
Has a Title property
Optionally contains and shows ApplicationBar
Navigation
Silverlight on Windows Phone uses a Page-based navigation model
Similar to web page navigation model
Pages are identified by a unique URI
Key APIs
NavigationService.Navigate(Uri source)
NavigationService.GoBack()
Virtual void OnNavigatedFrom(NavigationEventArgs e)
Virtual void OnNavigatedTo(NavigationEventArgs e)

Navigating Back
Pay attention to Back key
The built in hardware Back key is used to navigate back to previous page
No code required to navigate back
To prevent navigating back

Navigation & Parameter
To pass parameters
To receive parameters

! & ?
Thank You !
Any Questions ?

http://www.cnblogs.com	658
http://archive.cnblogs.com	3
http://media.java123.net	3
http://www.haogongju.net	2
http://www.byywee.com	1

02 wp7 building silverlight applications

by Tao on Jul 19, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 667

Statistics

02 wp7 building silverlight applications — Presentation Transcript