使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个小型 RSS 阅读器

David Rousset

4.56/5 (6投票s)

2012年10月16日

CPOL

14分钟阅读

31224

如何使用 HTML5、CSS3 和 Windows 8 的 Microsoft JavaScript 框架 WinJS 构建一个小型 RSS 阅读器。

30 天开发一个 Windows 8 应用

构建 Windows RSS 阅读器系列

使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个小型 RSS 阅读器
使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个小型 RSS 阅读器（第 2 部分）

引言

我们将从零开始，通过这两篇教程学习如何使用 HTML5、CSS3 和 Windows 8 的 Microsoft JavaScript 框架 WinJS 构建一个小型 RSS 阅读器。然后，我们将构建一个面向 Windows 应用商店的 WinRT 应用程序。我们还将尝试使用 Expression Blend 5 来遵循 Windows 8 的 UI 设计指南。如果一切顺利，您应该可以在 30 分钟内完成这两篇文章的学习。

第一篇文章将帮助您创建欢迎屏幕，该屏幕将使用 WinJS ListView 控件。此控件将通过精美的缩略图显示最近发布的博客文章。第二篇文章将处理您单击其中一个项目时显示的详细信息视图。最后，您将在文章末尾找到可供下载的最终解决方案。您可以将这些视为有用的补充资源，以帮助您澄清本文档的某些部分。

先决条件：要学习这些教程，您首先需要

在您的机器上下载/购买并安装 Windows 8 RTM：http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx，这里还有一个 90 天试用版。
下载并安装适用于 Windows 8 的 Visual Studio 2012 Express RTM：http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx，这是免费的，当然您也可以使用付费版本。

注意：如果您使用的是 Mac，通过 BootCamp 或 Parallels 等虚拟机，效果也非常好。

注意 2：本文已于 2012 年 8 月 21 日更新，以实现 Windows 8 Release Preview 和 RTM 之间的 UI 和代码更改。总的来说，如果您需要将应用程序从 RP 迁移，您应该阅读本文档：重大更改文档。就我们而言，唯一的影响与新的 UI 和 Visual Studio 的命名有关。

注意 3：我在此添加了一篇专门针对 WordPress 和 Community Server 的补充文章：Windows 8 HTML5 Metro 风格应用：30 分钟构建 RSS 阅读器 - 构建您的 WordPress 版本

以下是本文将要介绍的内容的简要摘要

注意：这些教程基于 BUILD 大会上 Chris Sell 和 Kieran Mockford 提供的构建 Metro 风格应用的工具会议。我只是将其更新为 Windows 8 RTM。

步骤 1：创建一个空白应用程序

首先，您需要启动 Visual Studio 2012，并通过“文件 -> 新建项目”创建一个新的 JavaScript -> Windows 应用商店空白应用项目。

将其命名为“SimpleChannel9Reader”，因为我们将下载 Channel9 Coding4Fun 版块的 RSS 流，地址为：http://channel9.msdn.com/coding4fun/articles/RSS

步骤 2：为我们的主页面创建 HTML 和 CSS 基础

打开描述启动应用程序时显示的第一个页面的“default.html”文件。将以下 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>

现在我们有一个名为“main”的全局 div 容器，其中包含两个名为“banner”和“content”的子容器。标题将显示在页面顶部，内容部分将显示在其下方。

通过打开“css”目录中存储的“default.css”文件，为 CSS 添加一些样式。您会发现已经有一些预定义的 CSS，可以通过 Media Queries 处理各种可用的 Windows 8 视图。

在接下来的两篇文章中，我们将把重点放在“fullscreen-landscape”状态上。所以，请跳到该部分并插入以下 CSS 片段

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

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

#backbutton {
}

#maintitle {
}

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

这仅仅表示我们希望我们的 3 个主容器占据所有可用空间。

按 F5 键或单击以下按钮运行您的应用程序

逻辑上，您现在应该看到此屏幕

您还应该看到一个明显的设计问题：后退按钮和标题未对齐。让我们使用 Blend 5 来解决这个问题！

步骤 3：初次接触 Blend

启动 Blend 并导航到 SimpleChannel9Reader 项目所在的文件夹。Blend 将显示如下

目标是创建 2 个网格。第一个将用于主容器。它将定义为 1 列（占据所有可用宽度）和 2 行。第二个将由 1 行和 2 列组成，用于后退按钮和标题。

让我们从使用“Live DOM”窗口选择“main”元素开始

切换到“CSS Properties”部分，选择 #main 规则，然后在“Layout”窗口中将显示设置为“-ms-grid”。

我们将使用目前仅由 IE10 支持的 CSS Grid Layout 规范，但它应该很快会登陆其他浏览器。如果您想了解更多关于 Metro 模式下支持的布局类型的信息，可以阅读本文档：为应用选择 CSS3 布局。

如果您只想了解 CSS3 Grid 规范，请随意尝试这个 IE Test Drive 演示：动手实践：CSS3 Grid 布局

好的，现在显示已正确切换到网格，我们需要定义我们的网格。为此，请跳转到“Grid”部分并声明以下属性

我们将有一个独占屏幕完整宽度的列（无论分辨率如何），以及 2 行。第一行的高度将是“固定”的 132px，另一行将占据剩余空间。您可以在 Blend 设计器表面看到这一点

现在，我们将“content”元素移动到第 2 行。在“Live DOM”中选择它，选择 #content 规则，然后切换到其“Grid”属性。将“-ms-grid-row”值更改为 2。您也可以将“banner”元素移动到第 1 行，但它默认就会在那里。

现在，我们将分割我们的第 1 行，使其成为 2 列，以便将每个元素放置在正确的位置。选择“banner”元素，将其显示属性切换为“-ms-grid”，并定义 1fr 行和 2 列，宽度分别为 120px 和 1fr。

将“maintitle”元素移动到第 2 列，并通过将“-ms-grid-row-align”属性更改为“center”来使其垂直居中。

选择“backbutton”并跳转到“Layout”部分。设置 54px 的上边距和 40px 的左边距。如果您没有错过任何内容，您现在应该在设计表面上看到这一点。

通过“文件”->“全部保存”保存所有更改，然后返回 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 检查应用程序是否正常工作。

步骤 4：使用 XHR 加载数据并将其绑定到 ListView 控件

好的，现在让我们深入研究一下代码。

首先要做的是插入将负责在欢迎屏幕上显示文章缩略图的控件。我们将为此使用 WinJS。

WinJS 库或“Microsoft Window Library for JavaScript SDK”旨在帮助 JavaScript 开发人员轻松实现新的 Windows 8 UI 体验。它提供了一套控件、一个模板引擎、一个绑定引擎、用于处理异步调用的 Promises，以及用于处理命名空间的助手等。

例如，如果您想了解更多关于控件部分的信息，可以阅读本文档：快速入门：添加 WinJS 控件和样式

在 Windows 应用商店项目中，您将在“Solution Explorer”的“references”部分找到此库。

里面，您会找到默认的样式表，其中包含提供的 2 种深色和浅色主题以及 JavaScript 代码。随意看看。通过阅读代码来学习可能很有趣。

在我们的例子中，我们将使用 ListView 控件，该控件创建网格布局来显示元素列表。

打开“default.html”并在 section 标签内输入这段 HTML 代码

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

目前，它只是一个简单的经典 div。但是，它带有一个 data-win-control 属性，表明我们希望使用 WinJS 库将这个简单的 div 转换为 JavaScript ListView 控件。

此操作是通过一段神奇的 JavaScript 代码完成的，您可以在“default.js”中找到。这是代码

WinJS.UI.processAll();

此异步操作将解析 DOM，查找所有带有“data-win-control”属性的元素，并将它们转换为真正的 WinJS 控件，为您实现新的 Windows 8 UI 体验。如果您错误地删除了这一行，所有 div 将再次变成简单的 div。

现在我们需要用从 RSS feed 获取的数据来填充此 ListView。在绑定到“onactivated”事件的函数中，在 `processAll()` 行上方添加这段代码

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

然后，您需要在函数顶部声明 `articlesList` 变量，例如在 `app` 变量下方。

我们在这里声明了一个 `Binding.List()` 类型。这是用于将数据绑定到 WinJS 控件的类型。它包含一些方法，可以帮助您在后台添加数据，并通过绑定机制，数据将自动反映在视图中。

此外，您可能已经注意到我们通过使用现代模式（例如“module pattern”）来使用一些干净的 JavaScript 代码。为此，我们在“default.js”中有一个匿名自执行 JS 函数。然后，我们需要一种方法将一些公共数据暴露给外部函数。这就是为什么我们在关联的 WinJS 助手中使用 Namespace 概念。它帮助我们轻松定义我们想要公开的内容。在我们的例子中，我们将有一个公共“C9Data”对象，它将有一个“ItemList”属性，其中包含我们未来要显示的项目。

现在我们需要一个函数来抓取 RSS feed 中的数据，解析它们，并动态创建一些 JS 对象，然后将它们推送到著名的 binding list 中。这是我的函数

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

此函数首先运行一个异步 XmlHttpRequest 到指定的 URL。Promise 中的代码（如果您愿意，可以在 .then() 中）将在请求完成并收到数据后执行。然后，在这里我们需要通过您必须插入匿名函数中的这段代码来过滤数据

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 节点，访问它们的有趣属性，并将它们映射到一个动态创建的“article”对象，该对象具有 title、thumbs 和 content 属性。请记住这些属性的名称；我们稍后将使用它们。最后，此函数通过将此新对象添加到绑定集合来完成。

我们现在需要在应用程序启动阶段运行此函数。这段代码应该在 DOM 解析完成后执行，以便构建 WinJS 控件。所以，要做到这一点，请使用这段代码

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

我们必须指定控件的数据源。跳回到 HTML 代码，修改与 ListView 关联的 div 以更改其选项

<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 控件应占据其容器的所有可用空间，并且其每个项目（通过“.win-item”类”）应占用 150 x 150 像素。

按 F5 运行解决方案。您将得到一个像这样丑陋的输出

但不要惊慌，这种丑陋的输出是预期行为！我们仍然需要做一些设计工作。但您已经可以看到绑定工作正常，并且控件在触摸和鼠标体验方面工作良好。此外，控件会自动适应各种分辨率。因此，您在自己设备上看到的布局（显示的列数和行数）可能与上述屏幕不完全相同。

步骤 5：使用模板并通过 Blend 修改设计

现在我们需要更改每个元素的绘制方式。这正是模板引擎的目的。模板只是用 WinJS 属性标记的一段 HTML。

导航到“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 模板。这将帮助 WinJS 知道如何在 `processAll()` 执行后处理这段特殊的 HTML。您还将找到“data-win-bind”的使用，用于定义绑定表达式。这将帮助绑定引擎知道数据源中的哪些 JavaScript 属性需要映射到相应的 HTML 节点。除此之外，您还可以使用经典的 HTML。

现在我们需要配置 WinJS 控件，使其不再使用默认模板，而是使用上面的新模板。这只需更改选项即可完成

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

如果您现在运行应用程序，您应该看到这个屏幕