Building the windows 8 community app
-
Upload
bartlannoeye -
Category
Technology
-
view
900 -
download
2
description
Transcript of Building the windows 8 community app
![Page 1: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/1.jpg)
#comdaybe
Building the Windows 8 Community app
WiPhugBart Lannoeye & Glenn
Versweyveld
![Page 3: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/3.jpg)
Agenda
• The Windows 8 Community App• The basic frame of your app• Content first• Layout & branding & some good
practices• Q&A
![Page 4: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/4.jpg)
The Win8 Community App
![Page 5: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/5.jpg)
Why this app?
• So many communities with their events
• Windows 8 = hot topic• Idea sprung as topic for Win8
hackaton• We know XAML (as WP7 devs)• #sharingiscaring
![Page 6: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/6.jpg)
demoWhat did we build so far
The Win8 Community App
![Page 7: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/7.jpg)
Build your (first) Win8 app
The basics
![Page 8: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/8.jpg)
Using MVVM (Light)
• Get the NuGet for MVVM Light• Add your ViewModel registrations in
ViewModelLocator• Set ViewModelLocator in App.xaml• Bind View DataContext to your
ViewModel
![Page 9: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/9.jpg)
Content firstData is the start of everything
![Page 10: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/10.jpg)
Complex (cyclic) data model
Usergroup
Event
Session
SpeakerLocation*
*
* *
*
**
1
1
*
![Page 11: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/11.jpg)
Our approach on data
• Lazy loading–Base object contains enough for
tiles–Full object for the detail page
• REST Api
![Page 12: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/12.jpg)
demoWalking through the REST API
The data behind our app
![Page 13: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/13.jpg)
Consuming the REST API
• Async !• Consider an extended
splashscreen• Lazy loading? Careful with
references !• Json.net vs built-in Json library
![Page 14: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/14.jpg)
demoConsuming the REST Api
The data behind our app
![Page 15: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/15.jpg)
Build your (first) Win8 app
Styling & branding
![Page 16: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/16.jpg)
Styling & branding
• Personalize your app !• Use VS app template• There will be a Common folder
with StandardStyles.xaml• We derived our own from those
StandardStyles
![Page 17: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/17.jpg)
demoBing Maps
Styling, branding & practices
![Page 18: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/18.jpg)
Bing Maps
• Install Bing Maps SDK for Metro• Get a Bing Maps key & put it in
App.xaml• Add references• Choose a Platform!–ARM, x86 or x64 > Not Any CPU
![Page 19: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/19.jpg)
demoImage manipulation
Styling, branding & practices
![Page 20: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/20.jpg)
Image manipulation
• Get WriteableBitmapEx lib• Use FromStream method to get
image from Url• Use Blit method for image
manipulation• Remark – Blue shade in current
release
![Page 21: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/21.jpg)
demoFlyout control
Styling, branding & practices
![Page 22: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/22.jpg)
Flyout in XAML
![Page 23: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/23.jpg)
Flyout in XAML
• Get Callisto library• Add event to a control to trigger
Flyout• In code set Placement where you
need it on the page• Add controls you like
![Page 24: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/24.jpg)
Build your (first) Win8 app
Some good practices
![Page 25: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/25.jpg)
Integrate with charms
• Windows 8 provides charms, use them
• Share contract• Search contract• Settings
![Page 26: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/26.jpg)
Share charms
• ShareManager class– Initialize in code behind of view– Initialize in ViewModel
• ShareDate class–Use to share content given from
ViewModel
![Page 27: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/27.jpg)
demoShare contract
Styling, branding & practices
![Page 28: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/28.jpg)
Use resources
• Localization (worldwide market)• Leverage resources for scaling• XAML binding to resources
![Page 29: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/29.jpg)
demoResources
Styling, branding & practices
![Page 30: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/30.jpg)
Takeaways
• Content = Chrome !• Style & brand your app• Stick to the Design guidlines• Integrate with the Charms• Have fun !
![Page 31: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/31.jpg)
Resources• Bing Maps
– http://visualstudiogallery.msdn.microsoft.com/0c341dfb-4584-4738-949c-daf55b82df58/
– http://msdn.microsoft.com/en-us/library/ff428642.aspx ( How to get a Bing Maps key )
– http://www.bingmapsportal.com/– http://social.msdn.microsoft.com/Forums/en-US/category/bingmaps
• WriteableBitmapEx– http://writeablebitmapex.codeplex.com
• Callisto– https://github.com/timheuer/callisto
![Page 32: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/32.jpg)
Q&A
![Page 33: Building the windows 8 community app](https://reader033.fdocuments.in/reader033/viewer/2022052410/547bfd06b4af9faa158b4fe9/html5/thumbnails/33.jpg)
Thank you!Building the Windows 8 Community app