Developing Windows 8 Applications with HTML, CSS and JavaScript
Upcoming SlideShare
Loading in...5
×
 

Developing Windows 8 Applications with HTML, CSS and JavaScript

on

  • 992 views

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.

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.

Statistics

Views

Total Views
992
Views on SlideShare
991
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://meem.greyshare.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Developing Windows 8 Applications with HTML, CSS and JavaScript Developing Windows 8 Applications with HTML, CSS and JavaScript Presentation Transcript

  • 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 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
  • 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
  • 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
  • “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.
  • 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
  • Windows Store App Stack 6
  • 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
  • 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
  • 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
  • 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
  • Promises • The gateway to asynchronous processing in Win8 HTML, CSS, and JS. • Can assign callbacks via .then() • Can wait on multiples with combine() 11
  • 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 perform bindings: – Specify the element component bindings with datawin-bind • innerHtml • style.<stylename> • onclick – Use WinJS.Binding.processAll(element, model) 13
  • 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
  • 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 ListViews / Drag and Drop support OOTB New controls http://msdn.microsoft.com/en-us/library/windows/apps/bg182410 16
  • 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
  • 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
  • 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