使用HTML5构建Windows 8应用程序：如何创建小型RSS阅读器

从头开始，我们将通过两个教程来学习如何建立与HTML5，CSS3和WinJS，微软的JavaScript框架为Windows 8。然后，我们将建立一个WinRT的应用程序针对Windows应用商店的一个小的RSS阅读器。 我们也将尝试通过使用Expression Blend的5遵循Windows 8的用户界面设计指南。 如果一切顺利，你应该能够按照本文中30分钟。 下周，我们将运行的第二部分。

第一篇文章将帮助您创建将使用WinJS ListView控件的欢迎屏幕。 该控制系统将显示最近都通过漂亮的缩略图发布的博客文章。 第二个对细节视图将显示工作时，你会点击的项目之一。 最后，你会在下面找到最终的解决方案，以下载。 把它看作是有用的补充资源，如果你需要澄清这篇文章的某些部分。

先决条件：遵循这些教程，您首先需要：

1 -下载/购买与你的机器上安装Windows 8 RTM： http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx在这里你还可以有90天的试用版。
2 -下载和安装Visual Studio 2012 RTM快于Windows 8： http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx这是免费的，或者你可以使用过程中的付费版本。

注意：如果你有一个苹果，它完美罚款感谢的BootCamp或由Parallels例如处理虚拟机内

注2：本文已更新21/08/2012实现在UI和在Windows 8发布预览和RTM之间的代码的变化。 以一般的方式，如果你需要迁移从RP您的应用程序，你应该阅读本文件： 重大更改的文件 。 在我们的情况下，唯一的影响是有联系的Visual Studio中的新UI和命名。

注3：我添加了一个互补后，致力于WordPress和社区服务器的位置： Windows 8的HTML5 Metro风格应用程序：在30分钟的RSS阅读器-建立你的WordPress版本

下面是我们要在这篇文章中看到什么的简要介绍：

- 步骤1：创建空白应用
- 第2步：创建我们的主网页的HTML和CSS的基础
- 步骤3：使用共混物的第一接触
- 步骤4：加载与XHR和到ListView控制数据将它们绑定
- 步骤5：使用模板和修改与混合设计
- 步骤6：源代码，以下载

注：这些教程都是基于工具构建Metro风格应用程序由克里斯销售和基兰Mockford交付的BUILD会话。 我简单地更新它的Windows 8 RTM。

步骤1：创建空白应用

你需要做的第一件事就是推出的Visual Studio 2012，并创建一个新的JavaScript - >通过Windows应用商店的应用空白项目“文件 - >新建项目”：

将它命名为“SimpleChannel9Reader”因为我们要在这里下载Channel9上可用的Coding4Fun节的RSS流： http://channel9.msdn.com/coding4fun/articles/RSS

第2步：创建我们的主网页的HTML和CSS的基础

打开default.html描述，当你启动应用程序将显示在第一页的文件。 相反，下面的HTML部分：

<p>Content goes here</p>

插入此一个：

<div id="main"> <header id="banner"> <button id="backbutton"> </button> <h1 id="maintitle">Welcome to Channel 9!</h1> </header> <section id="content"> </section> </div>

我们现在有一个全球性div与容器main ID嵌入两个名为子容器banner和content 。 头将明显显示在页面的顶部和内容部分将略低于显示。

让我们打开了CSS的添加到default.css存储在文件css目录。 你会看到，已经有一些预定义的CSS处理各种可用的Windows 8感谢媒体查询的意见。

在这两篇文章中，我们将集中力量只在“ 全屏景观 “状态。 于是跳进这一部分，并插入下面的一段CSS的：

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

这只是表明我们愿意采取一切可用的空间，我们的3个主要的集装箱。

按F5键或点击下面的按钮来运行你的应用程序：

从逻辑上讲，你现在应该看到这样的画面：

而且你也应该看到一个明显的设计问题：后退按钮和标题不对齐。 让我们解决此通过使用混合5！

步骤3：由混合第一接触

启动混合，然后导航至您的SimpleChannel9Reader项目是文件夹。 那么混合将显示：

这里的目标是创建两个网格。 第一个将是主容器。 它将由一列，将采取所有可用的宽度与由两条线来限定。 第二个将通过一条线与两列用于背按钮和标题来定义。

首先让我们来选择main通过使用“ 实时DOM”窗口元素：

跳转到“CSS属性 ”部分中，选择#main规则，在“ 布局 ”窗口，切换显示为“-MS-网格 ”：

我们将使用目前只有IE10支持CSS网格布局规范，但应该在其他浏览器很快地。 如果您想了解更多有关Windows 8的应用程序模式支持的布局类型，你可以阅读这篇文章： 选择为您的应用CSS3布局 。

如果你只是想发现CSS3网格规范，随时与此IE试驾演示播放： 牵手：CSS3网格布局

好了，现在显示正确地切换到电网，我们需要定义我们的电网。 为此，跳转到“ 网格 ”的一部分，并声明如下特性：

我们将有一个独特的列通过屏幕（无论分辨率会）和2号线的完整宽度跨越。 第一行将具有132px“固定的”高度尺寸，而另一个将采取的剩余空间。 你可以看到这个Blend中的设计表面内：

现在，我们要在“ 内容 ”的元素进入第二线。 它选入“ 实时DOM”，选择＃内容规则，并移动到它的“ 网格 ”的属性。 在“-MS-格行 ”值更改为2.您还可以将“ 旗帜 ”元素，以第1排，但它会存在默认情况下并非如此。

现在我们要我们的第一线分为两列，以在适当的地方移动的每个元素。 选择“ 旗帜 ”的元素，它的显示属性切换到“-MS-网格”，并定义1FR线＆的120像素和1FR两列：

移动“MAINTITLE”元素送入塔2和中心其垂直感谢“-MS-网格行对齐 ”属性改变为“ 中心 ”：

选择“ 后退按钮 ”，然后跳转到“ 布局 ”的一部分。 设置一个54px上边距和40像素左边距。 如果你还没有错过的东西，你现在应该看到，在设计图面：

保存通过“ 文件 ”的所有变化- >“ 全部保存 ”并返回到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库或“ 微软Windows JavaScript库SDK”是由以帮助JavaScript开发人员实现一个简单的方法新的Windows 8 UI体验。 它提供了一组控件，模板引擎，结合引擎，承诺处理异步调用，佣工来处理命名空间，等等。

举例来说，如果你想了解更多关于控制部分，你可以阅读这篇文章： 快速入门：添加WinJS控件和样式

在Windows应用商店的项目，你会发现在“ 解决方案资源管理 ”的参考部分该库：

在里面，你会发现有提供，以及JavaScript代码两个暗 光与主题的默认样式表。 随意看看吧。 这可能是有趣通过阅读代码来学习。

在我们的例子中，我们将使用它创建了一个网格布局，以显示元素的列表ListView控件。

打开“default.html中 ”和部分标记内，输入此片HTML的：

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

目前，这只是一个简单的经典div 。 然而，它的注释与data-win-control这表明我们想使用WinJS库这个简单的div转变成一个JavaScript ListView控件的属性。

此操作完成得益于JavaScript代码神奇线，你会发现在default.js 。 这里是：

WinJS.UI.processAll();

这种异步操作将解析DOM找到所有的元素标记data-win-control属性，把它们转化为实现你的新的Windows 8 UI体验真正的WinJS控件。 如果错误地删除此行，你的所有div旨意再次成为一些简单div 。

现在，我们需要从RSS源抓起一些数据养活这个ListView控件 。 在功能结合到onactivated事件，添加正上方的这一段代码processAll()线：

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

你需要再申报articlesList在略低于该函数的顶部变量app一个实例。

我们在这里声明Binding.List（）类型。 它的使用将数据绑定到WinJS控件的类型。 它包含例如一些方法，这将有助于您添加的背景和感谢约束机制的一些数据; 它将被自动反映到视图中。

此外，你可能已经注意到，我们使用了一些干净的JavaScript代码通过使用像“ 模块模式 ”，例如现代模式。 为此，我们有一个匿名的自我执行JS功能为default.js 。 然后，我们需要找到一种方法来揭露一些公共数据到外部函数。 这就是为什么我们正在实施的命名空间概念引入相关WinJS帮手。 它可以帮助我们轻松地定义我们想暴露什么。 在我们的例子中，我们将有一个公共C9Data对象，将有一个ItemList包含我们的未来元素的显示属性。

我们现在需要的是会从RSS提要毕业生数据，解析它们，并创建一些JS在飞行反对他们推到著名的绑定列表的功能。 这里是我的：

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

该功能通过运行一个异步的XmlHttpRequest到指定的URL开始。 定义为无极 （进入代码.then()只有一次请求将结束，如果你想）将被执行，接收到的数据。 它是那么在这里，我们需要通过这一段代码，你必须插入匿名函数来过滤数据：

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节点，接入到他们有趣的性质将它们映射到上的动态创建的“文章”对象title ， thumbs和content属性。 请记住这些属性的名称; 我们将在以后的使用它们。 最后，这一功能通过增加这个新的对象绑定收集完成。

现在，我们需要在我们的应用程序的启动阶段运行此功能。 此代码应该运行在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 x 150像素。

按下F5键解决方案。 你将有什么丑为：

但是，不要惊慌，这丑陋的输出是预期的行为！ 我们仍然有一点设计的一项工作。 但是，你已经可以看到的是，结合工作正常和控制工作正常触摸”和鼠标的经验。 此外，控制自动缩放的各种分辨率。 然后，您就没有准确的布局（显示的列和行数），在你的情况下，上面的画面。

步骤5：使用模板和修改与混合设计

现在，我们需要改变每个元素的绘制方式。 这也正是模板引擎的目的。 模板是只标有WinJS属性是HTML的一部分。

导航到default.html页面并添加正上方的这片HTML的main组成部分：

<div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;"> <div> <div> <img data-win-bind="src: thumbnail" /> </div> <div data-win-bind="innerText: title"> </div> </div> </div>

这是标有一个HTML模板WinJS.Binding.Template值。 这将有助于WinJS知道如何处理这之后专题片HTML做processAll()执行。 您还可以找到的使用data-win-bind来定义绑定表达式。 这将有助于绑定引擎知道从数据源JavaScript属性映射到其相应的HTML节点。 除此之外，你可以使用一些传统的HTML。

现在，我们需要配置WinJS控制对不再使用默认的模板，但使用上面，而不是新的。 它通过简单地改变的选项来完成：

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

如果你现在运行的应用程序，你应该有这样的画面：

这是更好，但我们还没有完成。 为了更进一步的设计审查，我们需要我们的朋友混合的帮助。

因此，让我们重新回到混合。 它会问你要重新加载所有你在Visual Studio中进行修改。 一旦这样做，你就会有：

难道你不感到惊讶吗？ 你应该！ 事实上，我们在这里看到相同的视觉输出，你将有当你在Visual Studio中按F5。 这意味着， 混合5动态直接执行设计师内应用程序的JavaScript的一部分！ 这是一个真棒功能。

多亏了这一点，你将能够在真实的数据直接工作，而无需*到位就是我们所说的“ 嘲笑 ”。 它的JavaScript凉爽的一部分。 混合能够执行该启动XHR请求JS代码，并建立了WinJS对象。

在default.css ，让我们添加了两个新的CSS规则。 点击主媒体查询的“+”按钮：

并添加这些新的选择：

.listItemTemplate和.listItemTemplate IMG

选择#articlelist .win-item规则，将突出与ListView控件中的每个元素articlelist ID。

更改这些元素的大小从150像素150像素250像素的去250像素 。 你只需要跳进右面板的“ 上浆 ”的一部分。

布局应进行动态更新。 如果没有，你可以通过点击专用按钮迫使设计表面的刷新：

这里是你应该有结果：

现在我们要调整模板的图像。 为此，使用“ 选择 ”指针并单击图像中的一种：

你可以看到“ 应用规则 ”部分中的当前应用的CSS规则。 点击.listItemTemplate img用鼠标调整你刚才选择的图像。 然后，所有其他图像相同的选择匹配将动态实时反映的变化。

而不是寻找合适的尺寸，我会帮助你。 跳进“ 上浆 ”部分和修正以下尺寸：234px宽度和165像素高度 。

为了提高多一点我们的设计，我们需要每一个元素之间，并调整我们的标题ListView控件一些更多的空间。

点击.listItemTemplate选择器，定位到“ 布局 ”部分，然后点击“ 锁定 ”图标“ 保证金 ”区域的右侧。 选择任何保证金，并键入8像素 。

最后，对准与标题的ListView控件的网格，我们需要120像素从左边移动 - 我们刚刚设置的元素保证金的8像素。

通过按下“+”按钮，添加一个新的选择，并将其命名.win-surface 。 修复112px左边距。

返回到Visual Studio，接受所做的改变，然后按F5。 你现在应该有这样的布局：

步骤6：源代码，以下载

我们已经取得了良好的进展为止。 现在，我们需要显示每篇文章的细节，继续发现混合的动力，以及一些新的很酷的CSS3功能。 你可以在这里下载相关联的第一篇文章的解决方案： 简单Channel9的读者第一条

看你的第二篇文章中下周的！

From: https://www.sitepoint.com//building-a-windows-8-app-with-html5-how-to-create-a-small-rss-reader/