02 wp7 building silverlight applications
DESCRIPTION
TRANSCRIPT
![Page 1: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/1.jpg)
Building Silverlight
Applications
Jason LeeEthos Technologies
![Page 2: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/2.jpg)
Agenda• Windows Phone 7 Platform Overview• Silverlight & XNA• Silverlight on Windows Phone 7• Development Tools• XAML• Play Time• DataBinding• MVVM• Q & A
![Page 3: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/3.jpg)
WP7 Platform Overview
Common Base Class LibraryI/O, Text, Collections, Net, LINQ etc.
Windows Phone 7 FrameworkSensors, Camera, Launchers & Choosers, Push Notifications etc.
SilverlightControls, Drawing, Navigation etc.
XNAInput, Content, Graphics, Audio etc.
![Page 4: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/4.jpg)
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.
![Page 5: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/5.jpg)
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
![Page 6: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/6.jpg)
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.
![Page 7: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/7.jpg)
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.
![Page 8: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/8.jpg)
Example of XAML
Phone Page
Grid
Don’t
Sleep
StackPanel
1
23
4 5
![Page 9: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/9.jpg)
Play Time !• Goals
• Get familiar with development tools and project structure• Get familiar with basic controls• See it in action, get excited
![Page 10: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/10.jpg)
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.
![Page 11: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/11.jpg)
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
![Page 12: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/12.jpg)
Presentation
Code BehindProperty
Why DataBinding ?• The world before DataBinding was a mess
• Tight coupling between Presentation and Logic code.
TextBox Get Data Set TextBox.Text = OriginalValue OnTextBox_TextChanged => Do Something ChnagedValue = TextBox.Text Save Data
TextBoxTextBoxGet DataSave Data
![Page 13: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/13.jpg)
CLR ObjectBinding Source
Dependency ObjectBinding Target
DataBinding Explained
PropertyDependency Property
Binding Object
![Page 14: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/14.jpg)
DataBinding Modes
PersonTextBox
FirstNameTextOneTime
PersonTextBox
FirstNameText
PersonTextBox
FirstNameText
OneWay
TwoWay
INotifyPropertyChanged
![Page 15: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/15.jpg)
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
StackPanelTextBox2
TextBox1
TextBox3
Person
MidName
FirstName
LastName
DataContext=“{Binding Person}”
Text=“{Binding FirstName}”
Text=“{Binding MidName}”
Text=“{Binding LastName}”
![Page 16: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/16.jpg)
DataBinding in XAML (2)• Defining Collection Data Source
• Set ItemsSource property of list control (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
ListBoxItem
ListBoxItem
People
Person 2
Person 1
Person 3
ItemsSource=“{Binding People}”
Person 2
Person 3
ListBoxItem Person 1
![Page 17: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/17.jpg)
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 ICommand interface.• One common practice is DelegateCommand Implementation.
![Page 18: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/18.jpg)
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!
![Page 19: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/19.jpg)
MVVM Explained
ViewViewModel
Method
Albums
Selected Album
Tracks
Button
Albums
Songs
Call Service
Call Service
Data Binding
![Page 20: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/20.jpg)
Page & Navigation• A phone page
• Derives from PhoneApplicationPage class• 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)
![Page 21: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/21.jpg)
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
![Page 22: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/22.jpg)
Navigation & Parameter• To pass parameters
• To receive parameters
![Page 23: 02 wp7 building silverlight applications](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b411fe4a79593c128b460f/html5/thumbnails/23.jpg)
! & ?
Thank You ! Any Questions ?