Upload
gustaf-nilsson-kotte
View
2.557
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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