WinJS 初體驗

利用 HTML + CSS + JS 就可以在 VS 中開發出一個 win8 app 對於前端開發人員來說無疑是令人興奮的。

首先看看在 VS 中新建一個項目後的基本架構（剛剛結束的 Build 2014 大會的 VS2013 update1 提供了一種 universal app 模版，以支持 app 在 Windows 和 Windows Phone 上運行，這裏只關注 Windows App）

從圖中可以看到，首先是 references 目錄，其中包含了 WinJS 的基本類庫文件，包括重要的 base.js 和 ui.js 等，還有基礎的 css 文件。

而在 css 目錄中的 default.css 可用於寫自定義的樣式

其次是 images 目錄，其中包含了一些圖片，用於項目加載時顯示的一些圖片

而在 js 目錄中的 default.js 是用於自定義的 javascript 實現

最後是 default.html ，也就是 app 的主頁面。

再看看 default.html 

這裏添加了一個列表和一個用於評分的 label ，評分這一塊暫時先忽略，後面會講到。

這個頁面跟普通的 HTML 沒什麼區別，除了加入了一個 css 文件和兩個 js 文件。其中，ui-dark.css 可以換爲 ui-light.css，它們的區別就是 app 的主色調是暗色的還是白色亮色的。

接下來我們修改 default.css 和 default.js

css 部分這裏就不多講了

在 js 文件中，首先在 app.start(); 前加入定義的類、函數之類的，這裏我定義了一個 EventUtil 類，用於處理通用的函數，像添加事件處理，獲取事件，獲取事件目標。（這部分內容可以參見本博相關文章）。

接下來，在 app.onactivited 函數中，args.setPromise(WinJS.UI.processAll()); 之前調用函數。這裏利用了事件委託方式，同樣的可以參見本博相關文章。

這樣就可以運行該 app，簡單的展現幾個 list ，當點擊 list 的時候顯示一段文字。

這裏，我們關注的是 app.onactivited 函數和 args.setPromise(WinJS.UI.processAll()); 

首先，app.onactivited 函數會在 app 活動的時候調用，例如當 app 被加載的時候，所以要將我們的 addHandler 函數調用放在裏面。

而 args.setPromise(WinJS.UI.processAll()); 其中的 WinJS.UI.processAll() 會掃描 default.html 中的 WinJS 控件並初始化它們。而 setPromise 方法是用於異步操作。

既然提到 WinJS 控件，那麼這裏就嘗試加入一個 WinJS 控件，一個用於評分的控件。

加入一個 WinJS 控件的方法可以是創建一個 div 元素後爲其設置一個屬性 data-win-control 用於指明需要添加的控件的類型。這裏評分控件的類型是 WinJS.UI.Rating 

之後爲該控件定義一個事件處理

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

            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);

                //利用事件委託
                EventUtil.addHandler(list, "click", function (event) {
                    event = EventUtil.getEvent(event);
                    var target = EventUtil.getTarget(event);
                    var str = "You have chosen " + target.title;
                    var output = document.getElementById("output");
                    output.innerHTML = str;
                });

            }));

添加到 then 方法中，也可以講之前定義的事件處理放在 then 方法中。

關於 promise 和 then ，可以參見 http://course.gdou.com/blog/Blog.kinfey/archive/2012/4/1/10947.html