使用HTML5构建 Windows 8应用程序: 在 30min 年,如何创建小型RSS阅读器

分享于 

21分钟阅读

Web开发

  繁體

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

构建 Windows RSS阅读器系列:

介绍

,我们将学习如何通过这 2个教程构建一个小型RSS阅读器, HTML5 WinJS Windows。 然后我们将构建一个针对 Windows 存储的WinRT应用程序。 我们也将尝试遵循 Windows 8的用户界面设计准则,使用表达式混合 5. 如果一切顺利的话,你应该能在 30分钟后完成这两个项目。

第一篇文章将帮助你创建使用 WinJS ListView 控件的欢迎屏幕。 这个控件将显示最近发布的所有通过漂亮缩略图发布的博客文章。 第二个将在你单击一个项目时显示的详图视图处理。 最后,你将在最后找到要下载的final 解决方案。 如果你需要澄清本文的某些部分,视之为有用的补充资源。

要按照以下教程进行收费:要遵循以下教程,需要首先执行以下操作:

笔记:如果你有一个 Mac,它可以正常工作,因为BootCamp或者在一个虚拟机中处理类似的。

注意:本文已经在 Windows 8发布预览和RTM中的代码中进行了更新,以实现 UI &中的更改,以实现 UI。 通常,如果需要从RP迁移应用程序,则应阅读这里文档: 中断更改文档。 我们的例子中,唯一的影响是链接到新的UI和 Visual Studio 命名。

注意:我增加了一个补充帖子,专门为收费收费的WordPress 和社区服务器收费: Windows 8 HTML5地铁风格应用: RSS阅读器在 30min 构建你的WordPress版本。

下面是我们将在本文中看到的内容的简要摘要:

笔记:这些教程基于 Tools构建地铁风格应用的工具由Chris销售和 Kieran Mockford提供的构建。 我已经为 Windows 8 RTM更新了它。

步骤 1: 创建空白应用程序

首先需要做的是启动 Visual Studio 2012并通过"。文件-> 新项目"创建一个新的-> Windows 存储空白应用程序项目:

image

将它的命名为" SimpleChannel9Reader",因为我们将下载Channel9的Coding4Fun部分的RSS流: http://channel9.msdn.com/coding4fun/articles/RSS

步骤 2: 创建主页面的HTML和CSS库

打开描述将在启动应用程序时显示的第一页的" default.html"文件。 代替下面的HTML部分:

<p>Content goes here</p>

插入这个:

<divid="main"><headerid="banner"><buttonid="backbutton"class="win-backbutton"></button><h1id="maintitle"class="win-title">Welcome to Channel 9!</h1></header> 
 <sectionid="content"></section></div>

现在我们拥有一个全局div容器,其中"主要"id嵌入 2个名为"横幅"和"内容"的子容器。 header 显然显示在页面顶部,内容部分将显示为 below。

让我们通过打开"CSS"目录中存储的" default.css"文件来添加一些 CSS。 你将看到已经有了一些预先定义的CSS来处理各种可用的Windows 视图thanks感谢的媒体查询。

在这两篇文章中,我们将把精力集中在"全景"状态。 跳到本节并插入下面的CSS Fragment:

#main {
 width: 100%;
 height: 100%;
}
#banner {
 width: 100%;
 height: 100%;
}
#backbutton {
}
#maintitle {
}
#content {
 width: 100%;
 height: 100%;
}

这只是表示我们想要为 3个主容器取所有可用空间。

按F5键或者单击下面的按钮来运行应用程序:

image

从逻辑上讲,你现在应该看到这个屏幕:

clip_image005

你还应该看到一个明显的设计问题: 后退按钮和标题不对齐。 让我们用混合 5来解决这个问题 !

第 3步:与混合接触

启动混合并导航到SimpleChannel9Reader项目所在的文件夹。 然后混合将显示:

image

这里的目标是创建 2个网格。 第一个将是主容器。 它将由 1列定义,它将以 2行为所有可用的宽度 &。 2nd 将由 1行 & 2列定义回按钮和标题。

让我们通过使用" DOM"窗口从选择"主要"元素开始:

clip_image008

在" CSS属性"中,选择 #main rule规则,并在"布局"窗口 switch 显示到" -ms-grid"的:

clip_image009

我们将使用目前仅由支持的收费的CSS网格布局规范,但是它应该很快地在其他浏览器中。 如果你想了解有关地铁模式支持的布局类型的更多信息,请阅读本文: 为你的应用程序选择一个CSS3布局。

如果你只是想了解CSS3网格规范,可以自由地使用这个 IE 测试驱动演示: Hands: CSS3网格布局。

现在,显示已经正确地切换到网格了,我们需要定义网格。 为此,跳到"网格"部件并声明以下属性:

clip_image010

我们将在屏幕( 无论分辨率是多少) 和 2行的完整宽度中创建一个唯一的列。 第一行的"固定"高度为 132px,而另一行将占用剩余的空间。 你可以在混合设计器 Surface 中看到这里 inside:

clip_image012

现在,我们将把"内容"元素移动到 2nd 行。 选择" DOM",选择 #content 规则并移动到它的"网格"属性。 将" -ms-grid-row"值更改为 2. 你也可以将"横幅"元素移到行 1,但默认情况下它将在那里。

现在我们将把第一行拆分成 2列,以便将每个元素移到正确位置。 选择"横幅"元素,switch 显示它的显示属性,并定义 120px 和 1 1fr 行 & 2列:

clip_image013

将" maintitle"元素移到列 2中,并将它的垂直居中,这是因为" -ms-grid-row-align"属性更改为"磅磅中央":

clip_image014

选择" backbutton"并跳到"布局"部分。 设置一个的54px top和一个的40px。 如果你没有遗漏什么,你现在应该在设计 Surface 上看到:

clip_image016

通过"文件"->"保存所有信息。"保存所有更改并返回到 Visual Studio。 打开" default.css",你将看到混合已经在正确的规则中生成了一些"清理"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窗口库"可以帮助JavaScript开发人员轻松地实现新的Windows 8 UI体验。 它提供一组控件。模板引擎。绑定引擎。承诺处理异步调用。帮助器处理命名空间等。

例如如果你想了解有关控件部分的更多信息,你可以阅读本文: 快速入门:添加WinJS控件和样式设置。

在 Windows 存储项目中,你将在"解决方案资源管理器"的引用部分中找到这里库:

image

inside,你会发现默认样式表带有 2 dark dark & themes主题以及JavaScript代码。 你可以看看它。 通过阅读代码来学习它可能是有趣的。

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

打开" default.html"和 inside 节标签,键入下面的HTML:

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

目前,它只是一个简单的经典 div。 不过,它用的data-win-control属性标注,表示我们希望使用WinJS库将这个简单的div转换为一个 JavaScript 控件。

这个操作是多亏了一个神奇的JavaScript代码行,你可以在" default.js"中找到它。 这就是:

WinJS.UI.processAll();

这个异步操作将解析 DOM,找到所有标记为"data-win-control"属性的元素,将它们转换为真正的WinJS控件,实现新的Windows 8 UI体验。 如果误删除这一行,所有的div将再次变成一些简单的div。

现在我们需要给这个 ListView 提供一些从RSS提要抓取的数据。 在函数绑定到" onactivated"事件中,添加这段代码只是 上面的processAll() 行:

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

然后,你需要在函数顶部声明 articlesList 变量,只是 below的app 一个实例。

我们在这里声明了一个 Binding.List() 类型。 将数据绑定到WinJS控件时使用的类型。 它包含一些方法,可以帮助你在 background 中添加一些数据并感谢绑定机制;。

此外,你可能已经注意到我们使用了一些干净的JavaScript代码,比如使用"模块 Pattern"的现代模式。 为此,我们在" default.js"中执行了匿名自签名的JS函数。 然后我们需要找到一种方法来向外部函数公开一些 public 数据。 这就是为什么我们要在关联的WinJS helper 中实现 Namespace 概念。 它帮助我们很容易地定义我们想要公开的内容。 对于我们的例子,我们将有一个 public" C9Data"对象,它包含一个" ItemList"属性,包含要显示的未来元素。

现在需要一个函数来对RSS提要进行数据分析,分析并创建一些JS对象。 这是我

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

这里函数首先运行一个异步 XmlHttpRequest 到指定的URL。 只有完成请求后,才会执行承诺 ( 如果你想要的话)的代码,并且接收到的数据将被接受。 然后,我们需要通过这段代码过滤数据,你必须插入到匿名函数中:

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 节点中选择节点,访问它们的有趣属性,将它们映射到在 titlethumbscontent 属性上创建的"文章"对象。 请记住这些属性的NAME ;我们将在以后使用它们。 最后,通过将这个新对象添加到绑定集合来完成这个函数。

我们现在需要在应用程序的开始阶段运行这个函数。 在完成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个字节为单位。

按F5运行解决方案。 你会有这么丑陋的东西:

clip_image018

但是别担心这个丑陋的输出是预期的行为 ! Clignement d'œil 我们还有一些设计要做。 但是你已经可以看到绑定工作正常,并且控件使用触摸"&鼠标体验工作正常。 此外,该控件自动扩展到各种分辨率。 然后你就没有( 显示的列数和行数) 屏幕上 上面 屏幕的确切布局了。

步骤 5: 使用模板并使用混合修改设计

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

导航到" default.html"页面,并添加这里HTML片段,只是 上面的" main"部分:

<divid="C9ItemTemplate"data-win-control="WinJS.Binding.Template"style="display: none;"><divclass="listItemTemplate"><divclass="listItemImage"><imgdata-win-bind="src: thumbnail"/></div><divclass="listItemTitle"data-win-bind="innerText: title"></div></div></div>

它是一个用" WinJS.Binding.Template"值标记的HTML模板。 这将帮助WinJS了解 processAll() 执行之后如何处理这个特殊的HTML。 你还将发现" data-win-bind"的用法来定义绑定表达式。 它将帮助绑定引擎知道从数据源映射到适当的HTML节点的JavaScript属性。 除了这个,你可以使用一些经典的HTML。

现在我们需要配置WinJS控件不再使用默认模板,而是使用新的上面。 通过简单地更改选项来完成以下操作:

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

如果现在运行应用程序,则应该具有这里屏幕:

image

it,但是我们还没有完成。 为了进一步进行设计评审,我们需要帮助我们的朋友混合。

那么,让我们回到混合。 它会要求你重新加载你完成的所有修改 inside Visual Studio。 完成后,你将拥有:

image

你不觉得奇怪你应该? ! 实际上,在 Visual Studio 中按F5时,我们将看到相同的可视输出。 这意味着 Blend Blend Blend直接执行应用程序的JavaScript部分 inside ! 这是个很棒的特性。

由于这个原因,你将能够直接处理实际数据,而不必被强制放置我们称为"模仿"的地方。 这是JavaScript的最酷部分。 Blend能够执行启动XHR请求的JS代码并构建WinJS对象。

在" default.css"下,我们添加两个新的CSS规则。 单击主媒体查询上的"+"按钮:

clip_image023

添加这些新的选择器: 。ListItemTemplate 和磅。ListItemTemplate img。

选择 #articlelist. win-item 规则,使用" articlelist"id将 ListView 控件的每个元素都设置为 Highlight。

更改这些元素的大小,从 150px 到 150px 到,由 250 px。 你只需要跳到右边面板的" Sizing"部分。

布局应该动态更新。 否则,你可以通过单击专用按钮强制刷新设计 Surface:

clip_image024

以下是你应该拥有的结果:

image

我们现在要调整模板的图像大小。 为此,使用"选择"指针并单击其中一个图像:

image

你可以在"应用规则"部分中看到当前应用的CSS规则。 单击" .listItemTemplate img"并用鼠标调整你刚才选择的图像。 所有匹配同一选择器的图像将动态地反映实时变化。

我不去找合适的尺寸,而是帮你。 跳转到" Sizing"部分并修复以下大小: 234px宽度和 165px。

为了增强我们的设计,我们需要一些元素之间的空间,并将 ListView 控件与标题对齐。

单击" .listItemTemplate"选择器,导航到" Layout"部分并单击" Margin"区域右侧的" Lock"icon。 选择任何 margin 并键入 8px

在最后一个页面,我们需要将 ListView 控件的网格与标题对齐,我们只需要将它的元素边距的120px 移动到1.

按"+"按钮添加一个新的选择器并将它的命名为" .win-surface"。 固定左 margin 为。

返回 Visual Studio,接受所做的更改并按 F5. 你现在应该拥有这种布局:

image

步骤 6: 要下载的源代码

到目前为止我们已经取得了良好的进步。 现在我们需要显示每篇文章的细节,继续发现混合的功能以及一些新的of特性。 你可以下载与这篇文章相关的解决方案: 简单的Channel9阅读器 Article1.

在下一篇文章中,请参见: Windows 8 HTML5应用程序: 如何在 30min 中创建一个小型RSS阅读器( 第 2部分/2)


相关文章