4

HTMLでは、これは非常に簡単です

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

[Code from]クリック可能なラベル付きの 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;DR

GWTのクリック可能なラベル (とは別CheckBox) が ui.xml ファイルでどのように行われるか知っている人はいますか?

4

4 に答える 4

1

ensureDebugId(String id)あなたの上で使うだけCheckBoxです。forこれにより、label 要素の属性が設定されます。ソースを見てください。疑問がある場合は、Showcaseや JavaDoc を確認してください。

でUiBinder相対を使用できますdebugId="id"。

また、(入力要素だけでなく) ラベル上のクリックのイベント伝播に依存している場合、この問題(および添付の回避策) を確認してください。

于 2013-08-12T20:02:04.613 に答える
1

チェックボックスの説明的なラベルから実際のチェックボックスを分離しようとしている場合、GWT ウィジェットを使用してそれを実現する 1 つの方法を次に示します。

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」を使用したくない場合は、純粋な DOM を使用する代わりに @Maksym Demidas の回答を使用できます。DOM 要素に 'ui:field' 表記を使用して、それらを Java コードにフックできることを覚えておいてください。「LabelElement」は、バインダー ファイルの「<label/>」に相当する Java です。LabelElement#htmlFor は、html "for=''" にアクセスする方法です。

于 2013-08-12T18:15:40.443 に答える