Windows 8.1

借助 Chronicling America API 创建新式缩微平片

Tim Kulp

下载代码示例

今天，报纸上取而代之的是其他网站上的新闻源。一次，不过，报纸是当前事件信息的主要来源。通过记载美国项目 (chroniclingamerica.loc.gov)，美国国会和各种机构的图书馆一直在努力使美国的丰富历史报纸通过标准化的 API 在 Web 上可用。此 API 可以让开发人员利用媒体从要生成研究应用、 新闻与历史背景的应用程序或应用程序用于将内容附加到族谱的记载美国项目。在本文中，我介绍记载美国 API，然后生成 Windows 应用商店的应用程序，允许用户研究，并查看数字化的报纸。

收藏美国 API 的概述

记载美国有两个核心组件到它的 API：OpenSearch 议定书和标准化的 Url 导航内容。为每个发布 URL 遵循标准的格式，您可以修改以提供不同的数据。作为一个例子，检索特定页面需要下面的 URL 结构：http://chroniclingamerica.loc.gov/lccn/sn83030214/1913-08-12/ed-1/seq-1/。这种格式打破下来到：请求一个特定的出版物 (/ lccn/sn83030214 /)，提供的日期和标识符的问题和版 (1913年-08-12/ed-1），并提供页面数 (seq 1 /)。如果我想要请求的第二页，我只是更新 seq 1 到 seq-2。在整篇文章，我将使用的标准化的 URL，使导航简单和快速无需查找具有许多一次性请求到服务器的对象。

您可以使用 URL 来检索特定的内容和 OpenSearch 协议要搜索标题和页。搜索标题和页使用不同的 URL 结构。标题搜索结构可以发现在 1.usa.gov/1a0GOpF，并且页面搜索结构可以发现在 1.usa.gov/188T1HB。这些 XML 文件提供所有的输出格式和参数，可以在记载美国使用。我将重点介绍在这篇文章，有的大多数属性对要搜索的网页搜索。

建设一个缩微胶片应用程序

如果你不是膜的足够老记得缩微胶片，它是膜的一个清楚的片断的微型打印图像了。这些图像是由肉眼看，几乎没有可读，但通过将缩微胶片表放在特别的投影仪，您可以访问到数百个图像 （或更多）。它是伟大的海量存储媒介的图像，并帮助用户通过使用投影机的控制车轮的文档之间快速移动。

缩微胶片是我的一个示例应用程序，显示从记载美国报纸的灵感。这款应用程序启动的出版物在 GridView 中显示列表。用户可以搜索此内容 （增强从缩微胶片） 和审查的问题，很像使用电子书阅读器。国会图书馆已经建立好的 Web 应用程序中具有强大的 JavaScript 功能。你可以从这个网站了解并翻译 JavaScript 从 Web 构建 Windows 应用程序商店。

我建 JavaScript 为 Windows 8.1 我记载美国的 app。首先，从 Visual Studio 中的 JavaScript Windows 应用商店的应用程序模板创建导航应用程序。可以使用模板 （例如，导航中的代码 navigator.js) 和 default.js 的应用程序激活事件处理程序中的预先存在的代码这样你就不用到手动生成应用程序的所有基础设施。

100 年前的今天......

记载美国主页显示今天的日期 100 年前的报纸的头版。这是一个有趣的地方开始我的应用程序，并立即向内容介绍人。若要开始，需要将连接到记载美国和拉数据。这款应用程序执行许多功能围绕其数据，所以在 js 文件夹中，创建一个新的 JavaScript 文件命名为 data.js，在所有的数据交互将发生。认为这是我的数据层。

因为我不想 data.js 漏出来到全局命名空间中的代码，我将下面的代码添加到 data.js 创建一个自包含的函数：

 

(function () {
  "use strict";
  // Code goes here
})();

此块使里面一切东西私人所以我不遇到任何变量命名冲突的文件，使用 data.js。 中的代码注释，"代码此处显示"替换图 1。

图 1 初始代码为 Data.js 的

var imageList = new WinJS.Binding.List(); // The image list for binding
var pagesList = new WinJS.Binding.List(); // List of pages for a single issue
var urlPrefix =   "http://chroniclingamerica.loc.gov"; // Used to prefix all URLs
var httpClient =   new Windows.Web.Http.HttpClient(); // Default HTTP client to use
function getInitialPages() {
  // Get the date and set it 100 years ago
  var hundredYearsAgo = new Date();
  hundredYearsAgo.setYear(hundredYearsAgo.getYear() - 100);
  var uri =
    new Windows.Foundation.Uri(urlPrefix + "/frontpages/" +
    hundredYearsAgo.getFullYear() + "-" + hundredYearsAgo.getMonth() + "-" +
    hundredYearsAgo.getDate() + ".json");
  httpClient.getStringAsync(uri)
    .then(
    function c(result) {
      var images = JSON.parse(result);
      images.forEach(function (item) {
        item.medium_url = urlPrefix + item.medium_url;
        item.thumbnail_url = urlPrefix + item.thumbnail_url;
        item.url = urlPrefix + item.url;
        imageList.push(item);
    });
  })
}
// Get function goes here
WinJS.Namespace.define("Data", {
  GetInitialPage: getInitialPages,
  ImageList: imageList,
  PageList: pagesList
});

图 1 开头基本保存从记载美国 API 调用数据的声明。 我设置了一些内务管理变量，如 URL 前缀，以避免打字 （和不可避免地 mistyping） 的基记载美国 URL，以及 HttpClient 对象要共享跨职能。

从 100 年前在 data.js 中的第一个函数调用初始页。 此函数与一个简单的计算，以获取今天的日期开始，然后减去 100 年。 我使用的标准化的 Url 从记载美国，设置到 frontpages 目录中的 API 的匹配提供的日期的每一个问题从加载所有前台页面的请求。 请注意该 URL 以.json 来表示希望从服务器返回的 JSON 数据结束。

记载美国 API 允许您设置此值，以请求不同的数据类型如 XML 或 HTML。 使用 httpClient.get­StringAsync 函数，应用程序从 API 请求 JSON 数据，并将返回的字符串值解析到一个 JSON 对象。 因为我打电话 getStringAsync，我不知道什么类型的数据从服务器回来。 我的应用程序期望 JSON，所以要验证的数据 API 返回可以转换为 JSON，我使用这样。 这在这种情况下返回的 JSON 对象的数组。 如果返回的字符串不能转换为 JSON，该代码将引发错误。 最后，代码更新要追加前缀 （因为记载美国提供的 Url 在这里不是绝对的相对 Url 作为） 在该项目中的 Url 以确保我的应用程序可以连接到图像。

关于使用 Windows.Web.Http.HttpClient 的一个说明：总是计划失败。 您的代码试图达到的服务器可能是关机或不可用，例如。 已为简洁起见，此处省略了错误处理，但我已经把它包含在在线示例代码中。

在结束了在代码图 1，我添加了 WinJS.Namespace 要注册 data.js 可用于其他应用程序的内容。 此命名空间功能将 data.js 中的私有对象转换为市民，可由其他代码访问。 使用 WinJS.Namespace.define 通知应用程序的已定义的对象和成员都可用的代码的其他部分。 本质上，这是您在其中进行数据和它的成员可访问与 IntelliSense 一起在您的网页上。

绑定到主屏幕定义的数据对象，您需要连接要显示来自记载美国站点的内容的 HTML 页面。 首先打开 default.html 页并添加对 data.js 的脚本引用。

这一步使得 data.js 可用于所有页面在应用程序中。 Home.html 的主要部分中的代码替换为以下内容：

<div id="hundresYearsListView" class="itemslist win-selectionstylefilled"
  aria-label="List of Publications"
  data-win-control="WinJS.UI.ListView" data-win-options=
    "{ selectionMode: 'none', layout: { type:  WinJS.UI.GridLayout } }"></div>

此代码定义一个 ListView 控件显示搜索结果从记载美国 API。 ListView 控件使用模板与报纸页面的图像和出版物的地方。 通过使用 WinJS.Binding.Template 控件，您描述什么应该出现在列表视图中。 模板让您的设计团队 （或市场营销团队，如果你没有一个设计团队） 工作直接与 HTML 而不必担心数据绑定。 添加以下直接下文 < 身体 > 标签：

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind=
      "src: thumbnail_url; alt: label" />
    <div class="item-description">
    <h3 class="item-title" data-win-bind="textContent: label"></h3>
    <h4>(<span data-win-bind="textContent: pages"></span> pp.)</h4>
    <h4 class="item-subtitle win-type-ellipsis" data-win-bind="textContent:
      place_of_publication"></h4>
    </div>
  </div>
</div>

确定要绑定到哪个字段由该赢将数据绑定属性，Windows 用来确定要显示在绑定期间中的特定属性的属性。 数据集属性是在 HTML5，它允许您生成您的需要的自定义属性的新属性。 Windows 应用商店的应用程序广泛使用的数据属性，但您可以建立您自己的属性，例如数据发布在此示例中，其中包含报纸的名称。 此属性可以通过使用 document.querySelector 函数，方便地访问到的所有元素提供此属性搜索。

将数据连接到 ListView 若要将数据放入列表视图，请打开 home.js 文件 (/ pages/home/home.js) 和添加所示的代码图 2 对主页控制的准备好了的函数。

图 2 代码添加到准备好的函数

ready: function (element, options) {
  // Load the data
  Data.GetInitialPage();
  // Configure the list view
  var hundredYearListView =
     document.getElementById("hundresYearsListView").winControl;
  hundredYearListView.itemDataSource = Data.ImageList.dataSource;
  hundredYearListView.itemTemplate = document.querySelector(".itemtemplate");
  hundredYearListView.oniteminvoked = this._itemInvoked;
  // Process the bindings
    WinJS.Binding.processAll();
},
_itemInvoked: function (args) {
  args.detail.itemPromise.done(function itemInvoked(item) {
  var itemSelected = Data.ImageList.getAt(args.detail.itemIndex);
  WinJS.Navigation.navigate(
    "/pages/details/details.html", { selectedItem: itemSelected });
  });
}

中的代码图 2 开始从 API 通过调用 Data.GetInitialPage 函数加载数据的过程。 然后我设置 ListView 来接数据从 imagelist （这由 GetInitialPage 函数填充) 和准到 ListView 控件的模板控件。 要总结 ListView 控件的功能，我将添加 ItemInvoked 的事件处理程序以便当用户单击一个报纸图像，事情发生。 在准备好的函数结束与对 WinJS.Binding.processAll 的调用来更新用户界面的基础，在准备好的功能，如数据绑定期间发生的修改。

下一步，_itemInvoked 的定义，采取一个选定的项并将它传递给采取进一步的行动的详细信息页面。 这是只直接到页传递的数据对象的基本操作。 请记住导航方法提供了将数据从一页传递到另一个很大的灵活性。 在 Windows 应用商店的应用程序中使用导航的详细信息，查阅 Windows 开发中心 Windows 应用商店的应用程序页上的样本 (bit.ly/153fDXM)。

你在运行您的应用程序之前，添加中所示的样式图 3 到 home.css （/ pages/home/home.css)，使 app 略为简洁的外观。

图 3 样式为 Home.css 的

.homepage section[role=main] {
  margin-left: 120px;
  margin-right: 120px;
}
.homepage item {
  height: 225px;
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
}
#hundredYearsListView {
  height: 90%;
}

此时，运行您的项目，您应该看到类似的图 4。

图 4 记载美国主屏幕

我造了一个主屏幕和一点点的水管系统。 下一步是查看出版物的页面并创建一个详细信息屏幕。

查看特定的页面

添加详细信息屏幕非常简单与现有的应用程序安装程序。 首先，我需要将一个新的函数添加到 data.js 来查找网页的问题。 接下来，我需要打造出了实际上将显示此数据的页面控件。

与中的代码开始由回 data.js 和替换的评论，"Get 函数在这里，" 图 5。

图 5 获取函数为 Data.js

function get(url) {
  pagesList.length = 0;
  var uri = new Windows.Foundation.Uri(
    url.replace(/\/seq\-[1-999]{1,3}(\/|\.json)?$/g, ".json"));
  httpClient.getStringAsync(uri)
    .then(
    function complete(result) {
      var editionItem = JSON.parse(result);
      editionItem.pages.forEach(function (item) {
        item.thumbnail_url = item.url.replace(".json", "/thumbnail.jpg");
        item.medium_url = item.url.replace(".json", "/medium.jpg");
        pagesList.push(item);
      })
    })
}

此代码将一个 URL 并使用标准的 URL 约定的记载美国取代对第一页的引用 （/ seq-1 /) 与 JSON 调用到版 （将转换教育署-1/seq-1 / ed 1.json）。 若要执行此操作，使用正则表达式匹配模式 /seq-[1-3 位数字] / 或 seq-[1-3 位数字号码].json 和.json 只是将其替换。 通过调用版的 JSON 对象，如何获得有关这一问题并不只是具体的页面信息。 可以进一步向上的 URL，一般情况下，获取有关的问题或发布更多常规信息，但现在我会坚持的版和页面。 在添加后 Get 函数，一定要得到这样的其他网页可以使用它为参考的 WinJS.Namespace.define 函数中注册它。

创建详细信息页第一，在页目录下，创建一个文件夹命名为"详细信息"。此文件夹将举行的三个文件组成一个页面控件 （HTML、 JS 和 CSS 文件）。 向文件夹中添加一个新的项目，选择页面控件 （下 Windows 存储区），并命名项目 details.html。 现在更新 details.html 的身体标记 (/ pages/details/details.html） 通过使用中的代码图 6。

图 6 代码为 Details.html 的

    <div class="listview-itemtemplate"
      data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#" data-win-bind="src: medium_url" />
      </div>
    </div>
    <div class="details fragment">
      <header aria-label="Header content" role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea win-type-ellipsis">
          <span class="pagetitle"></span>
        </h1>
      </header>
      <section aria-label="Main content" role="main">
        <div id="flipview" data-win-control="WinJS.UI.FlipView"></div>
      </section>
    </div>

请注意此代码非常类似于 home.html，除而不是 ListView 控件中使用 FlipView 控件。 这使应用程序更多的电子书阅读器的感觉。 虽然我讨论只有图像，记载美国提供消费 PDF 内容、 光学字符识别 (OCR) 的文本和其他类型的内容的访问。 认为有关如何这些不同类型可以添加更多深度至某个应用程序 （如依赖 OCR 功能的辅助技术) 在今后的项目。

HTML 是完整的。 现在去比 CSS 文件 （/ pages/details/details.css） 若要添加清理的样式，将使页面看起来体面：

    .details section[role=main] {
      margin-left: 120px;
      margin-right: 120px;
    }
    #pageListView {
      height: 90%;
      width: 90%;
    }
    #flipview {
      height: 90%;
      width: 90%;
    }

连接到 FlipView 的详细信息

打开 details.js 页面 （/ pages/details/details.js) 并将下面的代码添加到页面控件的准备就绪功能：

// Step 1: consume the options data
var selectedItem = options.selectedItem;
// Step 2: acquire data for pages
Data.Get(selectedItem.url);
// Step 3: set the page title
var title = document.querySelector(".details .pagetitle");
title.textContent = selectedItem.label;
// Step 4: set up the ListView to display the pages
var fV = document.getElementById("flipview").winControl;
fV.itemDataSource = Data.PageList.dataSource;
fV.itemTemplate = document.querySelector(".flipview-itemtemplate");
WinJS.Binding.processAll();

此代码是 home.js，与我使用 options.selectedItem 的异常相同。 此对象来自主页，进入详细信息页面，通过导航功能。 我使用的 options.selectedItem 对象中的数据调用 Data.Get 和填充绑定到 FlipView 控件的列表对象。 就像 ListView，FlipView 使用 WinJS.Binding.Template 控件来显示内容。 我决定使用 FlipView，因为我想要一次显示只有一页，那一页是一张图片。 使用 FlipView 控件还为用户提供更为自然的阅读体验。

运行该代码，您应该看到类似图 7。

图 7 示例的详细信息页

与地方中的细节，是一块收拾这款应用程序：搜索功能。

搜索内容

搜索报纸内容的能力提供了一个最大的研究工具。 它是旧的缩微胶片设备从一定的改善。 通过使用 OpenSearch，记载美国提供了功能强大的搜索能力，遵循开放标准。 我要为我的应用程序，对页面内容使用从参数搜索 1.usa.gov/188T1HB。

首先添加一个文件夹命名为"搜索"页目录中将新项添加到搜索文件夹，然后选择搜索结果控制。 要启用搜索，必须将搜索声明添加到您 appmanifest 和对 default.html 文件，将 searchResults.js 文件的引用。 有更多的搜索比添加几个文件，所以如果您不熟悉搜索合同流程，你可以通过阅读在 Windows 应用商店的应用程序开发中心文章开始 bit.ly/HMtNCo。

生成的搜索功能所需的第一个元素是向 data.js 添加新的搜索功能 （/ js/data.js) 文件。 打开 data.js，在代码中添加图 8 后 get 函数。

图 8 搜索功能

function search(terms) {
  itemList.length = 0; // Clear the list items
  var uri = new Windows.Foundation.Uri(
    urlPrefix + "/search/pages/results/?andtext=" + terms + "&format=json");
  return httpClient.getStringAsync(uri)
    .then(
    function complete(result) {
      var searchList = JSON.parse(result);
      imageList.pop();
      searchList.items.forEach(function (item) {
        item.medium_url = urlPrefix + item.id + "medium.jpg";
        item.thumbnail_url = urlPrefix + item.id + "thumbnail.jpg";
        item.label = item.title;
        imageList.push(item);
      })
  })
}

此简单函数的搜索条件，构建出要与页面搜索 URL 一起工作的 URI。 Andtext 参数允许您提供搜索术语来使用的内容在页面上，但别忘了检查搜索定义 XML 文件中的多个参数，可以用。 若要完成 data.js，添加搜索作为一个项目命名空间中所以那 searchResults.js (/ pages/search/searchResults.js) 可以访问它。

修改搜索结果控制 （只是与页面控件一样） 当您添加项目时，创建三个文件：显示您的结果、 样式使用您的结果的 CSS 文件和一个 JavaScript 文件绑定您的结果的 HTML 文件。 通过替换项模板匹配的数据模型中所示首先更新 searchResults.html 文件图 9。

图 9 更新 SearchResults.html

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind=
      "src: backgroundImage; alt: title" />
    <div class="item-content">
      <h3 class="item-title win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML: title searchResults.markText"></h3>
      <h4 class="item-subtitle win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML: publisher searchResults.markText"></h4>
      <h4 class="item-description win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML:
        place_of_publication searchResults.markText"></h4>
    </div>
  </div>
</div>

现在打开 searchResults.js 文件。 此文件有函数的数目，但大多数的所做的更改是到 _searchData 函数。 代码替换为 _searchData 中所示的代码图 10。

图 10 代码为 _searchData 的

_searchData: function (queryText) {
  var results;
  if (window.Data) {
    Data.Search(queryText).done(
      function complete(result) {
        if(Data.ImageList.length > 0)
          document.querySelector('.resultsmessage').style.display = "none";
      });
    results = Data.ImageList.createFiltered(function (item) {
      return ((item.title !== undefined && item.title.indexOf(queryText) >= 0)
        || (item.publisher !== undefined && item.publisher.indexOf(queryText)
        >= 0) || (item.place_of_publication !== undefined &&
        item.place_of_publication.indexOf(queryText) >= 0));
    });
  } else {
    results = new WinJS.Binding.List();
  }
  return results;
}

如果你比较这对生成的代码的代码，你会明白我所做的只是更新的项目对象数据模型以反映这些组件，添加一些功能，在 Data.Search 函数完成后，会出现。 使用预生成的代码，你可以 app 这样对市场更快。 您可以集中精力创建您的应用程序的特定功能，不必分别挂接每件每次。

在运行代码之前，更新 searchResults.js 以反映数据模型中的筛选器 _generateFilters 函数。 默认情况下，为组添加两个筛选器。 更新那些要为筛选器在发行市值等数据模型更有用的东西。 与这项工作完成，你应该能够运行您的代码并看到类似图 11。

图 11 搜索结果屏幕为收藏美国 App

要总结搜索屏幕，您需要查看的一篇文章，看看它的页的详细信息。 更新搜索中的 _itemInvoked 函数­Results.js (/ pages/search/searchResults.js) 用下面的代码：

_itemInvoked: function (args) {
  args.detail.itemPromise.done(function itemInvoked(item) {
  var searchResult = originalResults.getAt(args.detail.itemIndex);
  WinJS.Navigation.navigate(    "/pages/details/details.html",
    { selectedItem: searchResult });
  });
},

此代码捕获当前选定的搜索结果项，并将它传递给的详细信息页面。 WinJS.Navigation。 导航功能可以使用两个参数：页面和初始状态宣言 》 的地址。 通过使用 initialState 对象，您可以传递参数从一个屏幕到下一个。 在这种情况下，导航功能选定搜索结果对象向传递详细信息页面，就像我以前从主页 selectedItem。

面向 21 世纪的缩微胶片

记载美国档案历史报纸并使它们可通过简单的 API。 在本文中，我探讨了此 Web 服务以及如何通过使用一些基本控件，使用 Windows 应用程序商店中的核心能力。 Windows 8.1 提供许多机会，你要有创意和重新思考人与技术的交互方式。

在这种情况下，什么将被一张报纸图像并把它做成一个交互式的现代应用程序了 您可以扩展此示例来共享和存储用户的个性化的搜索设置基于他的利益 — 这就是只是冰山一角。 国会图书馆和国家人文基金会提供了丰富的 API，在其上构建。 可以将此历史数据添加到你的食谱里为建设伟大的应用程序。

汇报：迷人的体验，可重复使用的技能

Windows 应用商店的应用程序让你发挥你的创造力与数据。 在此应用程序中，您可以浏览历史报纸资料，可以用于研究、 教育或其他历史查询。 通过媒体丰富的 API 和简单的 JavaScript 编码组合与 Windows 8.1 记载美国提供可以方便地生成一个深深地参与体验。

它的简介：

在本文中，数据是从 API 拉扯和搜查，并探讨了内容 — 所有通过重用一套核心的技能。 迷人的体验是通过代码重用和富媒体 API 创建的。

• 通过使用他们现有的技能来生成丰富的经验，为用户进行您的开发团队成员。
• 通过连接到 Windows 8.1 魅力功能，如搜索与您的用户。
• 作为市场优势提供新视野的老技术。

适用于开发人员的简介：

发展是一项创造性的工作，和 Windows 应用商店的应用程序给你更多的自由。 在这篇文章，适用的一种复古的技术和技能 （ListView 和 Windows.Web.Http.HttpClient） 的一套核心重用打造出来。 与搜索功能的整合应用程序允许用户要探索这款应用程序的内容来自任何地方的 Windows 8.1。

• 链接生成异步代码工作流的承诺。
• 重复使用 FlipView 控件 ListView 技能。
• 使用 JavaScript 原型能力动态地扩展对象。

详细信息：

• 在 JavaScript （Windows 应用商店的应用程序） 中的异步编程： bit.ly/17EiJTj
• 记载美国： chroniclingamerica.loc.gov
• OpenSearch： opensearch.org

Tim Kulp 带领的开发团队在 UnitedHealthcare 国际在巴尔的摩。您可以在自己的博客上找到库尔普 seccode.blogspot.com 或在 Twitter 上 twitter.com/seccode，在他说话的代码、 安全和巴尔的摩美食家。

由于以下的技术专家对本文的审阅：埃里克 · 施密特 (Microsoft)
埃里克 · 施密特是内容开发商在微软的 Windows 开发人员内容团队中，写关于 Windows 库的 JavaScript （WinJS）。 当以前在 Microsoft Office 司，他建造办公平台的应用程序的代码样本。 否则为他花时间与他的家庭、 戏剧字符串低音、 生成 HTML5 视频游戏或塑料建材玩具博客 （http://historybricks.com/)。