Checkbox Caption inside a Form

Hi,

is it possible to change the caption position of a checkbox inside a fromlayout? all captions are on the left side auf the form, only the checkbox caption does not. Also if i set the checkbox to setRequired(true) in my formfieldfactory, no red * appears.

br, klemensl

The checkbox client side component does not allow its parent layout (FormLayout in this case) to manage its caption. Also the required indicator is handled as a part of the caption by the form layout.

The form layout in its current form has some limitations, and achieving what you want is somewhat complicated.

One way to get around them is to use a custom layout for a form: see the thread http://vaadin.com/forum/-/message_boards/message/42769 . This is often required when you want to customize form layout behavior in any way, such as using multiple columns in a form. In your case, you would use a checkbox without a caption and a separate label for it. However, this requires handling also the required field and error indicators yourself.

Another option would be a custom client side widget for your checkbox, extending VCheckBox and overriding updateFromUIDL. The changes required would be to call client.updateComponent with the parameter manageCaption set to true, and not setting the text for the checkbox itself. However, using your own client side widgets does require having your own widgetset.

A widgetset and skeletons for the client side widget and its server side component can be created using the Eclipse plugin (New Vaadin Widget → check the box “create client side widget”). The Book of Vaadin also contains instructions for creating them by hand.

Hi klemensl,
i know the thread is old but i’m facing the very same problem with my auto-generated forms, how did you manage (if ever…) to solve it? Have you got any advice?

Thanks,

LC

Had the same problem.

I used
CustomCheckbox
and the hint from Henri Sara to extend it to turn caption management on and of. Now i can use it inside a FormLayout with caption at the left and in normal layout with caption at the top.

It seems to be feature, not bug! :frowning:
Annoying forever all developers on purpose.
All addons are not supported for Vaadin 7 :frowning:

I am also here wishing the Checkbox label was on the left side in FormLayout.

I’m not using FormLayout at all due to such limitations, instead a combination of Vertical and Grid layouts become suitable. Rendering field labels separately for each each field type do solve the issue. The last but not least is rendering required indicator.


Now I solved it using CustomField:

import com.vaadin.data.fieldgroup.FieldGroup;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.CustomField;

public class CustomCheckbox extends CustomField
{
private static final long serialVersionUID = 1L;
private CheckBox cbx = new CheckBox(null, false);

public CustomCheckbox() {
    super();
    setImmediate(true);
}

public CustomCheckbox(FieldGroup fg, String propertyId, String caption){
    setCaption(caption);
    fg.bind(cbx, propertyId);
    cbx.setImmediate(true);
}

@Override
protected Component initContent() {
    return cbx;
}

public Class<? extends Boolean> getType() {
    return Boolean.class;
}

@Override
protected void fireValueChange(boolean repaintIsNotNeeded) {
    cbx.setValue(getInternalValue());
    super.fireValueChange(repaintIsNotNeeded);
}

@Override
protected void fireReadOnlyStatusChange() {
    cbx.setReadOnly(isReadOnly());
    super.fireReadOnlyStatusChange();
}

}

Jan Hink,

You’re my hero. That worked along with some custom field factory logic:

@Override
    public <T extends Field> T createField(Class<?> dataType, Class<T> fieldType) {

        T field = null;

        if (Boolean.class.isAssignableFrom(dataType)
                || boolean.class.isAssignableFrom(dataType)) {
            CustomCheckbox cb = new CustomCheckbox();
            cb.setImmediate(true);
            return (T) cb;
        }

        // catch-all
        if (field == null) {
            field = super.createField(dataType, fieldType);
        }
        
       return field;
    }

Thank You :slight_smile: I can see You are more advanced in Vaadin, I am novice but I came upon, the caption in CustomField is surely separated from the content. So the content can be a plain checkbox without caption.

Jan Hink, I found a problem with your example. When the user changes the value in the browser it doesn’t save it back to the datasource on commit (This
might
only be a problem if it’s buffered). However, I solved it by overriding setInternalValue() and getInternalValue() so that they point to the CheckBox, and removing your fireValueChange(). This is important because the CustomField has it’s own internal value that is being used instead of the value in our CheckBox in CustomCheckBox, so we need to tell it to use our value instead of it’s value.

    @Override
    public void setInternalValue(Boolean value) {
        cbx.setValue(value);
        super.setInternalValue(value);
    }
    
    @Override
    public Boolean getInternalValue() {
        return cbx.getValue();
    }
    
//    @Override
//    protected void fireValueChange(boolean repaintIsNotNeeded) {
//        cbx.setValue(getInternalValue());
//        super.fireValueChange(repaintIsNotNeeded);
//    }

Thank You for warning, but I didnt notice any problem yet, although I use it in both buffered and non buffered mode. I use it always within custom FiledGroup where I have the function createFields as You, based on Boolean field class. FieldGroup.commit() propagates changes into datasource. I have never used functions setBuffered, commit and discard on single checkboxes. Only through the fieldgroup. Maybe your solution is easier and all-purpose.


Oooh
. I see why yours worked and mine didn’t. I took out your special constructor in which you take a FieldGroup and bind it to the inner combobox: fg.bind(cbx, propertyId); I couldn’t use that constructor with my algorithm which uses buildAndBind(), so my FieldGroup was binding to the CustomField instead of the inner checkbox like yours.

Well, now future readers can see two different ways of doing it. :slight_smile:

I used quite a similar solution with a CustomComponent called CheckBoxEditor :

[code]
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalLayout;

public class CheckBoxEditor extends CustomComponent {

private CheckBox checkBox = new CheckBox();

public CheckBoxEditor(String caption) {
    this.setCaption(caption);
    HorizontalLayout layout = new HorizontalLayout();
    this.setCompositionRoot(layout);
    layout.addComponent(checkBox);
}
public CheckBox getCheckBox() {
    return checkBox;
}
@Override
public void setReadOnly(boolean readOnly) {
    super.setReadOnly(readOnly);
    this.checkBox.setReadOnly(readOnly);
}

}
[/code]You can add it directly in your FormLayout, just be careful to write for the binding :

beanFieldGroup.bind(checkBoxEditor.getCheckBox(), propertyId);

Hi guys,

I created a simple subclass of CheckBox which uses the same client-side widget, but with a different connector which delegates the caption handling to the parent layout. See
https://vaadin.com/directory#addon/formcheckbox
. It can be used exactly like a normal CheckBox.

Hi Auke te Winkel. I checked your add on. It is not working with java 6,
but I recompiled code and then it works.
Thank you and my suggestion is to recompile add on jar with java 6 for compatibility reasons. :slight_smile:
Best regargs.

Yes, my Eclipse projects were apparently set to Java 8 by default and I didn’t even think about this, but some other users have started reporting problems caused by this as well. When I have some spare time I’ll look into it :slight_smile:

Hi Dragan,

I realized it wasn’t going to be a lot of work, so I’ve set the Java version to 6 and uploaded a new version for the FormCheckBox and EUpload addons.

Auke,
it seems to not work with GridLayout :frowning: - captions are still on right although all other captions are above (see attached screenshot).
18943.png

That’s strange… we’re not using it in a GridLayout yet and I’m currently very busy, but in a couple of weeks I might have some time to investigate the issue.