GWTのUIBinderでコンポーネント化を試みる

GWTのUIBinderは、ただ単にUIの記述が楽になると言うだけでなく、UIの部品化（コンポーネント化）を容易に実現することができます。 具体的に言えば、UIBinderにて設計したインタフェース部分は、また別のUIBinderのところで呼び出すことができます。
例えば、あるページの本体構造を定義するMainFormのUI定義ファイルを以下のように定義されていたとします。

MainForm.ui.xml

view plainprint?

1. <g:verticalpanel>  
2.     <g:label>header</g:label>  
3.     <g:horizontalpanel>  
4.         <g:label>left</g:label>  
5.         <g:label>center</g:label>  
6.         <g:label>right</g:label>  
7.     </g:horizontalpanel>  
8. </g:verticalpanel>  

    
        header
        
            left
            center
            right
        
    

こ の例では、「heder」の領域とその下に、「left」「center」「right」にエリアが並ぶことになります（便宜上、ラベルを配置しています が、、、）。

このヘッダ領域に表示する内容を別のUIBinderで下記のように設計したとします。
HeaderArea.ui.xml

view plainprint?

1. <ui:uibinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">  
2.     <ui:style>  
3.     </ui:style>  
4.     <g:htmlpanel>  
5.         <h2>試作システムのヘッダ</h2>    </g:htmlpanel>  
6. </ui:uibinder>  

    
    
    
        
試作システムのヘッダ
    

このようにUIBinderで定 義したUIを一部は、下記のようにすることでMainFormに記述することができます。

MainForm.ui.xml（変更後）

view plainprint?

1. <ui:uibinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:o="urn:import:org.ochilab.client.widget">  
2.     <ui:style>  
3.     </ui:style>  
4.     <g:verticalpanel>  
5.         <o:headerarea>  
6.         <g:horizontalpanel>  
7.             <g:label>left</g:label>  
8.             <g:label>center</g:label>  
9.             <g:label>right</g:label>  
10.         </g:horizontalpanel>  
11.     </o:headerarea></g:verticalpanel>  
12. </ui:uibinder>  

    
    
    
        
        
            left
            center
            right
        
    

こ のように、定義したUIBinderのクラスのパッケージをimportによりXMLのNamespaceに関連付け、利用するクラス名をタグ名として記 述することで、呼び出すことができます。こ れは、インタフェース部分の分業をはかる際に非常に強力になりますので、そういった意味でもUIBinderはおすすめだと思います。