使用JavaScript和HTML创建一个博客阅读器 Windows 商店应用程序

分享于 

37分钟阅读

Web开发

  繁體

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

本教程教你如何使用分割应用 Visual Studio 模板来创建一个博客阅读应用。

了解如何:

在开始前

  • 这是本系列的第四篇教程。 在开始本教程之前,建议你阅读第 1部分: 创建一个"你好,世界"应用程序插件,部分 2: ! 管理应用程序生命周期和状态,以及部件 3: PageControl对象和导航对象。

WindowsBlogReader

在本教程中,我们为一些 Windows 团队博客创建了一个基本的读者。 完成的应用程序如下所示:

items page包含标题"。Windows 团队博客",其中包含一个包含每个博客项的ListView控件。 单击ListView中的某个项目时,你将导航到所选博客的分割页。 分页页包含一个ListView控件,每个博客文章都有一个项,以及一个控件,显示当前选定的博客。 从分页页面可以导航到一个项目详细信息页面,显示顶部的博客文章标题。

在 Visual Studio 中创建新项目

让我们为我们的应用程序创建一个名为WindowsBlogReader的新项目。 以下是操作方法:

  • 启动 Visual Studio。
  • 开始Page页,单击项目。 dialog dialog dialog dialog。
  • 要查看已经安装的pane,请展开 JavaScript,然后选择 Windows 商店应用模板类型。 JavaScript的可用项目模板显示在对话框的中心窗格中。
  • 在中心窗格中,选择 Split项目模板 template。
  • 名称文本框中,输入"windowsblogreader"。
  • 单击 ok以创建项目。 这需要点时间。

下面是该项目的结构,如解决方案资源管理器所示。 folder包含两组文件,一个用于项页,另一个用于分隔页。 这些组都是 PageControl,一组定义应用程序可以导航到或者用作自定义控件的页面的HTML,CSS和JavaScript文件。

新项目包含你需要创建项目的HTML。CSS和JavaScript文件,以及split的split/。 我们将在以后添加项目细节 PageControl的文件。

有关不同模板的更多信息,请参见 Windows 商店应用程序模板的项目模板

启动我们的新 Windows 商店应用程序

如果你想了解基本拆分应用程序的外观,请按F5来构建。部署和启动应用程序。 应用程序显示为带标题"windowsblogreader"的全屏页面和显示为网格的示例项目列表。 每个项目代表一组数据。 点击或者单击列表中的某一项以导航到拆分页。 分割页面有两个核心内容区域。 在左侧,你可以看到与所选组关联的项的列表。 在右侧,你可以看到所选项的内容。 你可以通过点击或者单击页面上的后退按钮来返回到项目页面。

在运行应用程序时,应用程序在( 或者链接于) items.html 中接受 HTML。CSS和 JavaScript,并将它的注入到应用程序的起始页面中,即 default.html 页面。 在应用程序容器中运行哪些代码默认情况下有一些限制。 例如,应用程序无法访问Internet或者网络摄像头,除非声明应用需要这里访问权限。 要了解更多信息,打开 package.appxmanifest 并转到 tab。

更改标题和 background 颜色

让我们尝试两个简单的任务来定制应用程序。

要更改应用程序的标题,打开 items.html,并用"。Windows 团队博客"将 h1 元素的示例内部文本替换为,如图所示。

<h1class="titlearea win-type-ellipsis"><spanclass="pagetitle">Windows Team Blogs</span></h1>

要设置应用程序的background 颜色,打开 default.css 并将这里 background-color 属性添加到 #contenthost

#contenthost {
 height: 100%;
 width: 100%; 
 background-color: #0A2562;
}

按F5生成。部署和启动应用程序。 注意,项页的标题已经更改,项和拆分页的background 颜色为蓝色。

在项目中为你的应用程序在启动时使用的默认文件包含系统使用的默认文件和启动屏幕的默认文件。 我们不会在本教程中更改这些内容,但是如果你喜欢,可以使用它的他图像。 只需添加要用于图像文件夹的图像文件。 在 Application package.appxmanifest 选项卡上打开并替换 logo Small小 logo 和收费屏幕,以为代价的应用程序界面。

替换示例数据

项目模板包含在运行应用程序时所看到的示例数据。 使用这些步骤可以用来自 Windows 团队博客的Atom 提要中的数据替换示例数据:

Delete 示例数据

打开 data.js,,其中包含应用程序的示例数据。

我们不需要 generateSampleData 函数,所以你可以 delete。

// Returns an array of sample data that can be added to the application's// data list. function generateSampleData() {
 // Omitted code.}

我们不需要这里代码,因此你可以对它的进行 delete:

// TODO: Replace the data with your real data.// You can add data from asynchronous sources whenever it becomesavailable.
generateSampleData().forEach(function (item) {
 list.push(item);
});

设置变量和函数

将这里代码添加到 data.js list = new WinJS.Binding.List(); 对文件开头的定义。 这个代码设置我们需要的变量和填充它们的函数。 当我们浏览本教程中的步骤时,你可以使用包含的注释帮助你找到在哪里放置每个步骤的代码。

// Set up array variablesvar dataPromises = [];var blogs;// Create a data binding for our ListViewvar blogPosts = new WinJS.Binding.List();// Process the blog feedsfunction getFeeds() { 
 // Create an object for each feed in the blogs array// Get the content for each feed in the blogs array// Return when all asynchronous operations are complete}
function acquireSyndication(url) {
 // Call xhr for the URL to get results asynchronously}
function getBlogPosts() {
 // Walk the results to retrieve the blog posts}
function getItemsFromXml(articleSyndication, bPosts, feed) {
 // Get the info for each blog post}

定义博客列表

为了让这个示例简单,我们在博客 array 中包含一个硬编码的url列表。

将这里代码添加到 getFeeds 函数。 代码将JSON数组添加到博客的array。 每个 JSON array 都包含JSON对象来存储来自提要的内容。 JSON对象是名称/值对的无序容器。 例如博客标题存储在带有 NAME 标题的JSON对象中,并从 Atom 提要中检索值。 使用JSON对象使我们可以直接将提要中的内容绑定到应用程序的控件。

// Create an object for each feed in the blogs arrayblogs = [
{
 key: "blog1",
 url: 'http://windowsteamblog.com/windows/b/developers/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog2",
 url:'http://windowsteamblog.com/windows/b/windowsexperience/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog3",
 url:'http://windowsteamblog.com/windows/b/extremewindows/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog4",
 url:'http://windowsteamblog.com/windows/b/business/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog5",
 url: 'http://windowsteamblog.com/windows/b/bloggingwindows/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog6",
 url:'http://windowsteamblog.com/windows/b/windowssecurity/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog7",
 url:'http://windowsteamblog.com/windows/b/springboard/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog8",
 url:'http://windowsteamblog.com/windows/b/windowshomeserver/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog9",
 url: 'http://windowsteamblog.com/windows_live/b/developer/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog10",
 url: 'http://windowsteamblog.com/ie/b/ie/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog11",
 url:'http://windowsteamblog.com/windows_phone/b/wpdev/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null},
{
 key: "blog12",
 url:'http://windowsteamblog.com/windows_phone/b/wmdev/atom.aspx',
 title: 'tbd', updated: 'tbd',
 acquireSyndication: acquireSyndication, dataPromise: null}];
检索源数据

对于本节的步骤,我们使用 Windows的库来管理联合提要。

将这里代码添加到 acquireSyndication 函数。 我们调用 Windows.JS.xhr 函数来检索提要内容。 这个调用是异步的。幸运的是,在进行异步调用时,你可以能期望的复杂性很大。 当 xhr 返回时,我们收到结果的承诺,我们返回给调用者。

// Call xhr for the URL to get results asynchronouslyreturn WinJS.xhr(
 {
 url: url,
 headers: { "If-Modified-Since": "Mon, 27
Mar 1972 00:00:00 GMT" }
 });

getFeeds 函数中添加代码来调用博客 array 中每个博客的acquireSyndication 函数,并将承诺返回给我们的承诺的array。dataPromises 和,。 在我们从 getFeeds 返回之前,我们调用 WinJS.Promise.join 函数等待所有承诺。 这确保在显示ListView控件之前我们拥有所需的所有信息。

// Get the content for each feed in the blogs arrayblogs.forEach(function (feed) {
 feed.dataPromise = feed.acquireSyndication(feed.url);
 dataPromises.push(feed.dataPromise);
});// Return when all asynchronous operations are completereturn WinJS.Promise.join(dataPromises).then(function () {
 return blogs;
});

接下来,我们将这里代码添加到 getBlogPosts 函数。 对于博客 array 中的每个博客,我们解析我们需要的信息的XML提要数据。 首先,我们使用属性获取响应 body,然后使用 querySelector 方法来获取博客的标题和上次更新日期。 我们使用 Windows.Globalization.DateTimeFormatting.DateTimeFormatter 来转换显示的最后一次更新日期。

// Walk the results to retrieve the blog postsgetFeeds().then(function () {
 // Process each blog blogs.forEach(function (feed) {
 feed.dataPromise.then(function (articlesResponse) {
 var articleSyndication = articlesResponse.responseXML;
 // Get the blog title  feed.title = articleSyndication.querySelector("feed> title").textContent;
 // Use the date of the latest post as the last updated datevar published = articleSyndication.querySelector("feed> entry> published").textContent;
 // Convert the date for displayvar date = new Date(published);
 var dateFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "month.abbreviated day year.full");
 var blogDate = dateFmt.format(date);
 feed.updated = "Last updated" + blogDate;
 // Get the blog posts getItemsFromXml(articleSyndication, blogPosts, feed);
 });
 });
});return blogPosts;

finally,我们将这里代码添加到 getItemsFromXml 函数。 首先我们使用 querySelectorAll 获取博客文章的集合和每个博客帖子的信息。 然后我们使用 querySelector 获取每个博客帖子的信息。 我们使用 Windows.Globalization.DateTimeFormatting.DateTimeFormatter 来转换显示的最后一次更新日期。 finally,我们使用 push 方法将每个博客帖子的信息存储在 bPosts array的条目中。

// Get the info for each blog postvar posts = articleSyndication.querySelectorAll("entry");// Process each blog postfor (var postIndex = 0; postIndex < posts.length; postIndex++)
{
 var post = posts[postIndex];
 // Get the title, author, and date publishedvar postTitle = post.querySelector("title").textContent;
 var postAuthor = post.querySelector("author> name").textContent;
 var postPublished = post.querySelector("published").textContent;
 // Convert the date for displayvar postDate = new Date(postPublished);
 var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "month.abbreviated");
 var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "day");
 var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
 "year.full");
 var blogPostMonth = monthFmt.format(postDate);
 var blogPostDay = dayFmt.format(postDate);
 var blogPostYear = yearFmt.format(postDate);
 // Process the content so it displays nicelyvar staticContent = toStaticHTML(post.querySelector("content").textContent);
 // Store the post info we care about in the array bPosts.push({
 group: feed,
 key: feed.title,
 title: postTitle,
 author: postAuthor,
 month: blogPostMonth.toUpperCase(),
 day: blogPostDay,
 year: blogPostYear,
 content: staticContent
 }); 
}

使数据可用

现在我们完成了将提要数据存储在数组中的代码,我们需要将提要数据按 ListView控件的预期分组。 我们还需要完成将提要数据绑定到ListView控件。

getItemsFromGroup 函数调用 createFiltered 方法并返回指定博客的博客文章。 getItemsFromGroup 函数依赖于变量,列表。 var list = new WinJS.Binding.List();

用对getBlogPosts函数的调用替换这里定义,该函数返回blogPosts变量。 这是一个 WinJS.Binding.List 对象。 list = getBlogPosts();

注意,对 createGrouped 方法的调用通过指定的键( 在这种情况下,博客每个帖子属于) 对博客日志进行排序。

var groupedItems = list.createGrouped(
 function groupKeySelector(item) { return item.group.key; };
 function groupDataSelector(item) { return item.group; }
更新项目 PageControl

items PageControl的主要功能是使用 WinJS.UI.ListView 控件实现的ListView控件。 每个博客在这个列表中都有一个项目。 让我们修改模板中提供的ListView项目以包含博客标题和博客上次更新的日期。

打开 items.html. 我们需要更新这个标签中的HTML,以反映博客中的内容。

<divclass="itemtemplate"data-win-control="WinJS.Binding.Template"><divclass="item"><imgclass="item-image"src="#"data-win-bind="src: backgroundImage; alt: title"/><divclass="item-overlay"><h4class="item-title"data-win-bind="textContent: title"></h4><h6class="item-subtitle win-type-ellipsis"data-win-bind="textContent: subtitle"></h6></div></div></div>

进行以下更新:

  • 因为我们没有每个博客的图像,请删除 img 标签。
  • <code>h6 标记中,更新 textContent: 更新到 textContent: 更新。这将把最后更新的日期放在ListView项目的覆盖部分。
  • h4 标记移到类项覆盖的div 之前。 这将博客标题放在ListView项目的主要部分。

结果如下所示。

<divclass="itemtemplate"data-win-control="WinJS.Binding.Template"><divclass="item"><h4class="item-title"data-win-bind="textContent: title"></h4><divclass="item-overlay"> 
 <h6class="item-subtitle win-type-ellipsis"data-win-bind="textContent: updated"></h6></div></div></div>

将列表项的颜色设置为浅蓝色,打开 items.css 并添加显示的background-color 属性。 同样,将第2 行的大小从第2 行减少到 60px,因为我们只显示覆盖的最后更新日期。

.itemspage. itemslist. item {
 -ms-grid-columns: 1fr;
 -ms-grid-rows: 1fr 60px;
 display: -ms-grid;
 height: 250px;
 width: 250px;
 background-color: #557EB9;
}

若要为博客标题设置字体大小和 margin,请将这里代码添加到 items.css.

.itemspage. itemslist. win-item. item-title {
 -ms-grid-row: 1;
 overflow: hidden;
 width: 220px;
 font-size: 24px;
 margin-top: 12px;
 margin-left: 15px;
}
更新拆分 PageControl

打开 split.html. 模板中拆分页的HTML使用与示例数据相同的名称。 为了反映 array 中的名称,我们需要更新这个标记中的HTML。

<divclass="itemtemplate"data-win-control="WinJS.Binding.Template"><divclass="item"><imgclass="item-image"src="#"data-win-bind="src: backgroundImage; alt: title"/><divclass="item-info"><h3class="item-title win-type-ellipsis"data-win-bind="textContent: title"></h3><h6class="item-subtitle win-type-ellipsis"data-win-bind="textContent: subtitle"></h6><h4class="item-description"data-win-bind="textContent: description"></h4></div></div></div>

进行以下更新:

  • 用一个新的<div class="项目日期"> 替换 img 标签。 </div> 节点
  • h6 标记中,更改 textContent: textContent的副标题:作者
  • Delete h4 标签

结果如下所示。

<divclass="itemtemplate"data-win-control="WinJS.Binding.Template"><divclass="item"><divclass="item-date"><pclass="item-month"data-win-bind="innerHTML: month"></p><spanclass="item-day"data-win-bind="innerHTML: day"></span> | 
 <spanclass="item-year"data-win-bind="innerHTML: year"></span></div><divclass="item-info"><h3class="item-title win-type-ellipsis"data-win-bind="textContent: title"></h3><h6class="item-subtitle win-type-ellipsis"data-win-bind="textContent: author"></h6></div></div></div>

注意,我们使用管道字符作为分隔符,因为HTML不包含一个标记来绘制垂直线。

因为我们没有包含在示例数据中的所有信息,所以 delete 从 articleSection 中简化页面。

<headerclass="header"><divclass="text"><h2class="article-title win-type-ellipsis"data-win-bind="textContent: title"></h2><h4class="article-subtitle"data-win-bind="textContent: subtitle"></h4></div><imgclass="article-image"src="#"data-win-bind="src: backgroundImage; alt: title"/></header>

要设置文本 block 与文本日期和文本的字体和边距的颜色,请打开 split.css 并添加这里代码。

.splitpage. itemlistsection. itemlist. item. item-date {
 -ms-grid-column: 1;
 background-color: #557EB9;
}
. splitpage. itemlistsection. itemlist. item. item-date
.item-month{
 margin-top: 12px;
 margin-left: 12px;
 margin-bottom: 4px;
 font-weight: bold;
 font-size: 28px;
 }
. splitpage. itemlistsection. itemlist. item. item-date
.item-day{
 margin-left: 12px;
 font-size: 28px;
 }

要获得我们想要的页面布局,请将这个 -ms-grid-row 属性从" 1"更改为" 2"。 这会导致页面标题填充整个第一行,并将ListView和文章放在第二行中。

.splitpage. articlesection {
 -ms-grid-column: 2;
 -ms-grid-row-span: 2;
 -ms-grid-row: 1;
. . .
}

现在是尝试再次运行应用程序的好时机。 按F5生成。部署和启动应用程序。 你立即看到页面标题,但是在应用程序检索提要数据时有一个短暂的延迟。 完成所有承诺后,你将在ListView中看到每个博客中的一项。 在列表中添加或者单击列表中的项目,然后单击列表中所选博客的内容列表和所选博客文章内容。 默认情况下选择了第一个博客帖子。

单击 back arrow返回到项目页。 注意,瓦片返回到屏幕,并带有过渡动画。 这是 Windows 库的一个特性,它允许控件和它的他用户界面元素根据 Windows 存储应用程序的用户界面。

添加项详细信息 PageControl

条目详细 PageControl插件显示博客帖子标题作为标题,并包含博客文章内容区域。

若要添加项详细信息 ,请执行下列操作:

  • 在解决方案资源管理器中右击 pages pages,然后选择添加> 文件夹。
  • 将文件夹命名为 itemDetail。
  • 在解决方案资源管理器中,右键单击itemDetail文件夹,然后选择添加>。
  • 选择收费 > Windows> 页面控制,并使用文件名 itemDetail.html。
  • 单击添加 itemDetail.css pages/itemdetail文件夹中创建 itemDetail.html itemDetail.js 和。

打开 itemDetail.html 并更新主要部分,如下所示。 这里代码定义页面布局。 ( 这是网格应用程序模板中包含的itemDetail.html 页面的简化版本。)

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>itemDetail</title><!-- WinJS references --><linkhref="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/base.js"></script><scriptsrc="http://www.codeproject.com/Microsoft.WinJS.1.0/js/ui.js"></script><linkhref="itemDetail.css"rel="stylesheet"/><scriptsrc="itemDetail.js"></script></head><body><divclass="itemDetail fragment"><headeraria-label="Header content"role="banner"><buttonclass="win-backbutton"aria-label="Back"disabledtype="button"></button><h1class="titlearea
win-type-ellipsis"><spanclass="pagetitle">Welcome
to itemDetail</span></h1></header><sectionaria-label="Main content"role="main"><p>Content goes here.</p></section></div></body></html>

用这个替换主要内容部分。

<sectionaria-label="Main content"role="main"><article><divclass="item-content"></div></article></section>

打开 itemDetail.js 并更新准备好的函数的代码,如下所示。 这里代码显示用户导航到页面时的标题和内容。 ( 这是网格应用程序模板中包含的itemDetail.js 页面的简化版本。)

ready: function (element, options) {
 // Display the appbar but hide the Full View buttonvar appbar = document.getElementById('appbar');
 var appbarCtrl = appbar.winControl;
 appbarCtrl.hideCommands(["view"], false);
 var item = options && options.item? options.item :
Data.items.getAt(0); 
 element.querySelector(".titlearea
.pagetitle").textContent = item.title;
 element.querySelector("article
.item-content").innerHTML = item.content;
},

现在我们为项目细节页面定义样式。 打开 itemDetail.css,并用下面显示的代码替换模板代码。

.itemDetail section[role=main] {
 -ms-grid-row: 2;
 display: block;
 height: 100%;
 overflow-x: auto;
 position: relative;
 width: 100%;
 z-index: 0;
}
. itemDetail section[role=main] article {
 /* Define a multi-column, horizontally scrolling article
by default. */ column-fill: auto;
 column-gap: 80px;
 column-width: 480px;
 height: calc(100% - 50px);
 margin-left: 120px;
 width: 480px;
 }
. itemDetail section[role=main] article. item-content p {
 margin-bottom: 20px;
 margin-right: 20px;
 vertical-align: baseline;
 }
@media screen and (-ms-view-state: snapped) {
. itemDetail section[role=main] article {
 /* Define a single column, vertically scrolling article
in snapped mode. */ -ms-grid-columns: 300px 1fr;
 -ms-grid-row: 2;
 -ms-grid-rows: auto 60px;
 display: -ms-grid;
 height: 100%;
 margin-left: 20px;
 overflow-x: hidden;
 overflow-y: auto;
 width: 300px;
 }
. itemDetail section[role=main] article. item-content {
 padding-bottom: 60px;
 }
}
@media screen and (-ms-view-state: fullscreen-portrait) {
. itemDetail section[role=main] article {
 margin-left: 100px;
 }
}

添加带有命令的应用程序栏,以显示项详细信息页

让我们添加一个包含我们可以用来导航到项目详细信息页面的应用程序栏。

打开 default.html 并取消注释这里代码。

<!-- <div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button></div> -->

在应用栏的最右边修改占位符按钮的定义,以在最右边创建一个 labeled,如图所示。

<divid="appbar"data-win-control="WinJS.UI.AppBar"><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'view', label:'Full View', icon:'add'}"type="button"></button></div>

我们不希望在导航到项目和项目细节页面时显示 Full Full Full button。 将这里代码添加到 items.js inside ready函数以隐藏按钮。 ( 这段代码已经存在于 itemDetail.js 中的ready函数中。)

// Display the appbar but hide the Full View buttonvar appbar = document.getElementById('appbar');var appbarCtrl = appbar.winControl;
appbarCtrl.hideCommands(["view"], false);

导航到分割页时,应用程序栏上会显示 Full。 将代码添加到 split.js inside 函数以显示按钮。

// Display the appbar and show the Full View buttonvar appbar = document.getElementById('appbar');var appbarCtrl = appbar.winControl;
appbarCtrl.showCommands(["view"], false);
从拆分PageControl导航到项详细信息 PageControl

用户单击应用程序栏上的Full View 按钮时,应用程序将导航到项目详细信息 PageControl 并显示所选博客日志的标题和内容。

打开 split.js 在utils变量声明之后添加这个变量声明。

// The selected itemvar post;

在第二次调用 querySelector 之前将这个语句添加到就绪函数中,这样就可以首先设置 this.items。 这里代码将post变量设置为每当用户导航到页面时第一个博客帖子的索引。

// Get the first item, which is the default selectionpost = this._items.getAt(0);

将这里语句添加到 _selectionChanged 函数,在设置 this._itemSelectionIndex的语句之后。 这里代码将post变量设置为用户选择的博客日志的索引。

// Get the item selected by the userpost = this._items.getAt(this._itemSelectionIndex);

_selectionChanged 函数之外,在post变量声明之后添加这里事件处理程序函数。 当用户单击 Full 按钮时调用这里处理程序。 WinJS.Navigation.navigate 函数加载项详细信息页面,并将所选的博客帖子作为项传递。

function displayFullView() {
 // Display the selected item in the item detail page nav.navigate('/pages/itemDetail/itemDetail.html', { item: post });
}

在我们添加代码后,将这里代码添加到ready函数中,以显示 按钮。 这里代码将displayFullView函数注册为 click 事件的事件处理程序,该事件为 View button按钮的事件处理程序。

// Register the event handler for the Full View buttondocument.getElementById('view').addEventListener("click",
displayFullView, false);

按F5运行应用程序。 单击项目页面上的项目将带你到一个分割页面,其中包含博客文章列表和所选博客帖子的内容。 点击或者点击一个博客帖子,它的内容将显示在右栏中。 若要显示应用程序栏,请从底部或者顶部滑动,或者右键单击系统不支持触摸。

点击或者点击 Full Full按钮,我们的应用程序将在项目详细信息页面中显示所选博客帖子的内容。

如果点击或者单击 按钮,则返回到拆分页。 选中了ListView中的第一项,这不一定是你选择在项目详细信息页中显示的内容。 如果你愿意,可以添加代码以保存和还原选定内容。

我们应用程序使用的模板代码处理 landscape 和 portrait的方向。 将电脑旋转,或者在 Microsoft Visual Studio Express 2012的Express中运行你的应用程序,然后旋转显示。 items page看起来像这样。

拆分页面看起来像这样。 请注意,只有在选择项之前才显示ListView控件。 然后,博客文章将垂直显示。 如果你单击 Full View,则会水平显示博客帖子。

摘要

我们已经完成了应用程序的代码。 在构建了一个页面模板,如何绑定数据到一个新的页面,如何定位到一个新页面,以及如何添加一个应用程序栏,以及如何使用按钮。

有关可以添加到应用程序的其他特性的更多信息,请参见使用JavaScript服务的Windows 存储应用程序。

查看完整代码

你被卡住了还是想检查你的工作? 如果是,请参见完整代码

本教程由MSDN的团队提供给你。 要了解有关 Windows 商店应用程序编码的更多信息,请访问 http://dev.windows.com 应用程序。

HTML5视频资源


JAVA  Javascript  Window  Windows  Store  blog  
相关文章