Question

我正在尝试创建一个窗口小部件，该窗口小部件将以与本机值不同的格式呈现其关联值。例如，如果值（在数据库中）是“abcde”，我想在屏幕上显示“ab.cd.e”，如果用户键入“abcde”，我还想显示“ab.cd.e” ”。如果用户输入“ab.cd.e”，那么我想在数据库中只存储“abcde”。我在GWT editor framework内这样做。我试图使用这个答案的建议：Converting String to BigDecimal in GWT，但我无法让它发挥作用。这是我在UiBinder文件中的内容：

<g:TextBox ui:field='myTextBox' width='300px'/>

在关联的Java单元中：

@UiField
TextBox myTextBox;
...
initWidget(binder.createAndBindUi(this));
new MyValueBox(myTextBox);

这是MyValueBox小部件的定义：

public class MyValueBox extends ValueBox<String> {

//=========================================================================

public static class MyRenderer extends AbstractRenderer<String> {

private static MyRenderer _instance;

private static MyRenderer instance() {
  if (_instance == null) {
    _instance = new MyRenderer();
  }
  return _instance;
}

@Override
public String render(final String text) {
  // validation is required before doing this!
  return text.substring(0, 2) + "." + text.substring(2, 4) + "."
         + text.substring(4);
}

}

//=========================================================================

public static class MyParser implements Parser<String> {

private static MyParser _instance;

private static MyParser instance() {
  if (_instance == null) {
    _instance = new MyParser();
  }
  return _instance;
}

@Override
public String parse(final CharSequence text) throws ParseException {
  return "parsed string";
}

}

//=========================================================================

public MyValueBox(final TextBox valueBox) {
  super(valueBox.getElement(), MyRenderer.instance(), MyParser.instance());
}

}

正如您所看到的，我正在尝试包装使用TextBox创建的UiBinder，但我没有看到任何效果。我知道我错过了一些非常简单的事情，并且有一种更简单的方法来实现这一点，但我很难过。谢谢你的任何建议！

- 编辑 -

我最终决定使用CellWidget，除了在面板上使用它之外，还有一个额外的好处，即我可以在单元格小部件（例如，DataGrid）中使用此代码。我在这里记录了我的解决方案：GWT: A Custom Cell Example

Answer 1

您缺少在UIBinder中声明自定义Widget。您需要将包绑定到xml声明，将您的包添加到标准声明（称为'g'）：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:myurn='urn:import:mypackage'>

然后，您应该在UIBinder中声明TextBox时使用您声明的urn和类的名称：

<myurn:MyValueBox ui:field='myTextBox' width='300px'/>

== EDIT =====

您应该扩展ValueBoxBase而不是包装TextBox，这样您就可以按照预期控制Renderer和Parser，现在您可以在UIBinder中将自定义框用作窗口小部件：

public class CustomText extends ValueBoxBase<String>
{
    public CustomText() {
        super(Document.get().createTextInputElement(),CustomRenderer.instance(),
           CustomParser.instance());
      }

    private static class CustomRenderer extends AbstractRenderer<String>
    {
        private static CustomRenderer INSTANCE;

        public static CustomRenderer instance() {    
            if (INSTANCE == null) {
                INSTANCE = new CustomRenderer();
            }
            return INSTANCE;
        }

        @Override
        public String render(String text)
        {
            return "rendered string";
        }    
    }

    private static class CustomParser implements Parser<String>
    {
        private static CustomParser INSTANCE;

        public static CustomParser instance() {
            if (INSTANCE == null) {
                INSTANCE = new CustomParser();
            }
            return INSTANCE;
        }

        @Override
        public String parse(CharSequence text) throws ParseException
        {
            return "parsed string";
        }

    }
}

GWT中的自定义渲染器

1 个答案: