GWT Widgetコンポーネント化

Google Web Toolkitのウィジェットコンポーネント化サンプルを紹介します。

UiBinderを利用して、ウェブコンポーネント（WebUserControl）の再利用性と拡張性を説明します。

まずはウェブウィジェットを定義します。

BHelo.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .important {
            font-weight: bold;
        }
    </ui:style>
    <ui:style field="OtherCss">
        .important {
            color: red;
        }
    </ui:style>
    <g:HTMLPanel>
        Hello,
        <g:Button styleName="{style.important}" ui:field="button" />
        <g:Button styleName="{OtherCss.important}" ui:field="button2">Button2</g:Button>
    </g:HTMLPanel>
</ui:UiBinder> 

次はAHelo.ui.xmlウィジェットを定義します、このウェイジェットにBHeloウィジェットを参照します。
AHelo.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:my="urn:import:gwtsample.client">
    <ui:style>
        .important {
            font-weight: bold;
        }
    </ui:style>
    <g:HTMLPanel>
        Hello,
        <g:Button styleName="{style.important}" ui:field="button" />
        <my:BHelo ui:field="bhelo01"></my:BHelo>
    </g:HTMLPanel>
</ui:UiBinder>

ご注意をいただきたいところは赤色部分です、この方法で他のウィジェットを当ウィジェットに参照できます。