Hi
I wanted to write about the making of a custom component. Now please bare in mind this is my first "entry in the blog world" so errors might occur and miss-spelling take place.
Have always wanted to try to create a wicket custom component around a YUI component. So
finally I found time to do it, and want to share the details.
I started out by finding a very simple component in the yui library. Tooltip, it was. The example on the yui page demostrates what it do, basically it is "just" a javascript tooltip, instead of the build alt attribute you can apply to some html tags.
Direct link to Tooltip example
Well lets gets started.
1. Download the yui zip file and extract the content. yui.zip
2. I then downloaded the wicket-quickstart example from the wicket.sf.net page.
3. I then copied the build folder (located at where you extracted yui.zip) into the webapp folder in the quick start example.
Having the basic setup in place. I could begin thinking about how to implement the Tooltip component. Here you can see how and whats needs to be done in HTML, if you "just" want it to work in a raw html page. As you can see the tooltip is shown over a specified html element.
YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1",
{ context:"ctx",
text:"My text was set using the 'text' configuration property" });
In the above example the tooltip is shown the the mouse is over the element with id: ctx.
What you cant see on the example page on yui, is the javascript/css imports that is done in the head tag. (I have included them in the html-snipplet below.
In wicket you usual use panels for making components. So I went that way to.
4. I created the following files.
ToolTip.java - the component in java
ToolTip.html - the layout and structure
tooltip.js - the javascript to initialize the tooltip.
5. The code in the java file was actually VERY small and easy (perhabs my next component needs to be more complex :-)
package wicket.quickstart.yui;
import java.util.HashMap;
import java.util.Map;
import wicket.extensions.util.resource.PackagedTextTemplate;
import wicket.markup.html.basic.Label;
import wicket.markup.html.panel.Panel;
import wicket.model.Model;
public class ToolTip extends Panel {
public ToolTip(String id, String elementId) {
super(id);
Map variables = new HashMap(7);
variables.put("context", elementId);
variables.put("text", "My Custom ToolTip text");
PackagedTextTemplate template = new PackagedTextTemplate(this
.getClass(), "tooltip.js");
add(new Label("tooltip.javascript", new Model(template
.asString(variables))).setEscapeModelStrings(false));
}
}
Comments: As you can see the tooltip right now takes two parameters. WicketId and another id of a wicketcomponent that the tooltip is supposed to hoover over.
The tooltip.js file below has some dynamic parts that needs to be substituted onruntime.
Namely context and text. To substitue the variable in I have used the class PackagedTextTemplate, which is located in the wicket-extension package. The idea is that the PackagedTextTemplate will load the tooltip.js file (should be located in the same package as the tooltip class), and when calling asString I pass in the Map with the names and values of the variables used in tooltip.js file, and as a result I get the interpolated edition of tooltip ready for insertion in the html file.
To put in the result of the interpolation I use a Label component. However by default it will escape the text, so I switch of the escaping.
All I need now is the HTML file and I am ready to use this little tooltip.
HTML File.
<html>
<wicket:head>
<link type="text/css" rel="stylesheet" href="build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="build/reset/reset.css">
<script type="text/javascript" src="build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="build/event/event.js" ></script>
<script type="text/javascript" src="build/dom/dom.js" ></script>
<script type="text/javascript" src="build/container/container.js"></script>
<link type="text/css" rel="stylesheet" href="build/container/assets/container.css">
<style>
#ctx { background:orange;width:200px;height:30px; }
</style>
<script>
YAHOO.namespace("example.container");
</script>
</wicket:head>
<body>
<wicket:panel>
<span wicket:id="tooltip.javascript"></span>
</wicket:panel>
</body>
</html>
The thing to watch out for is the URl for the build dir in th css/js imports. But firefox is your friend and will tell you (if you enable error console).
Now to finally use the tooltip.
To use it I just inserted a label in the Index.java file. And remember to setOutputMarkupId(true), to get a id to give to the tooltip component.
Then add (new ToolTip("tooltip", labelId);
That gives me a total of the Index constructor
Label label = new Label("mylabel", "This text has a tooltip");
WebMarkupContainer container = new WebMarkupContainer("parent");
add (container);
container.add (label.setOutputMarkupId(true));
add (new ToolTip("tooltip", label.getMarkupId()));
Now remember to add the equivalent html elements in the Index.html file.
<html>
<head>
<title>QuickStart</title>
</head>
<body>
<h1>QuickStart</h1>
<p>This is your first Wicket application.</p>
<div wicket:id="parent">
<span wicket:id="mylabel"></span>
</div>
<span wicket:id="tooltip"></span>
<table>
<tr wi1cket:id="table">
<td wi1cket:id="label"></td>
</tr>
</table>
</body>
</html>
Now run the example, and place the Mouse over the text "This text has a ...."
And voila...it should work....crossing fingers :-)
Of course I am not finished, I would like the tooltip to be a behavoir, so I could add it to almost any component I like. Also the fact I have to add a I do not like. So I will look a how to implement this a a behavior. (have no clue right now :-)
ANyway I hope somebody can use this little "howto".
Comments are more than welcome.
/Boller
