win8: hello gril

kidys

　　My first metro app in win8：hello gril
　　from 官方文档：http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx
　　看效果：

　　建一个blank App；先看project 组成：
　　References：库的引用
　　css：里面一个default.css 放置样式内容

　　images：图片文件夹
　　js：文件夹，里面一个default.js  js文件
　　default.html
　　Hello Gril_TemporaryKey.pfx
　　manifest 配置文件
　　
　　
　　看js的代码：
　　



(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().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);
}));
//add button listener
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandle, false);
}
};
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().
    };
function buttonClickHandle(eventInfo) {
var username = document.getElementById("nameInput").value;
var string = "hi," + username + " you are  beautiful!"
document.getElementById("greetingOutput").innerText = string;
}
function ratingChanged(eventInfo) {
var ratingOutput = document.getElementById("ratingOutput");
ratingOutput.innerText = eventInfo.detail.tentativeRating;
}
app.start();
})();
　　
　　
　　一个自执行的匿名方法。里面其实也有相关的生命周期：onactivated，oncheckpoint 。
　　声明了button的响应方法buttonClickHandle。在onactivated中通过id获取button，再设置监听即可。
　　
　　html代码：
　　







Hello_Gril









hello , gril!

what's your name,gril?

say hi


Rate this greeting:


     




　　
　　应用了winjs的库。在     中使用了winjs的相关控件。在js中要靠  去连接，并且其是异步的。所以ratingControlDiv控件 的响应就要在WinJS.UI.processAll()异步之后执行。就有了：



            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);
}));
　　最后也瞧瞧css的代码吧：



body {
}
.headClass {
margin-top: 45px;
margin-left: 120px;
}
.mainContent {
margin-bottom: 31px;
margin-left: 120px;
margin-bottom: 10px;
}
#greetingOutput {
height: 30px;
margin-bottom: 40px;
}
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}
　　后半部分是其缺省给的，暂时忽略。
　　
　　整个开发过程与Android开发其实没多大差别，android的xml组织界面，java控制逻辑。在这里是html/css负责界面，js控制。有生命周期，不过貌似只有三种状态。
　　
　　over！