Questions about form field

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I have following questions about form field:

  1. Can a Label work as a field? currently I use ready only TextField.
  2. Can an image be displayed in a form and how? for example, a picture displaying a random string to prevent automatic registration.
  3. How to set style of a form so that its labels and input fields can be displayed in horizontal? for example,
    Form with advanced layout (
    http://demo.vaadin.com/sampler#FormAdvancedLayout
    )

Thanks,
Watt

2

  1. Yes, if you wrap it in a
    CustomField

  2. There’s a
    Captcha add-on
     for that as well

  3. Not quite sure what you meant, but if you want all fields to be horizontal, then you can call form.setLayout(new HorizontalLayout());. If you want to place some of the fields horizontally and others vertically, then you’ll probably need to use another layout such as GridLayout and use the advanced form features for setting the components to their correct positions. To see an example of how to do this, click on the “view source” in the link you provided.

3

Thank you for your answer, Kim.

For point 3 and the Vaadin example, If field label and input box need to be displayed in the same line (no change for the form layout), what should the style be?

4

For item #3 you need to use CSS to do it.
You can add the style into the FormLayout (or Form)
form.addStyleName(‘hozlayout’)

then have a css style define that
#hozlayout { text-align: left;}

Or you can override the default form layout too
.v-formlayout-captioncell { text-align: left;}

5

It doesn’t work.

I am wondering whether the attached screenshot could be implemented by setting form/layout styles only.

Field label and input box are in the same line by default (see
http://demo.vaadin.com/sampler#FormBasic
). If the form wrapped with advanced layout (GridLayout) workes in the same way, I am afraid it should be implemented with coding.
11479.png

6

There’s two options, (and a better expert can confirm/deny this since I’m relatively new and just trying to be helpful)

  1. You can use CustomFields add on and build the layout that way by creating new fields which contain the label and the form element you desire.

  2. You can use labels on your GridLayout where appropriate and then have the field elements have no caption.

Someone feel free to correct me, cause I’m sure I missed something :wink:

7

Something related to the approach 2) is discussed
in this thread
.

  1. Use a CustomLayout (defined as HTML)

  2. Use CssLayout and some CSS to tell what goes where etc.

(Yes, there should and will be better ways to do this.)

I would probably go with option 1 (with some helper class based on FieldWrapper, containing a lightweight layout such as CssLayout or WeeLayout from the directory) or 2 (with a Form subclass that handles this automatically in attachField).

Each approach has advantages and disadvantages; for instance, the placement and presence of the “required” and “error” indicators depends on the approach taken, and some are more complicated in your code or complicate the DOM structure more than others (potentially slowing down layouting on the browser a little).

8

Hello
that’s how i did

    [code]

FormLayout frmCampiDescrittivi = new FormLayout();
CssLayout cssLayout_8 = new CssLayout();
cssLayout_8.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
cssLayout_8.setCaption(“Validità”);

    // dateDa
    dateDa = new PopupDateField("Da *");

    // dateFino
    dateFino = new PopupDateField("Fino a");

    cssLayout_8.addComponent(dateDa);
    cssLayout_8.addComponent(dateFino);
    frmCampiDescrittivi.addComponent(cssLayout_8);

[/code]

in the scss

[code]
.v-csslayout-v-component-group .v-caption{
margin-right:10px;
margin-left:10px;

}
[/code]It’s crazy people have to ask such things that are so simple in classic web pages.
I also find this in the documentation (note the newsletter field)

https://demo.vaadin.com/valo-theme/#!forms

and there is no source code.

bye
Domenico