在HTML中这很容易

Question

在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 中复制此内容。这是ui.xml

中<HTMLPanel>文件的摘录

<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

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

Answer 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;

Answer 2

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

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

在您的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，这就是你想要的。它也不那么狡猾。

Answer 3

如果您尝试将实际复选框与复选框的描述性标签分开，则可以使用GWT窗口小部件来完成此操作：

ui.xml片段：

<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”是等效于“＆lt; label /＆gt;”的java在你的活页夹文件中。 LabelElement #htmlFor是你访问html“for =''”的方式。

Answer 4

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

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

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

Checkbox GWT的可点击标签

在HTML中这很容易

不确定如何在GWT中完成

我试过这个，但它不起作用

TL; DR

4 个答案: