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

程序员rss

本文是第二部分： 使用HTML5构建Windows 8应用程序：如何创建小型RSS阅读器 。 如果您还没有阅读过，请先检查一下。

现在，我们将看到如何显示每篇文章的详细信息。 我们将使用该过渡动画 ，将使用模拟器，并且我们将继续发现Blend，例如使用CSS3多列 。

在本文中，我们将看到：

–步骤1：使用模拟器
–步骤2：显示文章的详细信息
–步骤3：使用Blend完成细节视图的设计
–步骤4：源代码下载和结论

步骤1：使用模拟器

了解您的应用程序在触摸设备以及未来Windows 8平板电脑和PC的各种分辨率下的行为非常重要。

我们提供了一个很酷的工具，可以帮助您进行首次测试：模拟器。

例如，如果您按上一篇文章的结尾打开项目，则可以通过以下按钮启动模拟器来模拟一些触摸交互：

然后将启动模拟器。 它或多或少地在您自己上模拟RDP会话。 这是您应该具有的输出：

您现在可以单击以下图标：

它将模拟触摸。 尝试在虚拟显示器上滑动虚拟手指。 然后，您将看到已经为您实现了一些惯性和弹跳效果。 同样，如果触摸某个元素并将其向下滑动，则将其选中。 这与用鼠标右键单击它的操作相同。 您会在这里看到使用本地WinJS控件的好处，该控件为您实现了所有此类逻辑。

另一个有用的按钮是处理各种分辨率的按钮：

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

您可能已经注意到，我们将元素的两行切换为1080中的三行，并将可见的五列更改为七列。 ListView控件还可以为您处理各种外形尺寸。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

因此，即使WinJS在HTML5 Windows Store项目中不是必需的，也不要低估它可能为您带来的所有好处！

步骤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元素，由于processAll函数的执行，该元素现在必须是WinJS ListView控件。 然后，此事件现在公开一个名为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 ）的适当对象。 我们正在将HTML内容通过setInnerHTMLUnsage()函数注入到刚刚插入到主页中的div节点的innerHTML属性中。 但是为什么我们需要为此使用特殊功能呢？

有关WinRT Apps安全上下文的一些快速说明

Windows Store HTML5应用程序的安全上下文不同于传统的网页。 在我们的例子中，尝试直接访问innerHTML属性受到保护/扫描。

例如，如果您尝试插入从“公共网站”空间下载的某些HTML，则默认情况下会引发安全异常以保护您。 我确定您不想让脚本注入来控制您的应用程序。 因此，默认情况下，我们会阻止这种情况。

但是，如果您真的知道自己在做什么，则可以选择通过调用setInnerHTMLUnsafe()函数来“绕过”此自动检查。

同样链接到安全上下文，例如，在应用程序中插入<iframe>稍有不同。 如果您对这些细节感兴趣，请阅读以下文章：

– HTML，CSS和JavaScript的功能和差异
– 按上下文的功能和限制
– 使HTML更安全：toStaticHTML的详细信息

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

我们显示文章内容的方式非常简单。 我们通过将元素的display切换为none来隐藏元素列表，并显示articlecontent div。 当按下back按钮时，我们正好相反。

好的，按F5键，然后单击以下项目之一，您应该会看到类似的内容：

您会注意到布局并不是很酷，但是我们将在Blend中稍候片刻。

同时，我想重点介绍当前版本中确实令人讨厌的内容。 文章内的导航并返回到欢迎屏幕，效果很好。 但是用户体验不是最佳的。 这篇文章的详细信息没有任何过渡。

然后，我们进入了新的Windows 8 UI的重要点：“ 快速流畅 ”的体验。 您需要向用户建议性能，并告诉他们您的应用程序确实还很活跃。 为此，只需添加一些微小的过渡动画就可以完全改变感知。 从技术上讲，您可以通过两种方式实现它们。

您可以使用纯CSS3过渡/动画来实现它们，以显示您感兴趣的内容。然后，您可以自行确定合适的动画。 如果您想了解这些CSS3新功能的工作方式，请在此处发表一些介绍性文章David Catuhe和我：

– CSS3过渡简介
– CSS3动画简介

或者，您可以使用WinJS库，该库公开预建的动画以帮助遵循新的Windows 8 UI准则。 在后台，您会发现CSS转换和过渡的用法。 但是对于我们开发人员而言，我们只需要编写简单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的布局不再适合我们的屏幕宽度。

要解决此问题，请修改width属性，然后单击以选择一个custom expression ：

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

我们最好以这种方式遵循新的Windows 8 UI准则。 我们有一项最终任务要以更好的方式做到这一点：允许用户水平滑动内容并使内容更具可读性。

让我们从可读性开始。 有一个非常有用CSS3功能可以轻松实现： CSS3 Multicolumns 。

跳进“CSS属性 ”面板中的“ 多列 ”一节。 修改布局以创建480px的列宽 ，它们之间的间距为80px 。

开始看起来不错，不是吗？

最后，我们需要实现水平滑动。 进入“ 搜索属性 ”文本框，然后over “上键入”。 然后Blend将过滤包含over关键字的所有属性。

将“ overflow-x ”属性设置为auto ，将“ overflow-y ”属性设置为hidden 。

您可以切换回Visual Studio，接受更改，然后按F5播放最终结果。

战士的额外额外奖励等级

好吧，因为我觉得您仍然想玩Blend，所以让我们添加另一个功能。 在阅读技术文章时，对我们来说最重要的事情是什么？ 当然是源代码！

一旦您知道了这一点，请立即以某种方式强调代码，以引起开发人员的注意。

对于Channel9，他们有一个绝妙的主意，将代码部分插入<pre>标签。 这将简化我们对这部分进行样式设置的工作。

添加新CSS规则#articlecontent pre 。

切换到交互模式，然后导航到文章，其中的某些源代码足够可见。

选择您刚刚添加的最后一条规则，然后进入CSSS属性的“ Background部分。 单击以设置颜色：

然后，您将能够使用这个出色的颜色编辑器做出选择：

但是，如果您是像我这样的贫穷开发人员，您可能会自然而然地选择有史以来最差的颜色。 因此，单击颜色选择图标，然后选择最近的混合灰色。 这显然是一种很好的灰色。

可以肯定地说，在<pre> ，将“ overflow-x ”属性设置为auto ，将“ overflow-y ”属性设置为hidden 。

按F5键将为您带来这种体验：

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

好吧，希望您现在确信我没有说谎。 如果您有足够的注意力，则应该花费30分钟来构建这个小应用程序。

这是要下载的源代码： Simple Channel9 Reader Article2

谢谢阅读！ 最后，我想提醒您一个特定的问题。 编写这两个教程是为了以简单的方式说明WinJS和Windows Store应用程序的基础。

但是， 它缺少许多功能使其无法成为出色的Windows 8应用程序 ：

• –漂亮的启动画面和动态磁贴
• –对用户的一些视觉反馈，告诉他我们正在启动阶段加载数据
• – 快照
• –更好的Windows 8集成，可通过搜索超级按钮和共享（可选）进行搜索
• –使用导航框架显示文章，而不是隐藏/显示我们的2 div
• –添加了离线模式支持 ，以能够在没有网络访问的情况下使用该应用程序，并避免每次都重新加载相同的数据

如果您想进一步实现这些概念中的一些，请阅读以下优秀文章：

• David Catuhe撰写的精彩系列文章： 如何在一周内使用HTML5，CSS3和JavaScript编写完整的Windows 8应用程序 。 您将发现如何支持快照视图，搜索合同，导航框架以及许多其他出色的Windows 8功能。
• 使用JavaScript来创建您的第一个Metro风格的应用程序 ，该应用程序涵盖同一主题并且是这两篇文章的补充。

最后，如果您想在WordPress博客上测试这两个教程，请不要忘记阅读以下补充文章： Windows 8 HTML5 WinRT App：30分钟内的RSS阅读器–构建WordPress版本 。

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

程序员rss