4

在 HTML 中，这很容易

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

[代码来自]如何创建带有可点击标签的 HTML 复选框

不确定它是如何在 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;博士

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

4

4 回答 4

3

尝试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;

于 2013-08-12T15:56:24.723 回答
2

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

选项 1：您使用 a<g:CheckBox>和 a <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>，并为其赋予与 Checkbox 相同的 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，这就是你想要的。它也不那么骇人听闻。

于 2013-08-12T19:37:16.117 回答
1

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

在UiBinder您可以使用相对debugId="id".

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

于 2013-08-12T20:02:04.613 回答
1

如果您试图将实际的复选框与复选框的描述性标签分开，那么您可以使用 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>

爪哇代码：

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”是您的活页夹文件中的“<label/>”的 java 等价物。LabelElement#htmlFor 是您访问 html "for=''" 的方式。

于 2013-08-12T18:15:40.443 回答