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");

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…

The idea looks fine to me.
I am just a Java guy who hates Javascript, HTML and CSS (even though without these no Web at all!).
However, this much HTML/CSS is no problem for most of the people.
Anyway, some HTML/CSS/JavaScript gurus may respond with further comments.

I think everything can default to the current FormLayout properties.
(In fact, later, the FormLayout can be replaced by this).

A useful API may be provided for setting the number of columns in the layout.
This should arrange the fields in 2 columns rather than in single column. (Quick way of defining a multi-column form-layout without using addSection() etc.)

Very good. Only comment is that “incorrect zip” does not stand out as an error (should use the current exclamation mark in a circle or some such). Would definitely use it.

I like it too, seems to be an interesting idea.

This is all about the default HTML template. I think that I’ll split this to two parts - one being an abstract “AbtractWebListLayout” or something and one being this WebFormLayout with a better layout/syles than in the above proto.

Hi !
Ok, it’s an old subject, and i’m perhaps totally out…but…
This layout is very very interesting !!!
Is it downloadable somewhere (even a beta) ?

thx for all.

long life to VAADIN