Embed Size (px)
Citation preview
What is WinJS?
Basics
It calls WinJS.UI.processAll regardless of whether the app had been shut down in the past or whether this is thevery first time it's being launched. The WinJS.UI.processAll is enclosed in a call to the setPromise method, whichmakes sure the splash screen isn't taken down until the app's page is ready.
default.html drives the app startup, order of scripts here is the order in which they run.
Shell of the HTML
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>BasicAppExample</title>
<!-- WinJS references --> <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script> <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- BasicAppExample references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script></head><body> <p>Content goes here</p></body></html>
Shell of the JavaScript
(function () { "use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll()); } };
app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). };
app.start();})();
Example
Tip The WinJS.UI.processAll function scans your default.html file for Windows Library for JavaScript controls andinitializes them.
14/05/2013 Untitled Document
1/3
Namespace definition: - WinJS.Namespace.define
(function () { function action(ev) { } var namespacePublicMembers = { clickEventHandler: button1Click }; WinJS.Namespace.define("startPage", namespacePublicMembers);
app.start();})();
If Rating were a standard HTML control, you could add your event handler after this call to WinJS.UI.processAll.But it's a little more complicated for a Windows Library for JavaScript control like our Rating. BecauseWinJS.UI.processAll creates the Rating control for us, we can't add the event handler to Rating until afterWinJS.UI.processAll has finished its processing.
If WinJS.UI.processAll were a typical method, we could register the Rating event handler right after we call it. Butthe WinJS.UI.processAll method is asynchronous, so any code that follows it might run beforeWinJS.UI.processAll completes. So, what do we do? We use a Promise object to receive notification whenWinJS.UI.processAll completes.
Like all asynchronous Windows Library for JavaScript methods, WinJS.UI.processAll returns a Promise object. APromise is a "promise" that something will happen in the future; when that thing happens, the Promise is said tohave completed.
Promise objects have a then method that takes a "completed" function as a parameter. The Promise calls thisfunction when it completes. By adding your code to a "completed" function and passing it to the Promiseobject's then method, you can be sure your code executes after WinJS.UI.processAll is complete.
args.setPromise(WinJS.UI.processAll().then(function completed() {
// Retrieve the div that hosts the Rating control. var ratingControlDiv = document.getElementById("ratingControlDiv");
// Retrieve the actual Rating control. var ratingControl = ratingControlDiv.winControl;
// Register the event handler. ratingControl.addEventListener("change", ratingChanged, false);
}));
Can I run it elsewhere?
Not if you make use of WinJS calls that are specific to WinRT.
Promises
Binding
Verify it WinJS.Bindings supports 2 way...Says no - http://www.jayway.com/2012/10/12/poor-mans-two-way-binding-in-windows-8-winjs/Says no - http://stackoverflow.com/questions/10533342/two-way-binding-in-windows-8-html-javascript-metro-apps
What's in WinRT, that's helpful?
Issues I've had so far.
Using other known frameworks to help out.
Sources
14/05/2013 Untitled Document
2/3
Programming Windows 8 Apps with HTML, CSS, and JavaScript - Free eBook from Microsoft -http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx
Resources
MSDN Samples - http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples
14/05/2013 Untitled Document
3/3
