How to create a gwt composite component with children using uibinder?

Question

I would like to create a component to decorate its children, such as:

mycomponent.ui.xml:

<g:FlowPanel addStyleNames="myStyle">
    <!-- how can i render children ? -->
</g:FlowPanel>

and then others can use:

<myapp:mycomponent>
    <g:Label>Decorated child</g:Label>
</myapp:mycomponent>

How can i render the children in uibinder? (or in Java, if i must)

score 33 · Accepted Answer · answered Nov 14 '10 at 09:14

Let MyComponent implement the HasWidgets interface for adding/removing child widgets.

The MyComponent.ui.xml looks as simple as

<g:FlowPanel ui:field="main" />

while you delegate the methods specified ind HasWidgets to the FlowPanel:

public class MyComponent extends Composite implements HasWidgets {

    private static MyComponentUiBinder uiBinder = GWT.create(MyComponentUiBinder.class);

    interface MyComponentUiBinder extends UiBinder<Widget, MyComponent> {}

    @UiField
    FlowPanel main;

    public MyComponent() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @Override
    public void add(Widget w) {
        main.add(w);
    }

    @Override
    public void clear() {
        main.clear();
    }

    @Override
    public Iterator<Widget> iterator() {
        return main.iterator();
    } 

    @Override
    public boolean remove(Widget w) {
        return main.remove(w);
    }
}

Calling

<M:MyComponent>
    <g:Label text="some text" />
</M:MyComponent>

will work this way.

Is there any performance hit for not Injecting the MyComponentUiBinder, instead of GWT.create-ing it? — cellepo, Nov 07 '15 at 02:39

score 1 · Answer 2 · answered Nov 13 '10 at 23:38

Using this XML:

<myapp:mycomponent>
    <g:Label>Decorated child</g:Label> 
</myapp:mycomponent>

will instantiate MyComponent and then call MyComponent.add(label). All you have to do is override .add(..) in your class MyComponent and apply any styles that you want to passed components.

How to create a gwt composite component with children using uibinder?

2 Answers2

Linked