Vous aimez ce que vous lisez sur ce blog ?
Envie d'aller plus loin avec véritable formation d'expertise en Java ?
Venez suivre ma formation Masterclasse Expertise Java !

"Même un développeur experimenté a besoin de continuer à apprendre. Et dans cette formation... j'ai appris beaucoup !" - A.G., Java Champion

Sessions intra-entreprises sur demande : contact[at]mokatech.net.
Inscrivez-vous vite !

Google Wave Embedded : Mise à jour

Google a récemment (et sans prévenir) changé son API permettant d'intégrer des Waves sur des sites.
Rien de méchant, car cela concerne surtout les options graphiques, mais cela a suffi pour empêcher mes compte-rendus de conférence de s'afficher correctement : à la place, il n'y avait plus que du blanc... J'ai donc fouillé un peu pour trouver d'où cela pouvait venir.
Vous trouverez ci-dessous les nouvelles instructions détaillées.

Et puis, j'en profite pour vous annoncer la bonne nouvelle : il est maintenant possible de consulter les Waves intégrées sans posséder de compte Wave !
C'était la principale critique remontée à Google, et elle a visiblement été écoutée. Par contre, la modification de la Wave est toujours réservée aux utilisateurs authentifiés.

Le setup minimal

Le setup minimal n'a pas changé. Il suffit de :

  • préparer un conteneur pour la Wave (par exemple un <div>), auquel on donne un identifiant unique ;
  • importer le script javascript de l'API Embedded Wave
  • instancier un objet WavePanel en lui fournissant le serveur (sandbox ou public) et l'identifiant de la Wave.

La méthode pour déterminer l'identifiant d'une Wave est toujours la même aussi : il s'agit toujours de la fin de son URL, après le délimiteur "%252B".
Par exemple :

https://wave.google.com/wave/?nouacheck&pli=1#restored:wave:googlewave.com!w%252BMkO_ZgbUA
                                                                                 ^^^^^^^^^

Voici donc le script minimal :

  1. <div id="waveframe"></div>
  2. <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. var wavePanel = new WavePanel('http://wave.google.com/wave/');
  5. wavePanel.loadWave('googlewave.com!w+MkO_ZgbUA');
  6. wavePanel.init(document.getElementById('waveframe'));
  7. </script>

Pensez bien à donner une hauteur et une hauteur suffisantes à votre conteneur (700 x 300 pixels au minimum), sinon vos lecteurs ne pourront pas accéder au formulaire d'authentification, ni passer le message les invitant à utiliser un navigateur récent si le leur n'est pas reconnu (IE bien sûr, mais aussi Firefox 3.6, un comble !).

Une fois la Wave affichée, vous remarquerez que leur apparence a quelque peu évolué : elles disposent désormais d'un joli cadre estampillé Google, et le petit lien sous le dernier commentaire, qui permet de poursuivre la conversation, est nettement plus accessible. Sympa, ça donne un effet "mieux fini" au système.

Surfez la Wave avec style

En fait, la principale modification de l'API concerne la façon dont les options supplémentaires, notamment les paramètres graphiques, sont passées au WavePanel.

Avant, cela passait par la construction d'un objet javascript de type UIConfig, qu'il fallait paramétrer puis passer au WavePanel lors de son initialisation.
Maintenant, les options (qui ont été un peu renommées au passage) doivent être fournies au constructeur du WavePanel sous la forme d'une Map javascript :

  1. options = { ... }
  2. var wavePanel = new WavePanel(options);

Vous pouvez spécifier tout ou partie des options suivantes (les valeurs par défaut sont données entre parenthèses) :

  • rootUrl : L'adresse du serveur Wave à interroger :
    • sandbox : https://wave.google.com/a/wavesandbox.com/ (par défaut)
    • public : http://wave.google.com/wave/
  • bgcolor : la couleur de fond ("transparent"),
  • color : la couleur du texte ("black"),
  • font : la police de caractères ("Arial"),
  • fontSize : la taille du texte ("8pt"),
  • header : affichage de l'entête (false),
  • footer : affichage du pied de page (false),
  • toolbar : affichage de la barre d'outils (false).

Notez que certaines options semblent capricieuses. Les options "header", "footer" et "toolbar" ne semblent pas avoir plus d'effet qu'avec l'ancienne API, par exemple.

Un exemple plus complet :

  1. <div id="waveframe"></div>
  2. <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. options = { rootUrl:'http://wave.google.com/wave/', color:'#F40' }
  5. var wavePanel = new WavePanel(options);
  6. wavePanel.loadWave('googlewave.com!w+MkO_ZgbUA');
  7. wavePanel.init(document.getElementById('waveframe'));
  8. </script>

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.