Nell'esercizio 2 aggiungeremo il supporto alla ricerca per l'app Contoso Cookbook in modo che gli utenti possano utilizzarla per cercare le informazioni della ricetta. Ad esempio, un utente che volesse trovare tutte le ricette che contengono dello zucchero potrebbe richiamare la Search charm, digitare "zucchero" nella casella di ricerca e visualizzare un elenco di ricette che includono lo zucchero.
Task 1 - richiamare la Search charm
Per iniziare, prima che venga aggiunto il supporto alla ricerca, vediamo come appare l'interfaccia di ricerca quando viene attivata mentre l'app è in primo piano.
1. Premete F5 per avviare Contoso Cookbook.
2. Visualizzate le charm scorrendo con un dito da destra a sinistra, partendo dal bordo destro dello schermo, o premendo i tasti Logo Windows + C.
3. Toccate la Search charm per visualizzare il pannello di ricerca.
4. Scrivete "sugar" (senza virgolette) nella casella di ricerca e premete Invio oppure toccate l'icona a forma di lente d'ingrandimento alla fine della casella.
5. Windows 8 vi dirà che "Quest'app non supporta la ricerca". Questo comportamento cambierà quando avremo aggiunto il supporto alla ricerca a Contoso Cookbook.
6. Tornate a Visual Studio e interrompete il debug.
Task 2 - Aggiungere il supporto alla ricerca
Per implementare la ricerca dovrete scrivere un contratto di ricerca per l'app. Visual Studio farà la maggior parte del lavoro per voi inserendo un contratto JavaScript nella vostra applicazione. Sarà necessario modificare il JavaScript per rendere specifiche le ricerche all'interno dei dati dell'applicazione. È un compito facile da portare a termine, come dimostrano i passaggi successivi.
1. Fate clic con il tasto destro del mouse sulla cartella delle pagine nel Solution Explorer e seguite il percorso Add > New Folder per aggiungere una cartella denominata ricerca nella cartella delle pagine.
2. Fate clic con il tasto destro del mouse sulla cartella ricerca e seguite il percorso Add > New Item per aggiungere un contratto Search Target chiamato search.html, come mostrato in Figura 3.
Figura 3. L'aggiunta del contratto di ricerca
(clic per ingrandire)
3. Aggiungete la seguente riga al file default.html per assicurarvi che il file search.js sia caricato al momento dell'avvio dell'applicazione.
<script src="/pages/search/search.js"></script>4. Aprire il file Search.js e cercate la funzione searchData. Questa è la parte del contratto di ricerca che viene richiamata quando l'utente avvia una ricerca dalla Search charm. È necessario modificare il codice in questa funzione per eseguire le ricerche della ricetta. Per fare questo, trovate la funzione _searchData e sostituite l'istruzione che richiama indexOf sul titolo, sottotitolo e descrizione con una ricerca come questa:
return (item.title.indexOf(queryText) >= 0 ||
item.directions.indexOf(queryText) >= 0);Nota: La modifica che abbiamo appena fatto istruisce Contoso Cookbook a cercare nel titolo e nelle istruzioni di ogni ricetta il testo immesso dall'utente nella casella di ricerca. Questo testo è passato alla funzione searchData nel parametro denominato queryText. Se si volesse espandere la ricerca ad altre proprietà, questo è il punto su cui si dovrebbe lavorare.
5. Mentre siamo ancora nel file Search.js, trovate la funzione _itemInvoked. Questa funzione è richiamata quando l'utente seleziona un elemento nel controllo ListView che visualizza i risultati di una ricerca. Aggiungere il codice seguente al gestore per la funzione _itemPromise.done di _itemInvoked.
nav.navigate("/pages/itemDetail/itemDetail.html ", { item: Data.getItemReference(item.data) });6. Aprite il file Search.html, che contiene le istruzioni HTML che definiscono la visualizzazione dei risultati della ricerca. Trovate il DIV la cui classe è "item", e all'interno trovate il DIV la cui classe è "item-content". Sostituite il contenuto di quel DIV - un elemento H3 e due H4 — con le istruzioni qui sotto.
<h3 class="item-title win-type-ellipsis" data-win-bind="innerHTML: shortTitle search.markText"></h3>
<h4 class="item-subtitle win-type-x-small win-type-ellipsis">
Preparation time: <span data-win-bind="textContent: preptime"></span> minutes
</h4>7. Aprite il file Search.css. Trovate ".search section[role=main] .resultslist .item" e modificate la linea -ms-grid-columns come mostrato qui in basso. Modificate anche la proprietà width.
.search section[role=main] .resultslist .item {
/* Define a grid with columns for an icon and item details */
-ms-grid-columns: 62px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
height: 64px;
padding-left: 7px;
padding-top: 1px;
padding-right: 7px;
width: 340px;
}8. Trovate ".search section[role=main] .resultslist .item .item-image" e cambiate la proprietà width a 60px e height a 45px per consentire alle immagini della ricetta di mantenere le proporzioni originali.
.search section[role=main] .resultslist .item .item-image {
-ms-grid-column: 1;
-ms-grid-row: 1;
height: 45px;
margin-top: 5px;
width: 60px;
}9. Premete F5 per avviare l'app.
10. Visualizzate le charm.
11. Toccate la Search charm per mostrate il pannello di ricerca.
12. Scrivete "sugar" (senza virgolette) nella casella di ricerca e premete Invio oppure toccate l'icona a forma di lente d'ingrandimento alla fine della casella.
13. Accertatevi che compaiano sei ricette nei risultati (vedi Figura 4).
Figura 4. I risultati di ricerca per "sugar"
(clic per ingrandire)
14. Selezionate una delle ricette e accertatevi che compaiano i dettagli delle ricette.
15. Tornate a Visual Studio e interrompete il debug.
Task 3 - Affinare la pagina dei risultati di ricerca
Fin qui tutto bene. Quando Visual Studio ha aggiunto il contratto di ricerca ha creato molte funzionalità in modo automatico e, con alcune piccole modifiche, avete creato la funzione di ricerca per l'app Contoso Cookbook. Avete notato però la strana nomenclatura nella parte superiore della pagina dei risultati della ricerca? Invece di visualizzare nomi di gruppo come "Cinese" o "Italiano", mostra "Gruppo 1," "Gruppo 2+," e così via. Correggiamo questo comportamento con una semplice modifica al file search.js.
1. Aprite il file search.js e cercate il commento vicino all'inizio del file che riporta "TODO: Replace or remove example filters", nel metodo _generateFilters.
2. Sostituite le due linee di codice al di sotto del commento (le due chiamate a this.filters.push) con questo codice:
Data.groups.forEach(function (group) {
this._filters.push({ results: null, text: group.title, predicate: function (item) { return item.group.key === group.key; } });
}, this);Nota: Queste dichiarazioni sostituiscono i nomi di gruppo generati da Visual Studio con i nomi dei gruppi delle ricette presenti nella tua applicazione.
3. Avviate di nuovo l'applicazione e cercate di nuovo "sugar." Verificate che i nomi di gruppo generici visualizzati in alto nella pagina siano sostituiti dai nomi dei gruppi delle ricette, come mostrato nella Figura 5.
Figura 5. Risultati di ricerca con i titoli dei gruppi di ricette
(clic per ingrandire)
4. Tornate a Visual Studio e interrompete il debug.
Task 4 - Aggiungere i suggerimenti di ricerca
Un ultimo miglioramento all'esperienza di ricerca che possiamo aggiungere è relativo ai suggerimenti. Suggerimenti sulle parole da cercare possono essere visualizzati mentre l'utente digita un termine nella casella. È facile: tutto quello che dovete fare è aggiungere un gestore per l'evento SuggestionsRequested. Ecco come.
1. Aprite Search.js e aggiungete la seguente funzione nei pressi della fine del file (dopo l'event handler onquerysubmitted).
appModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested = function (eventObject) {
var text = eventObject.queryText.toLowerCase();
var terms = ["salt", "pepper", "water", "egg", "vinegar", "flour", "rice", "oil"];
terms.forEach(function(term) {
if (term.indexOf(text) == 0) {
eventObject.request.searchSuggestionCollection.appendQuerySuggestion(term); }
});
};Nota: Il codice che abbiamo appena aggiunto fornisce suggerimenti di ricerca per le parole che equivalgono a salt, pepper, water, egg, vinegar, flour, rice, sugar e oil. Se l'utente digita "sa", la parola "salt" apparirà nel riquadro ricerca come termine di completamento suggerito. Naturalmente, è possibile aggiungere altri suggerimenti. Se si desidera visualizzare "ketchup" quando l'utente digita "ke", basta semplicemente aggiungere quel termine all'elenco.
2. Avviate nuovamente l'applicazione e digitate "pep" nella casella di ricerca. Verificate che il termine "pepper" appaia nell'elenco suggerimenti al di sotto della casella di ricerca, come illustrato nella Figura 6.
Figura 6. I suggerimenti di ricerca in azione
(clic per ingrandire)
3. Tornate a Visual Studio e interrompete il debug.
Conclusioni
I contratti sono una parte importante di Windows 8, perché permettono alle applicazioni di integrarsi con la shell e fornire un'esperienza utente che sia coerente e prevedibile. Questa collaborazione di tipo loosely è sinergica ed estensibile e permette di condividere qualsiasi cosa con qualsiasi applicazione, cercare all'interno di qualsiasi applicazione e così via.
In questo lab, avete imparato ad usare due tipi di contratto: i contratti di condivisione e i contratti di ricerca. In un altro lab, utilizzerermo un altro tipo di contratto per integrare la charm delle impostazioni nella nostra app. Ma prima c'è un'altra funzionalità che dobbiamo illustrare: la media capture, utilizzando le foto e videocamere disponibili oggi nella maggior parte dei PC e dei dispositivi mobili. Questo sarà l'oggetto del lab successivo, quindi andiamo avanti.
