1

Developing Windows 8 Applications with HTML, CSS and JavaScript

Stacy VicknairSparkhound

2

Welcome to Houston TechFest

• Please turn off all electronic devices or set them to vibrate.• If you must take a phone call, please do so in the lobby so as not

to disturb others.• Thanks to our Diamond Sponsors:

Thank you for being a part of the 7th Annual Houston TechFest!

3

Information• Speaker presentation slides will be available at

www.houstontechfest.org within a week

• Don’t forget to complete the Bingo card to be eligible for door prizes

ABOUT MEStacy Vicknair, MVPSenior Development Consultant

Bloghttp://www.wtfnext.com

Toastmastershttp://www.toastmasters.orghttp://www.batonrougespeaks.com

Twitter: @svicknEmail: stacy.vicknair@sparkhound.com

“BE A HERO. GROW A BEARD.”The Sparkhound Foundation is sponsoring the growth of facial hair to raise Prostate Cancer Awareness.

Through Septembeard we will raise funds for the research and treatment of prostate cancer.

Want to join us? Learn more at Septembeard.org.

6

Agenda• Windows Store App Stack• Why choose HTML, CSS, and JS?• Basic Project Structure• Adding Elements and Controls• Promises• Binding• State Management• Navigation• What’s coming in Windows 8.1?• Resources and Links

7

Windows Store App StackWindows Store Apps

Communication & Data

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

Syst

em S

ervi

ces

JavaScriptC++ C#VB

XAML HTML/CSSView

Mod

el

Cont

rolle

r

Windows Core OS ServicesCore

DirectX

C++

8

Why use HTML, CSS and JS?• You’re already well-versed in web development• Leverage familiar client-side libraries• You aren’t as familiar with XAML• The app only deals with web-based services

9

Basic Project Structure• package.appxmanifest– Set app-wide settings such as icons, tiles, capabilities,

declarations• WinJS– Adds controls, promises, animations, etc.

• HTML / CSS files– Act as the View

• JavaScript files– Act as the Model / Controller

10

Adding Elements and Controls• It’s HTML!– Basic Elements are the same ones you know already.• input, button, a…

– Wiring events is normal too.• Element.addEventListener(type, listener[, useCapture])• Element.onclick = function() {}• jQuery is an option, v2.0+

• More advanced controls included in the WinJS library.

11

• AppBar• BackButton• DatePicker• FlipView• Flyout• ListView• HtmlControl• ItemContainer• Menu• NavBar

• PageControl• Rating• Repeater• SearchBox• SemanticZoom• SettingsFlyout• TimePicker• ToggleSwitch• Tooltip• ViewBox• x-ms-webview

Available WinJS Controls

12

Promises• The gateway to asynchronous processing in Win8

HTML, CSS, and JS.• Can assign callbacks via .then()• Can wait on multiples with combine()

13

DEMO• OOTB Blank Solution• Adding Elements and Controls• Promises

14

Binding• Similar to Knockout bindings– BUT: Only one way binding

• Allows binding of objects to the HTML view• To perform bindings:– Specify the element component bindings with data-

win-bind• innerHtml• style.<stylename>• onclick

– Use WinJS.Binding.processAll(element, model)

15

Saving and Resuming State• From Windows.Storage.ApplicationData.current• Main types:– Temporary: No guarantee that this will last beyond the

current session• temporaryFolder• sessionState

– Local: Saved on Local Machine• localSettings• localFolder

– Roaming: Associated with the Windows Live account• roamingSettings, roamingFolder

16

DEMO• Binding• Saving and Resuming State• Navigation

17

What coming in Windows 8.1?• Improved Performance• Bundling to minimize app size• More Windows Sizes• Better ListViews / Drag and Drop support OOTB• New controls

http://msdn.microsoft.com/en-us/library/windows/apps/bg182410

18

Agenda• Windows Store App Stack• Why choose HTML, CSS, and JS?• Basic Project Structure• Adding Elements and Controls• Promises• Binding• State Management• Navigation• What’s coming in Windows 8.1?• Resources and Links

19

Resources and LinksGet codeSHOW() off of the App Store!

Developing Store Apps with JavaScripthttp://msdn.microsoft.com/en-us/library/windows/apps/br229565.aspx

Create Your First App:http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx

What’s New in 8.1:http://msdn.microsoft.com/en-us/library/windows/apps/bg182410

Samples:http://code.msdn.microsoft.com/windowsapps

Microsoft Virtual Academy:http://www.microsoftvirtualacademy.com/training-courses/developing-windows-store-apps-with-html5-jump-start#fbid=lvD_xqBRi1j

20

Please Leave Feedback During Q&AIf you leave session feedback and provide contact information, you will be qualified for a prize

Scan the QR code to the right or go to bit.ly/htf130415