designing and developing a windows phone 7 application in silverlight end-to-end
DESCRIPTION
Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End. Katrien De Graeve Developer Evangelist Microsoft BeLux. Isabel Gomez Miragaya Developer Evangelist Microsoft Spain. Contents. Seeing it all come together Cloud service and SQL Azure OData MVVM - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/1.jpg)
Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End
Isabel Gomez MiragayaDeveloper EvangelistMicrosoft Spain
Katrien De GraeveDeveloper EvangelistMicrosoft BeLux
![Page 2: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/2.jpg)
Contents
• Seeing it all come together• Cloud service and SQL Azure• OData• MVVM• Using Expression Blend for UI• Phone integration• Location services• Choosers & Launchers• Application Bar• Page Navigation
• Databinding• Custom user controls
![Page 3: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/3.jpg)
![Page 4: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/4.jpg)
CLOUD
SCREEN
Phone Emulator
Samples Documentation
Guides Community
Packaging and Verification Tools
Notifications
Location Identity Feeds
MapsSocial
App Deployment Registration
Validation
Certification
Publishing
Marketplace
MO and CC Billing
Business Intelligence
Update Management
Elements of the Windows Phone 7 Application Platform
Tools
Portal ServicesCloud Services
Sensors Media Data
Xbox LIVE Notifications
.NET Framework managed code sandbox
Location
Phone
Runtime – On “Screen”
![Page 5: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/5.jpg)
Outloud Architecture
Screen
The Cloud
Opinion
WiFi
MVVM
…
Outloud Pictures
Push Notification: New Opinion
OutloudoData
SA Storage
AggregatedOpinion
![Page 6: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/6.jpg)
DEMOCloud: Outloud ServicesClient: Outloud Model
![Page 7: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/7.jpg)
MVVM > The Model
Opinion
id
mood
name
latitude
longitude
description
dser
pictureURL
AggregatedOpinion
name
numberofopinions
averagemood
![Page 8: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/8.jpg)
UI Guidelines and controls
• Panorama style applications• Pivot style applications
![Page 9: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/9.jpg)
MVVM – Main page (Pivot)
Model
AggregatedOpinion
MainPage
Pivot
all
nearby
Appbar
OpinionsViewModel
bool IsDataLocationLoaded
NearBy
All
PropertyChanged
GeoCoordinateWatcher(via GPS Helper)
![Page 10: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/10.jpg)
MVVM –Submit opinion control
Model
Opinion
SubmitOpinionViewModel
TakePicture (RelayCommand-MVVMLight)
NewOpinion
ChosenPicture
CurrentGeoCoordinate
IsSubmitting
SubmitOpinion(RelayCommand-MVVMLight)
CancelOpinion(RelayCommand-MVVMLight)
SubmitOpinion
Submit (control)
Step 1
Step 2
Step 3
Step 4
MoodSelector(control)
ButtonTakePicture
Send
Cancel
…….. BoolVisibilityConverter
EventToCommand
EventToCommand
EventToCommand
![Page 11: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/11.jpg)
DEMOMain page and a user control
![Page 12: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/12.jpg)
MVVM – Main page and Submit opinion
SubmitOpinion
MainPage
OutloudoDataclient
AggregatedOpinion
OpinionsViewModel
SubmitOpinionViewModel
RelayCommand (MVVMLight ICommand)
EventToCommand (MVVMLight behavior)
Opinion
Location with GeoCoordinateWatcher
PivotAppBar
![Page 13: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/13.jpg)
MVVM Design data
Model
AggregatedOpinion
OpinionsViewModel
AllOpinionsViewModel
AllAggregatedOpinions
IsDataLoading
NearByOpinionsViewModel
NearByAggregatedOpinions
IsDataLoading
BoolToVisbility
MainPage
Pivot
all
nearby
……..
…….. BoolToVisbility
![Page 14: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/14.jpg)
DEMODesign Data
![Page 15: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/15.jpg)
MVVM Getting Real Data
Model
AggregatedOpinion
OpinionsViewModel
AllOpinionsViewModel
AllAggregatedOpinions
IsDataLoaded
NearByOpinionsViewModel
NearByAggregatedOpinions
IsDataLoaded
BoolToVisbility
MainPage
Pivot
all
nearby
……..
…….. BoolToVisbility
OutloudoData
SA Storage
AggregatedOpinions
GetNearByOpinions
![Page 16: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/16.jpg)
Navigating master-detail
![Page 17: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/17.jpg)
MVVM Master-Detail View
Model
AggregatedOpinion
OpinionsViewModel
AllOpinionsViewModel
SelectedAggregatedOpinion
NearByOpinionsViewModel
SelectedAggregatedOpinion
SelectedItem
MainPage
Pivot
all
nearby SelectedItem
WP7ContribLastReplayMessenger<Selected AggOpinion>
AggregatedOpinion
NameAverageMood
List of Opinions
AggregatedOpinionVM
AggregatedOpinion
IsDataLoading…….. BoolToVisbility
SelectionChanged
OutloudoData
SA Storage
![Page 18: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/18.jpg)
DEMOReal data and navigation
![Page 19: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/19.jpg)
Tombstoning
• PhoneApplicationPage.State• PhoneApplicationService.State• App events• Application_Launching• Application_Activated• Application_Deactivated• Application_Closing
![Page 20: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/20.jpg)
MVVM - CameraTask, Tombstoning and save real data
Model
Opinion
SubmitOpinionViewModel
TakePicture (RelayCommand-MVVMLight)
NewOpinion
ChosenPicture
CurrentGeoCoordinate
IsSubmitting
SubmitOpinion(RelayCommand-MVVMLight)
CancelOpinion(RelayCommand-MVVMLight)
SubmitOpinion
Submit (control)
Step 1
Step 2
Step 3
Step 4
MoodSelector(control)
ButtonTakePicture
Send
Cancel
…….. BoolVisibilityConverter
EventToCommand
EventToCommand
EventToCommand
Tombstone
OutloudoData
SA Storage
![Page 21: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/21.jpg)
DEMOCamera integration and tombstoningSaving real data
![Page 22: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/22.jpg)
MVVM - CameraTask, Tombstoning and save real data
Model
Opinion
SubmitOpinionViewModel
TakePicture (RelayCommand-MVVMLight)
NewOpinion
ChosenPicture
CurrentGeoCoordinate
IsSubmitting
SubmitOpinion(RelayCommand-MVVMLight)
CancelOpinion(RelayCommand-MVVMLight)
SubmitOpinion
Submit (control)
Step 1
Step 2
Step 3
Step 4
MoodSelector(control)
ButtonTakePicture
Send
Cancel
……..
BoolVisibilityConverter
EventToCommand
EventToCommand
EventToCommand
Tombstone
OutloudoData
SA Storage
![Page 23: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/23.jpg)
Push Notification
Model
Opinion
OpinionsViewModelMainPage
Pivot
«Hotel A»
NewOpinionArrived
Callback (Opinion)
New Opinion
OutloudoData
Register for NotificationsSubscribe to Notifications
PropertyChangedRaw/Tile/Toast
![Page 24: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/24.jpg)
DEMOout.loud Push Notification
![Page 25: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/25.jpg)
Recap Push Notification
Model
Opinion
OpinionsViewModelMainPage
Pivot
«Hotel A»
NewOpinionArrived
Callback (Opinion)
New Opinion
OutloudoData
Register for NotificationsSubscribe to Notifications
PropertyChangedRaw/Tile/Toast
![Page 26: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/26.jpg)
WHAT’S MISSING?
![Page 27: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/27.jpg)
Possible improvements for demo
• Categories of opinions• Subscribing to categories for push notification• Settings page for push notification• Saving state for current opinions• Orientation support• Integration with authentication & membership• Integration with Twitter• Error handling • ...
![Page 28: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/28.jpg)
Tips, Tricks and Lessons Learned
• Using behaviors and create your own• Create design time data• Application execution lifecycle and tombstoning• Accessing location consumes battery: store location• CameraCaptureTask and testing on device: WPConnect tool• Push notification, for raw notification make sure to notifiy user
visually
![Page 29: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/29.jpg)
How things will be easier with “Mango”
• Tooling• Visual Studio tooling for Location• Profiler
• Tombstoning changes• Silverlight 4• Tile improvements for resetting tile• Tile and toast deep linking to a detailed opinion• Performance improvements
• More at http://live.visitmix.com
![Page 30: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/30.jpg)
Resources
• Windows Phone Training Kit• http://www.microsoft.com/downloads/en/details.aspx?
displaylang=en&FamilyID=ca23285f-bab8-47fa-b364-11553e076a9a
• Windows Azure Toolkit for Windows Phone 7• http://watoolkitwp7.codeplex.com
• OData for Windows Phone• http://odata.codeplex.com/releases/view/54698
• WP7 Contrib• http://wp7contrib.codeplex.com/
• MVVM Light• http://mvvmlight.codeplex.com/
![Page 31: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/31.jpg)
Stay up to date with MSDN Belux
• Register for our newsletters and stay up to date:http://www.msdn-newsletters.be• Technical updates• Event announcements and registration• Top downloads
• Follow our bloghttp://blogs.msdn.com/belux
• Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux
• LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux
Download MSDN/TechNet Desktop Gadget
http://bit.ly/msdntngadget
![Page 32: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/32.jpg)
TechDays 2011 On-Demand
• Watch this session on-demand via Channel9http://channel9.msdn.com/belux
• Download to your favorite MP3 or video player• Get access to slides and recommended resources by the speakers
![Page 33: Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End](https://reader035.vdocument.in/reader035/viewer/2022062305/56815c3b550346895dca31d3/html5/thumbnails/33.jpg)
THANK YOU