Getting Started Building Windows 8 HTML/JavaScript Metro Apps
9 likes1,767 views
This document discusses various UI elements in a Windows app including styles, pages, scripts, config files, app bars, message dialogs, context menus, flyouts, date pickers, list views, templates, and animations. It provides code examples for implementing these elements and adjusting styles based on screen size. Functions are defined for common animations like fade in, pointer down, and pointer up.
![
.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;
}
}](https://image.slidesharecdn.com/gettingstartedbuildinghtml-javascriptmetroapps-120331105249-phpapp02/85/Getting-Started-Building-Windows-8-HTML-JavaScript-Metro-Apps-10-320.jpg)
Getting Started Building Windows 8 HTML/JavaScript Metro Apps
- 3.
- 5. WinJS Files Styles Pages Scripts Config
- 6.
- 7.
- 8. App Bar Message Dialog Context Menu Flyout
- 9.
- 10. .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; } }
- 11.
- 12.
- 13. <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>
- 15. <div data-win-control="WinJS.UI.DatePicker" data-win-options="{maxYear: 2015}"> </div>
- 16.
- 18.
- 19. <div id="itemTemplate" data-win-control="WinJS.Binding.Template"> <div> <img src="#" data-win-bind="src: image" /> </div> </div>
- 20. <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>
- 21.
- 22. - - - - - - - - - - - - - - - - -
- 23. 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); }
- 24.
Editor's Notes
- #5: Basic slide to make sure everyone watching knows we'll be focusing on HTML/JavaScript Metro apps.
- #6: Uses standards-based CSS
- #9: 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
- #10: 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
- #17: 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
- #19: 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
- #22: 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