Si vous explorer un peu Windows 8, vous verrez qu’à tout moment, vous pouvez faire apparaître la barre de droite, qui contient plusieurs options, notamment rechercher:

Cette interface est unifiée et toujours accessible. L’utilisateur Windows 8 prendra donc l’habitude de rechercher à l’aide de cette fonctionnalité. Vous pouvez dans votre application profiter de cette recherche unifiée Windows 8. Cela vous permet notamment de ne pas vous préoccuper de la gestion du champ de recherche et de l’affichage des suggestions qui sera géré par le système.

Dans un premier temps, on va voir comment ajouter une page de résultats de recherche à son application et comment la peupler avec les résultats de SoundCloud. Dans le tutorial suivant, vous verrez comment afficher des suggestions directement dans Windows 8.

Ajouter une page avec résultats de recherche

Si vous en avez marre de ce tutorial, vous pouvez aller voir du côté de la documentation qui est de très bonne qualité:

Quickstart: Adding search to an app (Metro style apps using JavaScript and HTML)

Rendez-vous dans Visual Studio et arrêtez le debug si vos étiez en train de travailler sur votre application. Dans le Solution Explorer, click droit sur /pages/ > Add > New Folder et nommez le « results ». Plus click droit sur ce nouveau dossier > Add > New Item > Windows Metro Style > Search Target Contract:

Nommez la page « results.html » puis OK. Visual Studio vient de vous mâcher le travail en créant une page pour accueillir les résultats de recherche. Celle-ci est composée d’une liste, ainsi que de filtres. Dans notre application, on a pas besoin des filtres, il faudra donc supprimer tout le code qui s’occupe de ces derniers.

Vous devez ensuite rajouter un tag <script src= »/pages/results/results.js »></script> dans votre page default.html pour que votre application est connaissance dès son lancement de cette page de résultats de recherche.

Afficher les résultats de recherche

On va faire notre requête dans la méthode « handleQuery » et « searchData » de results.js. Pour l’instant, on a une méthode Data.items.createFiltered qui se base sur un jeu de donnée compris dans certains template. On va le remplacer par un appel vers notre service SoundCloud.

Notez que tous les appels qui concernent les filtres ont été supprimés:

(function () {
    "use strict";

    var appModel = Windows.ApplicationModel;
    var appViewState = Windows.UI.ViewManagement.ApplicationViewState
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;
    var searchPageURI = "/pages/results/results.html";

    ui.Pages.define(searchPageURI, {

        lastSearch: "",

        itemInvoked: function (args) {
            args.detail.itemPromise.done(function itemInvoked(item) {
                // TODO: Navigate to the item that was invoked.
                // nav.navigate("/html/<yourpage>.html", {item: item.data});
            });
        },

        onQueryResults: function (data) {
            var results = new WinJS.Binding.List(data);
            var listView = document.querySelector(".resultslist").winControl;
            listView.itemDataSource = results.dataSource;
        },

        searchTracks: function () {
            this.initializeLayout(document.querySelector(".resultslist").winControl, Windows.UI.ViewManagement.ApplicationView.value);
            if (this.lastSearch && this.lastSearch != "") {
                window.soundCloudService.getTracks({ q: this.lastSearch, limit: 25 }, this.onQueryResults);
            } else {
                // TODO
            }
        },

        // This function executes each step required to perform a search.
        handleQuery: function (element, args) {
            this.lastSearch = args.queryText;
            this.searchTracks();
        },

        // This function updates the ListView with new layouts
        initializeLayout: function (listView, viewState) {
            var modernQuotationMark = "”";
            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
                document.querySelector(".titlearea .pagetitle").innerHTML = modernQuotationMark + toStaticHTML(this.lastSearch) + modernQuotationMark;
                document.querySelector(".titlearea .pagesubtitle").innerHTML = "";
            } else {
                listView.layout = new ui.GridLayout();
                document.querySelector(".titlearea .pagetitle").innerHTML = "Search";
                document.querySelector(".titlearea .pagesubtitle").innerHTML = "Results for " + modernQuotationMark + toStaticHTML(this.lastSearch) + modernQuotationMark;
            }
        },

        ready: function (element, options) {
            var listView = element.querySelector(".resultslist").winControl;
            listView.oniteminvoked = this.itemInvoked;
            this.handleQuery(element, options);
            listView.element.focus();
        },

        updateLayout: function (element, viewState, lastViewState) {
            var listView = element.querySelector(".resultslist").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listView.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listView.addEventListener("contentanimating", handler, false);
                    var firstVisible = listView.indexOfFirstVisible;
                    this.initializeLayout(listView, viewState);
                    listView.indexOfFirstVisible = firstVisible;
                }
            }
        }
    });
    WinJS.Application.addEventListener("activated", function (args) {
        if (args.detail.kind === appModel.Activation.ActivationKind.search) {
            args.setPromise(ui.processAll().then(function () {
                if (!nav.location) {
                    nav.history.current = { location: Application.navigator.home, initialState: {} };
                }

                return nav.navigate(searchPageURI, { queryText: args.detail.queryText });
            }));
        }
    });

    appModel.Search.SearchPane.getForCurrentView().onquerysubmitted = function (args) { nav.navigate(searchPageURI, args); };
})();

ensuite, on adapte le HTML pour qu’il prenne bien notre template de tracks. N’oubliez pas d’ajouter la class « trackList » pour bénéficier des styles déjà déclarés.

<div class="results fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <div class="titlearea">
                <h1 class="pagetitle"></h1>
                <h2 class="pagesubtitle"></h2>
            </div>
        </header>
        <section aria-label="Main content" role="main">
            <div class="filterarea">
                <ul class="filterbar"></ul>
                <select class="filterselect"></select>
            </div>
            <div class="resultslist tracklist" aria-label="Search results" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', itemTemplate: select('.trackTemplate') }"></div>
        </section>
    </div>

Testez dans l’application, vos résultats de recherche devraient s’afficher:

Redirection au click sur la page de chaque morceau

Super simple, il suffit de faire comme pour la page d’accueil :

        itemInvoked: function (args) {
            args.detail.itemPromise.done(function a(item) {
                WinJS.Navigation.navigate("/pages/track/track.html", { selectedTrack: item.data });
            });
        },

Conclusion

Vous l’avez vu, Visual Studio vous aide beaucoup dans la mise en place de la recherche unifiée dans votre application en créant une page déjà toute prête sur laquelle il ne reste qu’à intégrer ses propres appels XHR.

Dans le prochain tutorial, on va voir comment on peut afficher ses propres suggestions de recherche dans l’interface Windows 8 « Search Charm » directement