SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Javaで軽快に使える「軽量フレームワーク」特集

Javaで軽快に使える「軽量フレームワーク」特集
~クールなGUIをシンプルなスクリプトで作成するZK(2)

第21回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダイナミックなデータのバインド

 <grid>のように、多くのデータを扱うコンポーネントの場合、最初から静的にデータを持たせることの方が少ないでしょう。データの追加や削除を自由に行うことができないと困るので、必要に応じてダイナミックに表示データを扱えるようにしなければ実用的とは言えません。

 これにはいくつかの方法があるのですが、今回の例のように複数の列を持つデータの場合、データの構造とレンダリング方法をそれぞれ<grid>が理解できなければ正しくデータを扱うことができません。

 <grid>には、「model」と「rowRenderer」という属性が用意されています。前者は表示するデータのモデルで、これはListModelというインターフェイスを実装したクラスを用意して使います。またrowRendererは行のレンダリングを行うためのもので、これはRowRendererというインターフェイスを実装したクラスを用意します。では、実際にやってみましょう。

<?page title="Index Page"?>
<zk>
  <zscript>
    class SampleRowData {
      private String name;
      private String mail;
      private String tel;

      public SampleRowData(String s1,String s2,String s3){
        name = s1;
        mail = s2;
        tel = s3;
      }

      public String getName(){ return name; }
      public void setName(String s){ name = s; }
      public String getMail(){ return mail; }
      public void setMail(String s){ mail = s; }
      public String getTel(){ return tel; }
      public void setTel(String s){ tel = s; }
    }
    class SampleRowRenderer implements RowRenderer {
      public void render(Row row, java.lang.Object obj){
        SampleRowData data = (SampleRowData)obj;
        new Label(data.getName()).setParent(row);
        new Label(data.getMail()).setParent(row);
        new Label(data.getTel()).setParent(row);
      }
    }
    // モデルとレンダラーの作成
    ListModelList modellist = new ListModelList(new ArrayList());
    modellist.add(new SampleRowData("つやの","tuyano@mac.com","090-9999-9999"));
    modellist.add(new SampleRowData("太郎","taro@yamada.com","080-8888-8888"));
    modellist.add(new SampleRowData("花子","hanako@tanaka.com","070-7777-7777"));
    modellist.add(new SampleRowData("イチロー","ichiro@suzuki.com","060-6666-6666"));
    modellist.add(new SampleRowData("サチコ","sachi@ko.com","050-5555-5555"));
    SampleRowRenderer renderer = new SampleRowRenderer();
  </zscript>
  <window title="Welcome to ZK!" border="normal" width="500px">
    <label>※入力フォームのレイアウト</label>
    <separator />
    <grid width="90%" model="${modellist}" rowRenderer="${renderer}">
      <columns sizable="true">
        <column label="名前" />
        <column label="メールアドレス" />
        <column label="電話番号" />
      </columns>
    </grid>
    <separator /><separator />
  </window>
</zk>
modelとrowRendererを利用してデータを表示させる
modelとrowRendererを利用してデータを表示させる

 ここでは、表示データを管理する「SampleRowData」というクラスを用意し、これを「ListModelList」というモデル用クラスに組み込みモデルとして利用しています。またSampleRowRendererというレンダラークラスを用意し、これでSampleRowDataの表示を行わせています。

 まず、モデルから見ていきましょう。今回は、名前・メールアドレス・電話番号といったものを扱いますので、これらの値をプロパティにもつSampleRowDataクラスを定義しています。そして、リストのモデル(ListModel)を管理するListModelListというクラスを作成し、SampleRowDataを組み込んでいきます。

ListModelList modellist = new ListModelList(new ArrayList());
modellist.add(new SampleRowData("つやの","tuyano@mac.com","090-9999-9999"));
……以下略……

 ListModelListは、モデルであるListModelと、多数のデータを管理するためのListインターフェイスを実装しています。つまり、ListModelとして扱えると同時に、Listとして保管データの管理を行うことだできるようになっているのです。インスタンス作成時に、データ保管用のArrayListを引数に渡しておき、以後、addメソッドでデータを追加しています。

 続いて、レンダラーです。レンダラーは、RowRendererインターフェイスを継承します。これは「render」というメソッドをもっており、ここでデータ表示の際のレンダリング処理を行ないます。メソッドでは、引数として表示する行のRowインスタンスと、表示データ(ここではSampleRowDataインスタンス)が渡されます。表示データのオブジェクトから必要な値を取得し、それをもとに表示する内容を生成していくわけです。ここでは取り出したデータを、以下のようにしてRowに組み込んでいます。

new Label(表示データ).setParent(row);

 Labelインスタンスを作成し、その「setParent」を呼び出しています。これは、このコンポーネントが組み込まれる親を設定するもので、引数にrowを指定することで、このrow内にLabelが組み込まれることになります。こうして必要なデータを元にLabelを作成し、すべてrowに組み込むことで、データの表示を作成しているのです。

 ListModel(ここではListModelListですが)を利用することで、データをダイナミックに操作することができるようになります。また、必要に応じてデータを取得し表示すれば良いため、元データがデータベースにあろうがテキストファイルであろうが、関係なく表示に利用できるようになります。

まとめ

 今回は、コンポーネント類をまとめるコンテナ関係と、データを扱うためのコンポーネントを中心に説明しました。前回と今回で、ZKに用意されている主なコンポーネント類については一通り理解できたのではないでしょうか。このほかに、ツリー表示やメニュー関係などがまだ残っていますが、基本的なGUIはこれで大抵作れるようになったはずです。

 コンテナやデータ表示のためのコンポーネントというのは、タグだけでなく、処理の部分が多くなりがちです。しかし、ZKでは、なるべくタグだけで済むようにし、極力コードを書かずにGUIが構築できるよう設計されていることがよく分かります。例えば、表関係では横幅の調整などまで属性の設定だけで行うことができるようにしていたり、配列を元にデータを表示する場合もforEach属性で必要最小限のコードで済むようになっています。

 またコードを記述する際も、Java本来のコーディングであれば常にクラスを定義するところから始まりますが、グローバル関数の利用などによりなるべくシンプルなコードで済むようになっています。

 ZKはJavaベースとはいえ、各種言語でコードを記述できますから、これを「Javaのフレームワークである」と言い切ってしまう方が無理があります。「Javaも使える、スクリプト言語ベースのフレームワーク」と割り切り、気軽に利用するのが賢い使い方なのでしょう。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Javaで軽快に使える「軽量フレームワーク」特集連載記事一覧

もっと読む

この記事の著者

掌田 津耶乃(ショウダ ツヤノ)

三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5363 2010/08/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング