Download - Windows 8 for Web Developers
![Page 1: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/1.jpg)
Windows 8 for Web DevelopersPer Ökvist, @per_okvistGustaf Nilsson Kotte, @gustaf_nk
Jayway
![Page 2: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/2.jpg)
The nextperience!
![Page 3: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/3.jpg)
Cross competence......not cross platform.
![Page 4: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/4.jpg)
Yes, you can use your favourite js library……but find out what the “integration story”
is.
![Page 5: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/5.jpg)
Anatomy of an HTML5 Metro app
HTML5
HTML5CSSJavascript + client frameworksWinJSWinRT
C# Libraries (Win8)
WinJS
WinRT
![Page 6: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/6.jpg)
Demo
Basic solution
![Page 7: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/7.jpg)
- Package (zip)- Folders and files
- Manifest
- Application Folder
App package - appx
AppContainer
Host
![Page 8: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/8.jpg)
App package .appx
![Page 9: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/9.jpg)
Controls with themed stylingApplication modelNavigationUtils & helpersPromises
WinJS namespace
WinJS – A Windows JavaScript library
WinJS
![Page 10: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/10.jpg)
<!-- 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
![Page 11: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/11.jpg)
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
![Page 12: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/12.jpg)
• “Contract” for grouping your data
• Semantic zoom adds to user experience
ListView, grouping, Semantic Zoom
![Page 13: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/13.jpg)
- Need to implement a “big” contract….
- …but you will be rewarded!
“ListView CRUD”
![Page 14: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/14.jpg)
WinJS.UI.processAll();The Application objectLife time managementQueueing of events
Navigation
WinJS – Application model
WinJS
![Page 15: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/15.jpg)
// 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
![Page 16: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/16.jpg)
- 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
![Page 17: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/17.jpg)
- Encapsulation still important!- Eventing enables async integration of
modules- Simple interface- addEventListener(“eventName”,
callback)- queueEvent(eventRecord)- removeEventListener(“eventName”,
callback)
Queueing of events
![Page 18: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/18.jpg)
Demo
Application start
![Page 19: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/19.jpg)
CSS
![Page 20: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/20.jpg)
CSS3 Grid!
![Page 21: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/21.jpg)
- 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
![Page 22: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/22.jpg)
CSS Grid
![Page 23: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/23.jpg)
#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
![Page 24: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/24.jpg)
...
@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
![Page 25: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/25.jpg)
<!-- 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
![Page 26: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/26.jpg)
Promisesxhr (AJAX)
NamespacesConstructing objectsMixins
WinJS – Utils And helpers
WinJS
![Page 27: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/27.jpg)
promise.then(completeHandler, errorHandler, progressHandler) .done()
WinJS – Promises - Async
![Page 28: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/28.jpg)
WinJS.xhr({ url: "http://www.example.org/somedata.json" }).then(function(response){ updateDisplay(JSON.parse(response.responseText)); }) .done();
WinJS – xhr
![Page 29: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/29.jpg)
• Recap (?)
• Windows Namespace
• (Accessing C# code possible)
WinRT - Windows Runtime
WinRT
![Page 30: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/30.jpg)
- Local Context- Default, secure, cross-domain
- Web Context- No WinRT
Metro HTML5 Contexts - Security
ms-wwa://
ms-wwa-web:///
http:// and https://
![Page 31: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/31.jpg)
Metro HTML5 Contexts – Security, xhr
![Page 32: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/32.jpg)
Demo
Feed reader
![Page 33: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/33.jpg)
Large templates
Need Blend
Wrapper classes, pros/cons
WinRT is written for C# and C++ too!
Our experience
![Page 34: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/34.jpg)
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
![Page 35: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/35.jpg)
Unit tests
Two-way data binding
No “larger app” architecture template/help
“Blend mode” debugging in VS === killer tool
Improvements..
![Page 36: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/36.jpg)
Resources
Dev Center/msdnBuild/conference videos
blog.jayway.com
![Page 37: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/37.jpg)
Thank you!
![Page 38: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/38.jpg)
![Page 39: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/39.jpg)
Bonus slides...
![Page 40: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/40.jpg)
WinJS.Namespace.define("MyNamespace", { somethingUseful: function(){ … }});
MyNamespace.somethingUseful();
WinJS - Namespaces
![Page 41: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/41.jpg)
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
![Page 42: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/42.jpg)
var MyThing = WinJS.Class.define( function(){ … }, { somethingUseful: function(){ … } });
WinJS – Utils
![Page 43: Windows 8 for Web Developers](https://reader036.vdocument.in/reader036/viewer/2022081414/54bd884b4a7959704c8b4581/html5/thumbnails/43.jpg)
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