使用HTML5构建 Windows 8应用程序: 在 30min ( 第 2部分) 中,如何创建小型RSS阅读器

分享于 

14分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

构建 Windows RSS阅读器系列:

介绍

本文是第二部分: Windows 8 HTML5应用程序: 如何在 30min 中创建一个小型RSS阅读器( 第 1部分/2)。 如果你还没读过,先查一下。

现在,我们将看到如何显示每个文章的细节。 如果你是 transition,我们将会用的CSS3 multi multi,我们会继续发现混合使用的CSS3多列 instance。

http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-10-46-metablogapi/7848.image_5F00_thumb_5F00_0252CBAD.png

前一篇文章一样,你将在文章末尾找到要下载的源代码。

在本文中,我们将看到:

注释: 本文在1 年更新了,以实现 Windows 8版本预览和RTM之间的UI &中的更改。 通常,如果需要从RP迁移应用程序,则应阅读这里文档: 中断更改文档。 在本例中,& RTM之间有 0个影响。

步骤 1: 使用模拟器

了解应用程序与触摸设备的行为,以及未来 Windows 8平板电脑 & PC的各种分辨率是很重要的。

我们提供了一个可以帮助你完成第一次测试的很酷的工具: 模拟器。

例如,如果你打开项目的末尾,我们可以通过这个按钮模拟一些触摸交互:

image

模拟器将被启动。 它更或者是 LESS 模拟一个on会话。 以下是你应该具有的输出:

image

你现在可以单击这里 icon:

clip_image004

它将模拟触摸。尝试将虚拟手指滑动到虚拟显示器上。 你会看到一些惯性和弹跳效果已经为你实现了。 如果你触摸一个元素并将它的滑动,你将选择它。 这与用鼠标右键单击它是相同的操作。 在这里可以看到使用本机WinJS控件来实现所有这些逻辑的好处。

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

image

尝试模拟具有 1920 x1080分辨率的23''监视器。 你现在应该可以看到这种布局:

image

你可能已经注意到,我们从 2行切换到 3行到 1080p 行,从 5个可见列切换到 7行。 ListView控件还处理你的各种形式因素。

所以即使WinJS不是强制 inside Windows 存储项目,不要低估它可能带来的所有好处。

步骤 2: 显示文章的详细信息

为了显示文章的内容,我们需要另一块 HTML。 导航到" default.html"页面并插入这里页面:

<divid="articlecontent"></div>

我们将按代码插入文章内容。 打开" default.js"。 只需 上面 实例化,插入以下代码:

var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);

articlelist 元素的目标中,由于 processAll 函数的执行,我们现在必须是一个 WinJS ListView 控件。 这个事件现在公开了一个名为 iteminvoked的事件。 当你单击/触摸列表中的某个元素时,将引发该事件。 此外,我们订阅"背面"按钮的"单击"事件,以便能够简单地返回到欢迎屏幕。

我们现在需要创建关联的事件处理程序。 这里是:

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 = "";
}

这个概念在这里很简单。 当用户单击它的中一个元素时,我们将在 Collection 中检索它的索引( e.detail.itemIndex ) 中的适当对象。 我们将HTML内容注入到通过 setInnerHTMLUnsage() 函数插入主页面的div节点的innerHTML 属性中。 但是为什么我们需要用这个特殊的功能?

为WinRT应用程序的安全上下文提供一些快速的注释

Windows 应用程序的安全上下文与传统的网页不同。 对于本例,尝试直接访问innerHTML属性是 protected/scan。

你肯定不希望某些脚本注入控制你的应用程序。 所以在默认情况下我们阻止了。

但是如果你确实知道自己做什么,那么你可以通过调用 setInnerHTMLUnsafe() 函数来选择"通过"。

链接到安全上下文,在应用程序中插入 <iframe>的情况与。 如果你对详细信息感兴趣,请阅读以下文章:

好吧,我们回到主题。

我们展示文章内容的方式非常简单。 我们通过将它的"显示"转换为"无。"来隐藏元素列表,并显示" ArticleContent"div。 按""键时,我们做的正好相反。

好,按 F5,点击它的中一个项之后,你应该有这样的东西:

clip_image009

你将注意到布局不是很酷,但是我们将在几分钟内解决这个问题。

同时,我想专注于当前版本中非常烦人的内容。 导航 inside 文章和回到欢迎屏幕正常工作。 但用户体验并不是最佳的。 文章的细节没有任何转变。

然后,我们将进入新 Windows 8用户界面的一个重要点: "快速。"体验。 你需要向你的用户推荐性能,告诉他们你的应用程序确实存在。 为此,简单地添加一些过渡动画可以完全改变感知。 从技术上讲,你可以用 2种方式实现它们。

你可以使用纯CSS3过渡/动画来实现它们来显示你感兴趣的内容。 然后你就可以找到合适的动画了。 如果你想了解这些新功能如何工作,我们将介绍 David Catuhe和我这里的一些介绍文章:

  • 关于CSS3过渡的介绍,
  • 关于CSS3动画动画的简介。

或者你可以使用WinJS库来公开预先构建的动画,以帮助遵循新的Windows 8. 在幕后,你将发现CSS转换和转换的用法。 但是对于我们开发人员来说,我们只需要一个简单的JavaScript。

例如在 itemInvoked() 处理程序中,在函数的末尾插入此行代码:

WinJS.UI.Animation.enterPage(articlecontent);

请在第二个事件处理程序的末尾插入这里文件:

WinJS.UI.Animation.enterPage(articlelist);

按F5时,你在浏览 inside 时应该有一些微妙的转换。 相信我们,他们会在用户体验上有所差异 !

第 3步:利用混合完成细节视图的设计

switch 返回混合。它将再次请求你重新加载所做的inside Visual Studio 所做的所有更改。

今日问题:如何设计细节视图,我们需要通过项目选择模拟导航操作

好吧,你以前的文章里已经有答案了。 Blend 5运行你的HTML5应用程序。 但是你可能缺少其他细节。 单击这里按钮可以进入一个模式:

clip_image010

它应该命名为" 打开交互模式"。 完成之后,应该能够与应用程序交互,导航到你希望查看的文章内容,并通过单击同一个按钮回到设计服务器。 我已经决定把这篇文章作为一个基础:

image

在样式部分,在适当的媒体查询下,添加一个新的规则定位" #articlecontent",并立即选择它。

在"大小调整",将宽度 & 100%。

在"布局"部分,给内容加一磅的padding 120px,以使内容与标题对齐。

这引发了一个新问题。 我们" ArticleContent"div的布局在屏幕的宽度中不再适合。

要修复这里问题,请修改" 宽度"属性并单击以选择" 自定义表达式":

clip_image013

我们将使用 CSS Calc() 操作符。 输入下列表达式"计量( 100% -120像素) )"。

我们最好按照这种新的Windows 8 UI准则来做。 我们有一个最终的任务,以更好的方式完成它: 允许用户水平滑动内容并使它的更具可读性。

让我们从可以读性开始。有一个非常有用的RHN特性,可以容易地放置在地方: 位 CSS3 Multicolumns。

跳转到" CSS属性"面板的" Multicolumn Multicolumn"部分。 修改布局以创建 480px宽度间距为 80 px between between。

clip_image015

它看起来很好,不是?

最后,我们需要实现水平滑动。 转到" 搜索属性"文本框并键入" 。"。 Blend将过滤包含"上方"关键字的所有属性。

将"溢出x"属性设置为"自动","溢出y"设置为""。

你可以返回到,接受更改并按F5键以播放 final 结果。

warriors额外额外的额外额外奖金级别

好吧,因为我觉得你仍然想玩混合,让我们添加另一个特性。 对我们来说最重要的是当我们阅读科技文章时? 当然源代码 !

一旦你知道了,不要犹豫,以某种方式对代码进行强调,以捕捉开发人员的眼睛。

在Channel9案例中,他们将代码部分插入 <pre> 标签中是个好主意。 这将简化我们的生活。

添加新的CSS规则" #articlecontent pre"。

switch 进入交互式模式,并导航到一篇文章,它的中有一些源代码可以见。

选择刚才添加的最后一条规则,然后进入CSSS属性的" background"部分。 单击以设置颜色:

clip_image016

然后,你将可以使用这个出色的颜色编辑器来做出选择:

clip_image017

但如果你是一个差不多的开发人员,你可能会有一个自然的倾向来选择最坏的颜色。 所以,点击选取的颜色 icon 并选择最接近的混合灰色。 这是一个很好的灰色。

要确定,在 <pre>上,将 overflow-x 属性设置为 auto,将 overflow-y 设置为 hidden

按F5将给你带来这种体验:

clip_image019

步骤 4: 下载和结论的源代码

我希望你现在相信我没有说谎。 如果你 were,你应该花 30分钟来构建这个小应用程序。

以下是下载的源代码: 简单的Channel9阅读器 Article2.

感谢阅读最后,我将在具体的一点上给出警告。 这两个教程从网上获得了不错的反馈。 如果以简单的方式解释WinJS和 Windows 存储应用程序的基础,我非常高兴。

不过,缺少许多特性使它的成为优秀的Windows 8应用程序:

  • 一个漂亮的屏幕和一个收费的动态平铺
  • 给用户一些视觉反馈告诉他在发射阶段我们加载数据
  • 一个的捕捉视图
  • 更好的Windows 8集成,通过搜索魅力进行搜索,并选择共享一个
  • 使用导航框架来显示文章而不是隐藏/显示我们的两个 div
  • 在不增加网络访问权限的情况下,增加脱机模式支持,并且避免每次重新加载相同的数据

我将很快写文章专门为我的博客继续本系列文章。 同时,如果你想进一步执行并实现这些概念,下面是一些要阅读的好文章:

最后,如果你想在WordPress博客上测试这两个教程,请不要忘记阅读这个补充文章: Windows 8 HTML5应用程序: RSS阅读器在 30min 构建你的WordPress版本。


Window  PAR  Windows  构建  Html5  Building  
相关文章