Windows 8 HTML5 Metro Style App: 如何创建一个RSS阅读器
openkk
12年前
现在我打算用两篇教学文章来教教大家用 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":
这里命名为"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或者点击下图这个按钮来启动应用。
运行起来你将能看到下图这个样子。
你应该看到这里有个设计缺陷：后退按钮以及标题显示都不很搭调，所以来让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，你将能看到下图这样。
先别急，这样丑陋的外观完全就是预期的！我们还需要完成一部分设计工作。
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> 如果你再运行程序的话，你将看到下图这样:
顺便提一下，如上图所示，Blend 5是所见即所得的设计界面，这实在太爽了。
Step 6: 用视频展示所有的步骤以及提供源码下载
下面就是两个 HTML5 教学视频，涵盖了我这篇文章的所有细节。
注意：这些视频还只是Consumer Preview版的，我等会更新到Release Preview版。
第一个视频演示了步骤 1,2,3.
第二个视频演示了步骤 4,5
