UIBinderを使ってみる

GWTにはUIBinderというものがあり、これを使うとコンポーネントのコードとレイアウトを分離できるようです。そういうの好きなので試してみます。
Declarative Layout with UiBinder - Google Web Toolkit - Google Code

プラグインから作成可能

右クリックしてNew>UIBinderで作成できます。
GWT WidgetsとHTMLいずれかの選択ができました。

GWT Widetsの場合

com.google.gwt.user.client.uiをインポートして、g:なんたらとしていろいろタグを呼び出しています。

<!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>
	<g:HTMLPanel>
		Hello,
		<g:Button styleName="{style.important}" ui:field="button" />
	</g:HTMLPanel>
</ui:UiBinder> 

HTMLの場合

こちらは、見慣れたhtmlタグです。デザイナーと分業するようなときはこっちが良いのかも。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
	<ui:style>
		.important {
			font-weight: bold;
		}
	</ui:style>
	<div>
		Hello,
		<span class="{style.important}" ui:field="nameSpan" />
	</div>
</ui:UiBinder>

いずれの場合も、ui:fieldという属性を定義すると、それをjavaファイルから@UIFieldというアノテーションで参照できるようです。

ui.xmlと.javaのひも付け

ui.xmlとjavaは、同名なら勝手にひもづけてくれるようです。

　また、ui.xmlとJavaのファイルの紐付けは同じパッケージ内の同じファイル名であれば、必要ないようです。もしファイル名が異なる場合は、Javaのソースに定義されているinterface上にアノテーションで　@UiTemplate("ファイル名.ui.xml")　と定義すれば紐付けされます。
Song of Cloud: Eclipse PluginではじめてのGWT UiBinder