>> Visual Web Pack のほかのドキュメント

リストボックスコンポーネント

目次 -  ページの作成 -  リストボックスのプロパティーの定義と維持 -  リストボックスのプロパティーの初期化 -  リストボックスへのプロパティーのバインド -  リストボックスで選択された項目の表示 -  リストボックスの項目の追加および削除

このチュートリアルでは、次のテクノロジとリソースを使用します。

JavaServer Faces コンポーネント / Java EE プラットフォーム	Java EE 5* の場合、1.2 J2EE 1.4 の場合、1.1
Travel データベース	任意
BluePrints AJAX コンポーネントライブラリ	任意

* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。

このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

ページの作成

1. 新しいビジュアル Web アプリケーションプロジェクトを「ListExample」という名前で作成します。

   次の図に、このあとの手順で作成するページのプレビューを示します。

   図 1:サンプルページのデザイン

2. 「パレット」ウィンドウの「コンポーネント」タブにある「基本」セクションから「リストボックス」コンポーネントをドラッグし、ページにドロップします。次に、コンポーネントの右端をクリックしてドラッグし、幅を広げます。

   「アウトライン」ウィンドウに、「リストボックス」コンポーネントに関連付けられているコンポーネントが表示されます。リスト内のすべての項目は、「リストボックス」コンポーネント自体 (listbox1) によって追跡されます。リストボックスは listbox1DefaultOptions という不可視コンポーネントに関連付けられています。このコンポーネントには、リストボックスに表示される項目のリストが含まれます。また、このコンポーネントによって、リストボックスで選択された項目が追跡されます。

3. 「プロパティー」ウィンドウで、「リストボックス」コンポーネントの「multiple」プロパティーのチェックボックスを選択することにより、そのプロパティーを True に設定します。

   「multiple」プロパティーは、「プロパティー」ウィンドウの「データ」セクションの下にあります。True に設定すると、ユーザーはリストボックスで複数の項目を選択できるようになります。
4. 「パレット」から「ボタン」コンポーネントをドラッグし、リストボックスの右側のページ上にドロップします。ボタンのテキストを「送信」に変更します。

5. 「テキスト領域」コンポーネントをページ上にドラッグし、リストボックスの下にドロップします。次に、コンポーネントの幅をリストボックスと同じ幅にします。

   このテキスト領域には、リストボックス内で選択された項目を表示します。

リストボックスのプロパティーの定義と維持

1. 「アウトライン」ウィンドウで「SessionBean1」を右クリックして、ポップアップメニューから「追加」>「プロパティー」を選択します。

   注: 「追加」メニューが表示されない場合は、ポップアップメニューをいったん閉じてから再び開きます。

   「新規プロパティーパターン」ダイアログが表示されます。図 2 はその入力後の状態を示しています。このダイアログを使用して、セッション Bean のプロパティーを作成します。

   図 2:「新規プロパティーパターン」ダイアログ

2. 「名前」フィールドに「listOptions」と入力します。

3. 「型」フィールドに「Option[]」と入力します。

   注: Option クラスのインポート文は、次の節で追加します。

4. 「了解」をクリックしてプロパティーを作成します。

   listOptions 配列には、Option 型のオブジェクトが含まれます。各オブジェクトはリスト内のオプションを 1 つ表します。各オプションには、表示名と値があります。表示名は常に String 型です。値は任意の型のオブジェクトにできますが、この例では String 型です。

5. 現在選択されている項目の値を保持するために、SessionBean1 プロパティーを String[] 型の「choices」という名前で作成します。

   1. 「アウトライン」ウィンドウで SessionBean1 を右クリックして、「追加」>「プロパティー」を選択します。
   2. 「新規プロパティーパターン」ダイアログで、「名前」に「choices」、「型」に「String[]」と入力し、「了解」をクリックします。

   注: 次の節で SessionBean1 に Options クラスのインポート文を追加するまで、「SessionBean1」ノードの下に新しいプロパティーは表示されません。

リストボックスのプロパティーの初期化

1. 「アウトライン」ウィンドウで、「SessionBean1」をダブルクリックして、Java エディタでソースコードを開きます。

2. Java ソースファイル内で、右クリックして「インポートを修正」を選択し、「インポートを修正」ダイアログを表示します。

   このダイアログを使用して、リストボックス内の単一の項目を表す Option クラスのインポート文を追加します。

3. 「インポートを修正」ダイアログで、「完全修飾名」の下のドロップダウンリストをクリックし、リストから正しい Option クラスを選択します。

   • アプリケーションが Java EE 5 に基づいている場合は、「com.sun.webui.jsf.model.Option」を選択します。
   • アプリケーションが J2EE 1.4 に基づいている場合は、「com.sun.rave.web.ui.model.Option」を選択します。

4. SessionBean1 コンストラクタに次の太字のコードを追加します。

   コード例 1:Java EE 5 アプリケーションのオプションのプロパティー

   public SessionBean1() { // プロパティーの値を初期化し、 // 「listOptions」プロパティーに選択項目の初期値を追加 listOptions = new Option[] { new Option("項目 1", "選択項目 1"), new Option("項目 2", "選択項目 2"), new Option("項目 3", "選択項目 3")}; choices = new String[] {}; }

   
   上記のコード例の太字で示した部分の 3 行目では、「listOptions」プロパティーを初期化しています。それに続く 3 行では、リストボックスに項目を追加しています。最初のパラメータ (ここでは「項目 1」) は、項目の値です。この値は、項目を選択したときにリストボックスコンポーネントの「value」プロパティーに格納されます。この例では String 型を使用していますが、Java の任意のクラスのインスタンスを使用できます。2 番目のパラメータ (ここでは「選択項目 1」) は、リストボックスに表示するテキストです。コードの最終行では、デフォルトで何も選択されないように、「choices」プロパティーを初期化しています。
5. 「Page1」タブをクリックしてビジュアルデザイナーでそのページを表示します。
6. 「アウトライン」ウィンドウで「SessionBean1」ノードを展開し、「listOptions」プロパティーと「choices」プロパティーのノードが存在することを確認します。

リストボックスへのプロパティーのバインド

1. ビジュアルデザイナーの Page1 で、「リストボックス」コンポーネントを右クリックし、「データにバインド」を選択します。

   「データにバインド」ダイアログが表示されます。

2. 図 3 に示すように、「オブジェクトにバインド」タブで「SessionBean1」>「listOptions」を選択します。

   図 3:オブジェクトにバインド

3. 「了解」をクリックします。

   これで、リストボックスの「items」プロパティーが SessionBean1 の listOptions 配列にバインドされました。

4. リストボックスの「プロパティー」ウィンドウで、「selected」プロパティーの省略符号ボタン (...) をクリックします。このプロパティーは、「プロパティー」ウィンドウの「データ」セクションの下にあります。

   「selected」プロパティーのプロパティーエディタが「listbox1 - selected」というタイトルで表示されます。

5. 必要に応じて、「オブジェクトにバインド」タブをクリックし、「SessionBean1」ノードの下の choices を選択して「了解」をクリックします。

   これで、リストボックスの「selected」プロパティーが SessionBean1 の choices 配列にバインドされました。

リストボックスで選択された項目の表示

1. ビジュアルデザイナーの Page1 で、「送信」ボタンをダブルクリックして Java エディタでそのアクションメソッドを開きます。

2. button1_action() メソッドに次の太字のイベントハンドラのコードを追加します。

   注:コードを挿入したら、Ctrl-Shift-F キーを押すと、コードが自動的に再フォーマットされます。

   コード例 2:Button1 のイベントハンドラ

   public String button1_action() { //現在の選択項目を SessionBean1 から取得 String[] mySelections = getSessionBean1().getChoices(); String showSelections = ""; if (mySelections != null) { // 選択した項目の値のリストを作成 for (int i = 0; i < mySelections.length; i++) showSelections = showSelections + mySelections[i] +"\n"; } if (showSelections.equals("")) showSelections = "項目が選択されていません"; else showSelections = "選択された値:\n" + showSelections; // テキスト領域 (textArea1) にリストを表示 getTextArea1().setValue(showSelections); return null; }

3. メインツールバーの緑色の矢印 をクリックするか、「実行」>「主プロジェクトを実行」を選択して、アプリケーションを構築および実行します。

4. 実行中のアプリケーションで、リストボックスから 1 つまたは複数の項目を選択し、「送信」ボタンをクリックします。

   複数の項目を選択するには、Ctrl キーを押しながらクリックします。「送信」ボタンをクリックすると、選択した項目の値がテキスト領域に表示されます。図 4 に実行中のアプリケーションを示します。

   図 4:ブラウザで実行中のリストボックスアプリケーション

リストボックスの項目の追加および削除

1. 「デザイン」をクリックしてビジュアルデザイナーを開きます。
2. 「送信」ボタンの下にボタンを追加します。ボタンのテキストを「追加」に変更します。
3. 「追加」ボタンの下にもう 1 つボタンを追加します。このボタンのテキストを「削除」に変更します。

4. 「追加」ボタンをダブルクリックして、button2_action メソッドに次の太字のコードを挿入します。

   コード例 3:Button2 のアクションメソッド

   public String button2_action() { // listbox1 コンポーネントに新しく生成した項目を追加する getSessionBean1().addOption(); getTextArea1().setText("新しい項目が追加されました"); return null; }

   
   注:メソッドをまだセッション Bean に追加していないので、getSessionBean1().addOption() の行でエラーが発生します。このエラー状態により「デザイン」ビューが使用できないため、次の手順では「アウトライン」ウィンドウを使用します。
5. 「アウトライン」ウィンドウを開き、「button3:削除」ノードを右クリックし、「イベントハンドラ action を編集」を選択します。

6. button3_action メソッドに次の太字のコードを挿入します。

   コード例 4:Button3 のアクションメソッド

   public String button3_action() { // 選択された 1 つ以上の項目を削除 getSessionBean1().removeOptions((String[])getListbox1().getSelected()); getTextArea1().setText("選択された項目が削除されました"); return null; }

   
   注:メソッドをまだセッション Bean に追加していないので、getSessionBean1().removeOptions の行でエラーが発生します。
7. 「アウトライン」ウィンドウで SessionBean1 を右クリックして、「追加」>「プロパティー」を選択します。
8. 「新規プロパティーパターン」ダイアログで、「名前」を「counter」、「型」を「int」に設定し、「了解」をクリックして新しいプロパティーを追加します。
9. 「アウトライン」ウィンドウで、「SessionBean1」をダブルクリックして、Java エディタでソースコードを開きます。

10. SessionBean1 コンストラクタで、choices = new String[] {}; のあとに次の行を挿入してカウンタを初期化します。
    

       counter = 0;

11. SessionBean1 コンストラクタのあとに次のメソッドを挿入します。

    コード例 5:addOption メソッドと removeOptions メソッド

    public void addOption() { // 新しい項目をリストに追加するために、 // 新しい項目を含む新しい配列を作成 setCounter(getCounter() + 1); // 一意の値を保証するカウンタ String newItemVal = "newitem" + getCounter(); Option opt = new Option(newItemVal, "新しい項目 "+getCounter()); Option[] current = getListOptions(); Option[] newOpts = new Option[current.length + 1]; // 現在の項目を新しい配列に追加 for (int i = 0; i < current.length; i++) newOpts[i] = current[i]; newOpts[current.length] = opt; setListOptions(newOpts); // リストを更新 setChoices(new String[] {newItemVal}); // 新しい項目を選択 } public void removeOptions(String[] selectedValues) { // 値とオプションを照合して、 // リストボックスで選択された項目を削除 Option[] current = getListOptions(); int curLength = current.length; if (selectedValues != null) { int numSelected = selectedValues.length; int newLength = curLength - numSelected; Option[] newOpts = new Option[newLength]; // 新しいリストの配列 int k = 0; // 新しいリスト用のカウンタ boolean found = false; for (int i = 0; i < current.length; i++) { // 現在の項目をスキャンして削除する項目を識別する found = false; for (int j = 0; j < numSelected; j++) { if (current[i].getValue().equals(selectedValues[j])) { // 次の項目を削除する found = true; break; } } if (!found) { // 次の項目は選択されなかったため、この項目を新しいリストに追加する newOpts[k] = current[i]; k++; } } setListOptions(newOpts); // リストを更新 setChoices(null); // 既存の選択されていた値を削除 } }

12. これで新しいメソッドがセッション Bean に追加されたので、「Page1.jsp」タブをクリックしてそのページを開いたあと、「デザイン」ボタンをクリックしてビジュアルデザイナーに戻ります。

    そのページには、まだエラー状態が表示されています。
13. ビジュアルデザイナーのツールバーの「再表示」ボタン をクリックしてエラー状態を解消し、ページにコンポーネントを表示します。

14. アプリケーションを実行します。

    コードをテストするには、図 5 に示すように、「追加」ボタンをクリックしてリストの末尾に新しい項目を追加します。項目を削除するには、1 つまたは複数の項目を選択し、「削除」ボタンをクリックします。

    図 5:リストボックスへの項目の追加

関連項目:

• コンポーネント
• データバウンドコンポーネント