[컴][웹] GWT 에서 자신만의 Widget 만들기 - child tag 를 갖는 방법

GWT how to make your own custom Widget

Child tag 를 갖는 방법

child tag 를 갖게 하는 방법은 2가지가 있다.@UiChild 와 HasWidget interface 를 이용하는 것이다.

@UiChild(tagname="popup")

UiChild 를 이용하면 아래와 같은 모습의 tag 를 만들 수 있다.

<u:SelectBoxButton ui:field="button">
    <u:popupPanel>
        <u2:PeriodPopupPanel autoHide="true"></u2:PeriodPopupPanel>
    </u:popupPanel>
</u:SelectBoxButton>

@UiChild(tagname = "popupPanel")
public void addPopupPanel(SelectBoxPopupPanel popupPanel) {
    this.popupPanel = popupPanel;
    this.popupPanel.addAutoHidePartner(this.getElement());
    this.addClickHandler(this);

}

HasWidget

HasWidget 을 이용하면 좀 더 자연스러운 tag 를 UiBinder 에서 사용할 수 있다.

<u:SelectBoxButton ui:field="button">
    <u2:PeriodPopupPanel autoHide="true"></u2:PeriodPopupPanel>
</u:SelectBoxButton>

public class SelectBoxButton extends Button implements ClickHandler, HasWidgets {

  ...

    ////////////////////////////////////////////////////////////
    ////
    ////    implements HasWidget
    ////
    @Override
    public void add(Widget w) {
        this.popupPanel = (SelectBoxPopupPanel)w;   // type checking
        this.popupPanel.addAutoHidePartner(this.getElement());
    }

    @Override
    public void clear() {
        this.popupPanel = null;
    }

    @Override
    public Iterator iterator() {
        return null;
    }

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

Source codes

• UiChild example Source code
• HasWidget example Source code

Reference

1. http://stackoverflow.com/questions/8375480/gwt-custom-widget-with-child-elements-configuration-in-uibinder-like-custombutt
2. http://stackoverflow.com/questions/4175216/how-to-create-a-gwt-composite-component-with-children-using-uibinder