Building Windows 8 Applications       with HTML5 and JS                                                              Mihai...
About• Owner, GM – Avaelgo (ex H.P.C.  Consulting)  – Custom software development  – Consulting / training• Microsoft MVP•...
Objectives• Download and play with Windows  8 and VS 2011 Previews and SDK• Understand what you need to add  upon your HTM...
Agenda• Basic Metro apps• WinJS, Controls• Windows 8 platform     Premium conference on Microsoft’s Dev and ITPro technolo...
HTML 5 and Javascript•   HTML5•   Indexed DB•   App Cache•   Web Workers•   Canvas•   SVG•   FormData       Premium confer...
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       Premiu...
Metro apps: runtime                                                      HTML Host Process                                ...
Demo• Simple app from scratch• Anatomy of an HTML5 app• Packaging and execution environment        Premium conference on M...
Agenda• Basic Metro apps• WinJS, Controls• Windows 8 platform     Premium conference on Microsoft’s Dev and ITPro technolo...
WinJS• The library for Metro style apps• Matches the Windows Metro design style• Designed for touch as well as traditional...
UI Controls• Designed for touch, mouse, keyboard• Everyday widgets• Text editing• Scrolling content• Presenting data• Comm...
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 controlsPremium 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: 11...
Demo (SDK)• UI Animation Sample• ListView interaction model sample        Premium conference on Microsoft’s Dev and ITPro ...
Agenda• Basic Metro apps• WinJS, Controls• Windows 8 platform     Premium conference on Microsoft’s Dev and ITPro technolo...
Process states  ApplaunchSplashscreen         Premium conference on Microsoft’s Dev and ITPro technologies   @itcampro / #...
Suspend state•   No CPU, Disk or Network consumed•   All threads are suspended•   Apps remain in memory•   Apps instantly ...
Termination•   System needs more memory•   User switch occurs•   System shutdown•   Apps crash• Application is not notifie...
Saving state• sessionState in WinJS• Windows.Storage.ApplicationData to save  application state      Premium conference on...
Saving / restoring stateScenario                              You should….User is using your App                Save user ...
Charms• Some kind of Start Bar• Ideal manner to use device’s settings• Or any other app specific settings      Premium con...
Share contracts• Predefined contracts in Metro      Premium conference on Microsoft’s Dev and ITPro technologies   @itcamp...
Demo•   App Bar (from SDK)•   Windows 8 application states•   Charms (Printing; Custom: Application Setting)•   Share cont...
Web Workers(*)                                                                       Document Object                      ...
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...
Objectives• Download and play with Windows  8 and VS 2011 Previews and SDK• Understand what you need to add  upon your HTM...
Misc• ITCamp 2012: www.itcamp.ro• Cursuri / Workshops  – Publice  – Azure, HTML 5, ASP.NET MVC, Silverlight,    Entity Fra...
?Premium conference on Microsoft’s Dev and ITPro technologies   @itcampro / #itcampro
Thank you!Mihai.tataran@hpc-consulting.roTwitter: @mihai_tataranFacebookMihai Tătăran | Avaelgo        Premium conference ...
Upcoming SlideShare
Loading in...5
×

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

2,664

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,664
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

  1. 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. 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. 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. 4. Agenda• Basic Metro apps• WinJS, Controls• Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  5. 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. 6. Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  7. 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. 8. Metro apps: runtime HTML Host Process App Code App Container Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  9. 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. 10. Agenda• Basic Metro apps• WinJS, Controls• Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  11. 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. 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. 13. Everyday widgets - custom styled Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  14. 14. Text editing controls - behaviors Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  15. 15. Presenting data controlsPremium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  16. 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. 17. Demo (SDK)• UI Animation Sample• ListView interaction model sample Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  18. 18. Agenda• Basic Metro apps• WinJS, Controls• Windows 8 platform Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  19. 19. Process states ApplaunchSplashscreen Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  20. 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. 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. 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. 23. Saving / restoring stateScenario You should….User is using your App Save user data incrementallyApp switched away from Save where the user is – what screen they are(Suspending) on, for exampleNot running App launched Bring the user back and restore their session asby user (Activated) if they never leftSuspended App launched Do nothingby user (Resuming) Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  24. 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. 25. Share contracts• Predefined contracts in Metro Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  26. 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. 27. Web Workers(*) Document Object (HTML Elements, CSS) Objects Attached To TheObjects Attached To The Window Window (XMLHttpRequest, Navigator, (XMLHttpRequest, Navigator, Location LocationIndexed 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. 28. Demo• Web Workers Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  29. 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. 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. 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. 32. ?Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  33. 33. Thank you!Mihai.tataran@hpc-consulting.roTwitter: @mihai_tataranFacebookMihai Tătăran | Avaelgo Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×