• Artikel

Dieser Artikel wurde maschinell übersetzt.

Windows 8.1

Erstellen einer modernen Mikrofiche-App mit der Chronicling America-API

Tim Kulp

Beispielcode herunterladen

Heute ist die Zeitung von anderen Nachrichtenquellen im Internet abgelöst.Zu einer Zeit, gab die Zeitung aber, die Hauptquelle für Informationen über aktuelle Veranstaltungen.Durch das Projekt Amerika Chronik (chroniclingamerica.loc.gov), die USALibrary of Congress und verschiedenen Institutionen haben gearbeitet, um die reiche Geschichte der USA zu machenZeitungen im Web über eine standardisierte API zur Verfügung.Diese API ermöglicht es Entwicklern, die Nutzung von Medien aus dem Chronik-Amerika-Projekt Forschung apps, Nachrichten-apps mit historischen Kontext oder apps zum Anfügen von Inhalt an Familienstammbaum zu erstellen.In diesem Artikel ich einführen der Chronik Amerika-API und eine Windows-Speicher-app, mit der Benutzer-Forschung und digitalisierte Zeitungen anzeigen, zu bauen.

Übersicht über die Chronicling Amerika-API

Chronik America verfügt über zwei Kernkomponenten für seine API: Das OpenSearch -Protokoll und standardisierte URLs zu Inhalten zu navigieren.Für jede Veröffentlichung folgt die URL ein standard-Format, die Sie ändern können, um unterschiedliche Daten bereitzustellen.Beispielsweise erfordert das Abrufen einer bestimmten Seite die folgende URL-Struktur: http://chroniclingamerica.loc.gov/LCCN/sn83030214/1913-08-12/Ed-1/SEQ-1/.Dieses Format bricht auf: Anfordern einer bestimmten Veröffentlichung (/ Lccn/sn83030214 /), die das Datum und die Kennung des Problems und Ausgabe (1913-08-12/Ed-1) und bietet die Seitenzahl (Seq-1 /).Wenn ich die zweite Seite anfordern möchten, aktualisiere ich gerade Seq-1 zu Seq-2.In diesem Artikel wird die standardisierte URL verwendet, um die Navigation einfach und schnell zu machen, ohne zum Nachschlagen von Objekten mit vielen einmaligen Anfragen an den Server.

Sie können die URL verwenden, um bestimmte Inhalte und dem OpenSearch Protokoll suchen in Titel und Seiten abzurufen.Suchen in Titel und Seiten verwenden unterschiedliche URL-Strukturen.Titel Suche Strukturen finden Sie unter 1.usa.gov/1a0GOpF, und Suche Seitenstrukturen sind abrufbar unter 1.usa.gov/188T1HB.Diese XML-Dateien bieten alle Ausgabeformate und Parameter, die in Amerika Chronik verwendet werden können.Ich konzentriere mich auf Seite suchen in diesem Artikel, die meisten Eigenschaften gegen die Suche zu haben.

Gebäude eine Mikrofiche-App

Wenn Sie nicht alt genug ist, zu erinnern, Mikrofiche, war es eine klare Stück Film auf die Miniatur Bilder gedruckt wurden.Diese Bilder waren mit bloßem Auge kaum lesbar, aber das Mikrofiche-Blatt in einem speziellen Projektor einfügen, könnte Sie erhalten Zugang zu Hunderten von Bildern (oder mehr).Es war ein großartiges Massenspeicher Medium für Bilder und half Benutzer schnell zwischen Dokumenten mithilfe des Projektors Steuerrad zu bewegen.

Mikrofiche ist meine Inspiration für eine Beispielanwendung, die Zeitung aus Amerika Chronik anzeigt.Die app startet mit einer Liste von Publikationen, die in einer GridView angezeigt.Benutzer können diesem Suchbegriff (eine Erweiterung von Mikrofiche) und ein Problem, ähnlich wie mit einem eReader zu untersuchen.Die Library of Congress hat bereits eine nette Webanwendung mit robusten JavaScript-Fähigkeiten aufgebaut.Sie können von dieser Seite erfahren und übersetzen JavaScript aus dem Web, Windows-Speicher-app zu bauen.

