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

    } 
}