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代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello_Gril</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- Hello_Gril references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <h1 class ="headClass">hello , gril!</h1> <div class ="mainContent"> <p>what's your name,gril?</p> <input id="nameInput" type="text" /> <button id="helloButton">say hi</button> <div id="greetingOutput"></div> <label for="ratingControlDiv"> Rate this greeting: </label> <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"> </div> <div id="ratingOutput"></div> </div> </body> </html>
应用了winjs的库。在 <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"> 中使用了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！