Slide 1

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

Slide 2

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

Slide 3

Slide 4

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

Slide 5

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

Slide 6

DEMO Cloud: Outloud Services Client: Outloud Model

Slide 7

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

Slide 8

Outloud MVVM Model View-Model View Opinion Entity (EF)SubmitOpinionViewModel OpinionsViewModel AggregatedOpinionViewModel OpinionViewModel SubmitOpinion MainPage AggregatedOpinion DetailedOpinion MVVM Options: Hand Coded Frameworks: Laurent Bugnions Light MVVM: http://www.galasoft.ch/mvvm/getstarted/ Nikhilk Kotharis FX Framework: http://projects.nikhilk.net/SilverlightFX Michael Syncs Silverlight MVVM Toolkit: http://silverlightmvvm.codeplex.com/

Slide 9

UI Guidelines and controls Panorama style applications Pivot style applications

Slide 10

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)

Slide 11

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

Slide 12

DEMO Main page and a user control

Slide 13

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

Slide 14

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

Slide 15

DEMO Design Data

Slide 16

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

Slide 17

Navigating master-detail

Slide 18

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

Slide 19

DEMO Real data and navigation

Slide 20

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

Slide 21

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

Slide 22

DEMO Camera integration and tombstoning Saving real data

Slide 23

List of choosers and launchers Launchers BingMapsTask MarketplaceDetailTask MarketplaceHubTask MarketplaceReviewTask MarketplaceSearchTask MediaPlayerLauncher PhoneCallTask SaveEmailAddressTask SavePhoneNumberTask (contd) SearchTask EmailComposeTask SMSComposeTask WebBrowserTask Choosers CameraCaptureTask PhoneNumberChooserTask PhotoChooserTask EmailAddressChooserTask

Slide 24

DEMO Saving real data

Slide 25

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

Slide 26

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

Slide 27

DEMO out.loud Push Notification

Slide 28

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

Slide 29

WHATS MISSING?

Slide 30

DEMO Back key press

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

Resources Windows Phone Training Kit http://www.microsoft.com/downloads/en/details.aspx?displ aylang=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/

Slide 35

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 blog http://blogs.msdn.com/belux Join us on Facebook http://www.facebook.com/msdnbe http://www.facebook.com/msdnbelux LinkedIn: http://linkd.in/msdnbelux/ Twitter: @msdnbelux Download MSDN/TechNet Desktop Gadget http://bit.ly/msdntngadget

Slide 36

TechDays 2011 On-Demand Watch this session on-demand via Channel9 http://channel9.msdn.com/belux Download to your favorite MP3 or video player Get access to slides and recommended resources by the speakers

Slide 37

THANK YOU