Dans les deux derniers tutoriaux développement Windows 8, on a vu comment intégrer son application à la recherche unifiée de Windows 8:

Windows Metro – Clouder! (11) – Utiliser la recherche intégrée à Windows 8 dans son application

Windows Metro – Clouder! (12) – Afficher ses suggestions de recherche dans la recherche unifiée Windows 8

Cette fois, on va voir comment utiliser la fonction de partage intégrée à Windows 8 (le « Share Charm ») pour partager directement du contenu depuis son application:

Comme d’habitude, vous pouvez aussi suivre la documentation officielle:

Adding share (Metro style apps using JavaScript and HTML)

Ajouter un Search Contract

Dans notre exemple, on va permettre à l’utilisateur de partager l’URL de la page SoundCloud du morceau sur lequel il se trouve. Dans notre cas, cela va se passer dans track.js.

Dans la fonction ready, on va ajouter un listener sur l’évènement « datarequested » sur l’objet DataTransferManager fourni par Windows:

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", onDataTransferRequest);

Puis on va de suite se désinscrire de l’évènement dans la fonction unload de la page. En effet, si vous essayer d’ajouter un handler 2 fois, votre application va crasher:

        unload: function () {
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.removeEventListener("datarequested", onDataTransferRequest);
        }

Alors là, j’ai eu un comportement que je n’arrive pas à expliquer. Si j’utilisais une fonction définie dans la page (this.onDataTransferRequest), le removeListener ne fonctionnait pas. Je crois que j’avais mis un .bind(this) aussi pour récupérer la track courante. Bref, pas de removeEventListener faisait que dès que je revenais sur la page track une seconde fois, Windows lançait une erreur car j’avais enregistré 2 callbacks sur le même évènement windows.

En sortant la fonction et les variables nécessaires, cela fonctionne bien. Juste avant la fin du self-execute de track.js, ajoutez donc la méthode onDataRequestTransfer:

    var trackToShare = null;

    function onDataTransferRequest(e) {
        if (!trackToShare) {
            return;
        }
        var request = e.request;
    };
})();

sans oublier dans ready:

        ready: function (element, options) {
            trackToShare = this.track = options.selectedTrack;

Partage d’un lien URL par le Search Charm

Windows a plusieurs méthodes de partage, selon ce que vous voulez partager (lien, image, texte, fichier, …). Le détail de chaque opération est ici:

http://msdn.microsoft.com/en-us/library/windows/apps/hh758315.aspx

Dans notre cas, c’est très simple, on va prendre l’objet request transmis par Windows et lui assigner quelques variables de métadonnées (titre, description) et puis appeler la méthode setUri pour indiquer à Windows l’URL à partager:

    function onDataTransferRequest(e) {
        if (!trackToShare) {
            return;
        }
        var request = e.request;
        request.data.properties.title = trackToShare.title + " by " + trackToShare.user.username + " on SoundCloud";
        request.data.properties.description = "You might like this song !";
        request.data.setUri(new Windows.Foundation.Uri(trackToShare.permalink_url));
    };

Testez donc vous-même. Dans notre cas, notre application est une « source » de partage. D’autres application appelées « target » vont pouvoir faire passer le message comme par exemple « Contacts » ou « Courrier ». Ces applications savent comment partager les différentes types de contenu. L’application Courrier par exemple va chercher le contenu de la page web et propose même de joindre une image du site en question directement dans le mail:

puis:

Conclusion

Encore un petit plus que j’ai apprécié pendant le développement d’application Windows 8. Grâce à ce système de « contrat », votre application n’a pas besoin de contenir de logique pour envoyer des mails ou des tweets. On se sert simplement de ponts vers d’autres applications. C’est comme sur Android avec la fonction « Partager » qui peut être répartie sur plusieurs applications.

En quelques lignes, on a réalisé notre fonction de partage, c’est plutôt cool :)

Sources du projet

Télécharger les sources du projet