Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

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

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 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: 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

Process states ApplaunchSplashscreen 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 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

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 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

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.roTwitter: @mihai_tataranFacebookMihai Tătăran | Avaelgo Premium conference on Microsoft’s Dev and ITPro technologies @itcampro / #itcampro

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

by ITCamp Romania on Dec 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 17

Statistics

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS — Presentation Transcript