1. Developing Windows 8 Style Application With HTML and JavaScript

2. The big picture

3. The tools are there! Visual Studio Expression Blend
Code editor w/ Intellisense
UI Designer
Debuggers
DOM Explorer
Javascript Console
Simulator
Platform window
Visual Studio
Code Editor
WYSIGYG designer
Interactive mode
Animation Smarter Properties Window
Simulator
Platform window
Expression Blend

4. Windows Library for JavaScript
Matches the Windows 8 design style
Controls for common user experiences
Designed for touch as well as traditional input
Scales across form factors
Make your apps look and feel great
Web technologies you’re already familiar with
Modern patterns for responsive, reliable apps
Use interactive design tools
Build your apps fast and with high quality

5. WinJS Helpers for Namespaces, Constructor Definition Data binding
Controls
Promises
Animations
App Model
Templates
Navigation
Utilities
Page & User controls
Default CSS Styles

6. Promises handle Async

7. Promise Code // Object that is a promise for a later value WinJS.xhr({
url:"
}).then(function (response) {
updateDisplay(
JSON.parse(response.responseText));
}, function (ex) {
reportXhrError(ex);
});

8. Host Enforcement Prevents potentially “bad” HTML from getting inserted
Script blocks, iframes, event handlers, etc.
Kicks in when setting strings
innerHTML
outerHTML
setAdjacentHTML
“data-” attributes in general not on the allowed list
WinJS specific ones are ok

9. Host Enforcement Escape Hatches
Can work around when needed:
toStaticHTML method
Use DOM creation APIs
Use WinJS.Utilities.setInnerHTMLUnsafe
Use msWWA.execUnsafeLocalFunction

10. Everyday Widgets

11. Presenting Data List View (ListLayout) ListView (with GridLayout)
Flip View

12. Controls <!– Step1: declare control -->
<div id=“list” data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
/* Step 2: Call WinJS.UI.processAll() */
WinJS.UI.processAll();
/* Step 3: Use the control */
document.getElementById(‘list’).winControl.addEventListener (‘selectionchanged’, onSelChanged );

13. DataBinding <!– Step1: declare template -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<div class="item">
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title"/>
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: shortTitle"></h4>
<div class="item-subtitle" data-win-control="WinJS.UI.Rating" data-win-options="{disabled: true}" data-win-bind="winControl.userRating: rating"></div>
</div>
/* step2: use the Data Template */
ui.setOptions(listView, {
itemTemplate: element.querySelector(".itemtemplate"),
oniteminvoked: this.itemInvoked });

14. Commanding Surfaces

15. Windows 8 Animation Library
Contains key Metro style app animations
Has the same storyboard values, curves, and even the same API that Windows uses
Aligns your app to the Windows 8 personality

16. Animation Library Scenarios
Navigation
Content
Reveal/Hide UI
enterPage/exitPage
enterContent/exitContent
Expand/collapse
Peek
showEdgeUI/hideEdgeUI
showPanel/hidePanel
showPopup/hidePopup
Collections
Selection
AddItemToList
Delete item from list
Pointer animations
Swipe select/swipe deselect
Swipe reveal

17. Basic Tiles Overlays status on top of tile
Supports square and wide tiles
Number up to 99 or pre-defined glyph:
Always legible on top of images
Badge
Badge

19. Toast Notifications
Toast notifications deliver transient messages outside the context of the app
Use toast notifications to get user’s attention immediately
User is in control and can permanently turn off toast notifications from your app
Allows quick navigation to a contextually relevant location in your app
Toast notifications are easy to invoke from your app or from the cloud

20. Toast Templates
Toast notifications use the same template architecture as Live Tiles
Rich set of rendering options available

21. Search Share Settings Play To App to App Picking Contracts

22. Search Anatomy Search box is scoped to the main app on screen1
Search box is scoped to the main app on screen
Query suggestions provided by the main app on screen
Autocompletes to terms for which the app has search results
List of installed Metro style apps that have implemented the search contract 2 3

23. Search Anatomy 4 Result suggestions provided by the main app on screen
Must include a thumbnail and title
Indicates a strong or exact match result
Takes users directly to the details of the result

24. Implementing Search
//Easiest is to Add -> New Item -> Search Contract in visual Studio
// Step 1: Declare the capability in the manifest
<Extensions>
<Extension Category="windows.search" />
</Extensions>
//Step 2 : Handle the events
appModel.Search.SearchPane.getForCurrentView().onquerysubmitted = function (eventObject) { /*do work here*/ };
appModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested = function (eventObject) { /* do work here */ };

25. Thank you!