Question

我有一个由3个TextBox组成的复合小部件，它充当“日期掩码”字段，如： [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);
}


}

现在我希望这个小部件表现为单个编辑器（就像一个TextBox），所以我可以通过传递一个像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

在您的小部件中实施HasValue<String>。您也可以添加ValueChangeHandler。

Answer 2

尝试实现与原始TextBox相同的界面：

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;
}





}

GWT自定义复合窗口小部件，表现为单个编辑器

3 个答案: