Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

•
•

The document is a presentation about building Windows 8 applications with HTML5 and JavaScript. It discusses the basics of creating Metro style apps, using the WinJS library and controls for the user interface, and key aspects of the Windows 8 platform like app lifecycles, charms, and contracts. It aims to help developers understand what is needed to add to their HTML5 skills to create Windows 8 apps, both by migrating existing apps and building new ones for the platform. The presentation includes demos of Windows 8 app functionality.

1 of 33
Download to read offline
Building Windows 8 Applications with HTML5 and JS Mihai Tătăran General Manager, Avaelgo Microsoft MVP mihai.tataran@hpc-consulting.ro www.codecamp.ro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
About • Owner, GM – Avaelgo (ex H.P.C. Consulting) – Custom software development – Consulting / training • Microsoft MVP • .NET community: www.codecamp.ro http://itcamp.ro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Objectives • Download and play with Windows 8 and VS 2011 Previews and SDK • Understand what you need to add upon your HTML 5 skills to build Windows 8 Metro apps – Migrating apps – New apps Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Agenda • Basic Metro apps • WinJS, Controls • Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
HTML 5 and Javascript • HTML5 • Indexed DB • App Cache • Web Workers • Canvas • SVG • FormData Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Metro apps • Only the HTML5 DOCTYPE • Single window • All the device’s screen • Access to Windows Runtime Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Metro apps: runtime HTML Host Process App Code App Container Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Demo • Simple app from scratch • Anatomy of an HTML5 app • Packaging and execution environment Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Agenda • Basic Metro apps • WinJS, Controls • Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
WinJS • The library for Metro style apps • Matches the Windows Metro design style • Designed for touch as well as traditional input • Scales across form factors Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
UI Controls • Designed for touch, mouse, keyboard • Everyday widgets • Text editing • Scrolling content • Presenting data • Commanding surfaces Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Everyday widgets - custom styled Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Text editing controls - behaviors Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Presenting data controls Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
ListView data templating (HTML) <div data-win-control="WinJS.Binding.Template" id="myTemplate" > <div style="width: 110px; margin: 10px"> <img data-win-bind="src: picture" style="height: 60px; width: 60px" /> <input type="button" data-win-bind="value: buttonText" /> </div> </div> <div height="400" data-win-control="WinJS.UI.ListView" id="listview1" data-win-options="{dataSource: myData, itemRenderer: myTemplate}"> </div> Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Demo (SDK) • UI Animation Sample • ListView interaction model sample Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Agenda • Basic Metro apps • WinJS, Controls • Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Process states App launch Splash screen Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Suspend state • No CPU, Disk or Network consumed • All threads are suspended • Apps remain in memory • Apps instantly resumed from suspend when brought to foreground • Exception: Background tasks Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Termination • System needs more memory • User switch occurs • System shutdown • Apps crash • Application is not notified Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Saving state • sessionState in WinJS • Windows.Storage.ApplicationData to save application state Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Saving / restoring state Scenario You should…. User is using your App Save user data incrementally App switched away from Save where the user is – what screen they are (Suspending) on, for example Not running App launched Bring the user back and restore their session as by user (Activated) if they never left Suspended App launched Do nothing by user (Resuming) Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Charms • Some kind of Start Bar • Ideal manner to use device’s settings • Or any other app specific settings Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Share contracts • Predefined contracts in Metro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Demo • App Bar (from SDK) • Windows 8 application states • Charms (Printing; Custom: Application Setting) • Share contracts (Share Dest app from SDK) Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Web Workers(*) Document Object (HTML Elements, CSS) Objects Attached To The Objects Attached To The Window Window (XMLHttpRequest, Navigator, (XMLHttpRequest, Navigator, Location Location Indexed Database, Web Sockets) Indexed Database, Web Sockets) Worker Global Scope Object Window Object JavaScript Engine JavaScript Engine Web Worker UI Thread Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Demo • Web Workers Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Resources • Build Conference: http://www.buildwindows.com/ • Metro Style applications resources: http://msdn.microsoft.com/en- us/windows/apps/ • Windows 8 Developer Preview: http://msdn.microsoft.com/en- us/windows/apps/br229516/ Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Objectives • Download and play with Windows 8 and VS 2011 Previews and SDK • Understand what you need to add upon your HTML 5 skills to build Windows 8 Metro apps – Migrating apps – New apps Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Misc • ITCamp 2012: www.itcamp.ro • Cursuri / Workshops – Publice – Azure, HTML 5, ASP.NET MVC, Silverlight, Entity Framework, etc Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
? Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
Thank you! Mihai.tataran@hpc-consulting.ro Twitter: @mihai_tataran Facebook Mihai Tătăran | Avaelgo Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro

More Related Content

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

  • 1. Building Windows 8 Applications with HTML5 and JS Mihai Tătăran General Manager, Avaelgo Microsoft MVP mihai.tataran@hpc-consulting.ro www.codecamp.ro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 2. About • Owner, GM – Avaelgo (ex H.P.C. Consulting) – Custom software development – Consulting / training • Microsoft MVP • .NET community: www.codecamp.ro http://itcamp.ro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 3. Objectives • Download and play with Windows 8 and VS 2011 Previews and SDK • Understand what you need to add upon your HTML 5 skills to build Windows 8 Metro apps – Migrating apps – New apps Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 4. Agenda • Basic Metro apps • WinJS, Controls • Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 5. HTML 5 and Javascript • HTML5 • Indexed DB • App Cache • Web Workers • Canvas • SVG • FormData Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 6. Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 7. Metro apps • Only the HTML5 DOCTYPE • Single window • All the device’s screen • Access to Windows Runtime Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 8. Metro apps: runtime HTML Host Process App Code App Container Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 9. Demo • Simple app from scratch • Anatomy of an HTML5 app • Packaging and execution environment Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 10. Agenda • Basic Metro apps • WinJS, Controls • Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 11. WinJS • The library for Metro style apps • Matches the Windows Metro design style • Designed for touch as well as traditional input • Scales across form factors Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 12. UI Controls • Designed for touch, mouse, keyboard • Everyday widgets • Text editing • Scrolling content • Presenting data • Commanding surfaces Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 13. Everyday widgets - custom styled Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 14. Text editing controls - behaviors Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 15. Presenting data controls Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 16. ListView data templating (HTML) <div data-win-control="WinJS.Binding.Template" id="myTemplate" > <div style="width: 110px; margin: 10px"> <img data-win-bind="src: picture" style="height: 60px; width: 60px" /> <input type="button" data-win-bind="value: buttonText" /> </div> </div> <div height="400" data-win-control="WinJS.UI.ListView" id="listview1" data-win-options="{dataSource: myData, itemRenderer: myTemplate}"> </div> Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 17. Demo (SDK) • UI Animation Sample • ListView interaction model sample Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 18. Agenda • Basic Metro apps • WinJS, Controls • Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 19. Process states App launch Splash screen Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 20. Suspend state • No CPU, Disk or Network consumed • All threads are suspended • Apps remain in memory • Apps instantly resumed from suspend when brought to foreground • Exception: Background tasks Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 21. Termination • System needs more memory • User switch occurs • System shutdown • Apps crash • Application is not notified Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 22. Saving state • sessionState in WinJS • Windows.Storage.ApplicationData to save application state Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 23. Saving / restoring state Scenario You should…. User is using your App Save user data incrementally App switched away from Save where the user is – what screen they are (Suspending) on, for example Not running App launched Bring the user back and restore their session as by user (Activated) if they never left Suspended App launched Do nothing by user (Resuming) Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 24. Charms • Some kind of Start Bar • Ideal manner to use device’s settings • Or any other app specific settings Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 25. Share contracts • Predefined contracts in Metro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 26. Demo • App Bar (from SDK) • Windows 8 application states • Charms (Printing; Custom: Application Setting) • Share contracts (Share Dest app from SDK) Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 27. Web Workers(*) Document Object (HTML Elements, CSS) Objects Attached To The Objects Attached To The Window Window (XMLHttpRequest, Navigator, (XMLHttpRequest, Navigator, Location Location Indexed Database, Web Sockets) Indexed Database, Web Sockets) Worker Global Scope Object Window Object JavaScript Engine JavaScript Engine Web Worker UI Thread Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 28. Demo • Web Workers Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 29. Resources • Build Conference: http://www.buildwindows.com/ • Metro Style applications resources: http://msdn.microsoft.com/en- us/windows/apps/ • Windows 8 Developer Preview: http://msdn.microsoft.com/en- us/windows/apps/br229516/ Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 30. Objectives • Download and play with Windows 8 and VS 2011 Previews and SDK • Understand what you need to add upon your HTML 5 skills to build Windows 8 Metro apps – Migrating apps – New apps Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 31. Misc • ITCamp 2012: www.itcamp.ro • Cursuri / Workshops – Publice – Azure, HTML 5, ASP.NET MVC, Silverlight, Entity Framework, etc Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 32. ? Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  • 33. Thank you! Mihai.tataran@hpc-consulting.ro Twitter: @mihai_tataran Facebook Mihai Tătăran | Avaelgo Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro