Windows 8 HTML5 Metro Style App: 如何創建一個RSS閱讀器

openkk 12年前發布 | 91K 次閱讀 HTML5 RSS/ATOM相關

現在我打算用兩篇教學文章來教教大家用 HTML5, CSS3 以及 WinJS(就是微軟為開發者提供用來創建 Windows 8 Metro 風格的JavaScript框架) 來創建一個簡單的RSS閱讀器。當然這次的開發工具將采用 Expression Blend 5。如果一切進展順利，你大概只需要30分鐘就能完成這兩篇文章的所有教程。

第一篇文章將告訴你如何使用 WinJS ListView 控件來創建啟動屏界面。此控件將顯示近期所有的博客列表(當然它們都配有一個不錯的縮微圖)。第二篇將展示當某個博客被點擊后視圖顯示的細節。

在開始我們的教程前，你必須先：

1，下載并安裝 Windows 8 Release Preview http://preview.windows.com

2，下載并安裝 Visual Studio 2012 RC Express http://msdn.microsoft.com/en-us/windows/apps/br229516

以下就是整個教程的大綱

- Step 1: 創建一個空應用

- Step 2: 使用HTML & CSS創建首頁

- Step 3: 與Blend交互

- Step 4: 使用XHR加載數據然后綁定到ListView控件

- Step 5: 使用Blend的模板來修改外觀設計

- Step 6: 用視頻展示所有的步驟以及提供源碼下載

Step 1: 創建一個空應用

啟動 Visual Studio 11 然后新創建一個 JavaScript Windows Metro Style的項目。

選擇"File -> New Project":

Windows 8 HTML5 Metro Style App: 如何創建一個RSS閱讀器

這里命名為"SimpleChannel9Reader"，因為是打算將從Coding4Fun的Channel9頻道去下載RSS流。http://channel9.msdn.com/coding4fun/articles/RSS

Step 2: 使用HTML & CSS創建首頁

打開 "default.html" 文件，該文件就是應用的啟動首頁。然后將以下代碼:

<p>Content goes here</p>

改成

<div id="main">
    <header id="banner">
        <button id="backbutton" class="win-backbutton">
        </button>
        <h1 id="maintitle" class="win-title">Welcome to Channel 9!</h1>
    </header>
    <section id="content">
    </section>
</div>

現在就有了一個 id 為"main"的全局div，然后里面嵌入兩個容器分別命名為"banner"與"content"。很明顯header將顯示在頁面的頂部，content區域將顯示在header區域的下面。

OK，現在該添加一些css。打開css目錄下的"default.css"文件。你將會看見這里已經有了一些預定義的 css，這些都歸功于 Media Queries.

提一下，在此系列的兩篇文章中，我們將集中精力在"fullscreen-landscape"狀態。所以先添加如下CSS:

#main {
    width: 100%;
    height: 100%;
}

#banner {
    width: 100%;
    height: 100%;
}

#backbutton {
}

#maintitle {
}

#content {
    width: 100%;
    height: 100%;
}

以上代碼表示我們將使用這三個容器的全部空間。

現在可以直接按F5或者點擊下圖這個按鈕來啟動應用。

運行起來你將能看到下圖這個樣子。

Windows 8 HTML5 Metro Style App: 如何創建一個RSS閱讀器

你應該看到這里有個設計缺陷：后退按鈕以及標題顯示都不很搭調，所以來讓Blend 5去解決吧！

Step 3: 第一次使用 Blend

啟動Blend然后導航到 SimpleChannel9Reader 項目文件夾。如下圖：

這里是為了創建兩個網格。第一個將表示 main container. 將占據一列兩行。而第二個網格將占據一行兩列來放置后退按鈕以及標題。先使用"Live DOM"窗口選擇"main"元素

然后到"CSS Properties"區域，在"Layout"窗口下選擇 #main 規則，然后將顯示設置為"-ms-grid":

剛才使用的 CSS Grid Layout 的這些特性暫時還僅僅就IE10支持，但是以后越來越多瀏覽器將都支持的，如果你希望知道更多Metro風格的布局知識，你可以參考這篇文章：Choosing a CSS3 layout for your

如果你希望只是CSS3 的網格布局，你可以盡管測試這個IE Test Drive Demo:Hands On: CSS3 Grid

OK，現在顯示在Gird上已經比較正常，現在跳轉到"Grid"部分來定義以下屬性:

這種定義將讓一列占據整個空間而不管應用的分辨率是多大以及兩行，第一行是固定的132像素高度，然后剩余的行將占據剩余的高度。如下圖

現在再到第二行的"content"元素。選擇"Live DOM"，選擇#content規則接著然后移動到"Grid"屬性。修改 "-ms-grid-row"的值為2。你也可以移動"banner"元素到第二行，否則banner將自動放在第一行。

接著我們將第一行分割為兩列，是為了讓各個元素放置到正確的位置。選擇"banner"元素，然后設置它的 display屬性為"-ms-grid"。

移動"maintitle"元素到第二列然后設置"-ms-grid-row-align"屬性為"center"

選取"backbutton"然后選擇"Layout"部分，設置top margin屬性為54px以及left margin屬性為40px。如果一切都按照指導來的話，你應該看到如下圖這樣。

點擊"Save All"按鈕然后退回到Visual Studio。打開"default.css"，就能看到Blend生成的CSS:

@media  screen and (-ms-view-state: fullscreen-landscape)
{

    #main {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 132px 1fr;
    }

    #banner {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }

    #backbutton {
        margin-top: 54px;
        margin-left: 40px;
    }

    #maintitle {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }

    #content {
        width: 100%;
        height: 100%;
        -ms-grid-row: 2;
    }
}

最后點擊F5去運行

Step 4: 使用XHR加載數據然后綁定到ListView控件

好了，來看看后臺代碼

首先就是為啟動屏的文章列表添加縮微圖。這就需要使用WinJS來處理了。

WinJS庫或者"Microsoft Window Library for JavaScript SDK"就是為了讓JavaScript開發人員來創建 Windows 8 Metro風格應用的。它提供了一系列Metro控件，模板引擎，異步處理方法以及輔助類等等。

例如，如果你想了解更多這個方面的話，你可以閱讀這篇文章: Quickstart: adding WinJS controls and styles

在Windows 8 Metro應用中，你可以從"Solution Explorer"找到這個庫的引用，如圖。

同時，這里面你也可以找到幾個默認的CSS主題。

在我們的案例中，將使用ListView控件來創建顯示博客列表的網格。

打開"default.html"，輸入以下HTML:

<div id="articlelist" data-win-control="WinJS.UI.ListView"></div>

現在，這里只有一個簡單的經典div。然而，它已經被標記了 data-win-control 屬性，代表它使用的是 WinJS 庫來將這個簡單 div 轉換成 JavaScript ListView 控件。

有意思的是這個功能只需要一行代碼:

WinJS.UI.processAll();

這個異步操作將會把所有標記了"data-win-control"標記的元素轉換為 WinJS控件。所以沒有沒有這個標簽的話，那它就是一個簡單div。現在終于到了從RSS獲取信息填充到ListView的時候。在"onactivated"事件中，在 processAll( );上添加如下代碼：

articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("C9Data", publicMembers);

你需要在方法中聲明一個"articlesList"的變量。

Binding.List( ) 類型被用來綁定數據到WinJS控件，它包含了一些方法將幫助你在后臺添加數據。而且由于它內部良好的綁定機制，當數據改變時，視圖會自動變化。

還沒完，你也許會注意到這里使用了簡潔的JavaScript代碼配合"module pattern"模式。這里使用了自動執行的匿名JS方法到"default.js"中。接下來需要找到輸出數據的方法。這就是為什么需要實現Namespace的原因。這個案例中需要輸出一種類型為"C9Data"的對象。而且這些對象也具有用來顯示的"ItemList"屬性。

現在來寫一個方法從RSS那邊獲取數據。然后轉譯成JS對象:

function downloadC9BlogFeed() {
    WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {

    });
}

var items = rss.responseXML.querySelectorAll("item");

for (var n = 0; n < items.length; n++) {
    var article = {};
    article.title = items[n].querySelector("title").textContent;
    var thumbs = items[n].querySelectorAll("thumbnail");
    if (thumbs.length > 1) {
        article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;
        article.content = items[n].textContent;
        articlesList.push(article);
    }
}

我希望這些代碼應該能表達清楚意思。它通過"item"節點獲取到它的任何屬性(title,thumbs以及content屬性)。當然這里要記住這些屬性的名稱；等會就要用上的，最后的代碼就是為集合中添加數據。

那么現在使用這行代碼后再啟動應用:

WinJS.UI.processAll().then(downloadC9BlogFeed);

接下來指定這個控件的數據源。

<div id="articlelist" data-win-control="WinJS.UI.ListView" 
     data-win-options="{ itemDataSource: C9Data.ItemList.dataSource }"></div>

最后，我們需要一些基本的CSS來展示這些東西，在"default.css"中添加以下代碼:

#articlelist {
    width: 100%;
    height: 100%;
}

#articlelist .win-item {
    width: 150px;
    height: 150px;
}

這個CSS表示ListView控件將占據所有的容器控件，而且每一個單個項目將占據150x150像素大小。

好了，再按F5，你將能看到下圖這樣。
Windows 8 HTML5 Metro Style App: 如何創建一個RSS閱讀器

先別急，這樣丑陋的外觀完全就是預期的！我們還需要完成一部分設計工作。

Step 5: 使用Blend的模板來修改外觀設計

到了該修改外觀的時候了，這里比較簡單，只需要修改一段簡單的HTML模板就行，可以看出里面填充了不少WinJS標簽。

回到"default.html"頁，然后在"main"區域的上面添加如下HTML代碼:

<div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
    <div class="listItemTemplate">
        <div class="listItemImage">
            <img data-win-bind="src: thumbnail" />
        </div>
        <div class="listItemTitle" data-win-bind="innerText: title">
        </div>
    </div>
</div>

這就是一個標記了“WinJS.Binding.Template”的HTML模板。也展示了"data-win-bind"定義的表達式的用法。

最后我們需要定義WinJS控件不要去使用默認的模板而是使用剛才我們創建的模板。

<div id="articlelist" data-win-control="WinJS.UI.ListView" 
     data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }"> 
</div>

如果你再運行程序的話，你將看到下圖這樣: