Mihai Tataran - Building Windows 8 Applications with HTML5 and JS
-
Upload
itcamp -
Category
Technology
-
view
2.619 -
download
4
Transcript of Mihai Tataran - Building Windows 8 Applications with HTML5 and JS
![Page 1: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/1.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Building Windows 8 Applications with HTML5 and JS
Mihai Tătăran General Manager, Avaelgo
Microsoft MVP
www.codecamp.ro
![Page 2: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/2.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
About
• Owner, GM – Avaelgo (ex H.P.C. Consulting)
– Custom software development
– Consulting / training
• Microsoft MVP
• .NET community: www.codecamp.ro http://itcamp.ro
![Page 3: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/3.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
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
![Page 4: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/4.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Agenda
• Basic Metro apps
• WinJS, Controls
• Windows 8 platform
![Page 5: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/5.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
HTML 5 and Javascript
• HTML5
• Indexed DB
• App Cache
• Web Workers
• Canvas
• SVG
• FormData
![Page 6: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/6.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
![Page 7: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/7.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Metro apps
• Only the HTML5 DOCTYPE
• Single window
• All the device’s screen
• Access to Windows Runtime
![Page 8: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/8.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Metro apps: runtime
App Container
HTML Host Process
App Code
![Page 9: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/9.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Demo
• Simple app from scratch
• Anatomy of an HTML5 app
• Packaging and execution environment
![Page 10: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/10.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Agenda
• Basic Metro apps
• WinJS, Controls
• Windows 8 platform
![Page 11: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/11.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
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
![Page 12: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/12.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
UI Controls
• Designed for touch, mouse, keyboard
• Everyday widgets
• Text editing
• Scrolling content
• Presenting data
• Commanding surfaces
![Page 13: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/13.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Everyday widgets - custom styled
![Page 14: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/14.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Text editing controls - behaviors
![Page 15: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/15.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Presenting data controls
![Page 16: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/16.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
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>
![Page 17: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/17.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Demo (SDK) • UI Animation Sample
• ListView interaction model sample
![Page 18: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/18.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Agenda
• Basic Metro apps
• WinJS, Controls
• Windows 8 platform
![Page 19: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/19.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Process states
App launch
Splash screen
![Page 20: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/20.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
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
![Page 21: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/21.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Termination
• System needs more memory
• User switch occurs
• System shutdown
• Apps crash
• Application is not notified
![Page 22: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/22.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Saving state
• sessionState in WinJS
• Windows.Storage.ApplicationData to save application state
![Page 23: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/23.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Saving / restoring state
Scenario You should….
User is using your App Save user data incrementally
App switched away from (Suspending)
Save where the user is – what screen they are on, for example
Not running App launched by user (Activated)
Bring the user back and restore their session as if they never left
Suspended App launched by user (Resuming)
Do nothing
![Page 24: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/24.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Charms
• Some kind of Start Bar
• Ideal manner to use device’s settings
• Or any other app specific settings
![Page 25: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/25.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Share contracts
• Predefined contracts in Metro
![Page 26: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/26.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Demo • App Bar (from SDK)
• Windows 8 application states
• Charms (Printing; Custom: Application Setting)
• Share contracts (Share Dest app from SDK)
![Page 27: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/27.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Web Workers(*)
UI Thread
Window Object
Objects Attached To The Window
(XMLHttpRequest, Navigator, Location
Indexed Database, Web Sockets)
Document Object (HTML Elements, CSS)
JavaScript Engine
Web Worker
JavaScript Engine
Worker Global Scope Object
Objects Attached To The Window (XMLHttpRequest, Navigator,
Location Indexed Database, Web Sockets)
![Page 28: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/28.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Demo • Web Workers
![Page 29: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/29.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
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/
![Page 30: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/30.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
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
![Page 31: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/31.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Misc
• ITCamp 2012: www.itcamp.ro
• Cursuri / Workshops
– Publice
– Azure, HTML 5, ASP.NET MVC, Silverlight, Entity Framework, etc
![Page 32: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/32.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
?
![Page 33: Mihai Tataran - Building Windows 8 Applications with HTML5 and JS](https://reader033.fdocuments.net/reader033/viewer/2022060109/55526717b4c9052e1f8b4fa6/html5/thumbnails/33.jpg)
@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies
Thank you!
Twitter: @mihai_tataran
Mihai Tătăran | Avaelgo