Christopher Bennage, Dev Blaine Wastell,...
Transcript of Christopher Bennage, Dev Blaine Wastell,...
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: