14. WinJS – Application model
WinJS.UI.processAll();
The Application object
Life time management
Queueing of events
WinJS
Navigation
15. WinJS - processAll
// 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););
16. The Application object
- var app = WinJS.Application;
- Creating a placeholder for your application
object
- Callbacks
- onloaded, onactivated, onready
- onunloaded, oncheckpoint
- Starting the app
- app.start();
17. Queueing of events
- Encapsulation still important!
- Eventing enables async integration of
modules
- Simple interface
- addEventListener(“eventName”, callback)
- queueEvent(eventRecord)
- removeEventListener(“eventName”, callback)
21. CSS 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”
29. WinRT - Windows Runtime
• Recap (?)
• Windows Namespace
• (Accessing C# code possible)
WinRT
30. Metro HTML5 Contexts - Security
- Local Context
- Default, secure, cross-domain
ms-wwa://
- Web Context
- No WinRT ms-wwa- http:// and
web:/// https://
34. Advices
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.
43. WinJS - Mixins
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);
Hinweis der Redaktion
Visa vilka templates som finnsVisa ”Fake references”
“Zooma UT!” (till A,B,C..)
“Kontroller, utilsoch lifecycle-ramverk”
Målet från Microsoft verkar vara att man bara ska behöva anropa processAll() precis i början av sin applikation.
NOTE: Varför används inte onready som default?
NOTE: Varför används inte onready som default?NOTE:Är capture som ”anti bubbling”?
”From div to control”, WinJS.UI.processAll(); Inklusive DOM Explorer och JavaScript console
”Så, här står vi nu med en blank solution.. Hur ska vi börja tänka kring design och layout?”HTML5 är designat för att enkelt kunna göra applikationer (!) för webben. CSS3 är exakt samma sak, fast för layout och design.
NOTE: Heter dom likadant? Nej! Byt och berätta om application-klassen!!!
“Alltpåslidenärviktigt”Detgår med fördelattnästla grids.NOTE: När man säger “dettaelementetskavara I kolumn #1”, hur vet renderarenvilken grid man menar?!?
Skriv inget under sista media queryn!
“Så,dåhar vi litekollpå layout och design I vårnya metro app. Nu skabaraappengöranågotvettigtockså… ” JavaScript
Always call “done” as the last promise method in your promise chain! Otherwise, if you forget to provide an errorHandler, the error will be very silent.
Nämn att man kommunicerar mellan kontexterna med HTML5 PostMessage!