作爲單個編輯器的GWT自定義複合小部件

Question

我有一個由3個TextBoxes組成的複合小部件，它充當「日期掩碼」字段，如：[dd]/[mm]/[yyy]（不要問爲什麼我這樣做:)，我不喜歡DateBox，我不得不強制用戶保持一種格式，所以我寫了我自己的小部件）。 這裏是Java代碼：

import com.google.gwt.core.client.GWT; 
import com.google.gwt.event.dom.client.KeyUpEvent; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.uibinder.client.UiField; 
import com.google.gwt.uibinder.client.UiHandler; 
import com.google.gwt.user.client.ui.Composite;`enter code here` 
import com.google.gwt.user.client.ui.TextBox; 
import com.google.gwt.user.client.ui.Widget; 

public class DateMaskWidget extends Composite { 

private static DateMaskWidgetUiBinder uiBinder = GWT 
     .create(DateMaskWidgetUiBinder.class); 

interface DateMaskWidgetUiBinder extends UiBinder<Widget, DateMaskWidget> { 
} 

@UiField 
TextBox daysTextbox; 
@UiField 
TextBox monthsTextbox; 
@UiField 
TextBox yearsTextbox; 

public DateMaskWidget() { 
    initWidget(uiBinder.createAndBindUi(this)); 

    daysTextbox.setMaxLength(2); 
    monthsTextbox.setMaxLength(2); 
    yearsTextbox.setMaxLength(4); 
} 

@UiHandler("daysTextbox") 
void onKeyUp(KeyUpEvent event) 
{ 
    //if 2 chars were entered focus the next box 
    if(daysTextbox.getText().length()==daysTextbox.getMaxLength()) 
     monthsTextbox.setFocus(true); 
} 
@UiHandler("monthsTextbox") 
void onKeyUp2(KeyUpEvent event) 
{ 
    //if 2 chars were entered focus the next box 
    if(monthsTextbox.getText().length()==monthsTextbox.getMaxLength()) 
     yearsTextbox.setFocus(true); 
} 


} 

現在，我想這個小部件表現爲一個單一的編輯器（如一個文本框），所以我可以通過使像XX/XX的字符串的值設置爲它/ xxxx。

的問題是：哪一個接口，我需要落實和方法做我需要重寫來實現這一目標？ 在編輯器框架中使用哪些方法來設置/獲取編輯器的值？

我將需要採取給定的字符串（可能傳遞像setValue（）方法），將其分成3部分，並將每個部分分配到正確的文本框。對於getValue（）方法同樣如此。

感謝您的幫助

[更新]

好吧，我實現了這兩種的HasValue和IsEditor接口如下：

public class DateMaskWidget extends Composite implements HasValue<String>, 

IsEditor<ValueBoxEditor<String>> { 

private static DateMaskWidgetUiBinder uiBinder = GWT 
     .create(DateMaskWidgetUiBinder.class); 

interface DateMaskWidgetUiBinder extends UiBinder<Widget, DateMaskWidget> { 
} 



public DateMaskWidget() { 
    initWidget(uiBinder.createAndBindUi(this)); 


} 


//...............other code ................... 


@Override 
public HandlerRegistration addValueChangeHandler(
     ValueChangeHandler<String> handler) { 

    //TODO add code here 
} 

@Override 
public ValueBoxEditor<String> asEditor() { 
      //TODO add code here 

    return null; 
} 

@Override 
public String getValue() { 
    String value=""; 


value+=this.daysTextbox.getValue()+"/"+ 
this.monthsTextbox.getValue()+"/"+this.yearsTextbox.getValue(); 

    return value; 
} 

@Override 
public void setValue(String value) { 
    String[] values = value.split("/"); 
    this.daysTextbox.setValue(values[0]); 
    this.monthsTextbox.setValue(values[1]); 
    this.yearsTextbox.setValue(values[2]); 
    System.out.println("Set Value:"+value); 
} 

@Override 
public void setValue(String value, boolean fireEvents) { 
    //TODO add code here 
} 

}

現在的問題是應該怎樣我在這裏添加asEditor（）和addValueChangeHandler（）？

asEditor（）需要返回一個ValueBoxEditor，但不知道如何實現這個。

再次感謝

Answer 1

在widget.You實現HasValue<String>可以addValueChangeHandler了。

Answer 2

嘗試實現相同的接口爲原來的文本框：

IsEditor<ValueBoxEditor<java.lang.String>> 

編輯器框架將使用ValueBoxEditor.getValue()和ValueBoxEditor.setValue(...)方法。

Answer 3

好了，四處尋找到TextBox的GWT源代碼，它擴展了一些其他類/工具後，這裏是我想出了：

public class DateMaskWidget extends Composite implements HasValue<String>, 
IsEditor<TakesValueEditor<String>> { 

private static DateMaskWidgetUiBinder uiBinder = GWT 
     .create(DateMaskWidgetUiBinder.class); 

interface DateMaskWidgetUiBinder extends UiBinder<Widget, DateMaskWidget> { 
} 

@UiField 
TextBox daysTextbox; 
@UiField 
TextBox monthsTextbox; 
@UiField 
TextBox yearsTextbox; 

private TakesValueEditor<String> editor; 
private boolean valueChangeHandlerInitialized; 

public DateMaskWidget() { 
    initWidget(uiBinder.createAndBindUi(this)); 

    daysTextbox.setMaxLength(2); 
    monthsTextbox.setMaxLength(2); 
    yearsTextbox.setMaxLength(4); 
} 

@UiHandler("daysTextbox") 
void onKeyUp(KeyUpEvent event) 
{ 
    //if 2 chars were entered focus the next box 
    if(daysTextbox.getText().length()==daysTextbox.getMaxLength()) 
     monthsTextbox.setFocus(true); 
} 
@UiHandler("monthsTextbox") 
void onKeyUp2(KeyUpEvent event) 
{ 
    //if 2 chars were entered focus the next box 
    if(monthsTextbox.getText().length()==monthsTextbox.getMaxLength()) 
     yearsTextbox.setFocus(true); 
} 


public HandlerRegistration addChangeHandler(ChangeHandler handler) { 
    return addDomHandler(handler, ChangeEvent.getType()); 
    } 

@Override 
    public HandlerRegistration addValueChangeHandler(ValueChangeHandler<String> 
handler) { 
     // Initialization code 
     if (!valueChangeHandlerInitialized) { 
      valueChangeHandlerInitialized = true; 
      addChangeHandler(new ChangeHandler() { 
      public void onChange(ChangeEvent event) { 
       ValueChangeEvent.fire(DateMaskWidget.this, getValue()); 
      } 
      }); 
     } 
     return addHandler(handler, ValueChangeEvent.getType()); 
     } 



@Override 
public String getValue() { 
    String value=""; 
    value+=this.daysTextbox.getValue()+"/"+ 
       this.monthsTextbox.getValue()+"/"+this.yearsTextbox.getValue(); 
    return value; 
} 

@Override 
public void setValue(String value) { 
    String[] values = value.split("/"); 
    if(values.length==3) 
    { 
     this.daysTextbox.setValue(values[0]); 
     this.monthsTextbox.setValue(values[1]); 
     this.yearsTextbox.setValue(values[2]); 
    } 
    else 
    { 
     this.daysTextbox.setValue(""); 
     this.monthsTextbox.setValue(""); 
     this.yearsTextbox.setValue(""); 
    } 
    System.out.println("Set Value:"+value); 
} 

@Override 
public void setValue(String value, boolean fireEvents) { 
    setValue(value); 
    if(fireEvents) 
     ValueChangeEvent.fire(this, value); 
} 

@Override 
public TakesValueEditor<String> asEditor() { 
    if (editor == null) { 
      editor = ValueBoxEditor.of(this); 


     } 
     return editor; 
} 





}