GoogleWavePanel : surfez sur les Waves avec Wicket !

Nous avons le plaisir de vous présenter GoogleWavePanel, un composant Wicket vous permettant d'intégrer des Google Waves au sein de vos applications.
Il s'appuie sur un récent tutorial clarifiant l'utilisation de l'API Embedded Wave fournie par Google.

Utilisation

Voyons donc comment s'utilise ce fameux composant.

La page Web

Il nous faut tout d'abord une page HTML basique fournissant un conteneur (généralement un <div>) pour la Wave que nous allons intégrer. Ce conteneur devra obligatoirement posséder un id HTML : l'API Embedded Wave en a besoin, et donc notre composant également.

Pensez également à rendre le conteneur suffisamment large et haut pour faciliter la lecture de la Wave et l'identification de l'utilisateur (le formulaire est malheureusement placé à droite de la page d'accueil).

<html>
<head>	
	<title>Wicket-tips</title>
	<style type="text/css">
		div#waveContainer {width:100%; height:500px; border:solid 1px #000;}
	</style>
</head>
 
<body>
 
	<h1>Google Wave Embedded API Demo</h1>
 
	<!-- Container for the Wave. Make sure it's large and high enough. -->
	<div id="waveContainer" wicket:id="wave"></div>
 
</body>
</html>

La page Wicket

Le composant GoogleWavePanel est également très simple d'utilisation : il suffit de lui passer en paramètre les identifiants Wicket et HTML du conteneur, et bien sûr l'identifiant de la Wave à intégrer :

public class GoogleWavePage extends WebPage {
	public GoogleWavePage() {
		add(new GoogleWavePanel("wave", "waveContainer", new Model<String>("pRNN6dgjA")));
	}
}

Si le style visuel par défault ne vous convient pas, il est possible d'utiliser un objet de type UIConfig.
Ses principales propriétés sont :

fgColor : la couleur du texte
bgColor : la couleur du fond
fontName : le nom de la police à utiliser
fontSize : la taille de la police

public class GoogleWavePage extends WebPage {
	public GoogleWavePage() {
		GoogleWavePanel.UIConfig config = new GoogleWavePanel.UIConfig("#444", "#EEE", "monospace", "12px");
		add(new GoogleWavePanel("wave", "waveContainer", new Model<String>("pRNN6dgjA"), config));
	}
}

Conclusion

Grâce à ce composant, il est maintenant très facile d'intégrer des Waves dans vos applications Wicket.

Pour vous en convaincre, vous pouvez télécharger le code source en annexe de ce billet.
Il utilise Gradle comme système de build ; utilisez la commande suivante pour compiler les sources et lancer Jetty :

gradle jettyRun

Une fois Jetty lancé, l'application devrait être disponible à l'adresse suivante : http://localhost:8080/Wicket-GWave/

Bonne wave !