Apache Wicket javascript integration

9 09 2008

This article will give some general pointers on howto do javascript integration, it’ll give some tip on how to make it easier to for you. And also a recommended way on project structuring.

Howto do it:

Javascript bridge

If you need a javascript bridge between the javascript library and wicket a very nice way are todo it like this:

Use the wicket namespace for a cleaner approach(like above), and remember to place your data in an array, so you can have multiple of the same components on the same page. Like so:

var Wicket;
if (!Wicket) {
Wicket = {};
} else {
if (typeof Wicket != "object") {
throw new Error("Wicket already exists and is not an object");
Wicket.omaps = {};
function WicketOMap(id, options) {
Wicket.omaps[id] = this;

Lots of dynamic stuff?

If you have lots of dynamic stuff you can use a texttemplate to interpolate your variables with it works really smooth, heres an example:

HashMap variables = new HashMap();
variables.put("alert", "helloworld");
TextTemplate textTemplate=new TextTemplate();
String js= textTemplate.asString();

corrosponding java script, notice the template signature ${…}


So above code will produce a javascript string ‘alert(“hello world”)’ very useful.

Using a behaviour

Behaviours are nice if you need some special that modifies the component you want to add too. It’s an easy way of getting information like markupid etc. Its good because you can access the component that you bind to, so you may put in javascript, add attributemodifiers etc for it.

Virtual tour of Mootips

Heres a virtual tour of Mootips javascript integration

go here for the minis wiki




10 responses

12 12 2008

Thanks a lot…It helped me solve my problem.

12 12 2008

Happy to help 🙂

7 07 2009

Thanks, the Mootips are great, but I had the problem that when I add them to components in a modal window, the tips appear BEHIND the modal window. Is there a simple fix for this?

9 07 2009

Hmm, im not sure, I ran into the same problem with the prototip loong before, but I failed to fix it. Problem are that the modal window has a z-index of 9999 or something larger.. And when mootip comes along with it’s 99 or something of z-index it goes wrong.. Now it may have been fixed so the modal z-index are something like 98 so you can use 99, but I dont know.

That should be some breadcrumbs for you 🙂 In theory you should also be able to change these things with a small javascript maybe a behavior or something.

27 07 2009

OK, thanks, Nino

27 07 2009

Also possibly with at custom css for the modal window, that just sets the z index to 98.. then it should work.. Thats probably the best fix..

7 09 2009

I tried to create a label with a tooltip but it doesn’t work like it should. The hidden div is in the markup and when i enter the label js starts calculating my actual position but no tooltip is shown. I’m using wicket 1.4 and 1.4-snapshot of the minis package. Any ideas?

Thanks in advance.

11 09 2009

Hi Norman

What I usually do are see if I can get it to work with a normal mock html page. If it works there it’s usually a matter of tweaking to get it to work with wicket. Here comes a tool for firefox called firebug into action. It’s really nice and works very well for debugging AJAX/JS and dom / CSS.

If you show me some code I could be a little more precise in my help.

10 06 2010
Arjun Dhar

Awesome Blog!

For the written text there is a **suggestion**; The section “Lots of dynamic stuff?” does not mention Where to put that code. For a new person it is not intuitive to figure that out. And “Behavior” is the next section.

I Saw your video and then it made sense that I could use behavior, use the header response.getResponse().write(‘my own script’) to embed by script.

What I wanted to do (for my own reason):
Click here

I put the Questions up @

…And the video really helped me figure it for myself. Though you could improve the explanation a little by providing more context for the code 🙂


10 06 2010
Arjun Dhar

Sorry, in my previous post pasted some HTML code that WordPress converted into a link. Apaoligize for it.
< anchor tag href=’javascript:myOwnFunction(‘my script’) > Click here </a>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: