win8: hello gril

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！

posted on 2012-09-19 21:15 老Zhan 阅读(638) 评论(0) 编辑收藏举报