As many have noted lately, our default form layout could be a lot more flexible. I decided to prototype an alternative layout tonight and created an early concept prototype called WebFormLayout.
WebFormLayout is a simple layout for arranging a set of fields on screen in a “web” like fashion. The layout is customizable by plain HTML in an keep-it-simple-and-really-stupid fashion - by overriding methods that produce HTML snippets in server-side. This is a bit like crossbreed between FormLayout and CustomLayout. Layout also supports form sections for easily dividing forms to groups.
The default (dummy) rendering of the form looks like this:
The the layout class adds only these methods to AbstractComponentContainer:
- addSection(String caption) - adds a new section divider (like the Shipping Address in above example)
- getHeaderHTML() - protected method for getting HTML to prefix the layout with (defaults to <table…>)
- getFooterHTML() - protected method for getting HTML to postfix the layout with (defaults to </table…>)
- getSectionHTML(String caption) - protected method for rendering HTML for a section divider
- getRowHTML((String idCaption, String idField, String idError, String idDescription) - protected method for getting HTML to wrap a single field in layout. The HTML should contain placeholders for field, caption, error messages and description marked with given ids.
As an example, this code would create a right-to-left form layout in place:
WebFormLayout rtl = new WebFormLayout() {
protected String getRowHTML(String idCaption, String idField, String idError, String idDescription) {
return "<tr><td valign='top'><div id='" + idError + "'></div><div id='"
+ idDescription + "'></div></td><td valign='top' id='"
+ idField + "'></td><td valign='top' style='font-weight: bold;' id='"
+ idCaption + "'></td></tr>";
}
};
So, if you add a TextField to the above layout with a description:
TextField tf = new TextField("First Name");
tf.setDescription("Right-to-left works");
rtl.addSection("Customized WebFormLayout for RTL languages");
rtl.addComponent(tf);
It would look like this:
I guess that the one could produce many different layout styles with this component without writing any client-side code.
What do you think:
- Would this be useful in your projects?
- What would you change in the API/Design?
- What would be optimal default HTML for the form?
- What features must be added to make this useful?
If there is enough people who would like to use this, I’ll complete the widget and submit it to contrib…