Upload
stacy-vicknair
View
971
Download
1
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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: [email protected]
“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