CodeZine(コードジン)

特集ページ一覧

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

第21回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/08/26 14:00

目次

タブボックス

 いくつかの表示をタブで切り替えながら表示する「タブパネル」は、多くのプラットフォームで採用されています。これを実現するのが、<tabbox>というタグです。これは、タブの情報とそれぞれのタブに表示するパネルを設定することで、自動的に切り替えタブを持つパネルを作成できます。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※TABBOX</label>
  <separator />
  <tabbox width="250px" height="100px">
    <tabs>
      <tab label="最初"/>
      <tab label="真ん中"/>
      <tab label="最後"/>
    </tabs>
    <tabpanels>
      <tabpanel>
        <label>最初のタブです。</label>
      </tabpanel>
      <tabpanel>
        <label>真ん中のタブです。</label>
      </tabpanel>
      <tabpanel>
        <label>最後のタブです。</label>
      </tabpanel>
    </tabpanels>
  </tabbox>
  <separator /><separator />
</window>
<tabbox>によるタブパネル
<tabbox>によるタブパネル

 ここでは3つのタブを用意してみました。タブをクリックすれば、表示が切り替わります。タグを記述するだけなので、ノンプログラミングで作成できることが分かるでしょう。

 <tabbox>は、内部に<tabs>と<tabpanels>という2つのタグを持っています。<tabs>は、タブの設定をまとめるもので、この中に<tab>タグとして表示するタブの情報を設定します。タブをクリックしたときに表示される内容を用意するのが<tabpanels>で、この中に<tabpanel>というタグを使って各タブ用の表示を作成します。<tabpanel>はコンテナであり、この中に自由にコンポーネントを配置できます。

moldによるアコーディオンボックス

 タブパネルと似たような役割を果たすもので、最近、Webなどで広く使われるようになったインターフェースに「アコーディオンパネル」があります。タイトルをクリックすると、アコーディオンのようにその項目の表示が広がって表示される、というものです。

 ZKには、アコーディオンパネルのための専用コンポーネントは用意されていません。しかし、実はタブボックスを使ってアコーディオンパネルを作ることができます。

<tabbox width="250px" height="200px" mold="accordion">
moldを変更し、アコーディオンにしたタブボックス
moldを変更し、アコーディオンにしたタブボックス

 先ほどの<tabbox>のタグを上のように修正してみてください。タブパネルの表示が、そのままアコーディオンパネルに変わります。ここでは「mold」という属性に"accordion"を指定しています。これだけでアコーディオンパネルを作ることができます。

 アコーディオンパネルとタブパネルは、「いくつかのタブがあり、タブをクリックして選択すると、そのタブの内容が表示される」という機能自体はまったく同じです。そのため、これは別のコンポーネントというより、「同じコンポーネントで、表し方が違っているだけ」と考えた方が自然でしょう。moldは、こうした「あるコンポーネントの、異なる見せ方」を示すためのものです。

2種類のリストボックス

 アコーディオンパネル以外にも、moldを利用するコンポーネントはあります。例えば、一覧リストを表示するための<listbox>というコンポーネントがありますが、これはmoldによって、HTMLのリストとして表現させることもできるようになります。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※TABBOX</label>
  <separator />
  <listbox width="250px" mold="default">
    <listitem label="最初"/>
    <listitem label="真ん中"/>
    <listitem label="最後"/>
  </listbox>
  <separator />
  <listbox width="250px" mold="select">
    <listitem label="最初"/>
    <listitem label="真ん中"/>
    <listitem label="最後"/>
  </listbox>
  <separator />
</window>
moldを使って表示した2種類の<listbox>タグ
moldを使って表示した2種類の<listbox>タグ

 これは、同じ<listbox>を、片方はmold="default"、もう一方はmold="select"に設定したものです。前者は後述する<grid>によるテーブル表示と同じような形でリスト表示され、後者はHTMLの<select>タグによるコンボボックスとして表示されます。moldによって、表現の仕方が変わっていることが分かるでしょう。

 <listbox>は、表示する項目を<listitem>というタグとして内部に用意します。これで、いくつかの選択項目を用意して選ぶインターフェイスが作成できます。多数の項目を選択するためのものとして覚えておきたいコンポーネントです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

もっと読む

著者プロフィール

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5