CustomLayout showing bean data not editable for Form

I have a simple CustomLayout used in a Form in Vaadin 6.3 in which I’d like to put some data from my bean that will not be editable, such as Panel capture or H1 tag, such as:

[font=Courier New]

Group:

[/font]

The idea is when the bean is selected from the Table list and it’s inserted my Form.setItemDataSource() method, I’d like to put the original name in the header area (showing what it was originally called), but this will never be changed.

But in the regular Form logic, I want the name below to be a regular TextField that can toggle between readonly and editable.

I have other bean fields that will also be read-only and displayed on the Form (such as “last updated timestamp”), but since these can be listed as ordered properties in my setItemDataSource() and are shown only once on the Form, I can just use the Field factory and create a read-only TextField or Label.

The problem is I can create a Label (RAW or XHTML) and assign it to the pseudo bean field “originalName”, but it’s put in a

so it breaks to the next line. Is there a way to just replace the span body with my label’s value and not have it in a
? Or do I need to use CSS styling to convert the label’s div to be inline instead of it’s default block?

Or is there a more straightforward way to insert data that may or may not be in my bean (so it’s not a listed property) but that will vary each time a bean is selected in my Table and put in the edit view below?

A label is by default 100% wide so it will wrap if there is not enough space. Use label.setSizeUndefined() and it will always stay on one row.

Another option would be to add a “originalName” Property to the BeanItem and use the FormFieldFactory to create a readonly field for it.
Something like:

 Person person = new Person("First", "Last", 12, 42);
        BeanItem<Person> bi = new BeanItem<Person>(person);
        bi.addItemProperty("MyCustomProperty", new ObjectProperty(person
                .getFirstName()
                + " " + person.getLastName()));
        form.setItemDataSource(bi);

and


Form form = new Form();
form.setFormFieldFactory(new FormFieldFactory() {

            public Field createField(Item item, Object propertyId,
                    Component uiContext) {
                if (propertyId.equals("MyCustomProperty")) {
                    TextField tf = new TextField("");
                    tf.setReadOnly(true);
                    return tf;
                }
             [...]

           }
     }

A third option of course to add a dummy setter/getter to the Bean so the property is added automatically.

Thanks for the tip on adding the BeanItem property. I could have sworn I tried that, but I think I broke it by doing it on the BeanContainer instead of the BeanItem. Anyway, that does work as expected, so it’s a nice way to combine data from more than one bean but still use a standard Form when you don’t want to mess with the actual bean (we generally don’t like to modify our backend beans for the UI).

I really love how these work compared to those DTOs I had in GWT+RPC, which did require that we modify our beans to produce and consume the DTOs (or create bridge beans that did it), and I can now display times with regular looking timezones (GWT’s SimpleDateFormat couldn’t because of limitations in JS). Vaadin is really great!

P.S.
Oh yeah, as for the Label’s being

that I wanted to display inline with other elements in my CustomLayout, I had to add the following styles so I could have them layout along the same line:

myLabel.setStyleName(“inline”);

and using CSS:

.inline, .inline div { display: inline; }

Dear David,
I used CustomLayout with Form , but couldn’t able to remove the Table Field Caption Space, even I tried to use your style name, but in TextField (since I don’t know what you are talking about in Labels )
Can you guide me further about it,
Thank you in advance.