• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Getting Started Building Windows 8 HTML/JavaScript Metro Apps
 

Getting Started Building Windows 8 HTML/JavaScript Metro Apps

on

  • 11,012 views

This talk is from a presentation I gave at the spring 2012 DevConnections conference. It covers building Windows 8 Metro apps using HTML5 and JavaScript.

This talk is from a presentation I gave at the spring 2012 DevConnections conference. It covers building Windows 8 Metro apps using HTML5 and JavaScript.

Statistics

Views

Total Views
11,012
Views on SlideShare
3,164
Embed Views
7,848

Actions

Likes
8
Downloads
2
Comments
0

24 Embeds 7,848

http://localhost 4104
http://sales.isoftuae.com 1248
http://www.expressionblend.com 1229
http://weblogs.asp.net 796
http://feeds2.feedburner.com 317
http://vietgamedev.net 68
http://mopw.isoftuae.com 36
http://www.sales.isoftuae.com 9
http://us1.rssfeedwidget.com 7
http://www-ig-opensocial.googleusercontent.com 5
http://127.0.0.1 4
http://www.hanrss.com 4
http://translate.googleusercontent.com 3
http://192.168.0.17 3
http://codersoasis.com 3
http://webcache.googleusercontent.com 2
http://feeds.feedburner.com 2
http://www.newsblur.com 2
http://sales.isoftuae.com&_=1336387969375 HTTP 1
http://192.168.5.253 1
http://sales.isoftuae.com&_=1336630338562 HTTP 1
http://expressionblend.com 1
https://twitter.com 1
http://www.developerit.com 1
More...

Accessibility

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
  • Basic slide to make sure everyone watching knows we'll be focusing on HTML/JavaScript Metro apps.
  • Uses standards-based CSS
  • In addition to the main "canvas", several additional UI surfaces are available. Also support for:Flyout - A flyout is a lightweight popup that is used to temporarily show UI.ToastsErrorshttp://code.msdn.microsoft.com/windowsapps/Message-dialog-sample-3106f44a
  • CSS3 Flexible Box layout can adapt to multiple screen sizes and enable digital newspaper, magazine, and other digital print media consumptive scenarios.CSS3 Grid alignment divides available space for lay out into columns and rows using a set of predictable sizing behaviors. CSS3 Multi-column layout supports content flow from one column to another for an arbitrary number of columns.http://msdn.microsoft.com/en-us/library/windows/apps/hh465327(v=VS.85).aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465451(v=VS.85).aspx#layout_controls
  • When a running app is activated, the system raises the WinJS.Application.activated event only.When a page is refreshed, only the DOMContentLoaded and window.load events are raised.Checkpoint example:function checkpointHandler(eventArgs) {varstateObject = new Object(); // TODO: Populate the state object with app data // Save the state object to the session objectapp.sessionState.stateObject = stateObject;}Windows.UI.WebUI.WebUIApplication.resuming
  • http://go.microsoft.com/fwlink/?LinkId=227203http://msdn.microsoft.com/en-us/library/windows/apps/hh465165(v=VS.85).aspxhttp://channel9.msdn.com/events/BUILD/BUILD2011/APP-206T
  • http://go.microsoft.com/fwlink/?LinkId=227203http://msdn.microsoft.com/en-us/library/windows/apps/hh465165(v=VS.85).aspxhttp://channel9.msdn.com/events/BUILD/BUILD2011/APP-206T

Getting Started Building Windows 8 HTML/JavaScript Metro Apps Getting Started Building Windows 8 HTML/JavaScript Metro Apps Presentation Transcript

  • 
  •  WinJS Files Styles Pages Scripts Config
  • 
  •  App Bar Message Dialog Context Menu Flyout
  •       
  • .homepage section[role=main] { margin-left: 120px;}@media screen and (-ms-view-state: snapped) { .homepage section[role=main] { margin-left: 20px; }}@media screen and (-ms-view-state: portrait) { .homepage section[role=main] { margin-left: 100px; }}
  •    
  • 
  • <label for="CityLabel">Select a city:</label><select id="CitiesSelect"> <option value="1">Phoenix</option> <option value="20">New York</option> <option value="35">Dallas</option> <option value="11">San Diego</option></select><button id="SubmitButton">Submit</button>
  • <div data-win-control="WinJS.UI.DatePicker"></div>
  • <div data-win-control="WinJS.UI.DatePicker" data-win-options="{maxYear: 2015}"></div>
  •      
  • 
  • <div id="itemTemplate" data-win-control="WinJS.Binding.Template"> <div> <img src="#" data-win-bind="src: image" /> </div></div>
  • <div id="myItemTemplate" data-win-control="WinJS.Binding.Template"></div><div id="CitiesListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: select(#myItemTemplate)}"></div>
  • 
  • - - - - - - - -- - - - - - - - -
  • function fadeIn(element) { WinJS.UI.Animation.fadeIn(element);}function pointerDown(e) { WinJS.UI.Animation.pointerDown(e.srcElement);}function pointerUp(e) { WinJS.UI.Animation.pointerUp(e.srcElement);}
  • 