Your SlideShare is downloading. ×
0
Developing Windows 8 Applications
with HTML, CSS and JavaScript

Stacy Vicknair
Sparkhound
0
Welcome to Houston TechFest
Thank you for being a part of the
7th Annual Houston TechFest!
• Please turn off all electroni...
Information
• Speaker presentation slides will be available at
www.houstontechfest.org within a week
• Don’t forget to com...
ABOUT ME
Stacy Vicknair, MVP
Senior Development Consultant
Blog
http://www.wtfnext.com
Toastmasters
http://www.toastmaster...
“BE A HERO. GROW A BEARD.”
The Sparkhound Foundation is sponsoring the growth of
facial hair to raise Prostate Cancer Awar...
Agenda
•
•
•
•
•
•
•
•
•
•

Windows Store App Stack
Why choose HTML, CSS, and JS?
Basic Project Structure
Adding Elements ...
Windows Store App Stack

6
Why use HTML, CSS and JS?
•
•
•
•

You’re already well-versed in web development
Leverage familiar client-side libraries
Y...
Basic Project Structure
• package.appxmanifest
– Set app-wide settings such as
icons, tiles, capabilities, declarations

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

– Wiri...
Available WinJS Controls
•
•
•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•
•
•
•

AppBar
BackButton
DatePicker
FlipView
Flyout
ListView...
Promises
• The gateway to asynchronous processing in Win8
HTML, CSS, and JS.
• Can assign callbacks via .then()
• Can wait...
DEMO
• OOTB Blank Solution
• Adding Elements and Controls
• Promises

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

• Allows binding of objects to the HTML view
• To perf...
Saving and Resuming State
• From Windows.Storage.ApplicationData.current
• Main types:
– Temporary: No guarantee that this...
DEMO
• Binding
• Saving and Resuming State
• Navigation

15
What coming in Windows 8.1?
•
•
•
•
•

Improved Performance
Bundling to minimize app size
More Windows Sizes
Better ListVi...
Agenda
•
•
•
•
•
•
•
•
•
•

Windows Store App Stack
Why choose HTML, CSS, and JS?
Basic Project Structure
Adding Elements ...
Resources and Links
Get codeSHOW() off of the App Store!
Developing Store Apps with JavaScript
http://msdn.microsoft.com/e...
Please Leave Feedback During Q&A
If you leave session
feedback and
provide contact
information, you
will be qualified for
...
Upcoming SlideShare
Loading in...5
×

Developing Windows 8 Applications with HTML, CSS and JavaScript

1,010

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,010
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Why are we doing this? In honor of the Sparkies and Sparkie family members who have (or continue to fight) fought prostate cancerBackground:- The Sparkhound Foundation is our non-profit charitable giving organization- Prostate cancer is the second leading cause of death in American men.
  • Why are we doing this? In honor of the Sparkies and Sparkie family members who have (or continue to fight) fought prostate cancerBackground:- The Sparkhound Foundation is our non-profit charitable giving organization- Prostate cancer is the second leading cause of death in American men.
  • Transcript of "Developing Windows 8 Applications with HTML, CSS and JavaScript"

    1. 1. Developing Windows 8 Applications with HTML, CSS and JavaScript Stacy Vicknair Sparkhound 0
    2. 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. 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. 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. 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. 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. 7. Windows Store App Stack 6
    8. 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. 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. 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. 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. 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. 13. DEMO • OOTB Blank Solution • Adding Elements and Controls • Promises 12
    14. 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. 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. 16. DEMO • Binding • Saving and Resuming State • Navigation 15
    17. 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. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×