Download presentation
Presentation is loading. Please wait.
Published byMitchell Warren Modified over 7 years ago
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 screen
1 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!
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.