リストの表示
続いて、<select>タグなどで表示されるリストについてです。Echo3では、リストは、HTMLでは<select>タグを使って作成しますが、Echoの場合、「1項目だけが表示されるメニュー」と「ずらっと項目が並んで表示されるリスト」の両方がクラスとして用意されています。
ポップアップメニューのように項目を選ぶのは「SelectField」、一覧リストから選ぶのは「ListBox」というクラスとして用意されています。では、これもサンプルを挙げておきましょう。makeContentメソッドを修正して動かしてください。
void makeContent(Component component){ String[] data = new String[]{"Windows","Mac OS","Linux"}; SelectField selfield = new SelectField(data); selfield.addActionListener(new ActionListener(){ private static final long serialVersionUID = 1L; @Override public void actionPerformed(ActionEvent ev) { SelectField f = (SelectField)ev.getSource(); showDialog(f.getSelectedItem().toString()); } }); component.add(selfield); String[] data2 = new String[]{"iphone","android","windows phone"}; ListBox list = new ListBox(data2); list.setSelectionMode(ListSelectionModel.MULTIPLE_SELECTION); list.addActionListener(new ActionListener(){ private static final long serialVersionUID = 1L; @Override public void actionPerformed(ActionEvent ev) { ListBox b = (ListBox)ev.getSource(); Object[] vals = b.getSelectedValues(); String s = ""; for(Object val : vals) s += val.toString() + ", "; showDialog(s); } }); component.add(list); System.out.println(list.getModel().get(0)); }
SelectField/ListBox共に、引数にObject配列(単にテキストを表示するだけなので、ここではString配列)を渡してインスタンスを作成します。いずれもクリックした時の動作はActionListenerで処理しています。
ここではSelectedFieldは単項目のみ選択可能に、ListBoxは複数項目選択可能にしています。単項目のみの場合、コンポーネントの「getSelectedItem」で選択された項目のObjectを取得できます。
複数項目を選択可能にする場合、まず「setSelectionMode」を使って選択モードを変更する必要があります。これはListSelectionModelクラスに用意されているクラスフィールドを使って指定します。ここではMULTIPLE_SELECTIONを指定し、複数項目選択可能にしています。また、選択された項目は「getSelectedValues」を使って、現在選択されている項目すべてを配列にまとめたObject配列を得ることができます。こうして取得した配列から順に要素を取り出して処理していけばよいでしょう。
テーブルの利用
データの表示などを行う際、必要となるのがテーブルでしょう。テーブルはTableクラスとしてEchoに用意されています。が、実際にテーブルを使いこなすためには、この他にも必要となるものがあります。それは以下のようなものです。
- モデルクラス――テーブルに表示されるデータを管理するためのものです。AbstractTableModelという抽象クラスが用意されており、これを継承して作成することができます。
- レンダラークラス――テーブルに表示される各セルの表示(レンダリング)を行うためのものです。TableCellRendererというインターフェイスが用意されており、これを実装して作成することができます。
これらのクラスを用意し、Tableコンポーネントに組み込んで利用することで、必要なデータを指定された形で表示させることが可能となります。なおレンダラークラスは、ヘッダー用とデータ表示用の2つを設定することができます。ヘッダーの表示をカスタマイズしたければ、これも用意しておくとよいでしょう。