Clicking a shortcut for a GWT flag

Question

In HTML it's pretty 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 tag

Not sure how to do it in GWT

My problem: I'm not sure how to replicate this to GWT using my own checkbox. This is a snippet from my ui.xml file inside <HTMLPanel>

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

What the layout looks like, I need to save the table so I cannot use the label around the input method . I mean, I can, but I would rather know how to do it differently.

---

I tried this but it did not work

The reason is that 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 this is not a good idea, as 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

Does anyone know how a clickable label (separate from CheckBox ) in GWT is executed in the ui.xml file?

Answer 1

Ok, I checked two ways to do this. In both cases, you will leave the CheckBox label blank (no text in the label tag).

Option 1: You use <g:CheckBox> and <g:Label> (which creates the div), and you use this <g:Label> to simulate the Checkbox 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 HTML <label> instead of GWT <g:Label> and assign it the same identifier as the checkbox, so it becomes a 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 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: Think about it, option 1 is the best choice as it gives you ClickHandler and what you wanted. It is also less harmful.

Answer 2

Try the text attribute:

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

EDIT. If you have a strict html structure, 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 3

If you are trying to separate the actual flag from the descriptive label for the flag, here you can execute it using the 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 an alternative using a pure DOM. Remember that you can use the "ui: field" notation on DOM elements to reconnect them to your java code. "LabelElement" is the java equivalent for "<label />" in your binder file. LabelElement # htmlFor is how you access the html "for = '".

Answer 4

Just use ensureDebugId(String id) over your CheckBox . This causes the for attribute of the label element to be set. Look at the source. If in doubt, just check Showcase and / or JavaDoc.

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

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