Clickable Label for Checkbox GWT

Question

In HTML this is quite easy

<input type="checkbox" name="checkbox" id="checkbox_id" value="value" />
<label for="checkbox_id">Text</label>

[Code from] How to create an HTML checkbox with a clickable label

Not sure how it's done in GWT

My issue is I'm not sure how to replicate this in GWT with their native checkbox. This is a snippet from my ui.xml file inside an <HTMLPanel>

<table>
    <tr>
        <td align="right" ui:field="defaultCheckBoxText">Checkbox Label</td>
        <td><g:CheckBox ui:field="defaultCheckBox"/></td>
    </tr>
</table>

The way the layout is, I need to keep with the table so I can't use the label around the input technique. I mean, I can, but I would prefer to know how to do it the other way.

---

I've tried this, but it didn't work

The reason being, in the compiled GWT code, the actual ID of the element is gwt-uid-1118. I could change the label to <label for="gwt-uid-1118">, but that is not a good idea since they are dynamically generated.

<table>
    <tr>
        <td align="right" ui:field="defaultCheckBoxText"><label for="defaultCheckBox">Checkbox Label</label></td>
        <td><g:CheckBox ui:field="defaultCheckBox"/></td>
    </tr>
</table>

---

TL;DR

Anybody know how a clickable label (separate from the CheckBox) in GWT is done in the ui.xml file?

Answer 1

Try text attribute:

<g:CheckBox ui:field="checkbox" text="text"/>

EDIT. If you have a strict html structure then you need to use low level GWT components like InputElement:

Updated UiBinder:

<table>
    <tr>
        <td align="right"><label for="defaultCheckBox">Checkbox Label</label></td>
        <td><input ui:field="defaultCheckBox" id="defaultCheckBox" type="checkbox" /></td>
    </tr>
</table>

Corresponding java binding:

@UiField InputElement defaultCheckBox;

Answer 2

Ok I tested two ways to do this. In both cases, you would leave your CheckBox's label empty (no text in the label tag).

Option 1: You use a <g:CheckBox> and a <g:Label> (which creates a div) and you use that <g:Label> to mimic the Checkbox's label.

In your ui.xml

<td>
    <g:Label ui:field="lbl">The Label</g:Label>
</td>
<td>
    <g:CheckBox ui:field="chk" />
</td>

In your java class:

@UiField Label lbl;
@UiField CheckBox chk;

//put this handler in the constructor
lbl.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            chk.setValue(!chk.getValue(), true);
            //This will so it will manually operate the checkbox
        }
    });

---

Option 2: You use a HTML <label> instead of a GWT <g:Label> and give it the same ID as the Checkbox, so it becomes a secondary label (hacky).

In your ui.xml

<td>
    <label ui:field="lbll">The Label</label>
</td>
<td>
    <g:CheckBox ui:field="chk" />
</td>

In your java class:

@UiField CheckBox chk;
@UiField LabelElement lbll;

@Override
protected void onLoad() {
    super.onLoad();
    //This part has to happen onLoad, which is where a unique ID gets generated

    //Get the g:Checkbox's ID
    String uniqueID = chk.getElement().getFirstChildElement().getId();

    //set it to the html label
    lbll.setAttribute("for", uniqueID);
    //now the g:CheckBox has 2 labels, one of them being yours
    //and the other one being the one it comes with
}

EDIT: Come to think of it, Option 1 is a better choice since it gives you a ClickHandler, and that's what you wanted. It's also less hacky.

Answer 3

If you are trying to separate the actual checkbox from a descriptive label for a checkbox then here is one way you can accomplish it using GWT widgets:

ui.xml snippet:

<table>
  <tr>
    <td align="right">
      <g:HTML text="Checkbox Label" ui:field="defaultCheckBoxText"/>
    </td>
    <td>
      <g:CheckBox ui:field="defaultCheckBox"/>
    </td>
  </tr>
</table>

java code:

HTML defaultCheckBoxText;
CheckBox defaultCheckbox;

.....

UiHandler("defaultCheckBoxText")
protected void onCheckboxLabelClick(ClickEvent event) {

    // whether you want change handler to be fired on checkbox (optional)
    boolean fireevent = false; 

    // toggle the checked value
    defaultCheckbox.setValue(!defaultCheckbox.getValue(), firevent);
}

If you don't want to use "GWT Widgets" then @Maksym Demidas answer is the alternative using pure DOM. Remember that you can use the 'ui:field' notation on DOM elements as well to hook them back into your java code. "LabelElement" is the java equivalent to "<label/>" in your binder file. The LabelElement#htmlFor is how you access the html "for=''".

Answer 4

Just use ensureDebugId(String id) over your CheckBox. This ends up setting the for attribute of the label element. Look at the source. When in doubt just check the Showcase and/or the JavaDoc.

In UiBinder you can use the relative debugId="id".

Also, check out this issue (and the attached workaround) that seems quite related if you rely on the event propagation of the click over the label (and not just over the input elment).