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.
-
<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>
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 :
-
public class GoogleWavePage extends WebPage {
-
public GoogleWavePage() {
-
add(new GoogleWavePanel(“wave”, “waveContainer”, new Model<String>(“pRNN6dgjA”)));
-
}
-
}
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
-
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
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/
