GWT中的自定义渲染器

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

} 

正如你所看到的，我试图包装使用UiBinder创建的TextBox，但我没有看到任何效果。我知道我错过了一件非常简单的事情，而且有一种更简单的方法来完成这个任务，但我很难过。谢谢你的任何建议！

- 编辑 -

我最终决定使用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的：

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

======编辑=====

你有心你应该扩展ValueBoxBase而不是包装文本框，这样你会得到控制的渲染器和分析器，现在您将能够使用您的自定义框作为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"; 
     } 

    } 
}