使用HTML5构建Windows 8应用程序：完成我们的小型RSS阅读器

本文是第二部分： 构建Windows 8应用与HTML5：如何创建一个小的RSS阅读器 。 如果你还没有读它，首先要检查它。

现在我们要看看怎样显示每篇文章的细节。 我们将使用一个过渡动画 ，我们将用模拟器玩，我们将继续探索混合使用CSS3多列实例。

这篇文章中，我们将看到：

- 步骤1：使用模拟器
- 步骤2：显示所述物品细节
- 步骤3：在完成与混合详细视图的设计
- 第四步：源代码下载和结论

步骤1：使用模拟器

重要的是要知道您的应用程序的行为与触摸屏设备和未来的各项决议的Windows 8平板电脑和PC是非常重要的。

我们提供了一个很酷的工具，可以帮助你做你的第一个测试：模拟器。

举例来说，如果你打开这个项目，因为它是在以前的文章的最后，我们可以通过启动通过此按钮模拟器模拟一些触摸交互：

然后，仿真器将启动。 这或多或少对自己的模拟RDP会话。 这里是你应该有输出：

现在，您可以点击这个图标：

这将模拟触摸。 尝试将虚拟手指在虚拟屏幕上滑动。 然后你会看到一些惯性和弹跳的效果已经为你实现。 以同样的方式，如果你摸的元素，其向下滑动，你会选择它。 这是同样的行动，这样做就可以了右键点击你的鼠标。 在这里您将看到使用实现所有这样的逻辑对你本地WinJS控件的好处。

另一个有用的按钮是一个处理的各项决议：

尝试例如，模拟具有1920×1080分辨率的23寸显示器。 您现在应该看到这样的布局：

您可能已经注意到，我们从元素的两条线在1080和从五个可见列七切换到三线。 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);

我们针对我们的articlelist从DOM元素，现在必须是WinJS ListView控件感谢执行processAll功能。 那么这一个是现在暴露命名的事件iteminvoked 。 它的提出，当你点击/触摸列表的元素之一。 此外，我们订阅了click的事件back按钮能够简单地返回到欢迎屏幕。

现在，我们需要创建关联的事件处理程序。 他们来了：

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 ）。 我们注入HTML内容到innerHTML只是通过插在主网页的DIV节点的属性setInnerHTMLUnsage()函数。 但是，为什么我们需要使用这个特殊功能是什么？

对WinRT的应用程序的安全上下文一些快速笔记

一个Windows应用商店HTML5应用程序的安全上下文是一个经典的网页不同。 在我们的情况下，试图直接访问到innerHTML属性被保护/扫描。

例如，如果你试图插入一些HTML从«公众网»空间下载，安全异常将被默认提出来保护你。 我敢肯定，你不想让你的应用程序的某些脚本注入服用控制。 所以在默认情况下，我们要防止这一点。

但如果你真的知道你在做什么，你通过调用有选择地“旁路”这种自动检查setInnerHTMLUnsafe()函数。

联系到安全上下文还插入<iframe>在您的应用程序，例如略有不同。 如果你感兴趣的细节，这里有一些文章阅读：

- HTML，CSS和JavaScript功能和区别
- 特点和具体环境的限制
- 使HTML更安全：细节toStaticHTML的

好吧，让我们回到我们的主要话题。

我们显示文章的内容的方式是非常简单的。 我们通过切换其隐藏我们的元素列表中display ，以none和我们显示了articlecontent股利。 当按下back按钮，我们正在做的正好相反。

好了，按F5，你应该点击其中一个项目后有这样的事情：

你会发现，布局远未凉爽，但我们在混合几分钟上班上。

在此期间，我想专注在某件事在当前版本真烦。 文章并回到欢迎屏幕内的导航工作正常。 但用户体验不是最佳的。 文章的细节到达，没有任何过渡。

然后，我们来到了新的Windows 8用户界面的一个重要观点：在“ 速度与流体 ”的经验。 你需要建议性能的用户，并告诉他们，你的应用程序是真正活着。 要做到这一点，简单地增加一些轻微的过渡动画可以完全改变看法。 从技术上讲，你可以通过两种方式实现它们。

您可以使用纯CSS3过渡/动画，以显示你感兴趣的内容执行。然后由你来找到合适的动画。 如果您想了解这些新的CSS3功能的工作，我们已经取得了一些介绍文章大卫Catuhe和我在这里：

- 介绍CSS3过渡
- 介绍CSS3动画

或者你也可以使用WinJS库暴露预建动画的帮助下新的Windows 8用户界面的指导方针。 引擎盖下，你会发现变换和转换CSS的使用。 但是，对于我们的开发人员，我们只是JavaScript的一个简单的线条来调用。

例如，在itemInvoked()的处理程序，在函数的末尾插入这行代码：

WinJS.UI.Animation.enterPage(articlecontent);

并请插入这个在第二个事件处理程序的结尾：

WinJS.UI.Animation.enterPage(articlelist);

按F5，你现在应该有一些微妙的转变，当你的应用程序中进行导航。 相信我们，他们真的会在用户体验上的差别！

步骤3：在完成与混合详细视图的设计

切换回混合。 它会再次要求你重新加载所有你在Visual Studio中完成的改变。

一天问： 你将如何能够设计出详细视图，我们需要模拟通过项目选择导航行动？

嗯，你已经有前面的文章中的答案。 混合5现场运行你的HTML5应用程序。 但你也许缺少更多细节。 您可以通过点击此按钮切换到“互动”模式：

它应该被命名为“ 交互式模式转向 ”。 一旦这样做，你应该能够与您的应用程序，浏览到文章的内容进行互动，你想审查和切换回设计表面通过点击相同的按钮。 据我的情况，我决定用这篇文章作为基础：

在样式部分，在适当的媒体查询 ，添加新的规则靶向#articlecontent并立即选择它。

在“ 上浆 “部分，固定宽度和高度为100％。

在“ 布局 ”的一部分，就把120像素的左填补才能对齐的标题的内容。

这就提出了一个新的问题。 我们的布局articlecontent DIV并不在我们的屏幕宽度不合适了。

为了解决这个问题，修改width属性，然后单击选择custom expression ：

我们将使用CSS计算器（）运算符 。 输入下列表达式calc(100%-120px)

我们更好地跟随这种方式在新的Windows 8用户界面的指导方针。 我们已经有了一个最终的任务做它一个更好的办法：允许用户水平滑动的内容，使其更具可读性。

让我们开始可读性。 有一个非常有用的功能，CSS3为便于到位：CSS3 Multicolumns。

跳进“CSS属性 ”面板中的“ 多列 ”一节。 修改布局宽度与它们之间的差距80px创建480个像素列 。

它开始看起来很好，不是吗？

最后，我们需要实现横向滑动。 进入“ 搜索属性 ”文本框，并输入over ”。 然后共混物将过滤所有包含的属性over关键字。

设置“ 溢出-X”属性设置为auto和“ 溢出-Y” hidden 。

您可以切换回Visual Studio中，接受最终的结果的变化，按F5发挥。

特别额外的奖金水平勇士

嗯，我觉得你还是想用混合演奏，让我们添加另一个特点。 什么是我们，而我们正在阅读一篇技术性的文章最重要的事情？ 当然，源代码！

一旦你知道，不要犹豫，把一些重点的代码的方式或在另一个赶上了开发者的眼球。

在Channel9的情况下，它们有优良的想法插入代码部件为<pre>标记。 这将简化我们的生活风格的这一部分。

添加一个新的CSS规则#articlecontent pre 。

切换到交互模式，然后导航到的产品，其中一些源代码是可见的足够了。

选择你刚才添加的最后一个规则，进入Background的CSSS性质的部分。 点击设置颜色：

然后，您就可以使用这个奇妙的颜色编辑器，让您的选择：

但如果你是一个贫穷的开发商像我一样，你可能会永远选择最糟糕的色彩的自然趋势。 因此，点击彩色摄像图标，并选择最近的混合灰色。 这显然是一个很好的灰色。

要肯定的结论，在<pre>设置“ 溢出-X”属性auto与“ 溢出-Y”来hidden 。

按F5会带给你这样的经历：

第4步：源代码下载和结论

嗯，我希望你现在相信我没有说谎。 如果你足够专注，你应该已经花了30分钟，以建立这个小应用程序。

这里是源代码下载： 简单的Channel9的读者第二条

谢谢阅读！ 最后，我想提醒你在一个特定的点。 这两个教程作了简单的方式WinJS和一个Windows Store应用程序的非常基础来解释。

尽管如此， 它缺乏很多的功能，使它成为一个伟大的Windows 8应用程序 ：

• -一个漂亮的闪屏和动态瓦片
• - 一些视觉反馈给用户，告诉他我们是装载在发射阶段的数据
• -一个快照视图
• -一个更好的Windows 8整合办通过搜索魅力可选的份额一次搜索
• -通过使用导航框架中显示的文章，而不是隐藏/显示我们的div 2
• -添加离线模式支持 ，以便能够使用该应用程序而无需网络访问，并避免每次重装该相同的数据

如果您想进一步去落实一些概念，这里有一些好文章阅读：

• 一个优秀的系列大卫Catuhe完成： 如何煮在一个星期与HTML5，CSS3和JavaScript一个完整的Windows 8应用程序 。 你会发现如何支持抢购视图，搜索合同，导航框架和很多其他很酷的Windows 8功能。
• 使用JavaScript创建第一个Metro风格的应用程序涵盖了同一主题，并补充到这些2篇文章。

最后，如果你想测试一个WordPress博客这两个教程，不要忘了阅读本补充后： Windows 8的HTML5的WinRT应用：在30分钟的RSS阅读器-建立你的WordPress版本 。

From: https://www.sitepoint.com//building-a-windows-8-app-with-html5-completing-our-small-rss-reader/