A Wicket Diary

Phil Kulak, one of our most active users and contributor to the Wicket Stuff project, has created a Rails like component. This will allow one to create quickly CRUD web applications. This is not yet as complete as a full blown Ruby on Rails implementation, but will have the potential for becoming the Wicket version of the Trails package.

The component integrates nicely with Hibernate 3, so transition to EJB3 should not be too hard.

Technorati Tags:
wicket,
rubyonrails,
web,
framework,

Wicket 1.1 has basic, yet highly experimental support for AJAX. Pending our AJAX efforts scheduled for Wicket 1.2, I wanted to show how this AJAX thingy might work using Wicket. Nothing fancy dandy, but something I can use directly in my current project.

NOTA BENE

• this is my first AJAX experiment, so this is definetely not a best practise
• AJAX support is in its infancy in Wicket 1.1, so this may not work in future versions
• Wicket 1.1 is still BETA software. Stuff may break
• I used stuff that is currently only in HEAD (updateModel change), so this won’t work with a vanilla wicket-1.1-b1

That said, let’s continue with my AJAX experiment!

My current project will be something like a webbased spreadsheet, so I see a lot of AJAX stuff happening in the future with this project (if that darn manager would only let me): calculations done on the serverside would be done ‘instantaneously’. The results of the calculations would be sent directly to the client, without having to submit anything. Needless to say, I’m pretty enthousiastic on putting AJAX into good use here.

To start slowly I want to update the data on the serverside of a text field on a form without doing a full blown post. Eelco pointed me to the Form input example, where on the integer field an AJAX call is performed (NOTE the demo currenlty only works with internet explorer, this has already been fixed!). This call only calls the validation on the field itself, but this is nearly enough functionality for me to begin with:

• send modified field data to server
• validate value
• when data is valid, update the model
• send status back to client (error or success)
• update class of field to show status

So when I take this code, I should be almost finished. The example uses the dojo toolkit for the AJAX request handling, so this is what I’m using.

The markup for the page I’m creating is very simple:

And a properties file for the RequiredValidator (required textfield automatically adds the validator to the textfield):
form.field.RequiredValidator=${name} is required.
This is basically a very simple input form. No special stuff happening here. On with the AJAX stuff!
Now, when the AJAX event has been executed on the server and a response is returned, I want the classname of the inputfield set to one of the two defined CSS classes: success or error. The dojo kit supplies us with a bind method which does the call to the server and takes a handler for when the answer is returned:
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ /*do something w/ the data */ },
    mimetype: “text/plain”
});
(shamelessly taken from the dojo site). I need to change the ‘function’ part here: the string /*do something w/ the data*/ will have to become something like:
field.className = data;

The next thing to do is add a listener for the AJAX request to the field. Wicket provides the daring with DojoEventRequestHandler giving me out-of-the-box Dojo support. But I take a short cut. Eelco already has a ValidationEventRequestHandler, so I just copy that sourcecode and modify the bits I need:
protected final IResourceStream getResponse() {
    StringBufferResourceStream s = new StringBufferResourceStream();

    formComponent.validate();
    if (formComponent.isValid()) {
        formComponent.updateModel();
    }
    s.append(formComponent.isValid() ? “success” : “error”);

    return s;
}
This performs the actual AJAX action on the server. I validate the incoming value, and when valid, I update the model on the form component. Lastly I return either ’success’ or ‘error’ to the browser.

For the JavaScript side, we need to add an onchange handler which calls the dojo functionality. The update function that is called from here will be added to the header of the page (this uses

the new Wicket JavaScript support!):
;
Here you see that we call the dojo.io.bind function, and provide it with our own functionality to set the class of the field. When we add this to the header from within the Wicket code it looks like this:
public final void doPrintHead(HtmlHeaderContainer container) {
    String s =

    "\t\n”;

    container.getResponse().write(s);
}
This looks complex, but it is just escaped JavaScript (the same as above). As a final thing to do, we need to change the onchange event handler on the field so that it calls the update JavaScript function.
public final void onComponentTag(final Component component, final ComponentTag tag) {
    final ValueMap attributes = tag.getAttributes();
    final String url = formComponent.urlFor(IEventRequestListener.class)
        + "&id=" + getId();
    final String attributeValue = "javascript:update(‘”
        + url + “‘, ‘” + formComponent.getPath() + “‘, this);”;
    attributes.put(getEventName(), attributeValue);
}
Put in the rest of the functions that are already provided for by Eelco, and we have a working Ajax enabled field.
The accomplishment is not huge on a global scale, but I find it very cool to have done this basic stuff. Now before

you start doing this yourself: this is experimental code, and is not the official AJAX support of Wicket. There are

no guarantees that this will work in any version of Wicket now or in the future.

Technorati Tags:

wicket,

ajax,

javascript,

xmlhttprequest


				

Hitchhiker: You heard of this thing, the 8-Minute Web Abs?
Ted : Yeah, sure, 8-Minute Web Abs. Yeah, the excercise video.
Hitchhiker: Yeah, this is going to blow that right out of the water. Listen to this: 7… Minute… Web Abs.
Ted: Right. Yes. OK, alright. I see where you’re going.
Hitchhiker: Think about it. You walk into a video store, you see 8-Minute Web Abs sittin’ there, there’s 7-Minute Web Abs right beside it. Which one are you gonna pick, man?
Ted: I would go for the 7.
Hitchhiker: Bingo, man, bingo. 7-Minute Web Abs. And we guarantee just as good a workout as the 8-minute folk.
Ted: You guarantee it? That’s — how do you do that?
Hitchhiker: If you’re not happy with the first 7 minutes, we’re gonna send you the extra minute free. You see? That’s it. That’s our motto. That’s where we’re comin’ from. That’s from “A” to “B”.
Ted: That’s right. That’s — that’s good. That’s good. Unless, of course, somebody comes up with 6-Minute Web Abs. Then you’re in trouble, huh? [Hitchhiker convulses]
Hitchhiker: No! No, no, not 6! I said 7. Nobody’s comin’ up with 6. Who works out in 6 minutes? You won’t even get your heart goin, not even a mouse on a wheel.
Ted: That — good point.
Hitchhiker: 7’s the key number here. Think about it. 7-Elevens. 7 doors. 7, man, that’s the number. 7 chipmunks twirlin’ on a branch, eatin’ lots of sunflowers on my uncle’s ranch. You know that old children’s tale from the sea. It’s like you’re dreamin’ about Gorgonzola cheese when it’s clearly Brie time, baby. Step into my office.
Ted: Why?
Hitchhiker: ‘Cause you’re fuckin’ fired!

Quote from There’s something about Mary

Wicket now features a 7 minute workout for NetBeans on the Kickstart project. You can find other guides, like the 8 minute Web Abs using Eclipse workout, or the 9 minute Web Abs using IntelliJ IDEA workout.

See also the 2 minute Eclipse workout live video.

Technorati Tags:
wicket,
netbeans,
eclipse,
intellij,

The Wicket team has released the first (and hopefully last) beta of the upcoming 1.1 release of Wicket. The 1.1 beta release has the following features available:

• Full JavaScript and CSS support - allowing you to package JavaScript and/or CSS with your component, and have it contribute the JavaScript/CSS to the header of the including page
• Markup inheritence - ever wanted to create a base page with a menu, some DIVs or other standard components, which are present on ALL pages in your application? Wicket already supported inheritence on the Java side of things, but now includes markup inheritence. This allows you to create such template pages and have subclasses fill in the blanks.
• Simplification of Choice component - we had some complaints on the 1.0 implementation of the Choice components being too complex, so we revisited this component. This will break stuff in your application, but it has improved considerable!
• EXPERIMENTAL AJAX support. There is some experimental AJAX support available. But not for the faint of heart and only when you don’t mind changing API’s. USE AT YOUR OWN RISC!
• Component seperator character has been altered from ‘.’ (dot) to ‘:’ (colon), paving the path for OGNL type paths in form components, this allows for even more shorter code in your forms (e.g.
  )
• Component reference examples in the Wicket examples download
• Date picker component in extensions - as a first component utilizing our new JavaScript support, Wicket now has a very cool and rich Date picker in the extensions package. Check it out and (re)discover the ease of component based development!

This release features many (small) improvements, so go to the SourceForge download pages, download Wicket, Extensions and the examples and have fun!

The first beta release of Wicket 1.1 is only a few hours old and we already have a raving ‘review’ on the userlist. To quote Matej Knopp:

1.1.0-b1 is a great release. I’ve succesfully upgraded my current project. It was almost painless Actually, it consisting of removing a class that was a wrapper around ListMultipleChoice, because it was obsolete in 1.1, as well as removing my own ChoiceList implementation, since it’s no longer required. In general, using 1.1 I could remove some code and the application became simpler and nicer

IChoiceRenderer is great, shorter urls are much nicer too.

I’m going to drop border in favour of markup inheritance.

The overall impression is very positive, thank you for this release.

-Matej

Do I need to say more? Go find out why YOU should try Wicket in your next or even current Web project!