![Page 1: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/1.jpg)
1
Developing Windows 8 Applications with HTML, CSS and JavaScript
Stacy VicknairSparkhound
![Page 2: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/2.jpg)
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!
![Page 3: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/3.jpg)
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
![Page 4: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/4.jpg)
ABOUT MEStacy Vicknair, MVPSenior Development Consultant
Bloghttp://www.wtfnext.com
Toastmastershttp://www.toastmasters.orghttp://www.batonrougespeaks.com
Twitter: @svicknEmail: [email protected]
![Page 5: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/5.jpg)
“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.
![Page 6: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/6.jpg)
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
![Page 7: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/7.jpg)
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++
![Page 8: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/8.jpg)
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
![Page 9: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/9.jpg)
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
![Page 10: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/10.jpg)
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.
![Page 11: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/11.jpg)
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
![Page 12: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/12.jpg)
12
Promises• The gateway to asynchronous processing in Win8
HTML, CSS, and JS.• Can assign callbacks via .then()• Can wait on multiples with combine()
![Page 13: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/13.jpg)
13
DEMO• OOTB Blank Solution• Adding Elements and Controls• Promises
![Page 14: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/14.jpg)
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)
![Page 15: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/15.jpg)
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
![Page 16: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/16.jpg)
16
DEMO• Binding• Saving and Resuming State• Navigation
![Page 17: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/17.jpg)
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
![Page 18: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/18.jpg)
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
![Page 19: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/19.jpg)
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
![Page 20: Developing Windows 8 Applications with HTML, CSS and JavaScript](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54bb86764a7959db278b45a6/html5/thumbnails/20.jpg)
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