In this session we will look at accessing many of the great features of Windows 8 app development while using only HTML, CSS and JavaScript without feeling dirty.

1. Developing Windows 8 Applications
with HTML, CSS and JavaScript
Stacy Vicknair
Sparkhound
0

2. Welcome to Houston TechFest
Thank you for being a part of the
7th Annual 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:
1

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
2

4. ABOUT ME
Stacy Vicknair, MVP
Senior Development Consultant
Blog
http://www.wtfnext.com
Toastmasters
http://www.toastmasters.org
http://www.batonrougespeaks.com
Twitter: @svickn
Email: stacy.vicknair@sparkhound.com

5. “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
5

7. Windows Store App Stack
6

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
7

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
8

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

11. Available WinJS Controls
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
AppBar
BackButton
DatePicker
FlipView
Flyout
ListView
HtmlControl
ItemContainer
Menu
NavBar
10
PageControl
Rating
Repeater
SearchBox
SemanticZoom
SettingsFlyout
TimePicker
ToggleSwitch
Tooltip
ViewBox
x-ms-webview

12. Promises
• The gateway to asynchronous processing in Win8
HTML, CSS, and JS.
• Can assign callbacks via .then()
• Can wait on multiples with combine()
11

13. DEMO
• OOTB Blank Solution
• Adding Elements and Controls
• Promises
12

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 datawin-bind
• innerHtml
• style.<stylename>
• onclick
– Use WinJS.Binding.processAll(element, model)
13

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
14

16. DEMO
• Binding
• Saving and Resuming State
• Navigation
15

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
16

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
17

19. Resources and Links
Get codeSHOW() off of the App Store!
Developing Store Apps with JavaScript
http://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-windowsstore-apps-with-html5-jump-start#fbid=lvD_xqBRi1j
18

20. Please Leave Feedback During Q&A
If 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
19