Surf the Wave with Wicket and the GoogleWavePanel

We’re delighted to introduce a new wicket component which will allow you to easily integrate Google Waves right into your application. Please meet GoogleWavePanel !
The idea of making this component came from a recent tutorial which aimed at clarifying the use of Google’s Wave Embed API.

The How-To

Let’s see how to use the component.

The Web Page

First, you’ll be needing a basic HTML page with a web container (usually a <div>) which will hold our Wave. Keep in mind that this container should declare an id attribute explicitely, for it is required by the Wave Embed API.
Also, you may want to carefully choose the width and height of your container in order to guarantee the wave readability. If the <div> is too small, the authentication form may be out of sight.

  1. <html>
  2. <head>
  3. <title>Wicket-tips</title>
  4. <style type=« text/css »>
  5. div#waveContainer {width:100%; height:500px; border:solid 1px #000;}
  6. </style>
  7. </head>
  8. <body>
  9. <h1>Google Wave Embedded API Demo</h1>
  10. <!– Container for the Wave. Make sure it’s large and high enough. –>
  11. <div id=« waveContainer » wicket:id=« wave »></div>
  12. </body>
  13. </html>

The Wicket Page

The GoogleWavePanel is very easy to use, you only need three parameters : the wicket id, the html id of your container, and of course the id of the wave you want to integrate :

  1. public class GoogleWavePage extends WebPage {
  2. public GoogleWavePage() {
  3. add(new GoogleWavePanel(« wave », « waveContainer », new Model<String>(« pRNN6dgjA »)));
  4. }
  5. }

If you want to enhance the default visual style, you can use an U
IConfig object.
Its main properties are :

  • fgColor : the foreground color (text color)
  • bgColor : the background color
  • fontName : the font name
  • fontSize : the font size
  1. public class GoogleWavePage extends WebPage {
  2. public GoogleWavePage() {
  3. GoogleWavePanel.UIConfig config = new GoogleWavePanel.UIConfig(« #444 », « #EEE », « monospace », « 12px »);
  4. add(new GoogleWavePanel(« wave », « waveContainer », new Model<String>(« pRNN6dgjA »), config));
  5. }
  6. }

Conclusion

Voilà, you can now easily integrate Google Waves into your application with the help of a simple component !
Yet, if you’re not fully conviced, you can download the attached source code and run the sample application.
It uses Gradle as a build system so you’re gonna need that too. Simply type the following command to compile the sources and launch the application on an embedded Jetty server :

 gradle jettyRun

Once Jetty is fully loaded, you’ll be able to access the application at the following URL : http://localhost:8080/Wicket-GWave/

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

%d blogueurs aiment cette page :