SlideShare a Scribd company logo
1 of 33
#comdaybe




             Building the Windows 8
                 Community app
                         WiPhug
            Bart Lannoeye & Glenn Versweyveld
Who are we?

    Bart Lannoeye
    @bartlannoeye
    www.bartlannoeye.be/blog

    Glenn Versweyveld
    @depechie
    depblog.weblogs.us
Agenda
• The Windows 8 Community App
• The basic frame of your app
• Content first
• Layout & branding & some good
  practices
• Q&A
The Win8 Community App
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)
The Win8 Community App
 What did we build so far

demo
The basics

Build your (first) Win8 app
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
Data is the start of everything

Content first
Complex (cyclic) data model
                Usergroup       *               *   Session

                    *                               *         *

                                            1
                                    *                                *

 Location                           Event                         Speaker
            1               *
Our approach on data
• Lazy loading
  – Base object contains enough for tiles
  – Full object for the detail page
• REST Api
The data behind our app
 Walking through the REST API

demo
Consuming the REST API
• Async !
• Consider an extended splashscreen
• Lazy loading? Careful with references
  !
• Json.net vs built-in Json library
The data behind our app
 Consuming the REST Api

demo
Styling & branding

Build your (first) Win8 app
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
Styling, branding & practices
 Bing Maps

demo
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
Styling, branding & practices
 Image manipulation

demo
Image manipulation
• Get WriteableBitmapEx lib
• Use FromStream method to get
  image from Url
• Use Blit method for image
  manipulation
• Remark – Blue shade in current
Styling, branding & practices
 Flyout control

demo
Flyout in XAML
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
Some good practices

Build your (first) Win8 app
Integrate with charms
• Windows 8 provides charms, use
  them
• Share contract
• Search contract
• Settings
Share charms
• ShareManager class
  – Initialize in code behind of view
  – Initialize in ViewModel
• ShareDate class
  – Use to share content given from
    ViewModel
Styling, branding & practices
 Share contract

demo
Use resources
• Localization (worldwide market)
• Leverage resources for scaling
• XAML binding to resources
Styling, branding & practices
 Resources

demo
Takeaways
•   Content = Chrome !
•   Style & brand your app
•   Stick to the Design guidlines
•   Integrate with the Charms
•   Have fun !
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
Q&A
Building the Windows 8 Community app

Thank you!

More Related Content

Viewers also liked

Who’s using my apps
Who’s using my appsWho’s using my apps
Who’s using my appsbartlannoeye
 
Wi phug windows phone development from z to a
Wi phug   windows phone development from z to aWi phug   windows phone development from z to a
Wi phug windows phone development from z to abartlannoeye
 
Run your app on every Windows Phone 8.1 device in the world
Run your app on every Windows Phone 8.1 device in the worldRun your app on every Windows Phone 8.1 device in the world
Run your app on every Windows Phone 8.1 device in the worldbartlannoeye
 
Live mesh & live framework
Live mesh & live frameworkLive mesh & live framework
Live mesh & live frameworkbartlannoeye
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your BusinessBarry Feldman
 

Viewers also liked (7)

GET-Greece
GET-GreeceGET-Greece
GET-Greece
 
Who’s using my apps
Who’s using my appsWho’s using my apps
Who’s using my apps
 
Wi phug windows phone development from z to a
Wi phug   windows phone development from z to aWi phug   windows phone development from z to a
Wi phug windows phone development from z to a
 
Webothon Haiti
Webothon  HaitiWebothon  Haiti
Webothon Haiti
 
Run your app on every Windows Phone 8.1 device in the world
Run your app on every Windows Phone 8.1 device in the worldRun your app on every Windows Phone 8.1 device in the world
Run your app on every Windows Phone 8.1 device in the world
 
Live mesh & live framework
Live mesh & live frameworkLive mesh & live framework
Live mesh & live framework
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similar to Building the windows 8 community app

Nike pop up habitat
Nike pop up   habitatNike pop up   habitat
Nike pop up habitatChef
 
Introduction to Buildpacks.io Presentation
Introduction to Buildpacks.io PresentationIntroduction to Buildpacks.io Presentation
Introduction to Buildpacks.io PresentationKnoldus Inc.
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsJimit Shah
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo MobileAndrew Ferrier
 
Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1drudolph11
 
IBM Mobile Foundation POT - Part 2 introduction to application development wi...
IBM Mobile Foundation POT - Part 2 introduction to application development wi...IBM Mobile Foundation POT - Part 2 introduction to application development wi...
IBM Mobile Foundation POT - Part 2 introduction to application development wi...AIP Foundation
 
Developing Tizen OS Based Solutions (IDF13) - Chris Norman
Developing Tizen OS Based Solutions (IDF13) - Chris NormanDeveloping Tizen OS Based Solutions (IDF13) - Chris Norman
Developing Tizen OS Based Solutions (IDF13) - Chris NormanRyo Jin
 
Introduction to Android Development and Security
Introduction to Android Development and SecurityIntroduction to Android Development and Security
Introduction to Android Development and SecurityKelwin Yang
 
(WPF + WinForms) * .NET Core = Modern Desktop
(WPF + WinForms) * .NET Core = Modern Desktop(WPF + WinForms) * .NET Core = Modern Desktop
(WPF + WinForms) * .NET Core = Modern DesktopOren Novotny
 
Feed Herny developer training : crossplatform and HTML5
Feed Herny developer training : crossplatform and  HTML5Feed Herny developer training : crossplatform and  HTML5
Feed Herny developer training : crossplatform and HTML5Mobile Monday Brussels
 
Sitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helixSitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helixPeter Nazarov
 
Build 2017 - Whats new for Xamarin Devs
Build 2017 - Whats new for Xamarin DevsBuild 2017 - Whats new for Xamarin Devs
Build 2017 - Whats new for Xamarin DevsMike James
 
Android Application WebAPI Development Training
Android Application WebAPI Development TrainingAndroid Application WebAPI Development Training
Android Application WebAPI Development TrainingOESF Education
 
Proactive Security AppSec Case Study
Proactive Security AppSec Case StudyProactive Security AppSec Case Study
Proactive Security AppSec Case StudyAndy Hoernecke
 
Google Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talkGoogle Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talkImam Raza
 
Docker at and with SignalFx
Docker at and with SignalFxDocker at and with SignalFx
Docker at and with SignalFxSignalFx
 
Product Release Webinar- WSO2 Developer Studio 3.5
Product Release Webinar- WSO2 Developer Studio 3.5Product Release Webinar- WSO2 Developer Studio 3.5
Product Release Webinar- WSO2 Developer Studio 3.5WSO2
 
321 codeincontainer brewbox
321 codeincontainer brewbox321 codeincontainer brewbox
321 codeincontainer brewboxLino Telera
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();dotNet Miami
 

Similar to Building the windows 8 community app (20)

Nike pop up habitat
Nike pop up   habitatNike pop up   habitat
Nike pop up habitat
 
Introduction to Buildpacks.io Presentation
Introduction to Buildpacks.io PresentationIntroduction to Buildpacks.io Presentation
Introduction to Buildpacks.io Presentation
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
 
Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1
 
IBM Mobile Foundation POT - Part 2 introduction to application development wi...
IBM Mobile Foundation POT - Part 2 introduction to application development wi...IBM Mobile Foundation POT - Part 2 introduction to application development wi...
IBM Mobile Foundation POT - Part 2 introduction to application development wi...
 
Developing Tizen OS Based Solutions (IDF13) - Chris Norman
Developing Tizen OS Based Solutions (IDF13) - Chris NormanDeveloping Tizen OS Based Solutions (IDF13) - Chris Norman
Developing Tizen OS Based Solutions (IDF13) - Chris Norman
 
Introduction to Android Development and Security
Introduction to Android Development and SecurityIntroduction to Android Development and Security
Introduction to Android Development and Security
 
(WPF + WinForms) * .NET Core = Modern Desktop
(WPF + WinForms) * .NET Core = Modern Desktop(WPF + WinForms) * .NET Core = Modern Desktop
(WPF + WinForms) * .NET Core = Modern Desktop
 
Feed Herny developer training : crossplatform and HTML5
Feed Herny developer training : crossplatform and  HTML5Feed Herny developer training : crossplatform and  HTML5
Feed Herny developer training : crossplatform and HTML5
 
Sitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helixSitecore development approach evolution – destination helix
Sitecore development approach evolution – destination helix
 
Build 2017 - Whats new for Xamarin Devs
Build 2017 - Whats new for Xamarin DevsBuild 2017 - Whats new for Xamarin Devs
Build 2017 - Whats new for Xamarin Devs
 
Android Application WebAPI Development Training
Android Application WebAPI Development TrainingAndroid Application WebAPI Development Training
Android Application WebAPI Development Training
 
Docker {at,with} SignalFx
Docker {at,with} SignalFxDocker {at,with} SignalFx
Docker {at,with} SignalFx
 
Proactive Security AppSec Case Study
Proactive Security AppSec Case StudyProactive Security AppSec Case Study
Proactive Security AppSec Case Study
 
Google Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talkGoogle Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talk
 
Docker at and with SignalFx
Docker at and with SignalFxDocker at and with SignalFx
Docker at and with SignalFx
 
Product Release Webinar- WSO2 Developer Studio 3.5
Product Release Webinar- WSO2 Developer Studio 3.5Product Release Webinar- WSO2 Developer Studio 3.5
Product Release Webinar- WSO2 Developer Studio 3.5
 
321 codeincontainer brewbox
321 codeincontainer brewbox321 codeincontainer brewbox
321 codeincontainer brewbox
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();
 

Recently uploaded

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetHyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetEnjoy Anytime
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Hyundai Motor Group
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 

Recently uploaded (20)

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetHyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 

Building the windows 8 community app

  • 1. #comdaybe Building the Windows 8 Community app WiPhug Bart Lannoeye & Glenn Versweyveld
  • 2. Who are we? Bart Lannoeye @bartlannoeye www.bartlannoeye.be/blog Glenn Versweyveld @depechie depblog.weblogs.us
  • 3. Agenda • The Windows 8 Community App • The basic frame of your app • Content first • Layout & branding & some good practices • Q&A
  • 5. 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)
  • 6. The Win8 Community App What did we build so far demo
  • 7. The basics Build your (first) Win8 app
  • 8. 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
  • 9. Data is the start of everything Content first
  • 10. Complex (cyclic) data model Usergroup * * Session * * * 1 * * Location Event Speaker 1 *
  • 11. Our approach on data • Lazy loading – Base object contains enough for tiles – Full object for the detail page • REST Api
  • 12. The data behind our app Walking through the REST API demo
  • 13. Consuming the REST API • Async ! • Consider an extended splashscreen • Lazy loading? Careful with references ! • Json.net vs built-in Json library
  • 14. The data behind our app Consuming the REST Api demo
  • 15. Styling & branding Build your (first) Win8 app
  • 16. 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
  • 17. Styling, branding & practices Bing Maps demo
  • 18. 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
  • 19. Styling, branding & practices Image manipulation demo
  • 20. Image manipulation • Get WriteableBitmapEx lib • Use FromStream method to get image from Url • Use Blit method for image manipulation • Remark – Blue shade in current
  • 21. Styling, branding & practices Flyout control demo
  • 23. 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
  • 24. Some good practices Build your (first) Win8 app
  • 25. Integrate with charms • Windows 8 provides charms, use them • Share contract • Search contract • Settings
  • 26. Share charms • ShareManager class – Initialize in code behind of view – Initialize in ViewModel • ShareDate class – Use to share content given from ViewModel
  • 27. Styling, branding & practices Share contract demo
  • 28. Use resources • Localization (worldwide market) • Leverage resources for scaling • XAML binding to resources
  • 29. Styling, branding & practices Resources demo
  • 30. Takeaways • Content = Chrome ! • Style & brand your app • Stick to the Design guidlines • Integrate with the Charms • Have fun !
  • 31. 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
  • 32. Q&A
  • 33. Building the Windows 8 Community app Thank you!

Editor's Notes

  1. http://www.bartlannoeye.be/bloghttp://depblog.weblogs.us
  2. Why did we build the app ? What did we build so far (demo) ?Data is most important aspect in Win8 -> data layer firstBuilding a Win8 appMVVM – navigationRetrieving data asyncXAML (labels, ...)Maps, flyout, appbar, share contract, resources, ...
  3. By Glenn?
  4. Glenn
  5. Glenn
  6. By Bart
  7. Glenn
  8. By Bart
  9. By Glenn
  10. SDK link: http://visualstudiogallery.msdn.microsoft.com/0c341dfb-4584-4738-949c-daf55b82df58/Key link: http://www.bingmapsportal.com/References: Bing Maps for C#, C++, or Visual Basic and Microsoft Visual C++ Runtime Package ( both from Windows > Extension )Show App.xaml for keyShow EventDetailPage.xaml for LocationPanel ( stackpanel ) > Added Map controlCurrently no Porperty binding in RP release... > So we set the pushpin in the code behindhttp://social.msdn.microsoft.com/Forums/et-EE/bingmapswindows8/thread/e9126684-a22b-46d5-82d9-23ab4d95870fhttp://social.msdn.microsoft.com/Forums/en-US/bingmapswindows8/thread/e8c52173-8900-4da2-a07b-485c96404099
  11. By Glenn
  12. WriteableBitmapEx lib: http://writeablebitmapex.codeplex.com/Currently in the WinRT release there is some code in the FromStream method the swaps the Blue with the Red channel! Still need to verify the code to get a fix!Cfr tweets from René Schulte > http://www.twitter.com/rschu/status/214432418789212160 and http://www.twitter.com/rschu/status/214434170921955328
  13. By Glenn
  14. No, there is STILL no Flyout control in XAMLhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx > No XAML only JS
  15. Show UpcomingEventsPage.xaml > ShowFlyoutMenu method triggered from Click on AppBar iconShow UpcomingEventsPage.xaml.cs > Show ShowFlyoutMenu method where we add a Menu with ToggleMenuItems in the control
  16. By Bart
  17. By Bart
  18. Data = IMPORTANTNot all apps should be black and white, make them attractiveStick to the guidelines (margins, app bar, ...)Use the power of the Win8 platform and integrate with charms
  19. Twitter:@bartlannoeye@Depechie