【问题标题】：Clickable Label for Checkbox GWT复选框 GWT 的可点击标签
【发布时间】：2013-08-13 23:51:36
【问题描述】：

在 HTML 中这很容易

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

[代码来自]How to create an HTML checkbox with a clickable label

不确定在 GWT 中是如何完成的

我的问题是我不确定如何在 GWT 中使用他们的原生复选框复制它。这是来自<HTMLPanel> 内的ui.xml 文件的sn-p

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

布局的方式，我需要与表格保持一致，所以我不能在输入周围使用标签技术。我的意思是，我可以，但我更想知道如何以另一种方式做到这一点。

我试过了，但是没用

原因是，在编译的 GWT 代码中，元素的实际 ID 是 gwt-uid-1118。我可以将标签更改为<label for="gwt-uid-1118">，但这不是一个好主意，因为它们是动态生成的。

<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

有人知道 GWT 中的可点击标签（与 CheckBox 分开）是如何在 ui.xml 文件中完成的吗？

【问题讨论】：

标签： java html gwt

【解决方案1】：

试试text属性：

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

编辑。如果您有严格的 html 结构，那么您需要使用低级 GWT 组件，例如 InputElement：

更新的 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>

对应的java绑定：

@UiField InputElement defaultCheckBox;

【讨论】：

通常text 会是一个很棒的解决方案！不幸的是，我必须将标签和复选框分开。

【解决方案2】：

好的，我测试了两种方法来做到这一点。在这两种情况下，您都可以将 CheckBox 的标签留空（label 标记中没有文字）。

选项 1：您使用 <g:CheckBox> 和 <g:Label>（创建 div）并使用 <g:Label> 来模仿 Checkbox 的标签。

在您的 ui.xml 中

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

在您的 java 类中：

@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
        }
    });

选项 2：您使用 HTML <label> 而不是 GWT <g:Label> 并为其提供与复选框相同的 ID，因此它成为辅助标签（hacky）。

在您的 ui.xml 中

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

在您的 java 类中：

@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
}

编辑：想一想，选项 1 是更好的选择，因为它为您提供了 ClickHandler，而这正是您想要的。它也不那么老套。

【讨论】：

【解决方案3】：

如果您尝试将实际复选框与复选框的描述性标签分开，那么您可以使用 GWT 小部件来完成它：

ui.xml sn-p:

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

java代码：

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);
}

如果您不想使用“GWT Widgets”，那么@Maksym Demidas 的答案是使用纯 DOM 的替代方案。请记住，您也可以在 DOM 元素上使用 'ui:field' 表示法，并将它们重新挂接到您的 java 代码中。 “LabelElement”是您的活页夹文件中的“”的 java 等价物。 LabelElement#htmlFor 是您访问 html "for=''" 的方式。

【讨论】：

【解决方案4】：

只需在 CheckBox 上使用 ensureDebugId(String id)。这最终设置了标签元素的for 属性。看源头。如有疑问，只需检查 Showcase 和/或 JavaDoc。

在UiBinder 中，您可以使用相对的debugId="id"。

此外，如果您依赖点击标签（而不仅仅是输入元素）上的点击事件传播，请查看此issue（以及随附的解决方法）。

【讨论】：