In a project I am working on these days, I have two pages that are almost the same, one is the editable version of the other one and is important to have a preview of the "view only" mode, without buttons, text area and everything. I decided to make something shiny so now I have an Edit button that changes a Panel, replacing the one with the "labels" for the view only mode with the one with the Form and all of its fields, including some with advanced ajax features like the YUI DatePicker and the TinyMCE editor.
Wicket is great in reducing the duplication of HTML code using panels and markup inheritance, but I still haev a duplication that, in my scenario comes because for every property of my domain object, say a Product, I have to use a input text in html for the Form and label for the plain text. So I have two HTML files almost identical. I manage out to reduce them to three different html files, being two really small, and just one with all the property, so I resolve the duplication. Let's see how.
The basic idea is to have a generic Panel, call it InputPanel, with it's own html that inside define an <input> or a <textarea> or whatever. In this way my application Panel, say the ProductPanel, can show property this way:
<span wicket:id="price"></span>
without worrying about what kind of component there will be inside, a label or even a input. So, in my ProductPanel I will make:
add(new TextAreaPanel("price", myModel);
How is TextAreaPanel done? See his parent class, InputPanel
public abstract class InputPanel extends Panel {
protected AbstractTextComponent field;
public InputPanel(String id, IModel<?> model) {
super(id, model);
}
public InputPanel(String id) {
this(id, null);
}
public Component addToField(IBehavior... behaviors) {
field.add(behaviors);
return this;
}
}
then the concrete class, very simple.
public TextAreaPanel(String id, IModel<?> model) {
super(id, model);
field = new TextArea("area", model);
add(field);
}
I will talk later about the class field named... field. Finally the TextAreaPanel.html
<wicket:panel>
<textarea wicket:id="area"></textarea>
</wicket:panel>
You get the trick? I can define my panel with many span, which will contain an input or a label or whatever I need, so I can just have a single html files that lists all the properties I need to show and edit.
Seems easy but there are a couple of trick. As you noticed, InputPanel redefine a method add(Behavior....). This is because we want to attach behaviours to the actual input field. The method returns the panel to let use fluent interface consistently. Yeah, I can make the field private but... ok, you know.
Another trick is needed if, as common, you are wrapping your Model with a CompountPropertyModel.
To make the CPM work with this solution, we need to overridde a method, becouse the wicket id used as property expression need to be the one you define in your ProductPanel, not the one defined in generic InputPanel html. So out CPM will override as follow:
@Override
protected String propertyExpression(Component component) {
return super.propertyExpression(component.getParent());
}
That's all? No. Better, is the end of the first part. Now we need to handle the fact that one of the two panels need to be in a form and that maybe we want to "decorate" our form with a toolbar or something. We will see how in the second article.
Comments [2]