2011年6月25日土曜日

GWTのCellBrowserを使ってみる

GWTのCellBrowserを始めて使ってみる。
これは、階層構造のデータをツリー風に表示するときに便利。

こんな感じに動作するコンポーネントです。

http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellBrowser

まずは、これを理解するためには、Javadocに書かれているサンプルを
動かすのが一番いいと思う。

http://google-web-toolkit.googlecode.com/svn/javadoc/2.3/com/google/gwt/user/cellview/client/CellBrowser.html

ここでのポイントは、getNodeInfoの記述です。


ここに、選択されたときに次の階層に何を表示するかというのを記載します。


valueがnullの時は第一階層というのもポイント。


もう一つのポイントが、



public boolean isLeaf(Object value) 
という部分。これが最後の階層かどうかというのを返してあげます。


ただ、この例では、最初のCellBrowserをnewした時には第一階層が決定していないと
いけません。

また、通常の場面では、クリックしたときに下位階層のデータを取得して
表示したいというような場合があると思いますが、その場合には、サンプルの


ListDataProvider


というのを利用する代わりに

AsyncDataProvider

というのを利用することになります。

こいつを使うと非同期でデータを取得し終わった後に、

updateRowCount(int size, boolean exact)

updateRowData(int start, java.util.List values)

を呼び出してあげることにより、CellBrowserにデータが非同期表示されるようになります。

AsyncDataProviderのサンプルもJavadocが参考になった。

http://google-web-toolkit.googlecode.com/svn/javadoc/2.3/com/google/gwt/view/client/AsyncDataProvider.html


このサンプルでは、RPCの部分を仮想的に書いているのでやや分かりにくいかもしれないけども
ポイントは、


updateRowData(start, newData);
の部分でリストを更新しているということになります。