Il presente articolo è stato tradotto automaticamente.
Windows 8.1
Creazione di microschede moderne con l'API di Chronicling America
Download del codice di esempio associato
Oggi, il giornale è stato sostituito da altre fonti di notizie sul Web.Contemporaneamente, però, i giornali erano la fonte primaria di informazioni sugli eventi in corso.Attraverso il progetto Chronicling America (chroniclingamerica.loc.gov), Stati UnitiBiblioteca del Congresso e varie istituzioni hanno lavorato per rendere la ricca storia degli Stati Unitiquotidiani disponibili sul Web tramite un'API standardizzata.Questa API consente agli sviluppatori di sfruttare mezzi dal progetto Chronicling America per costruire applicazioni di ricerca, notizie apps con il contesto storico o apps per associare il contenuto alla genealogia familiare.In questo articolo, sarò introdurre la cronaca America API e costruire un app Store di Windows che consente agli utenti di ricercare e visualizzare giornali digitalizzati.
Panoramica dell'API Chronicling America
Cronaca America ha due componenti principali alla sua API: il protocollo OpenSearch e standardizzato gli URL per navigare i contenuti.Per ogni pubblicazione, l'URL segue un formato standard che è possibile modificare per fornire dati diversi.Ad esempio, recuperando una pagina specifica richiede la seguente struttura di URL: http://chroniclingamerica.loc.gov/LCCN/sn83030214/1913-08-12/ed-1/Seq-1/.Questo formato si rompe giù per: richiedere una pubblicazione specifica (/ lccn/sn83030214 /), che fornisce la data e l'identificatore del problema ed edizione (1913-08-12/ed-1) e fornendo il numero di pagina (seq-1 /).Se voglio richiedere la seconda pagina, aggiornare appena seq-1 a seq-2.Tutto questo articolo, si utilizzerà l'URL standardizzato per rendere la navigazione semplice e veloce senza dover cercare oggetti con molte richieste una tantum al server.
È possibile utilizzare l'URL per recuperare il contenuto specifico e il protocollo OpenSearch ricerca titoli e pagine.Ricerche contro titoli e pagine utilizzano strutture differenti URL.Strutture di ricerca titolo possono essere trovati alla 1.usa.gov/1a0GOpF, e strutture di ricerca pagina possono essere trovati alla 1.usa.gov/188T1HB.Questi file XML forniscono tutti i formati di output e i parametri che possono essere utilizzati in America la cronaca.Mi concentrerò sulla pagina ricerche in questo articolo per avere la maggior parte delle proprietà contro cui cercare.
Creazione di un'applicazione di Microfiche
Se non sei abbastanza vecchio da ricordare microfiche, era un pezzo chiaro del film su cui miniatura immagini sono state stampate.Queste immagini erano a mala pena leggibile ad occhio nudo, ma mettendo il foglio microfiche in un proiettore speciale, si potrebbe ottenere l'accesso a centinaia di immagini (o più).Era un grande mezzo di archiviazione di massa per le immagini e ha aiutato gli utenti spostare rapidamente tra documenti utilizzando la rotella di controllo del proiettore.
Microfiche è la mia ispirazione per un'applicazione di esempio che visualizza i giornali dall'America che racconta.L'applicazione inizia con un elenco di pubblicazioni visualizzate in un controllo GridView.Gli utenti possono ricercare questo contenuto (un miglioramento di microfiche) ed esaminare una questione, molto come usando un eReader.La biblioteca del Congresso ha già costruito una simpatica applicazione Web con funzionalità affidabili di JavaScript.Si può imparare da questo sito e tradurre JavaScript dal Web per costruire l'applicazione Windows Store.
Ho costruito la mia app Chronicling America in JavaScript per Windows 8.1.Per iniziare, creare una app di navigazione dai modelli di app Store Windows JavaScript in Visual Studio.Uso il codice preesistente nel modello (ad esempio, il codice della navigazione in Navigator) e il gestore di eventi di attivazione app in js così da non dover manualmente costruire infrastrutture tutti dell'app.
100 Anni fa oggi...
Homepage Chronicling America Visualizza le prime pagine di giornale per oggi più di 100 anni fa.Questo è un divertente luogo per iniziare la mia app e introdurre immediatamente persone al contenuto.Per iniziare, ho bisogno di connettersi ai dati di cronaca America e tirare.L'applicazione esegue molte funzioni intorno i suoi dati, quindi nella cartella js, creo un nuovo file JavaScript denominato js, dove si verificherà tutte le interazioni di dati.Pensate a questo come il mio livello di dati.
Aggiungere il codice seguente per js per creare una funzione di auto-contenuta, perché non voglio il codice js per fuoriuscire nello spazio dei nomi globale:
(function () {
"use strict";
// Code goes here
})();
Questo blocco rende nulla al suo interno privato in modo che non incontro eventuali conflitti di denominazione variabile con i file che utilizzano Data. js. Il commento, "codice va qui" è sostituito con il codice in Figura 1.
Codice iniziale figura 1 per 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
});
Figura 1 inizia con dichiarazioni di base che contengono i dati dalle chiamate API America che racconta. Impostare alcune variabili di pulizie, come un prefisso URL per evitare la digitazione (e inevitabilmente mistyping) base Chronicling America URL, come pure un HttpClient oggetto per essere condiviso tra funzioni.
La prima funzione in js chiama le pagine iniziali da 100 anni fa. Questa funzione inizia con un semplice calcolo per ottenere la data di oggi e quindi sottrae 100 anni. Utilizzando gli URL standardizzati dall'America che racconta, impostare una richiesta alla directory frontpages dell'API per caricare tutte le pagine anteriore da ogni numero corrispondente alla data fornita. Si noti che l'URL termina con Places per denotare che voglio dati JSON di nuovo dal server.
Chronicling America API consente di impostare questo valore su richiesta diversi tipi di dati, come XML o HTML. Utilizzando il httpClient.getStringAsync funzione, l'applicazione richiede i dati JSON da API e analizza il valore stringa restituita in un oggetto JSON. Perché sto chiamando getStringAsync, non so che tipo di dati è tornato dal server. Mia app si aspetta JSON, così per verificare i dati API restituisce possono essere convertiti in JSON, usare JSON. Parse. In questo caso restituisce una matrice di oggetti JSON. Se la stringa restituita non può essere convertita in JSON, il codice genera un errore. Infine, il codice aggiorna l'URL dell'elemento per aggiungere il prefisso (perché la cronaca America fornisce l'URL qui come URL relativo, non assoluto) per assicurare la mia app può connettersi alle immagini.
Una nota sull'utilizzo di Windows.Web.Http.HttpClient: Sempre intenzione di fallimento. Il codice sta cercando di raggiungere il server potrebbe essere giù o non disponibile, ad esempio. Gestione degli errori è stato qui omesso per brevità, ma ho inserito il codice di esempio online.
Alla fine del codice in Figura 1, aggiunto WinJS. Namespace app per registrare il contenuto del JS sia disponibile per altre applicazioni. Questa funzionalità dello spazio dei nomi converte gli oggetti privati in js in pubblico, accessibile da altro codice. Utilizzando WinJS.Namespace.define informa un app che l'oggetto definito e i membri sono disponibili in altre parti del codice. In sostanza, questo è dove fare dati e i suoi membri accessibili con IntelliSense sulle tue pagine.
Associazione per la schermata Home oggetto con i dati definito, è necessario collegare la pagina HTML per visualizzare il contenuto dal sito Chronicling America. Iniziare aprendo la pagina default. html e aggiungere un riferimento a script di js.
Questo passaggio rende js disponibili per tutte le pagine nell'app. Sostituire il codice nella sezione principale della Home. html con il seguente:
<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>
Questo codice definisce un controllo ListView che consente di visualizzare risultati Chronicling America dell'API. Il controllo ListView viene utilizzato un modello con un'immagine della pagina di giornale e il luogo di pubblicazione. Utilizzando un controllo WinJS.Binding.Template, descrivere ciò che deve essere visualizzato nel controllo ListView. Modelli di lasciare che il team di progettazione (o team di marketing, se non si dispone di un team di progettazione) lavorare direttamente con HTML senza preoccuparsi di associazione dati. Aggiungere il codice seguente direttamente sotto il corpo < > 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>
Determinare quale proprietà da associare alla quale campo è gestita dall'attributo data-win-bind, che Windows utilizza per determinare cosa visualizzare in attributi specifici durante l'associazione. L'attributo di dataset è un nuovo in HTML5 che permette di costruire gli attributi personalizzati per le vostre esigenze. Applicazioni Windows Store fanno ampio uso dell'attributo-dati, ma si possono costruire i proprio attributi, quali dati-pubblicazione in questo esempio, che contiene il nome del giornale. Questo attributo può essere ricercato utilizzando la funzione document.querySelector, fornendo un facile accesso a tutti gli elementi con questo attributo.
Connessione dati a ListView per inserire i dati nel controllo ListView, aprire il file home.js (/ pages/home/home.js) e aggiungere il codice riportato Figura 2 alla funzione ready per il controllo della pagina iniziale.
Figura 2 codice aggiunto alla funzione Ready
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 });
});
}
Il codice in Figura 2 inizia il processo di caricamento dei dati chiamando la funzione Data.GetInitialPage dell'API. Poi ho messo su ListView per raccogliere dati da ImageList (che è popolato dalla funzione GetInitialPage) e associare il controllo del modello al controllo ListView. Per concludere le funzionalità del controllo ListView, ad aggiungere un gestore eventi per ItemInvoked così quando un utente sceglie un'immagine di giornale, qualcosa accade. La funzione ready si conclude con una chiamata a WinJS.Binding.processAll per aggiornare l'interfaccia utente basata sulle modificazioni che è accaduto durante la funzione ready, ad esempio l'associazione dati.
Successivamente, _itemInvoked viene definito per prendere un elemento selezionato e lo dia la pagina dettagli ulteriori azioni. Ciò è un funzionamento di base del solo passando l'oggetto di dati direttamente alla pagina. Tenete a mente il metodo navigate offre grande flessibilità per passare dati da una pagina a altra. Per ulteriori informazioni sull'utilizzo di navigazione nelle applicazioni Windows Store, controlla i campioni nella pagina Windows Dev Center Windows Store apps (bit.ly/153fDXM).
Prima di eseguire l'app, aggiungere gli stili mostrati Figura 3 a home.css (/ pages/home/home.css) per dare l'app un aspetto leggermente più pulito.
Figura 3 stili per 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%;
}
Esegue a questo punto il vostro progetto, e si dovrebbe vedere qualcosa che assomiglia Figura 4.
.png)
Figura 4 la cronaca America Home Screen
Ho costruito una schermata iniziale e un po ' di impianti idraulici. Il passo successivo è di visualizzare le pagine di una pubblicazione e creare una schermata di dettagli.
Visualizzazione pagine specifiche
Aggiunta una schermata di dettagli è semplice con l'installazione di app esistente. In primo luogo, è necessario aggiungere una nuova funzione js per cercare le pagine di un problema. Successivamente, è necessario compilare il controllo della pagina che visualizzerà in realtà questi dati.
Iniziare andando indietro a js e sostituendo il commento, "Get funzione va qui," con il codice in Figura 5.
Figura 5 ottenere funzione per 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);
})
})
}
Questo codice prende un URL e utilizza convenzioni standard URL dell'America che racconta per sostituire il riferimento alla pagina uno (/ seq-1 /) con una chiamata JSON all'edizione (conversione ed-1/seq-1 / a ed-1.json). A tale scopo, utilizzare un'espressione regolare che corrisponde al modello /seq-[numero di cifre 1-3] / o seq-[1-3 cifre] Places e sostituirlo con pochi Places. Chiamando l'oggetto JSON di edizione, ottenere informazioni sul problema e non solo una pagina specifica. Potrei andare ulteriormente l'URL per ottenere informazioni più generali riguardo la pubblicazione o problemi in generale, ma per ora mi atterrei alla edizione e pagine. Dopo aver aggiunto la funzione Get, assicurarsi di registrarlo nella funzione WinJS.Namespace.define come ottenere in modo che altre pagine possono usarlo per riferimento.
Creazione di una pagina di dettagli in primo luogo, sotto la directory di pagine, creare una cartella denominata "dettagli". Questa cartella conterrà i tre file che costituiscono una pagina di controllo (i file HTML, JS e CSS). Aggiungere un nuovo elemento nella cartella, selezionare il controllo Page (sotto Windows Store) e il nome dell'elemento details.html. Ora aggiornare il tag body del details.html (/ pages/details/details.html) con il codice in Figura 6.
Figura 6 codice per 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>
Si noti che questo codice è abbastanza simile a Home. html, tranne per il fatto che utilizza un controllo FlipView invece di un controllo ListView. Questo dà l'app più la sensazione di un eReader. Anche se sto discutendo solo immagini, Chronicling America fornisce l'accesso ai contenuti PDF, testo di riconoscimento ottico dei caratteri (OCR) e altri tipi di contenuto per il consumo. Pensare su come questi tipi potrebbe aggiungere maggiore profondità ad un app (ad esempio le tecnologie assistive che si basano sulle capacità OCR) per un progetto futuro.
L'HTML è completa. Ora testa oltre al file CSS (/ pages/details/details.css) per aggiungere gli stili di pulitura che renderanno la pagina aspetto decenti:
.details section[role=main] {
margin-left: 120px;
margin-right: 120px;
}
#pageListView {
height: 90%;
width: 90%;
}
#flipview {
height: 90%;
width: 90%;
}
Dettagli di collegamento per la FlipView
Aprire la pagina details.js (/ pages/details/details.js) e aggiungere il seguente codice alla funzione ready del controllo page:
// 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();
Molto di questo codice è lo stesso come in home.js, con l'eccezione che uso options.selectedItem. Questo oggetto proviene dalla homepage e passato attraverso la funzione naviga nella pagina dettagli. Io uso i dati dall'oggetto options.selectedItem a chiamare Data.Get e compilare l'oggetto pageList per l'associazione al controllo FlipView. Proprio come ListView, la FlipView usa un controllo WinJS.Binding.Template per visualizzare il contenuto. Ho deciso di utilizzare un FlipView perché voglio visualizzare solo una pagina alla volta, e quella pagina è una foto. Utilizzando i controlli per un FlipView fornisce anche un esperienza di lettura più naturale per gli utenti.
Eseguire il codice, e si dovrebbe vedere qualcosa come Figura 7.
.png)
Figura 7 campione pagina dettagli
Con i dettagli sul posto, c'è un altro pezzo per avvolgere per l'app: capacità di ricerca.
Ricerca contenuti
La capacità di cercare contenuti giornale fornisce uno strumento di grande ricerca. È un miglioramento dai dispositivi microfiche di vecchi. Utilizzando OpenSearch, Chronicling America offre una funzionalità di ricerca potente che segue uno standard aperto. Per la mia applicazione, io vado per la ricerca contro il contenuto della pagina utilizzando i parametri da 1.usa.gov/188T1HB.
Iniziare con l'aggiunta di una cartella nella directory pagine denominata "ricerca". Aggiungere un nuovo elemento nella cartella di ricerca e selezionare il controllo dei risultati della ricerca. Per attivare la ricerca, è necessario aggiungere la dichiarazione di ricerca al tuo appmanifest e un riferimento al file per il file default searchresults. js. Non c'è più ricerca che l'aggiunta di alcuni file, quindi se non si ha familiarità con il processo di ricerca a contratto, può iniziare leggendo l'articolo Windows Store apps Dev Center a bit.ly/HMtNCo.
Il primo elemento necessario per costruire la capacità di ricerca è quello di aggiungere una nuova funzione di ricerca per la data. js (/ js/data.js) file. Aprire js e aggiungere il codice in Figura 8 dopo la funzione get.
Funzione di ricerca di figura 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);
})
})
}
Questa semplice funzione accetta i termini di ricerca e costruisce fuori l'URI per lavorare con l'URL della pagina ricerca. Il parametro andtext consente di fornire i termini di ricerca per utilizzare per il contenuto della pagina, ma ricordatevi di controllare il file XML di definizione ricerca per ulteriori parametri che potrebbero essere utilizzati. Per completare il js, Aggiungi ricerca così come un elemento dello spazio dei nomi che searchresults. js (/ pages/search/searchResults.js) possono accedervi.
Modificando il controllo di risultati di ricerca quando si aggiunge l'elemento, vengono creati tre file (proprio come con una pagina di controllo): un file HTML per la visualizzazione dei vostri risultati, un file CSS per acconciare i vostri risultati e un file JavaScript per legare i vostri risultati. Aggiornare il file di searchresults. html prima sostituendo itemtemplate per abbinare il modello di dati, come illustrato nel Figura 9.
Figura 9 aggiornamento 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>
Ora aprite il file searchresults. js. Questo file ha una serie di funzioni in esso, ma la maggior parte delle modifiche apportate sono alla funzione _searchData. Sostituire il codice per _searchData con il codice mostrato Figura 10.
Figura 10 codice per _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;
}
Se si confronta questo codice al codice generato, vedrai tutto quello che fatto è stato aggiornare il modello di dati dell'elemento oggetto per riflettere i componenti e aggiungere alcune funzionalità per verificarsi dopo la funzione Data.Search viene completata. Utilizzando il codice pre-generato, è possibile ottenere un'app come questa al mercato più rapidamente. Può concentrarsi sulla creazione di caratteristiche specifiche delle tue app e non hanno agganciare ogni pezzo separatamente ogni volta.
Prima di eseguire il codice, aggiornare la funzione di filtro _generateFilters in searchresults. js per riflettere il modello di dati. Per impostazione predefinita, vengono aggiunti due filtri per gruppi. Aggiornare quelli per essere qualcosa di più utile per il modello di dati, ad esempio un filtro ai valori città di pubblicazione. Con quest'opera completa, si dovrebbe essere in grado di eseguire il codice e vedere qualcosa di simile a Figura 11.
.png)
Risultati della ricerca di figura 11 dello schermo per App Chronicling America
Per concludere la schermata di ricerca, è necessario visualizzare i dettagli di un articolo per vedere le sue pagine. Aggiornare la funzione di _itemInvoked ricercaResults.js (/ pages/search/searchResults.js) con il seguente codice:
_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 });
});
},
Questo codice coglie l'elemento del risultato di ricerca attualmente selezionato e lo passa alla pagina dettagli.Il WinJS.Navigation.navigare funzione può prendere due argomenti: l'indirizzo della pagina e una dichiarazione di stato iniziale.Mediante l'oggetto initialState, è possibile passare parametri da una schermata alla successiva.In questo caso, la funzione naviga passa l'oggetto selezionato searchResult alla pagina dettagli proprio come usato la proprietà selectedItem dalla homepage.
Fiche per il XXI secolo
Cronaca America archivi storici giornali e li rende disponibili attraverso una semplice API.In questo articolo, ho esplorato le funzionalità principali di questo servizio Web e come consumarlo in un'applicazione Windows Store utilizzando alcuni controlli di base.8.1 Di Windows fornisce molte opportunità per voi di essere creativi e ripensare a come le persone interagiscono con la tecnologia.
In questo caso, ho preso quello che hai stato un foglio di immagini di giornale e ne fece un'applicazione interattiva moderna.Si potrebbe estendere questo esempio per condividere e archiviare le impostazioni dell'utente ricerca personalizzata basate sui suoi interessi — e questa è solo la punta dell'iceberg.La biblioteca del Congresso e il National Endowment for the Humanities hanno fornito una ricca API su cui costruire.È possibile aggiungere questi dati storici al vostro libro di ricette per la costruzione di grandi applicazioni.
Debriefing: Coinvolgente esperienza, competenze riutilizzabili
App Store di Windows consentono di liberare la vostra creatività con i dati.In questa applicazione, è possibile esplorare informazioni giornale storico che potrebbero essere utilizzati per la ricerca, istruzione o altre richieste di informazioni storiche.Attraverso un API multimediali e semplice codifica JavaScript, combinando la cronaca America con 8.1 di Windows fornisce un modo semplice per costruire un'esperienza profondamente coinvolgente.
IT in breve:
In questo articolo, dati sono tirati da un'API e cercati, e il contenuto è esplorato — tutto riutilizzando un set di base delle abilità.Un'esperienza coinvolgente è creata attraverso il riutilizzo del codice e una API multimediali.
- Impegnare i membri del team di sviluppo usando le loro abilità esistenti per costruire esperienze ricche per gli utenti.
- Coinvolgere gli utenti connettendosi a Windows 8.1 caratteristiche di fascino come ricerca.
- Fornire una nuova visione di una tecnologia vecchia come un differenziazione del mercato.
Dev in breve:
Lo sviluppo è un esercizio creativo e applicazioni Windows Store ti danno un sacco di libertà.In questo articolo, è ricostituita una tecnologia retrò e un set di base delle abilità (ListView e Windows.Web.Http.HttpClient) viene riutilizzato per costruire fuori.Integrando l'app con funzioni di ricerca permette agli utenti di esplorare l'app contenuto da ovunque in Windows 8.1 del.
- Concatenamento promesse per creare flussi di lavoro codice asincrono.
- Riutilizzare competenze ListView per controlli FlipView.
- Utilizzando le funzionalità di JavaScript prototipo estendere dinamicamente oggetti.
Ulteriori informazioni:
- Programmazione asincrona in JavaScript (App Store Windows): bit.ly/17EiJTj
- La cronaca America: chroniclingamerica.loc.gov
- OpenSearch: OpenSearch.org
Tim Kulp conduce il team di sviluppo UnitedHealthcare International a Baltimora. È possibile trovare Kulp sul suo blog a seccode.blogspot.com o su Twitter a twitter.com/seccode, dove egli parla di codice, la sicurezza e la scena di Baltimora foodie.
Un ringraziamento al seguente esperto tecnico per la revisione dell'articolo: Eric Schmidt (Microsoft)
Eric Schmidt è uno sviluppatore contenuto nel team Content Developer di Windows di Microsoft, scrivendo la libreria Windows per JavaScript (WinJS).Quando in precedenza nella divisione Microsoft Office , costruì esempi di codice per le applicazioni per la piattaforma Office.In caso contrario, passa il tempo con la sua famiglia, suona il basso stringa, costruisce HTML5 video giochi o Blog sulla costruzione di giocattoli di plastica (http://historybricks.com/).