Getting Started Building Windows 8 HTML/JavaScript Metro Apps

10,730
-1

Published on

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.

Published in: Technology, News & Politics
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,730
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. 
    2. 2.  WinJS Files Styles Pages Scripts Config
    3. 3.
    4. 4. 
    5. 5.  App Bar Message Dialog Context Menu Flyout
    6. 6.       
    7. 7. .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; }}
    8. 8.    
    9. 9. 
    10. 10. <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>
    11. 11. <div data-win-control="WinJS.UI.DatePicker"></div>
    12. 12. <div data-win-control="WinJS.UI.DatePicker" data-win-options="{maxYear: 2015}"></div>
    13. 13.      
    14. 14. 
    15. 15. <div id="itemTemplate" data-win-control="WinJS.Binding.Template"> <div> <img src="#" data-win-bind="src: image" /> </div></div>
    16. 16. <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>
    17. 17. 
    18. 18. - - - - - - - -- - - - - - - - -
    19. 19. 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);}
    20. 20. 

    ×