使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个小型 RSS 阅读器（第 2 部分）
4.60/5 (4投票s)
如何在 30 分钟内创建一个简单的 RSS 阅读器。
构建 Windows RSS 阅读器系列
- 使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个小型 RSS 阅读器
- 使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个小型 RSS 阅读器（第 2 部分）
引言
本文是“使用 HTML5 构建 Windows 8 应用：如何在 30 分钟内创建一个简单的 RSS 阅读器（第一部分/第二部分）”的第二部分。如果您尚未阅读，请先阅读。
现在我们将学习如何显示每篇文章的详细信息。为此，我们将使用**过渡动画**，我们将利用**模拟器**，并将继续探索 Blend 来使用**CSS3 多列**等功能。
与上一篇文章一样，您将在文章末尾找到可下载的源代码。
在本文中，我们将介绍
- 步骤 1：使用模拟器
- 步骤 2：显示文章详情
- 步骤 3：使用 Blend 完成详情视图的设计
- 步骤 4：下载源代码和结论
注意：本文已于 2012 年 8 月 21 日更新，以实施 Windows 8 Release Preview 和 RTM 之间的 UI 和代码更改。总的来说，如果您需要将应用程序从 RP 迁移，您应该阅读本文档：重大更改文档。在我们的例子中，RP 和 RTM 之间没有影响。
步骤 1：使用模拟器
了解您的应用程序在触摸设备上的行为以及未来 Windows 8 平板电脑和 PC 的各种分辨率下的行为非常重要。
我们提供了一个很棒的工具，可以帮助您进行首次测试：模拟器。
例如，如果您打开的是上一篇文章结束时的项目，我们可以通过点击此按钮来启动模拟器，从而模拟一些触摸交互
模拟器届时将启动。它或多或少是在模拟一次您自己的 RDP 会话。您应该看到以下输出
您现在可以点击此图标
它将模拟触摸。尝试在虚拟屏幕上滑动虚拟手指。您将看到一些惯性和弹性效果已为您实现。同样，如果您触摸一个元素并向下滚动，您将选中它。这与用鼠标右键单击它相同的操作。您在这里看到了使用原生 WinJS 控件的优势，这些控件为您实现了所有此类逻辑。
另一个有用的按钮是处理各种分辨率的按钮
例如，尝试模拟一个 23 英寸、1920x1080 分辨率的显示器。您现在应该看到这样的布局
您可能已经注意到，在 1080p 分辨率下，我们将元素的行数从 2 行切换到 3 行，并将可见列数从 5 列切换到 7 列。ListView 控件也为您处理了各种外形尺寸。
因此，即使 WinJS 在 HTML5 Windows 应用商店项目中不是强制性的，也不要低估它能为您带来的所有免费优势！
步骤 2：显示文章详情
为了显示文章内容，我们需要另一段 HTML。导航到“default.html”页面并插入以下代码
<div id="articlecontent"></div>
我们将通过代码插入文章内容。打开“default.js”。在 Binding.List 实例化之前，插入以下代码
var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);
我们正在定位 DOM 中的 articlelist 元素，该元素现在必须是 WinJS ListView 控件，这要归功于 processAll 函数的执行。该函数现在公开了一个名为 iteminvoked 的事件。当您单击/触摸列表中的某个元素时，将触发该事件。此外，我们正在订阅“back”按钮的“click”事件，以便能够简单地返回到欢迎屏幕。
现在我们需要创建关联的事件处理程序。它们如下
function backButtonClick(e) {
articlecontent.style.display = "none";
articlelist.style.display = "";
}
function itemInvoked(e) {
var currentArticle = articlesList.getAt(e.detail.itemIndex);
WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
articlelist.style.display = "none";
articlecontent.style.display = "";
}
这里的概念非常简单。当用户单击某个元素时，我们将在集合中检索具有其索引（e.detail.itemIndex）的相应对象。我们通过 setInnerHTMLUnsage() 函数将 HTML 内容注入到主页面中刚刚插入的 div 节点上的 innerHTML 属性中。但是，为什么我们需要为此使用这个特殊的函数呢？
关于 WinRT 应用安全上下文的一些快速说明
Windows 应用商店 HTML5 应用程序的安全上下文与经典网页不同。在我们的例子中，直接访问 innerHTML 属性受到保护/扫描。
例如，如果您尝试插入从“公共网络”空间下载的 HTML，默认情况下会引发安全异常来保护您。我相信您不希望某些脚本注入控制您的应用程序。因此，默认情况下，我们阻止了这种情况。
但是，如果您确实知道自己在做什么，您可以选择通过调用 setInnerHTMLUnsafe() 函数来“绕过”此自动检查。
同样与安全上下文相关，在应用程序中插入 <iframe> 会有所不同。如果您对细节感兴趣，可以阅读以下文章
好的，让我们回到我们的主要话题。
我们显示文章内容的方式非常简单。我们通过将列表的“display”设置为“none”来隐藏元素列表，并显示“articlecontent” div。按下“back”按钮时，我们执行完全相反的操作。
好的，按 F5，单击其中一个项目后，您应该会看到类似这样的内容
您会注意到布局远非酷炫，但我们将在几分钟内使用 Blend 来处理这个问题。
与此同时，我想关注一个当前版本中非常令人讨厌的问题。在文章内部导航回欢迎屏幕可以正常工作。但是用户体验不是最佳的。文章的详细信息在没有任何过渡的情况下出现。
因此，我们来到了 Windows 8 新 UI 的一个重要方面：“快速流畅”的体验。您需要向用户暗示性能，并告诉他们您的应用程序确实充满活力。为此，只需添加一些轻微的过渡动画就可以完全改变感知。从技术上讲，您可以通过两种方式实现它们。
您可以使用纯 CSS3 Transitions/Animations 来实现它们，以显示您感兴趣的内容。然后由您来寻找合适的动画。如果您想了解这些新的 CSS3 功能是如何工作的，我们（David Catuhe 和我）写了一些入门文章，您可以在这里找到：
或者，您可以使用 WinJS 库，该库公开了预构建的动画，以帮助遵循新的 Windows 8 UI 指南。在底层，您会发现 CSS Transform 和 transitions 的用法。但对我们开发人员来说，我们只需要一行简单的 JavaScript 调用。
例如，在 itemInvoked() 处理程序中，在该函数末尾插入此行代码
WinJS.UI.Animation.enterPage(articlecontent);
请在第二个事件处理程序的末尾插入这一行
WinJS.UI.Animation.enterPage(articlelist);
按 F5，您现在应该会在导航应用程序时看到一些微妙的过渡。相信我们，它们将真正改变用户体验！
步骤 3：使用 Blend 完成详情视图的设计
切换回 Blend。它将再次要求您重新加载在 Visual Studio 中所做的所有更改。
今日问题：**如何设计详细视图，因为我们需要通过项目选择来模拟导航操作？**
嗯，您在上一篇文章中已经有了答案。Blend 5 可以实时运行您的 HTML5 应用程序。但您可能缺少一个附加细节。您可以单击此按钮切换到“*交互模式*”
它应该命名为“**启用交互模式**”。完成此操作后，您应该能够与您的应用程序进行交互，导航到您想要查看的文章内容，然后通过单击同一个按钮切换回设计界面。在我看来，我决定使用这篇文章作为基础
在样式部分，在适当的媒体查询下，添加一个新规则，目标是“**#articlecontent**”并立即选中它。
在“**大小**”部分，将**宽度**和**高度**设置为**100%**。
在“**布局**”部分，设置左侧**内边距**为**120px**，以便内容与标题对齐。
这引发了一个新问题。我们的“articlecontent” div 的布局不再适合屏幕宽度。
为了解决这个问题，修改“**宽度**”属性，然后单击选择“**自定义表达式**”
我们将使用 CSS Calc() 运算符。输入以下表达式“**calc(100%-120px)**”。
通过这种方式，我们更好地遵循了新的 Windows 8 UI 指南。我们还有一个最终任务，可以以更好的方式实现这一点：允许用户水平滑动内容，使其更易读。
让我们从可读性开始。有一个非常有用的 CSS3 功能，易于实现：**CSS3 多列**。
跳转到“**CSS 属性**”面板的“**多列**”部分。修改布局，创建**480px 列宽**，列之间有**80px 的间距**。
它开始看起来不错了，不是吗？
总之，我们需要实现水平滑动。进入“**搜索属性**”文本框并键入“**over**”。Blend 将然后过滤包含“over”关键字的所有属性。
将“**overflow-x**”属性设置为“**auto**”，将“**overflow-y**”设置为“**hidden**”。
您可以切换回 Visual Studio，接受更改并按 F5 来体验最终结果。
特殊额外奖励关卡，专为勇士准备
好吧，鉴于我感觉您仍然想玩 Blend，让我们添加另一个功能。我们在阅读技术文章时，最重要的东西是什么？当然是源代码！
了解这一点后，请不要犹豫，以某种方式强调代码，以吸引开发者的眼球。
在 Channel9 的例子中，他们有一个绝妙的主意，即将代码部分插入到 <pre> 标签中。这将简化我们为这部分样式设计的工作。
添加一个新 CSS 规则“**#articlecontent pre**”。
切换到交互模式，并导航到其中一些源代码可见程度较高的文章。
选中您刚刚添加的最后一个规则，然后转到 CSS 属性的“**背景**”部分。单击以设置颜色
然后您可以使用这个美妙的颜色编辑器来做出您的选择
但是，如果您和我一样是一个贫穷的开发者，您可能会自然而然地倾向于选择有史以来最糟糕的颜色。所以，单击颜色拾取器图标，然后选择最接近的 Blend 灰色。这显然是一种很好的灰色。
最后，在 <pre> 上，将 overflow-x 属性设置为 auto，将 overflow-y 设置为 hidden。
按 F5 将带来这种体验
步骤 4：下载源代码和结论
好吧，我希望您现在已经相信我没有说谎。如果您足够专注，您应该花了 30 分钟构建这个小程序。
这是要下载的源代码：简单的 Channel9 阅读器文章 2
感谢您的阅读！最后，我想提醒您注意一个特定点。这两个教程在网上收到了一些用户的良好反馈。由于它们旨在以简单的方式解释 WinJS 和 Windows 应用商店应用程序的基础知识，因此我对此非常满意。
尽管如此，**它仍然缺少许多功能才能使其成为一款出色的 Windows 8 应用程序**
- 一个漂亮的**启动屏幕**和**动态磁贴**
- 为用户提供一些视觉反馈，告知我们在启动阶段正在加载数据
- 一个**快照视图**
- 更好的 Windows 8 集成，通过**搜索魅力**（Search Charm）和可选的共享魅力（Share Charm）进行搜索
- 使用**导航框架**来显示文章，而不是隐藏/显示我们的两个 div
- 添加**离线模式支持**，以便在没有网络连接的情况下使用应用程序，并避免每次都重新加载相同的数据
我很快将在我的博客上撰写专门介绍这些内容的文章，以继续这个系列。在此期间，如果您想进一步深入并实现其中一些概念，这里有一些很好的文章可供阅读
- David Catuhe 撰写的一系列精彩文章：如何在 Windows 8 中使用 HTML5、CSS3 和 JavaScript 制作完整的应用程序（一周内）。您将了解如何支持快照视图、搜索合同、导航框架以及许多其他很棒的 Windows 8 功能。
- 使用 JavaScript 创建你的第一个 Metro 风格应用，涵盖相同主题，并且是这两篇文章的补充。
最后，如果您想在 WordPress 博客上测试这两个教程，请不要忘记阅读这篇补充文章：Windows 8 HTML5 WinRT 应用：30 分钟 RSS 阅读器 - 构建你的 WordPress 版本。