TreePanelを使ってみる

前に一度Ext GWTを使おうと思っていた時期があったがデモのソースやjavadoc見てもよくわからなかったので挫折した経験がある。しかし、もう一度読んでみてなんとなく使えるようになった。今回はTreePanelについて書いておく。デモのソースではTreeを使ってるけどDeprecatedなので

TreePanelのコンストラクタは１つでTreeStoreを引数にとるので、TreeStoreを用意する。このクラスはモデルを管理するクラスで、モデルの追加、取得、削除ができる。１つのノードにつき１つのモデルらしい。TreeStoreがSwingのTreeModelにあたる部分なので混乱してた。とりあえずコンストラクタを呼び出す。GenericsでModelDataを実装したクラスを指定する。

TreeStore<BaseTreeModel> store = new TreeStore<BaseTreeModel>();

今回はExt GWTに含まれてるBaseTreeModelを利用する。set、getが用意されてるので値を渡したり取得する。setで名前と値を設定して、getで名前をしていして値を取得する。名前はString固定で値はGenerics。クラスではなくメソッドで型を指定する。setのときは型を明示する必要は無いが、getのときは型を指定する。

BaseTreeModel root = new BaseTreeModel();

//設定
root.set("name", "OS");

//取得・Generics
String gValue = root.<Srting>get("name");
//取得・キャスト
String cValue = (String)root.get("name");

単純に取得するときはキャストの方が見た目てきにわかりやすいと個人的に思っている。慣れの問題かもしれないが…。

階層を持たせる場合はaddメソッドを使う

BaseTreeModel windows = new BaseTreeModel();
windows.set("name", "Windows");

//追加
root.add(windows);

モデルができたらモデルをTreeStoreに追加する。TreeStore#addは追加するモデルと子を持てるかどうかを指定する。子を持つモデルを指定して、子を持てるかどうかをfalseにすると、実行はされるが子を展開できないもよう。

store.add(root, true);

最後にTreePanelを作成する。そのままだと何も表示してくれないので、TreePanel#setDisplayPropertyでモデルのsetで使った名前を設定する。

TreePanel<BaseTreeModel> tree = new TreePanel<BaseTreeModel>(store);
tree.setDisplayProperty("name");

実行例

最後にウインドウを表示するまでのソースコードを載せる

import com.google.gwt.core.client.EntryPoint;

import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.data.BaseTreeModel;

public class MainEntryPoint implements EntryPoint {
    public MainEntryPoint() {
    }

    public void onModuleLoad() {
        Window window = new Window();
        window.setHeading("Tree");
        window.setSize(300, 300);
        window.setMaximizable(true);
        window.setMinimizable(true);

        BaseTreeModel root = new BaseTreeModel();
        root.set("name", "OS");
        root.<String>get("name");

        BaseTreeModel windows = new BaseTreeModel();
        windows.set("name", "Windows");
        root.add(windows);

        BaseTreeModel linux = new BaseTreeModel();
        linux.set("name", "Linux");
        root.add(linux);

        TreeStore<BaseTreeModel> store = new TreeStore<BaseTreeModel>();
        store.add(root, true);

        TreePanel<BaseTreeModel> tree = new TreePanel<BaseTreeModel>(store);
        tree.setDisplayProperty("name");

        window.add(tree);
        window.show();
    }
}