Windows 8 for Web Developers

Windows 8 for Web DevelopersPer Ökvist, @per_okvistGustaf Nilsson Kotte, @gustaf_nk

Jayway

The nextperience!

Cross competence......not cross platform.

Yes, you can use your favourite js library……but find out what the “integration story”

is.

Anatomy of an HTML5 Metro app

HTML5

HTML5CSSJavascript + client frameworksWinJSWinRT

C# Libraries (Win8)

WinJS

WinRT

Demo

Basic solution

- Package (zip)- Folders and files

- Manifest

- Application Folder

App package - appx

AppContainer

Host

App package .appx

Controls with themed stylingApplication modelNavigationUtils & helpersPromises

WinJS namespace

WinJS – A Windows JavaScript library

WinJS

<!-- WinJS JavaScript files --> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

WinJS – JavaScript files

WinJS - Controls

App Bar

Rating

Button

List Box

Hyperlink

Slider

Checkbox

Radio Button

Toggle Switch

Tooltip

Context Menu

List View

Combo Box Progress Bar

Text Box Clear ButtonSpell Checking!

Password Reveal Button

Progress Ring

Flyout

Grid View

Flip View

Scroll Bar

Panning Indicator

Controls are touch enabled and metro styled

• “Contract” for grouping your data

• Semantic zoom adds to user experience

ListView, grouping, Semantic Zoom

- Need to implement a “big” contract….

- …but you will be rewarded!

“ListView CRUD”

WinJS.UI.processAll();The Application objectLife time managementQueueing of events

Navigation

WinJS – Application model

WinJS

// Simplified.. app.onactivated = function(e){ ... WinJS.UI.processAll(); ... };

-----------

// Equivalent to, for each node with data-win-control: var object = new WinJS.UI.SomeMetroControl(element, options););

WinJS - processAll

- var app = WinJS.Application;- Creating a placeholder for your

application object- Callbacks- onloaded, onactivated, onready- onunloaded, oncheckpoint

- Starting the app- app.start();

The Application object

- Encapsulation still important!- Eventing enables async integration of

modules- Simple interface- addEventListener(“eventName”,

callback)- queueEvent(eventRecord)- removeEventListener(“eventName”,

callback)

Queueing of events

Demo

Application start

CSS

CSS3 Grid!

- Web standard under construction- May change

- No longer “float hell”- “As easy as using tables”

- New unit: fragment (fr)- Uses “remaining part of page”

CSS Grid

CSS Grid

#container {   display: -ms-grid;   -ms-grid-columns: 300px 1fr 300px;   -ms-grid-rows: 100px 1fr 100px; }

#header {   -ms-grid-column: 1;   -ms-grid-column-span: 3;   -ms-grid-row: 1; }

CSS Grid

...

@media screen and (-ms-view-state: fullscreen-landscape) {} @media screen and (-ms-view-state: snapped) {} @media screen and (-ms-view-state: filled) {} @media screen and (-ms-view-state: fullscreen-portrait) {}

WinJS - CSS

<!-- WinJS style sheets--only include one. --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

CODE!

All prefixed win

WinJS – CSS

Promisesxhr (AJAX)

NamespacesConstructing objectsMixins

WinJS – Utils And helpers

WinJS

promise.then(completeHandler, errorHandler, progressHandler) .done()

WinJS – Promises - Async

WinJS.xhr({ url: "http://www.example.org/somedata.json" }).then(function(response){ updateDisplay(JSON.parse(response.responseText)); }) .done();

WinJS – xhr

• Recap (?)

• Windows Namespace

• (Accessing C# code possible)

WinRT - Windows Runtime

WinRT

- Local Context- Default, secure, cross-domain

- Web Context- No WinRT

Metro HTML5 Contexts - Security

ms-wwa://

ms-wwa-web:///

http:// and https://

Metro HTML5 Contexts – Security, xhr

Demo

Feed reader

Large templates

Need Blend

Wrapper classes, pros/cons

WinRT is written for C# and C++ too!

Our experience

Encapsulation is still important. (No scopes in HTML) Use events.

Start to use Blend.

Learn the CSS Grid.

Put media queries in the bottom of a file.

Advices

Unit tests

Two-way data binding

No “larger app” architecture template/help

“Blend mode” debugging in VS === killer tool

Improvements..

Resources

Dev Center/msdnBuild/conference videos

blog.jayway.com

Thank you!

Bonus slides...

WinJS.Namespace.define("MyNamespace", { somethingUseful: function(){ … }});

MyNamespace.somethingUseful();

WinJS - Namespaces

a = 5;

(function(global, WinJS) { var q = WinJS.Utilities.query;

WinJS.UI.processAll().then(function() { q(".output").forEach(function(e) { e.innerText = a; }); });

})(window, WinJS);

WinJS – Utils, scoping performance

var MyThing = WinJS.Class.define( function(){ … }, { somethingUseful: function(){ … } });

WinJS – Utils

var MyControl = WinJS.Class.mix( function(element, options){ this._domElement = element; // your code here.. }, WinJS.UI.DOMEventMixin, WinJS.Utilities .createEventProperties({swizzle: 0, spin: 0}) );

var c = new MyControl(element);c.onswizzle = function(){ … }c.addEventListener("spin", function(){ … }, false);

WinJS - Mixins