Ich baute meine Chronik Amerika-app in JavaScript für Windows 8.1.Zunächst erstellen Sie eine Navigations-app von JavaScript Windows Store app Vorlagen in Visual Studio.Nutzung der bereits vorhandenen Code in der Vorlage (z. B. die Navigationscode im navigator.js) und der app-Aktivierung-Ereignishandler in default.js damit Sie manuell nicht bauen Ihre app-Infrastruktur.

Heute vor 100 Jahren...

Die Chronik Amerika-Homepage zeigt die Titelseiten der Zeitungen verdrängt für Heutiges Datum vor 100 Jahren.Dies ist ein Spaß meine app und Stelle sofort Leute zum Inhalt.Zunächst muss ich zum Herstellen einer Verbindung mit Amerika Chronik und Pull-Daten.Die app führt viele Funktionen rund um seine Daten im Ordner Js ich eine neue JavaScript-Datei mit dem Namen data.js, erstellen wo alle Daten Wechselwirkungen auftreten werden.Sieh es als mein Datenschicht.

Ich fügen Sie folgenden Code zu data.js erstellen Sie eine eigenständige Funktion, weil ich nicht, den Code in data.js, in den globalen Namespace austreten will:

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

Dieser Block macht alles, was darin private, so daß ich Variable benennen Konflikte mit Dateien kommen nicht, die data.js verwenden. Der Kommentar "Code hier einfügen" wird ersetzt durch den Code im Abbildung 1.

Abbildung 1 erster Code für 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
});

Abbildung 1 beginnt mit einfachen Erklärungen, die die Daten aus der Chronik von Amerika-API-Aufrufe zu halten. Ich habe einige Variablen Hauswirtschaft eingerichtet, z. B. ein URL-Präfix eingeben (und zwangsläufig mistyping) zu vermeiden die Basis Chronik Amerika-URL sowie eine HttpClient Objekt um Funktionen gemeinsam genutzt werden.

Die erste Funktion in data.js Ruft die ersten Seiten von vor 100 Jahren. Diese Funktion beginnt mit einer einfachen Berechnung zum heutigen Datum erhalten und subtrahiert dann 100 Jahre. Mit der standardisierten URLs aus Chronik Amerika richten ich eine Anforderung an das Frontpages-Verzeichnis der API, die Titelseiten von jeder Ausgabe passend zum angegebenen Zeitpunkt zu laden. Beachten Sie, dass die URL endet mit .json zu bezeichnen, dass ich möchte, dass die JSON-Daten vom Server zurück.

Die Chronik-Amerika-API können Sie legen Sie diesen Wert auf verschiedene Datentypen, z. B. XML oder HTML anfordern. Mit der httpClient.get­StringAsync Funktion, die app fordert die JSON-Daten aus der API und analysiert den zurückgegebene Zeichenfolge-Wert in ein JSON-Objekt. Da ich GetStringAsync nenne, weiß ich nicht, welche Art von Daten vom Server zurückkommt. Meine app erwartet JSON, also zur Überprüfung der Daten die API gibt JSON konvertiert werden können, ich benutze JSON.parse. Dies gibt ein Array von JSON-Objekte in diesem Fall. Wenn die zurückgegebene Zeichenfolge in JSON konvertiert werden kann, löst der Code einen Fehler. Schließlich der Code aktualisiert die URLs in das Element um das Präfix anzufügen (da Chronik Amerika die URLs hier wie relative URLs, nicht absolut) um meine app kann eine Verbindung zu den Bildern zu gewährleisten.

Ein Hinweis zur Verwendung von Windows.Web.Http.HttpClient: Planen Sie immer bei einem Fehler. Der Server, den Code zu erreichen versucht könnte nach unten oder nicht verfügbar ist, zum Beispiel. Fehlerbehandlung hat hier der Kürze halber weggelassen worden, aber ich habe es im online Beispielcode enthalten.

Am Ende des Codes in Abbildung 1, fügte ich WinJS.Namespace um den Inhalt des data.js für andere Anwendungen verfügbar sein zu registrieren. Diese Namespace-Funktion konvertiert die privates Objekte in data.js Öffentlichkeit, andere Code zugänglich. Mit WinJS.Namespace.define informiert einer app, dass die definierten Objekts und Mitglieder anderer Teile des Codes zur Verfügung stehen. Im Wesentlichen ist dies, wo Sie Daten und seine Mitglieder mit IntelliSense auf Ihren Seiten zugänglich.

