您的位置:首页 > Web前端 > JavaScript

《创建第一个采用 JavaScript 的 Windows 应用商店应用》学习笔记(一)

2013-07-21 22:24 429 查看
原教程链接:创建第一个采用 JavaScript 的 Windows 应用商店应用

注:本学习笔记为对该教程的一些注解,并不提供完整的实例代码,如果需要学习完整的开发过程请参阅原教程。

部分 1:创建“Hello, world”应用(使用 JavaScript 和 HTML 的 Windows 应用商店应用)

一、Windows应用商店应用html5例外元素:

我们来向 default.html 文件中添加一些新的内容。正如你向任何其他 HTML 文件中添加内容一样,你在 body 元素内添加内容。你可以使用 HTML5 元素创建应用(具有少数例外)。 这表示你可以使用 HTML5 元素,如 h1、p、button、div 以及 img。

关于html5元素,可以参照这里,文中提及的html例外元素,可以结合比较官方文档中的html support得出:(注,某些元素被单独列出,这包括:<canvas>,)

没有提到<bdo>、<command>、<details>、<dfn>、<keygen>、<menu>、<meter>、<noscript>、<rp>、<summary>
增加了<custom>、<hn>
支持了html5不支持的元素<s>、<u>
<h1>to<h6>未列出但实际是支持的。

注:以上并未在实际生产环境中验证,请自行斟酌。

二、代码详解:

WinJS.Binding.optimizeBindingReferences = true;


设置WinJs.Binding命名空间的属性optimizeBindingReferences的值为true。

该属性决定是否要自动设置元素的ID。(true——避免自动设置元素ID)查看更多

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;


定义变量app为命名空间WinJS.Application的引用(对JavaScript来说“命名空间”也是对象)

该命名空间提供了应用程序功能性的对象、方法、函数和事件集。查看更多

定义变量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().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);

// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);

}));

}


app.onactivated = ...


为应用的"activated"事件绑定处理函数。"activated"事件在应用被激活的时候被触发。

参数args是一个CustomEvent object对象。

args.detail.kind === activation.ActivationKind.launch;

CustomEvent objectdetail属性:描述一个事件的额外信息

这里该参数可以认为是一个"activated"类型的对象.而detail是如下对象之一:

WebUICachedFileUpdaterActivatedEventArgs

WebUICameraSettingsActivatedEventArgs

WebUIContactPickerActivatedEventArgs

WebUIDeviceActivatedEventArgs

WebUIFileActivatedEventArgs

WebUIFileOpenPickerActivatedEventArgs

WebUIFileSavePickerActivatedEventArgs

WebUILaunchActivatedEventArgs

WebUIPrintTaskSettingsActivatedEventArgs

WebUIProtocolActivatedEventArgs

WebUISearchActivatedEventArgs

WebUIShareTargetActivatedEventArgs

对于一般情况,这里的detail是WebUILauchActivatedEventArgs对象。

它的kind属性值为activation.ActivationKind.launch。

Windows.ApplicationModel.Activation.ActivationKind是一个枚举类型。

previousExecutionState属性是一个只读属性,得到app的这次激活之前的执行状态。

Windows.ApplicationModel.Activation.ApplicationExecutionState是一个枚举类型。

args.setPromise(WinJS.UI.processAll().then(function completed(){...}


WinJS.UI.processAll()将扫描html中是否有windows控件,并将其初始化。这是一个异步方法。

这样如果直接在onactivated的处理中进行控件的绑定,将有可能在控件初始化之前执行绑定。

另外onactivated也有可能在WinJS.UI.processAll()执行完之前执行完毕。

所以要将WinJS.UI.processAll()放在setPromise中执行以在其执行完后收到Promise通知,这是onactivated的处理才被认为执行完。

WinJS.UI.processAll()返回一个Promise对象,它的then方法接受completed函数参数,在WinJS.UI.processAll()完成后执行。

故可以在其中进行控件的绑定操作等。

completed函数内部为常见的JavaScript代码,不再解释。

oncheckpoint绑定了"checkpoint"的处理函数,它在应用即将刮起时调用,可以在其中保存会话状态。但由于挂起到终止前只有10s左右时间,不建议在其中保存,而应当在数据改变的同时进行保存。

ratingControl.addEventListener("change", ratingChanged, false);


function ratingChanged(eventInfo) {
var ratingOutput = document.getElementById("ratingOutput");
ratingOutput.innerText = eventInfo.detail.tentativeRating;
}


Rating Object

onchange event:当rating控件改变时触发

detail.tentativeRating:rating控件的新的userRating的值

app.start();


WinJS.Application.start()函数:触发应用事件(the activated, checkpoint, error, loaded, ready, settings, and unload events)

第一部分学习到此结束,完整代码参见MicroSoft


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: