Wicket: How to implement a generic form component?

Question

I'd like to create a new component, EditableLabel. (There's AjaxEditableLabel, but I don't like the way it behaves - changing from <span> to <input> and back.)

I'd like it to be AJAX-enabled - onchange, at least. But the user should be able to leave out AJAX. Ideally, he would decide by (not) adding a Behavior.

My implementation is CSS-based - it's an input all the time, only changing it's appearance. This is done via JavaScript, to make it usable without AJAX, too.

So far, I have tried

Using AbstractAjaxBehavior with requestCycle.scheduleRequestHandlerAfterCurrent(new TextRequestHandler("text/plain", "UTF-8", ret)); in onRequest(), and the text field sends its value whenever appropriate (enter pressed, focus lost, ...)

The problem here is that I can't use AjaxRequestTarget. This approach is rather for simple server-client communication, like auto-complete.
Using simply a TextField with AjaxFormComponentUpdatingBehavior("update").

The problem is that it clashes with my JavaScript event handlers.

What would be the right approach to this? I assume there's some way I should code the javascript event handlers in wicket, so they would not make CSS changes dependent on server response (i.e. not re-rendering what server sends), but Wicket would make the JS so that events would not clash.

Any examples around this topic welcome.

Just found - the clash can be solved in Wicket 6. But I currently work with 1.5.9 — Ondra Žižka
Wouldn't be an IAjaxCallDecorator the way to achieve this in < 6 ? — Xavi López

Xavi López Xavi López · Accepted Answer · 2013-01-11T10:21:12

If the problem is event handlers clashing, you could model them all in the class, and output what's needed according to what the user wants. If the user doesn't want AJAX, use a SimpleAttributeModifier to just output the event handler.

TextField t = new TextField("id");
t.add(new SimpleAttributeModifier("onchange", "alert('hi!')"));

You can also use the more powerful AttributeModifier if the event handler can be dynamic depending on some conditions. Take into account that CSS classes could also be manipulated by means of AttributeModifier or AttributeAppender.

If the user does want AJAX, just add the behavior. If you want to add custom javascript to the ajax event handler, you can override AbstractDefaultAjaxBehavior#getAjaxCallDecorator() to return an IAjaxCallDecorator or any of its convenience subclasses to prepend/append your custom javascript to the ajax call. You can even add custom JS when the call ends with success or failure.

TextField t = new TextField("id");
t.add(new AjaxEventBehavior("update") { 
    @Override
    protected void onEvent(AjaxRequestTarget target) {
        // ...
    }
    @Override
    protected IAjaxCallDecorator getAjaxCallDecorator() {
        return new AjaxCallDecorator(){
            @Override
            public CharSequence decorateScript(CharSequence script) { 
                return "alert('hi!')" + script; 
            }
        }
     }
});

Wicket: How to implement a generic form component?

1 Answers