Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End

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

CLOUD SCREEN Phone Emulator SamplesDocumentation GuidesCommunity Packaging and Verification Tools Notifications LocationIdentityFeeds 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 SensorsMediaData Xbox LIVENotifications.NET Framework managed code sandbox Location Phone Runtime – On “Screen”

Outloud Architecture ScreenThe Cloud Opinion WiFi MVVM … Outloud Pictures Push Notification: New Opinion OutloudoData SA Storage Aggregated Opinion

DEMO Cloud: Outloud Services Client: Outloud Model

MVVM > The Model Opinion id mood name latitude longitude description dser pictureURL AggregatedOpinion name numberofopinions averagemood

Outloud MVVM Model View-Model View Opinion Entity (EF)SubmitOpinionViewModel OpinionsViewModel AggregatedOpinionViewModel OpinionViewModel SubmitOpinion MainPage AggregatedOpinion DetailedOpinion MVVM Options: Hand Coded Frameworks: Laurent Bugnion’s Light MVVM: Nikhilk Kothari’s FX Framework: Michael Sync’s Silverlight MVVM Toolkit:

UI Guidelines and controls Panorama style applications Pivot style applications

MVVM – Main page (Pivot) Model AggregatedOpinion MainPage Pivot all nearby Appbar OpinionsViewModel bool IsDataLocationLoaded NearBy All PropertyChanged GeoCoordinateWatcher (via GPS Helper) GeoCoordinateWatcher (via GPS Helper)

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

DEMO Main page and a user control

MVVM – Main page and Submit opinion SubmitOpini on MainPage OutloudoDataclient AggregatedOpinion OpinionsViewMod el SubmitOpinionVie wModel RelayCommand (MVVMLight ICommand) EventToCommand (MVVMLight behavior) Opinion Location with GeoCoordinateWatch er Pivot AppBar

MVVM Design data Model AggregatedOpinion OpinionsViewModel AllOpinionsViewModel AllAggregatedOpinions IsDataLoading NearByOpinionsViewModel NearByAggregatedOpinions IsDataLoading BoolToVisbility MainPage Pivot all nearby …….. BoolToVisbility

DEMO Design Data

MVVM Getting Real Data Model AggregatedOpinion OpinionsViewModel AllOpinionsViewModel AllAggregatedOpinions IsDataLoaded NearByOpinionsViewModel NearByAggregatedOpinions IsDataLoaded BoolToVisbility MainPage Pivot all nearby …….. BoolToVisbility OutloudoData SA Storage AggregatedOpinions GetNearByOpinions

Navigating master-detail

MVVM Master-Detail View Model AggregatedOpinion OpinionsViewModel AllOpinionsViewModel SelectedAggregatedOpinion NearByOpinionsViewModel SelectedAggregatedOpinion SelectedItem MainPage Pivot all nearby SelectedItem WP7Contrib LastReplayMessenger AggregatedOpinion Name AverageMood List of Opinions AggregatedOpinion Name AverageMood List of Opinions AggregatedOpinionVM AggregatedOpinion IsDataLoading …….. BoolToVisbility SelectionChanged OutloudoData SA Storage

DEMO Real data and navigation

Tombstoning PhoneApplicationPage.State PhoneApplicationService.State App events Application_Launching Application_Activated Application_Deactivated Application_Closing

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 Tombstone (Visual State Manager) Tombstone (Visual State Manager) OutloudoData SA Storage

DEMO Camera integration and tombstoning Saving real data

List of choosers and launchers Launchers BingMapsTask MarketplaceDetailTask MarketplaceHubTask MarketplaceReviewTask MarketplaceSearchTask MediaPlayerLauncher PhoneCallTask Save AddressTask SavePhoneNumberTask (cont’d) SearchTask ComposeTask SMSComposeTask WebBrowserTask Choosers CameraCaptureTask PhoneNumberChooserTask PhotoChooserTask AddressChooserTask

DEMO Saving real data

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 Tombstone (Visual State Manager) Tombstone (Visual State Manager) OutloudoData SA Storage

Push Notification Model Opinion OpinionsViewModel MainPage Pivot «Hotel A» NewOpinionArrived Callback (Opinion) New Opinion OutloudoData Register for Notifications Subscribe to Notifications PropertyChanged Raw/Tile/Toast

DEMO out.loud Push Notification

Recap Push Notification Model Opinion OpinionsViewModel MainPage Pivot «Hotel A» NewOpinionArrived Callback (Opinion) New Opinion OutloudoData Register for Notifications Subscribe to Notifications PropertyChanged Raw/Tile/Toast

WHAT’S MISSING?

DEMO Back key press

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...

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

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

Resources Windows Phone Training Kit aylang=en&FamilyID=ca23285f-bab8-47fa-b e076a9a Windows Azure Toolkit for Windows Phone 7 OData for Windows Phone WP7 Contrib MVVM Light

Stay up to date with MSDN Belux Register for our newsletters and stay up to date: Technical updates Event announcements and registration Top downloads Follow our blog Join us on Facebook LinkedIn: Download MSDN/TechNet Desktop Gadget

TechDays 2011 On-Demand Watch this session on-demand via Channel9 Download to your favorite MP3 or video player Get access to slides and recommended resources by the speakers

THANK YOU