Windows Metro – Clouder! (13) – Partager une URL avec le Share Charm de Windows 8

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

8 réflexions au sujet de « Windows Metro – Clouder! (13) – Partager une URL avec le Share Charm de Windows 8 »

  1. lionelB

    Coucou,
    Bien sympa cette série de Win8, ça donne envie ! et t’a l’air d’avoir bien creuser le sujet.
    Sinon rien à voir mais est ce que ca serait possible d’avoir l’article complet dans le feed rss, histoire de pouvoir le lire depuis un syndicateur de flux ?

    Lionel

    Répondre
  2. admin Auteur de l’article

    Salut et merci pour le commentaire ;)

    Je met toujours une coupure dans l’article, pour éviter que la homepage de html5-tutorial.fr ne fasse 10km de long. Peut-être que certains RSS readers comprennent les extraits wordpress et peuvent aller chercher l’article entier, je ne sais pas.
    Puis ça te fait venir sur le site :)

    Fabien

    Répondre
  3. ancillon

    Bonjour,
    J’ai téléchargé le ClouderTutorial et à l’exécution par F5 j’ai cette erreur :

    Error 1 Could not find SDK « Microsoft.WinJS.1.0.RC, Version=1.0 ». C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets 1701 5 ClouderTutorial
    Comment peut être solutionné ce problème ?
    Je vous remercie pour ce tutoriel ainsi que pour votre aide.
    Meilleures salutations.

    Répondre
  4. admin Auteur de l’article

    Bonjour,
    Tu as peut-être installé la dernière version de Windows 8 disponible (RTM) et ce tutorial a été fait avec la version RC. Chaque version vient avec de nouvelles références vers WinJS, il faut donc que tu mettes à jour les pages html qui contiennent les inclusions de script JS en remplaçant « RC » par la nouvelle version. Je n’ai pas encore installé la RTM, pour trouver le nom donné dans la version RTM, créé un nouveau projet et regarde la référence au fichier JS dans default.html

    Fabien

    Répondre
  5. ancillon

    C’est ce site internet que je souhaite convertir en appli. windows 8 Grid app.
    Un menu de tuiles présentant les familles, beaucoup d’images à charger, je cherche par une boucle for de charger les tableaux :
    { group: sampleGroups[0], title: « Item Title: » + i, subtitle: « Item Subtitle:  » + i, description: itemDescription, content: itemContent, backgroundImage: « /images/img » + i + « .jpg » },

    Cela fonctionne pour le premier et le dernier ?

    Répondre
  6. admin Auteur de l’article

    Salut,
    Si tu fais l’assignation des tes objets dans une boucle à l’issue d’un appel XHR, fait attention aux problèmes de scope de JavaScript avec i qui va toujours garder la même valeur (le dernier i). Je te conseille de chercher « javascript scope callback for loop » sur google pour plus d’infos ;)

    Fabien

    Répondre

Répondre à Ducobu Jérôme Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *