2013-04-17 8 views
11

私はUiBinderサンプルメッセージのXMLにこれらの要素を宣言しようとしている:は、UIを持つフィールドにIDを追加します。フィールド宣言

<label for="lastName">Last Name:</label> 
<input type="text" id="lastName" ui:field="lastNameField" maxlength="150" /> 

単に、テキスト入力に関連付けられているラベルを置きます。私がコンパイルしようと

、しかし、私はこのエラーを取得:

[ERROR] Cannot declare id="lastName" and ui:field="lastNameField" on the same element Element (:23)

これはui:fieldはIDを生成しない、特に以来、ばかげた制限のように思えます。私がこれまでに見つけた唯一の解決策は、このようなJavaコード自体にIDを割り当てることです:

@UiElement InputElement lastNameField; 
... 
lastNameField.setId("lastName"); 

これは私のJavaへの不必要な混乱を追加します。また、このIDがラインのどこかで更新されると、XML内の<label>宣言も更新する必要があります(ラベルには@UiElementがないため、Java側からはほとんど見えません)という複雑さも加えています。

Ui:フィールド宣言を持つ要素にUiBinder XML自体のIDを追加する方法はありますか?

答えて

11

UiBinderはIDを使用してui:fieldという魔法を実装しているため、XMLから設定することはできません。

@UiField(provided = true) 
final String lastNameId = Document.get().createUniqueId(); 

@UiField InputElement lastNameField; 

… 

lastNameField.setId(LAST_NAME_ID); 

とXMLで::

それを行う方法は、IDとJavaの定数を持っており、両側から、それを使用することです

<ui:with field="lastNameId" type="java.lang.String"/> 

… 

<label for="{lastNameId}">Last Name:</label> 
<input ui:field="lastNameField" maxlength="150"/> 

なお、Iの避難所上記のコードをtype="java.lang.String"でテストしたのですが、私はいつも の代わりにさまざまな識別子を含むクラスを使用しています(または、ジェネレータとのインターフェイス)

代替は、以下のとおりです。

  • あなたは、<label>のための代替構文を使用することができた場合:

    <label>Last Name: <input ui:field="lastNameField" maxlength="150"/></label> 
    
  • setId()でそれを使用するには、Javaから少なくとも削除そのようにfor=""値を読みますあなたのIDは一意ではない可能性があります(UiBinderウィジェットを複数回使用するとすぐに)。

    <label ui:field="lastNameLabel" for="lastName">Last Name:</label> 
    <input ui:field="lastNameField" maxlength="150" /> 
    
    @UiField LabelElement lastNameLabel; 
    @UiField InputElement lastNameField; 
    
    … 
    
    lastNameField.setIf(lastNameLabel.getHtmlFor()); 
    
+1

debugIdについてはどうですか? http://stackoverflow.com/questions/11845544/how-can-i-set-id-for-gwt-widgets-in-uibinder – Jonathan

+2

デバッグIDはデバッグ用にあります。ツールを乱用することは、長期的にはうまくいくことはめったにありません。 –

4

次のようなUiBinderサンプルメッセージ内のIDにアクセスすることによって、トーマスの答え(ビット)を簡素化することがあります。

<b:ControlLabel for="{testTextBox.getId}">TextBox</b:ControlLabel> 
<b:TextBox ui:field="testTextBox"></b:TextBox> 

// In code behind: 
@UiField(provided = true) 
TextBox testTextBox = new TextBox(); 
... 
testTextBox.setId("test"); 
this.initWidget(uiBinder.createAndBindUi(this)); 

あなたはGWTブートストラップを使用する場合のにあなたを聞かせて便利な機能がありますワイヤーアップのみのxmlのすべて:すべてのgwtbootstrap3ウィジェットの

<b:ControlLabel for="{testTextBox.getId}">TextBox</b:ControlLabel> 
<b:TextBox ui:field="testTextBox" b:id="test"></b:TextBox> 
+0

gwt-bootstrapについてのセクションのおかげで、それは私にとって非常に便利でした! – annouk

0

b:id="test"作品を。

+0

残念ながら、問題はバニラGWTについてであり、一部のブートストラップではありません。 –

+0

それは役に立つ情報です。ブートストラップは非常に人気があります。 –

+0

これはすでにRobの答えに含まれています。 –

関連する問題