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

最新推荐文章于 2019-08-13 21:56:41 发布

dingshi7798

最新推荐文章于 2019-08-13 21:56:41 发布

阅读量168

点赞数

文章标签： python java javascript js css ViewUI

原文链接：https://www.sitepoint.com/building-a-windows-8-app-with-html5-how-to-create-a-small-rss-reader/

版权

程序员rss

从头开始，我们将通过两个教程学习如何使用HTML5 ， CSS3和WinJS （适用于Windows 8的Microsoft JavaScript框架）构建小型RSS阅读器。然后，我们将针对Windows应用商店构建WinRT应用程序。我们还将尝试使用Expression Blend 5遵循Windows 8 UI设计指南。如果一切顺利，您应该可以在30分钟内阅读本文。下周，我们将运行第二部分。

第一篇文章将帮助您创建将使用WinJS ListView控件的欢迎屏幕。该控件将显示所有最近通过精美缩略图发布的博客文章。当您单击其中一项时，第二个将在显示的详细信息视图上工作。最后，您将在最后找到要下载的最终解决方案。如果您需要澄清本文的某些部分，可以将其视为有用的补充资源。

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

1 –在您的计算机上下载/购买并安装Windows 8 RTM ： http : //msdn.microsoft.com/zh-CN/windows/apps/br229516.aspx ，其中您还可以使用90天的试用版。
2 –下载并安装适用于Windows 8的Visual Studio 2012 Express RTM ： http : //msdn.microsoft.com/zh-CN/windows/apps/br229516.aspx ，它是免费的，或者您当然可以使用付费版本。

注意：如果您有Mac，则可以使用BootCamp或在Parallels处理的虚拟机中完美运行

注意2：本文已于2012年8月21日更新，以实现UI 8和Windows 8 Release Preview与RTM之间的代码更改。通常，如果需要从RP迁移应用程序，则应阅读以下文档：重大更改文档。在我们的案例中，唯一的影响是与Visual Studio的新UI和命名相关联。

注意3：我在此处添加了专门针对WordPress和社区服务器的补充帖子： Windows 8 HTML5 Metro Style应用：30分钟内的RSS阅读器–构建您的WordPress版本

这是我们将在本文中看到的简短摘要：

–步骤1：创建空白应用程序
–步骤2：建立首页HTML和CSS基础
–步骤3：首先与Blend接触
–步骤4：使用XHR加载数据并将其绑定到ListView控件
–步骤5：使用模板并使用Blend修改设计
–步骤6：要下载的源代码

注意：这些教程基于Chris Sell＆Kieran Mockford提供的BUILD的“构建Metro风格应用的工具 ”部分。我只是为Windows 8 RTM更新了它。

步骤1：建立空白应用程式

您需要做的第一件事是启动Visual Studio 2012，并通过“文件–>新建项目”创建一个新JavaScript –> Windows Store空白应用程序项目：

New Project screen

将其命名为“ 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个主要容器的所有可用空间。

免费学习PHP！

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

~~原价$ 11.95~~ 您的完全免费

通过按F5键或单击以下按钮来运行您的应用程序：

从逻辑上讲，您现在应该看到以下屏幕：

Welcome screen

而且，您还应该看到一个明显的设计问题：后退按钮和标题未对齐。让我们使用Blend 5解决此问题！

步骤3：首先与Blend接触

启动Blend，然后导航到SimpleChannel9Reader项目所在的文件夹。 Blend将显示以下内容：

Blend

这里的目标是创建两个网格。第一个将用于主容器。它由一列定义，该列将占用所有可用宽度，并由两行定义。第二个将由后退按钮和标题的一行和两列定义。

让我们从使用“ Live DOM ”窗口选择main元素开始：

Main element

跳转到“ CSS属性 ”部分，选择#main规则，然后在“ 布局 ”窗口中，将显示切换为“ -ms-grid ”：

ms-grid

我们将使用IE10当前仅支持的CSS Grid Layout规范，但不久之后它将在其他浏览器中使用。如果您想了解有关Windows 8 Apps模式支持的布局类型的更多信息，请阅读本文：为您的应用程序选择CSS3布局。

如果您只是想发现CSS3 Grid规范，请随时使用此IE Test Drive演示进行操作：动手：CSS3 Grid Layout

好的，既然显示已正确切换到网格，我们需要定义网格。为此，跳转到“ Grid ”部分并声明以下属性：

Grid

我们将拥有一个唯一的列，该列跨越屏幕的整个宽度（无论分辨率如何）和2行。第一行的“固定”高度尺寸为132px，另一行将占用剩余的空间。您可以在Blend设计器图面中看到以下内容：

Blend designer surface

现在，我们将“ content ”元素移至第二行。将其选择到“ Live DOM ”中，选择#content规则并移至其“ Grid ”属性。将“ -ms-grid-row ”值更改为2。您也可以将“ banner ”元素移动到第1行，但默认情况下它将位于该行。

现在，我们将第一行分成两列，以便将每个元素移到正确的位置。选择“ banner ”元素，将其显示属性切换为“ -ms-grid”，然后定义1fr行和两列120px和1fr：

Banner element

由于将“ -ms-grid-row-align ”属性更改为“ center ”，因此将“ maintitle ”元素移至第2列并将其垂直居中：

maintitle element

选择“ 后退按钮”并跳至“ 布局 ”部分。设置54px的上边距和40px的左边距。如果您没有错过任何东西，现在应该在设计图面上看到：

backbutton

通过“ 文件 ”->“ 全部保存 ”保存所有更改，然后返回到Visual Studio。打开default.css ，您将看到Blend按照正确的规则生成了一些“干净的” 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库或“ 用于JavaScript SDK的Microsoft窗口库 ”是为了帮助JavaScript开发人员轻松实现新的Windows 8 UI体验。它提供了一组控件，模板引擎，绑定引擎，用于处理异步调用的Promise，用于处理命名空间的帮助器等。

例如，如果您想了解有关控件部分的更多信息，可以阅读本文：快速入门：添加WinJS控件和样式

在Windows Store项目中，您可以在“ 解决方案资源管理器 ”的参考部分中找到此库：

Library

在内部，您将找到带有两个深色和浅色主题以及JavaScript代码的默认样式表。随意看看。通过阅读代码来学习可能会很有趣。

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

打开“ default.html ”，然后在section标记内，键入这段HTML：

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

目前，这只是一个简单的古典div 。但是，它带有data-win-control属性的注释，该属性指示我们希望使用WinJS库将该简单的div转换为JavaScript ListView控件。

由于在default.js可以找到神奇JavaScript代码，因此可以完成此操作。这里是：

WinJS.UI.processAll();

此异步操作将解析DOM，以查找标记有data-win-control属性的所有元素，以将其转换为真正的WinJS控件，从而为您实现新的Windows 8 UI体验。如果您错误地删除了此行，则所有div都将再次变为简单的div 。

现在，我们需要使用从RSS提要中获取的一些数据来提供此ListView 。在绑定到onactivated事件的函数中，将以下代码添加到processAll()行的上方：

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

然后，您需要在函数顶部（例如在app下方）声明articlesList变量。

我们在这里声明Binding.List（）类型。这是用于将数据绑定到WinJS控件的类型。例如，它包含一些方法，这些方法将借助绑定机制帮助您在后台添加一些数据；它将自动反映到视图中。

此外，您可能已经注意到，我们通过使用现代模式（例如“ 模块模式 ”）使用了一些简洁JavaScript代码。为此，我们在default.js有一个匿名的自我执行的JS函数。然后，我们需要找到一种将某些公共数据公开给外部功能的方法。这就是为什么我们在关联的WinJS帮助程序中实现命名空间的原因。它可以帮助我们轻松定义要公开的内容。在我们的例子中，我们将有一个公共的C9Data对象，该对象将具有一个ItemList属性，其中包含要显示的未来元素。

现在，我们需要一个函数来对RSS feed中的数据进行分级，解析并动态创建一些JS对象，以将其放入著名的绑定列表中。这是我的：

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

该函数通过对指定的URL运行异步XmlHttpRequest开始。仅在完成请求并接收到数据后，才执行Promise中定义的代码.then()如果需要.then()插入.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运行解决方案。您会遇到这样丑陋的事情：

ugly output

但是不要惊慌，这种丑陋的输出是预期的行为！我们还有一些设计工作要做。但是您已经可以看到绑定正确工作，并且控件在“触摸和鼠标”体验下也可以正常工作。此外，控件会自动缩放到各种分辨率。这样，您将没有上述情况下的确切布局（显示的列数和行数）。

步骤5：使用模板并使用Blend修改设计

现在，我们需要更改每个元素的绘制方式。这正是模板引擎的目的。模板只是带有WinJS属性标记HTML片段。

导航到default.html页面，并在main部分上方添加以下HTML：

<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>

这是一个标有WinJS.Binding.Template值HTML模板。这将帮助WinJS在processAll()执行之后知道如何处理此特殊HTML。您还将发现使用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>

如果现在运行该应用程序，则应该具有以下屏幕：

Welcome Channel 9

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

因此，让我们回到Blend。它将要求您重新加载在Visual Studio中所做的所有修改。完成后，您将拥有：

Into Blend

你不惊讶吗？你应该！确实，我们在这里看到的是与在Visual Studio中按F5时相同的视觉输出。这意味着Blend 5直接在设计器内部动态执行应用程序JavaScript部分！这是一个了不起的功能。

因此，您将能够直接处理真实数据，而不必强行放置我们所谓的“ 模拟 ”。这是JavaScript的很酷的部分。 Blend能够执行启动XHR请求并构建WinJS对象的JS代码。

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

media query

并添加以下新选择器：

.listItemTemplate和.listItemTemplate img

选择#articlelist .win-item规则，该规则将使用articlelist ID突出显示ListView控件的每个元素。

将这些元素的大小更改为150px x 150px到250px x 250px 。您只需要跳到右侧面板的“ Sizing ”部分即可。

布局应动态更新。如果没有，您可以通过单击专用按钮来强制刷新设计图面：

这是您应该获得的结果：

Result

现在，我们将调整模板图像的大小。为此，使用“ Selection ”指针并单击其中一张图像：

select an image

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

除了寻找合适的尺寸，我将为您提供帮助。跳至“ 调整大小 ”部分，然后更改以下尺寸： 234px宽和165px高 。

为了进一步增强我们的设计，我们需要在每个元素之间留出更多空间，并使ListView控件与标题对齐。

单击.listItemTemplate选择器，导航到“ 布局 ”部分，然后单击“ 边距 ”区域右侧的“ 锁定 ”图标。选择任何边距，然后输入8px 。

最后，要使ListView控件的网格与标题对齐，我们需要将其从左侧移动120px –刚设置的元素边距的8px。

按下“ +”按钮添加一个新的选择器，并将其命名为.win-surface 。固定左边距为112px 。

返回Visual Studio，接受所做的更改，然后按F5。您现在应该具有这种布局：

Layout

步骤6：源代码下载

到目前为止，我们已经取得了良好的进展。现在，我们需要显示每篇文章的详细信息，以继续发现Blend的功能以及CSS3的一些新功能。您可以在此处下载与此第一篇文章相关的解决方案： Simple Channel9 Reader Article1

下周在第二篇文章中见！

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

程序员rss

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
程序员rss_使用HTML5构建Windows 8应用程序：如何创建小型RSS阅读器

程序员rss 从头开始，我们将通过两个教程学习如何使用HTML5 ， CSS3和WinJS （适用于Windows 8的Microsoft JavaScript框架）构建小型RSS阅读器。然后，我们将针对Windows应用商店构建WinRT应用程序。我们还将尝试使用Expression Blend 5遵循Windows 8 UI设计指南。如果一切顺利，您应该可以在30分钟内阅读本文。下周，我...
复制链接

扫一扫