创建自定义小部件并允许在UiBinder中嵌套子元素 [英] Create custom widget and allow nested sub-elements in UiBinder

问题描述

我想创建一个自定义小部件，它允许在UiBinder中指定其嵌套的子元素。就像 DockPanel 可以有南，北等。我查看了 DockPanel 的源代码，但还未找到解决方案。

 <我：LeftRightToolbar> 
< left> 
< g：Button /> 
< / left> 
 
< right> 
< g：Button /> 
< / right> 
< / my：LeftRightToolbar> 
  

更新：可以在我的自定义<$ c下有多个子节点$ c>< left> 和< right> ？第一件事 - < p>如果我添加了多个小部件，代码不会编译。 left> 和< right> 必须位于与 LeftRightToolbar 相同的命名空间中，所以它应该是< my：left> 和< my：right> 。

其次，您需要使用 LeftRightToolbar 中注释两个方法/latest/com/google/gwt/uibinder/client/UiChild.htmlrel =nofollow> @UiChild 注释：

  @UiChild（tagname =left）
 void addToLeft（Widget Widget）{
 left 。新增（插件）; 
 
 $ b $ @ @iChild（tagname =right）
 void addToRight（Widget Widget）{
 right.add（Widget）; 
} 
  

方法 addToLeft 将被调用以添加在< my：left> 标签中指定的小部件。 < my：right> 标记由 addToRight 。

处理。

如果您需要将多个小部件添加到自定义标签中，则应该在其中放置一个容器，如 FlowPanel 。

I want to create a custom widget that allows to specify its nested sub-elements in UiBinder. Just like DockPanel can have south, north, etc. I looked at the source code of DockPanel but haven't found a solution.

<my:LeftRightToolbar>
    <left>
        <g:Button/>
    </left>

    <right>
        <g:Button/>
    </right>        
</my:LeftRightToolbar>

UPDATE: Can I have multiple sub nodes under my custom <left> and <right>? The code doesn't compile if I add more than one widget.

解决方案

First thing - <left> and <right> have to be in the same namespace as LeftRightToolbar, so it should be <my:left> and <my:right>.

Secondly, you need to annotate two methods in LeftRightToolbar with the @UiChild annotation:

@UiChild(tagname = "left")
void addToLeft(Widget widget) {
    left.add(widget);
}

@UiChild(tagname = "right")
void addToRight(Widget widget) {
    right.add(widget);
}

The method addToLeft will be called to add the widget specified in <my:left> tags. The <my:right> tag is handled by addToRight.

If you need to add multiple widgets to your custom tags, you should put a container in them, like FlowPanel.

这篇关于创建自定义小部件并允许在UiBinder中嵌套子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！