Binden an dem Home-Bildschirm With the Data-Objekt definiert, müssen Sie die HTML-Seite zum Anzeigen von Inhalt aus der Chronik Amerika-Website verbinden. Öffnen der default.html-Seite und fügen Sie einen Skriptverweis data.js.

Dieser Schritt macht data.js in der app für alle Seiten verfügbar. Ersetzen Sie den Code im Abschnitt "Main" home.html, mit folgendem:

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

Dieser Code definiert ein ListView-Steuerelement, dass zeigt die Suchergebnisse aus der Chronik Amerika-API. Das ListView-Steuerelement verwendet eine Vorlage mit ein Bild von der Zeitungsseite und die Stelle der Veröffentlichung. Mithilfe eines WinJS.Binding.Template-Steuerelements beschreiben Sie, was in der ListView angezeigt werden soll. Vorlagen können Ihr Design-Team (oder marketing-Team, wenn Sie ein Design-Team haben) direkt mit HTML ohne sich Gedanken über die Datenbindung. Fügen Sie den folgenden direkt unterhalb der < Body > Tag:

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

Bestimmen, welche Eigenschaft zum Binden an welches Feld durch das Attribut Win-binden-, die Windows verwendet behandelt wird, um festzustellen, was in bestimmten Attributen während der Bindung angezeigt. Das Dataset-Attribut ist ein neues Attribut in HTML5, mit dem Sie benutzerdefinierte Attribute für Ihre Bedürfnisse erstellen. Windows Store apps machen intensiven Gebrauch von der Daten-Attribut, aber Sie können erstellen Sie eigene Attribute, wie Daten-Veröffentlichung in diesem Beispiel, die den Namen der Zeitung enthält. Dieses Attribut kann mithilfe der document.querySelector-Funktion, die den einfachen Zugriff auf alle Elemente mit diesem Attribut gesucht werden.

Anschlußdaten der ListView um Daten innerhalb der ListView hinzufügen, öffnen Sie die home.js-Datei (/ pages/home/home.js) und fügen Sie den Code in Abbildung 2 der bereit-Funktion für das Homepage-Steuerelement.

Abbildung 2-Code der bereit-Funktion hinzugefügt

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 });
  });
}

Der Code in Abbildung 2 beginnt mit dem Laden von Daten aus der API durch Aufrufen der Data.GetInitialPage-Funktion. Dann ich richten Sie das ListView-Steuerelement, um Daten aus der ImageList abzuholen (die von der GetInitialPage-Funktion belegt ist) und ordnen Sie das Vorlagensteuerelement an das ListView-Steuerelement. Um das ListView-Steuerelement Funktionen einpacken, ich hinzufügen eines Ereignishandlers für ItemInvoked also klickt ein Benutzer ein Bild Zeitung, etwas passiert. Die bereit-Funktion endet mit einem Aufruf von WinJS.Binding.processAll zum Aktualisieren der Benutzeroberflächenautomatisierungs basierend auf den Änderungen, die während der bereit-Funktion, z. B. Datenbindung passiert ist.

Als nächstes wird _itemInvoked definiert, um ein ausgewähltes Element und geben sie nicht an die Detailseite für das weitere Vorgehen. Dies ist eine grundlegende Funktionsweise der Durchreise des Datenobjekts direkt auf die Seite. Beachten Sie die Navigate-Methode bietet große Flexibilität zur Übergabe von Daten von einer Seite zur anderen. Für weitere Informationen zur Verwendung von Navigation im Windows Store apps, check-out die Beispiele auf der Seite Windows Dev Center Windows Store apps (bit.ly/153fDXM).

Bevor Sie Ihre Anwendung ausführen, fügen Sie die Formatvorlagen angezeigt, die Abbildung 3 , home.css (/ pages/home/home.css), der app ein wenig sauberer aussehen zu verleihen.

Abbildung 3-Stile für 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%;
    }

Führen Sie das Projekt an dieser Stelle, und Sie sollten sehen, dass etwas ähnliches wie Abbildung 4.

Chronicling America Home Screen
Abbildung 4 Chronik America Home-Bildschirm

Ich habe eine home-Bildschirm und ein bisschen Sanitär gebaut. Der nächste Schritt ist zum Anzeigen der Seiten einer Publikation und erstellen ein Detailbild.

Anzeigen von bestimmten Seiten

Hinzufügen ein Detailbild ist einfach mit dem vorhandenen app-Setup. Zuerst muss ich data.js zum Nachschlagen der Seiten eines Problems eine neue Funktion hinzu. Als nächstes muss ich das Page-Steuerelement zu erstellen, die tatsächlich diese Daten anzeigt.

Zunächst gehen wir zurück zum data.js und ersetzt den Kommentar "Get Funktion hier geht," mit dem Code in Abbildung 5.

Abbildung 5 Get Funktion für 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);
      })
    })
}

Dieser Code führt eine URL und URL Standardkonventionen Chronik Amerikas verwendet, um den Verweis auf Seite eins zu ersetzen (/ Seq-1 /) mit einem JSON-Aufruf zur Ausgabe (Umwandlung von Ed-1/Seq-1 / nach Ed-1.json). Verwenden Sie hierzu einen regulären Ausdruck, der Muster-/seq-[1-3 stellige Nummer] / oder Seq-[1-3 stellige Nummer] .json und ersetzen Sie es mit nur .json. Durch die Edition JSON-Objekt aufrufen, erhalte ich Informationen über das Problem und nicht nur eine bestimmte Seite. Ich könnte noch weiter gehen, die URL um weitere allgemeine Informationen zu den Problemen oder Publikation im Allgemeinen zu erhalten, aber vorerst bleibe ich auf die Seiten und die Auflage. Nach dem Hinzufügen der Get-Funktion, achten Sie darauf, registrieren Sie es in der WinJS.Namespace.define-Funktion erhalten, so dass es andere Seiten als Referenz verwenden können.

Erstellen einer Details-Seite Seiten im Verzeichnis erstellen Sie zunächst einen Ordner namens "Details." Dieser Ordner wird die drei Dateien halten, die ein Steuerelement (HTML, JS und CSS-Dateien) bilden. Fügen Sie ein neues Element in den Ordner, wählen Sie Page-Steuerelement (unter Windows Speicher) und nennen Sie die Element-details.html zu. Aktualisieren Sie nun das Body-Tag der details.html (/ pages/details/details.html) mit dem Code in Abbildung 6.

Abbildung 6-Code für 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>

Beachten Sie, dass dieser Code home.html, sehr ähnlich ist, davon abgesehen, dass ich ein FlipView-Steuerelement anstelle eines ListView-Steuerelements. Dies gibt der app mehr das Gefühl, ein eReader. Obwohl ich nur Bilder bespreche, bietet Chronik Amerika Zugriff auf PDF-Inhalt, Optical Character Recognition (OCR)-Text und andere Arten von Inhalten für den Verzehr. Denke über wie diese Arten hinzufügen könnte mehr Tiefe zu einer app (z. B. assistive Technologien, die auf OCR-Funktionen) für ein zukünftiges Projekt.

Der HTML-Code ist abgeschlossen. Jetzt den Kopf über die CSS-Datei (/ pages/details/details.css) hinzufügen, die Bereinigung-Stile, die der Seite zu steigern suchen anständig:

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

Verbinden die FlipView Details

Öffnen Sie die details.js-Seite (/ pages/details/details.js) und fügen Sie den folgenden Code an die bereit-Funktion des Page-Steuerelements:

// 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();

Ein großer Teil dieses Codes ist dasselbe wie in home.js, mit der Ausnahme, dass ich options.selectedItem verwenden. Dieses Objekt stammt aus der Homepage und an die Detailseite über die Navigate-Funktion übergeben wird. Ich benutze Daten aus dem options.selectedItem-Objekt aufrufen, Data.Get und das PageList-Objekt für die Bindung an das Steuerelement FlipView aufgefüllt. Genau wie das ListView-Steuerelement verwendet die FlipView ein WinJS.Binding.Template-Steuerelement zum Anzeigen von Inhalt. Ich beschloss, eine FlipView zu verwenden, da ich nur eine Seite gleichzeitig anzeigen möchten, und diese Seite ein Bild ist. Mit den Steuerelementen für ein FlipView bietet auch eine natürlichere Leseerlebnis für Benutzer.

Führen Sie den Code, und Sie sollten so etwas wie Abbildung 7.

Sample Details Page
Abbildung 7 Beispiel Detailseite

Mit den Details im Ort gibt es ein weiteres Stück für die app einwickeln: Suchfunktion.

Durchsuchen von Inhalten

Die Fähigkeit zur Zeitung Inhalt Suche bietet eine große Recherche-Tool. Es ist eine deutliche Verbesserung von den Microfiche-Geräten der alten. Mithilfe von OpenSearchbietet Chronik Amerika eine leistungsstarke Suchfunktion, die einen offenen Standard folgt. Ich werde für meine app gegen mit den Parametern von Seiteninhalt suchen 1.usa.gov/188T1HB.

Zunächst fügen einen Ordner im Verzeichnis Seiten mit dem Namen "Search." Der Suchordner fügen Sie ein neues Element hinzu, und wählen Sie Suchergebnisse-Steuerelement. Um die Suche zu aktivieren, müssen Sie die Search-Erklärung Ihre Appmanifest und einem Verweis auf die searchResults.js-Datei in die default.html Datei hinzufügen. Es gibt mehr zu suchen als das Hinzufügen von ein paar Dateien, also wenn Sie nicht mit den Suchvorgang Vertrag vertraut, Sie loslegen kann im Windows Store apps Dev Center Artikel bei bit.ly/HMtNCo.

Das erste Element, um die Suchfunktion zu bauen ist eine neue Suchfunktion der data.js hinzu (/ js/data.js) Datei. Data.js zu öffnen und fügen Sie den Code in Abbildung 8 nach Get-Funktion.

Abbildung 8-Suchfunktion

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);
      })
  })
}

Diese einfache Funktion nimmt Suchbegriffe und baut aus den URI mit der URL der Seite-Suche arbeiten. Der Andtext-Parameter können Sie bereitstellen Suchbegriffe für Inhalte auf der Seite verwenden, aber denken Sie daran, die Suche der XML-Definitionsdatei für weitere Parameter zu überprüfen, die verwendet werden könnten. Führen Sie für data.js hinzufügen suchen als Element im Namespace so, dass searchResults.js (/ pages/search/searchResults.js) darauf zugreifen können.

Änderung des Search-Ergebnisse-Steuerelements Wenn Sie das Element hinzufügen, werden drei Dateien (wie bei einer Page-Steuerelements) erstellt: eine HTML-Datei zur Anzeige Ihrer Ergebnisse, eine CSS-Datei für styling Ihre Ergebnisse und eine JavaScript-Datei für die Bindung Ihrer Ergebnisse. Aktualisieren Sie die searchResults.html-Datei zuerst von Itemtemplate entsprechend das Datenmodell zu ersetzen, wie in Abbildung 9.

Abbildung 9 aktualisieren 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>

Jetzt öffnen Sie die searchResults.js-Datei. Diese Datei hat eine Reihe von Funktionen drin, aber die meisten von Ihnen vorgenommenen Änderungen sind an die _searchData-Funktion. Ersetzen Sie den Code in den Code für _searchData Abbildung 10.

Abbildung 10-Code für _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;
}

Vergleicht man diesen Code mit dem Code, der generiert wurde, werden Sie sehen, habe ich nur aktualisieren das Elementobjekt Datenmodell die Komponenten und fügen Sie einige Funktionen zum auftreten, nachdem die Data.Search-Funktion abgeschlossen ist. Mit dem zuvor generierte Code, können Sie eine app so auf den Markt schneller. Sie können konzentrieren sich auf die Besonderheiten Ihrer Apps erstellen und nicht jedes Stück einzeln jedes Mal einbinden.

Bevor Sie den Code ausführen, aktualisieren Sie die Filterfunktion für die _generateFilters in searchResults.js um das Datenmodell zu reflektieren. Standardmäßig werden zwei Filter für Gruppen hinzugefügt. Aktualisieren Sie derer, die zu etwas nützlicher für das Datenmodell wie ein Filter auf Veröffentlichung Stadt Werte sein. Mit dieser Arbeit abgeschlossen, sollte man in der Lage, führen Sie den Code und etwas ähnliches sehen Abbildung 11.

The Search Results Screen for the Chronicling America App
Abbildung 11 Bildschirm die Suchergebnisse für die Chronicling Amerika-App

Um die Suchmaske zu umschließen, müssen Sie die Detailansicht eines Artikels, ihre Seiten zu sehen. Aktualisieren Sie die _itemInvoked-Funktion auf der Suche­Results.js (/ pages/search/searchResults.js) mit dem folgenden Code:

_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 });
  });
},

Dieser Code erfasst der aktuell ausgewählten Suchbegriff Ergebnis und übergibt es an die Detailseite.Die WinJS.Navigation.Navigieren Sie Funktion kann zwei Argumente: die Adresse der Seite und eine Erklärung auf der Ausgangszustand.Mithilfe des InitialState-Objekts können Sie Parameter von einem Bildschirm zum nächsten übergeben.In diesem Fall übergibt die Funktion Navigate ausgewählten SearchResult-Objekts an die Detailseite genauso, wie ich das SelectedItem von der Homepage verwendet.

Microfiche für das 21. Jahrhundert

Chronik von Amerika Archive historische Zeitungen und stellt sie über eine einfache API zur Verfügung.In diesem Artikel untersucht ich die Kernfunktionen von diesen Web-Service und wie Sie es in ein Windows-Speicher-app mit einigen grundlegenden Steuerelemente aus.Windows 8.1 bietet viele Möglichkeiten für Sie, seien Sie kreativ und Interaktion zwischen Menschen und Technologie zu überdenken.

In diesem Fall habe ich was würde habe ein Blatt Zeitung Bilder und machte daraus eine interaktive modernes app.Sie könnte in diesem Beispiel um gemeinsam verwenden und speichern die Einstellungen des Benutzers personalisierte Suche basierend auf seine Interessen erweitern — und das ist nur die Spitze des Eisbergs.Die Library of Congress und der National Endowment for the Humanities haben eine umfangreiche API für den Aufbau zur Verfügung gestellt.Sie können Ihr Kochbuch für den Bau großer apps diese historischen Daten hinzufügen.

Nachbesprechung: Einkaufserlebnis, wiederverwendbare Fähigkeiten

Windows Store apps können Sie kreativ mit Daten.In dieser app erkunden Sie historische Zeitung-Informationen, die für Forschung, Bildung und andere historischen Anfragen verwendet werden könnten.Durch ein Rich Media-API und einfache JavaScript-Kodierung bietet die Kombination Chronik Amerika mit Windows 8.1 eine einfache Möglichkeit, ein sehr einprägsames Erlebnis zu bauen.

IT Brief:

In diesem Artikel Daten gezogen von einer API und gesucht, und der Inhalt ist zu erforschen, — alles durch die Wiederverwendung von einer Reihe von Fähigkeiten.Ein Einkaufserlebnis wird durch Wiederverwendung von Code und eine Rich-Media-API erstellt.

  • Betreiben Sie Ihre Mitglieder des Entwicklungsteams, mithilfe ihrer vorhandenen Fähigkeiten reiche Erfahrungen für Benutzer erstellen.
  • Engagieren Sie die Benutzer durch das Verbinden mit Windows 8.1 Charme Funktionen wie Suche.
  • Geben Sie eine neue Vision einer alten Technologie als Markt differenzieren.

Dev-Brief:

Entwicklung ist eine kreative Übung, und Windows Store apps geben Ihnen viel Freiheit.In diesem Artikel eine retro Technologie reimagined ist und ein Kernsatz von Fähigkeiten (ListView und Windows.Web.Http.HttpClient) wird wiederverwendet, um es heraus zu erstellen.Durch die Integration der app mit Suchfunktionen können Benutzer, die app zu erkunden den Inhalt von überall in Windows 8.1.

  • Verkettung verspricht, asynchronen Code Workflows erstellen.
  • Wiederverwenden von ListView-Fähigkeiten für FlipView Steuerelemente.
  • Verwenden die JavaScript-Prototyp-Fähigkeiten, um dynamisch Objekte erweitern.

Weitere Informationen:

Tim Kulp führt das Entwicklungsteam bei UnitedHealthcare International in Baltimore. Kulp finden Sie in seinem Blog unter seccode.blogspot.com oder auf Twitter bei twitter.com/seccode, wo er sich um Code, der Sicherheit und der Baltimore-Feinschmecker-Szene spricht.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Eric Schmidt (Microsoft)
Eric Schmidt ist ein Content-Entwickler in Microsofts Windows Developer Content Team, über die Windows-Bibliothek für JavaScript (WinJS) geschrieben.Wenn zuvor im Bereich Microsoft Office baute er Code-Beispiele für die Anwendungen für Office-Plattform.Andernfalls er verbringt Zeit mit seiner Familie, String Bass spielt, baut HTML5-Video-Spiele oder Blogs über Kunststoff bauen Spielzeug (http://historybricks.com/).