2012-03-12 120 views
0

使用UI:Binder。jQuery + GWT設置複選框狀態

<div data-role="fieldcontain"> 
<fieldset data-role="controlgroup"> 
<input type="checkbox" ui:field="uniqueID" class="custom" /> 
<label for="uniqueID"><ui:text from="{res.text}"></ui:text></label> 
</fieldset> 
</div> 

而且 checkboxNewsletter.setId("uniqueID");,因爲不幸的是你不能設置界面::場和身份證同時

的複選框被實現爲以下。

我試圖用

@UiField InputElement checkbox; 
checkbox.setChecked(true); 

沒有工作設置的複選框。所以我試圖JSNI直接訪問jQuery的JS:

public static native void setCheckBoxStatus(String id, Boolean isChecked)/*-{ 
     $wnd.jQuery('input[name='+id+']').attr('checked', isChecked); 
}-*/; 

...它沒有工作要好得多。

任何人都知道如何解決這個問題? jQuery似乎重寫了GWT複選框;生成的HTML有點奇怪,似乎由兩個複選框元素組成。刪除jQuery疊加層時,您可以看到原始(並正確選中)的元素。

回答

2

混合jQuery和GWT是一個壞主意!對於GWT,您應該首先使用Java代碼來處理GWT DOM API。您是對的,您無法通過UIBinder在元素上設置ID和ui:field,但這不是問題的根本原因。

您爲視圖提供的代碼片段不會編譯。您需要指定與註釋字段如下:

@UiField 
CheckBox checkbox; 

隨後的方法體內,設置的選中狀態:

// setValue sets the checked state, true = checked, false = unchecked. 
checkbox.setValue(true); 
+0

setValue方法是基本相同setChecked,已經嘗試過(複選框以及InputElement)當然。這裏的問題是,jQuery似乎有點用jQuery的HTML/CSS覆蓋GWT內部複選框。因此,setValue方法將不會正確顯示在屏幕上。 – 2012-03-13 10:20:13

2

當您使用GWT使用jQuery,你應該使用GWTQuery(http://code.google.com/p/gwtquery/),它包裝了jQuery的功能,你可以直接在你的java代碼中訪問它。但是這對UiBinder沒有幫助。

這是如何定義與GWT UiBinder的複選框:你在你的代碼behing

<g:CheckBox ui:field="uniqueID"></g:CheckBox> 

UiBinder的XML文件,並

@UiField 
CheckBox uniqueID; 

如果您使用的是eclipse,您可以使用設計器將不同的元素拖放到您的佈局中並定義不同的元素。本文描述了UiBinder的不同特性。

PS:如果你希望你的複選框,在inizialsation來檢查,你可以寫:<g:CheckBox checked="true" ui:field="uniqueID"></g:CheckBox>