330 likes | 492 Views
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
E N D
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 • Using Expression Blend for UI • Phone integration • Location services • Choosers & Launchers • Application Bar • Page Navigation • Databinding • Custom user controls
Elements of the Windows Phone 7 Application Platform Runtime – On “Screen” Tools Phone Emulator Sensors Media Data Location Samples Documentation Phone Xbox LIVE Notifications Guides Community .NET Framework managed code sandbox Packaging and Verification Tools SCREEN CLOUD Cloud Services Portal Services Notifications App Deployment Registration Marketplace Validation MO and CC Billing Location Identity Feeds Certification Business Intelligence Social Maps Publishing Update Management
Outloud Architecture WiFi … OutloudoData AggregatedOpinion MVVM Opinion SA Storage PushNotification: New Opinion OutloudPictures Screen The Cloud
Cloud: OutloudServices Client: Outloud Model
UI Guidelines and controls • Panorama style applications • Pivot style applications
MVVM – Main page (Pivot) Model MainPage OpinionsViewModel AggregatedOpinion Pivot all All nearby NearBy Appbar GeoCoordinateWatcher (via GPS Helper) boolIsDataLocationLoaded PropertyChanged
MVVM –Submit opinion control Model SubmitOpinionViewModel SubmitOpinion Submit (control) NewOpinion Step 1 ChosenPicture Opinion Step 2 CurrentGeoCoordinate MoodSelector(control) TakePicture (RelayCommand-MVVMLight) EventToCommand ButtonTakePicture SubmitOpinion (RelayCommand-MVVMLight) Step 3 EventToCommand Send CancelOpinion (RelayCommand-MVVMLight) Cancel EventToCommand …….. BoolVisibilityConverter IsSubmitting Step 4
MVVM – Main page and Submit opinion OutloudoDataclient MainPage OpinionsViewModel AggregatedOpinion Pivot AppBar Location with GeoCoordinateWatcher Opinion SubmitOpinionViewModel SubmitOpinion RelayCommand (MVVMLightICommand) EventToCommand (MVVMLight behavior)
MVVM Design data Model MainPage AllOpinionsViewModel NearByOpinionsViewModel OpinionsViewModel Pivot AggregatedOpinion AllAggregatedOpinions NearByAggregatedOpinions all …….. IsDataLoading BoolToVisbility nearby …….. BoolToVisbility IsDataLoading
MVVM Getting Real Data Model MainPage AllOpinionsViewModel NearByOpinionsViewModel OpinionsViewModel Pivot AggregatedOpinion AllAggregatedOpinions NearByAggregatedOpinions all OutloudoData …….. IsDataLoaded BoolToVisbility SA Storage AggregatedOpinions nearby …….. GetNearByOpinions BoolToVisbility IsDataLoaded
MVVM Master-Detail View NearByOpinionsViewModel SelectedAggregatedOpinion Model MainPage OpinionsViewModel Pivot AggregatedOpinion all AllOpinionsViewModel SelectionChanged OutloudoData SelectedAggregatedOpinion nearby SelectedItem SelectedItem SA Storage AggregatedOpinionVM AggregatedOpinion Name AverageMood List of Opinions WP7Contrib LastReplayMessenger <SelectedAggOpinion> AggregatedOpinion …….. IsDataLoading BoolToVisbility
Tombstoning • PhoneApplicationPage.State • PhoneApplicationService.State • App events • Application_Launching • Application_Activated • Application_Deactivated • Application_Closing
MVVM - CameraTask, Tombstoning and save real data Model SubmitOpinionViewModel SubmitOpinion Opinion Submit (control) NewOpinion Step 1 ChosenPicture Step 2 OutloudoData CurrentGeoCoordinate MoodSelector(control) Tombstone TakePicture (RelayCommand-MVVMLight) EventToCommand ButtonTakePicture SA Storage Tombstone (Visual State Manager) SubmitOpinion (RelayCommand-MVVMLight) Step 3 EventToCommand Send CancelOpinion (RelayCommand-MVVMLight) Cancel EventToCommand …….. BoolVisibilityConverter IsSubmitting Step 4
Camera integration and tombstoning Saving real data
MVVM - CameraTask, Tombstoning and save real data Model SubmitOpinionViewModel SubmitOpinion Opinion Submit (control) NewOpinion Step 1 ChosenPicture Step 2 OutloudoData CurrentGeoCoordinate MoodSelector(control) Tombstone TakePicture (RelayCommand-MVVMLight) EventToCommand ButtonTakePicture SA Storage Tombstone (Visual State Manager) SubmitOpinion (RelayCommand-MVVMLight) Step 3 EventToCommand Send CancelOpinion (RelayCommand-MVVMLight) Cancel EventToCommand …….. BoolVisibilityConverter IsSubmitting Step 4
Push Notification Model MainPage OpinionsViewModel Pivot Opinion Callback (Opinion) OutloudoData RegisterforNotifications Subscribe toNotifications NewOpinionArrived «Hotel A» New Opinion PropertyChanged Raw/Tile/Toast
Recap Push Notification Model MainPage OpinionsViewModel Pivot Opinion Callback (Opinion) OutloudoData RegisterforNotifications Subscribe toNotifications NewOpinionArrived «Hotel A» New Opinion PropertyChanged Raw/Tile/Toast
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 • Createdesign 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 http://live.visitmix.com
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/
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 DownloadMSDN/TechNet Desktop Gadgethttp://bit.ly/msdntngadget
TechDays 2011 On-Demand • Watchthis 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