Christopher Bennage, Dev

Blaine Wastell, PM

Microsoft Corp

Hilo: Windows 8 App using HTML and JavaScript

Agenda

• Hilo JavaScript Background

• Demo & solution walk through

• Tiles

• Page

• Touch

• World Ready

• Suspend and Resume

• Navigation

• File Access

Demo Hilo Photo Viewing and Editing App

HiloJS.Codeplex.com for HTML & JavaScript

Guidance to create Windows 8 Apps

• Tiles

• Page / Template

• Touch

• Suspend, Terminate, and Resume

• World Ready

• Navigation

• File Access

• Query Builder Pattern

• Separate Presentation Pattern

• Unit Testing

Walkthrough Solution Structure and Package Manifest

Windows 8 Architecture

Solution folders organized by features

• crop

• detail

• hub

• month

• rotate

HTML/CSS

Windows 8 Store Apps

JavaScript C#

VB

C

C++

XAML

Windows Run Time

Package Manifest

(.appxmanifest

file) App Container (only allows Windows Runtime capabilities that

are declared in the manifest)

Windows Kernel

Lessons Learned

• Tile template makes it very easy to

implement

• Use WinRT to give thumbnail instead

scaling image manually

• Only supports 3 file types (.gif, .png,

.jpeg)

• Must support square tile and

optionally wide tile

Tile code walk through

Tiles

Walkthrough Detail.html

Create pages

Lessons Learned

• Implement visual state for landscape, portrait,

fill, and snap

• Databinding is declarative for most scenarios

• Use Navigator.js to manage navigation

• Do not hard code dimensions

World Ready Code walkthrough

Lessons Learned

• Easy to localize

• Use ISO-8061 - YYYY-MM-

DDTHH:mm:ssZ - dates for

Advanced Query Syntax (AQS)

• Design should not assume flow

direction

Discussion

Touch

Hilo demonstrates

• Press and hold, tap, slide to pan,

swipe to select, pinch and stretch

to zoom, turn to rotate, swipe

from edge for app commands or

system commands

Lessons learned

• Use standard controls

Code walkthrough

Navigation

if (backButton) { backButton.onclick = function () { nav.back(); }; … _mspointerupHandler: function (args) { if (args.button === 3) { nav.back(); } else if (args.button === 4) { nav.forward(); } } … _navigated: function (args) { var newElement = this._createPageElement(); … this._lastNavigationPromise = WinJS.Promise.timeout() .then(function () { return WinJS.UI.Pages.render( args.detail.location, newElement, args.detail.state, parented); }); }

Lessons learned

• Use PageControlNavigator.js for

navigation and view state

• PageControlNavigator.js implements

nav.back, nav.forward, nav.canGoBack

Code walkthrough

Suspend & Resume

Lessons learned

• Template add Default.js with an

EventListener when app started or

resumed

• Default.js contains app.oncheckpoint

to save sessionState

app.addEventListener("activated", function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {} … if (app.sessionState.history) { nav.history = app.sessionState.history; } } app.oncheckpoint = function (args) { app.sessionState.history = nav.history; }

Code walkthrough

File Access & Query Builder Pattern

Lessons learned

• Use QueryBuilder pattern to abstract file

system

• Created centralized Observer that uses

Pub/Sub to communicate file system

changes for Picture Library

// Configure and then build the query for this page this.queryBuilder .bindable() .prefetchOptions(["System.ItemDate"]) .count(maxImageCount);

var query = this.queryBuilder.build(this.folder); return query.execute() .then(this.bindImages) .then(this.animateEnterPage);

Where to get code and documentation

Source code and documentation:

http://hilojs.codeplex.com

Blog:

blogs.msdn.com/blaine

dev.bennage.com

October 26: