Πέμπτη 4 Φεβρουαρίου 2010

Wicket Tooltip

Do you need to add tooltips to your web application?
Do you use Wicket and want a "behavior" that adds tooltip functionality to any Component?
If you answered yes to both questions the I have the solution! I used code from the article "Create a Nice, Lightweight JavaScript Tooltip" and I generated a behavior like class that uses the javavascript and style sheet in order to add tooltip functionality to any Component. The code of the behavior like class looks like the following:
public class TooltipPlugin implements Serializable{
private final Component component;

public TooltipPlugin(Component component, String tooltip) {
this.component = component;
component.add(HeaderContributor.forJavaScript(getClass(), "TooltipBehavior.Script.js"));
component.add(HeaderContributor.forCss(getClass(), "TooltipBehavior.Style.css"));
setTooltip(tooltip);
}

public void setTooltip(String tooltip) {
if (tooltip == null || tooltip.length() == 0) {
component.add(new AttributeModifier("onmouseover", true, new Model("")));
component.add(new AttributeModifier("onmouseout", true, new Model("")));
} else {
component.add(new AttributeModifier("onmouseover", true, new Model("tooltip.show('" + tooltip + "');")));
component.add(new AttributeModifier("onmouseout", true, new Model("tooltip.hide();")));
}
}
}
Where the "TooltipBehavior.Script.js" and "TooltipBehavior.Style.css" are the script and the style sheet files from the article "Create a Nice, Lightweight JavaScript Tooltip".

References:
1) Create a Nice, Lightweight JavaScript Tooltip

Downloads:
1) Original code of article "Create a Nice, Lightweight JavaScript Tooltip"
2) Full source code

Wicket Autocomplete - Show suggestions on focus

There are some cases that an autocomplete field is used for a limited number of option. For instance it can be used for selection of a Country. So we should show to the user all the available options when he focus on the field. The solution is to extends the DefaultCssAutocompleteTextField of wicket and override the "newAutoCompleteBehavior(IAutoCompleteRenderer, AutoCompleteSettings)" method as follows
@Override
protected AutoCompleteBehavior newAutoCompleteBehavior(IAutoCompleteRenderer renderer, AutoCompleteSettings settings) {
settings.setShowListOnFocusGain(true);
settings.setShowListOnEmptyInput(true);
settings.setShowCompleteListOnFocusGain(true);
return super.newAutoCompleteBehavior(renderer, settings);
}
If you need even more details leave a comment and I will give you even more information..

LinkWithin

Blog Widget by LinkWithin

Mobile edition