ページのデザイン

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

1. Visual Web JavaServer Faces フレームワークを使用する ListboxExample という新しい Web アプリケーションを作成します。アプリケーションの Page1.jsp ファイルがビジュアルデザイナで開きます。

   注: NetBeans 6.1 でプロジェクトを作成すると新しいオプションが含まれますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。

2. パレットの「基本」セクションから、「リストボックス」コンポーネントをページの左上隅までドラッグします。「プロパティー」ウィンドウで、「id」プロパティーを「personDD」に変更します。

3. 「プロパティー」ウィンドウでチェックボックスを選択して、リストボックスの「multiple」プロパティーを True に設定します。

   「multiple」プロパティーは、「プロパティー」ウィンドウの「データ」セクションの下にあります。値を True にすると、ユーザーがリストボックス内の項目を複数選択できます。

4. パレットの「基本」セクションから「テキスト領域」コンポーネントをドラッグします。このコンポーネントはリストボックスの下に置きます。

   テキスト領域は、リストボックスで選択された項目を表示するために使用します。
5. 「プロパティー」ウィンドウでテキスト領域コンポーネントの「rows」プロパティーを 10 に設定します。

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

クライアントブラウザから Web ページが要求されると、サーバーで、要求スコープに新しいページが生成されます。新しいページが初期化されると、ページ Bean (Page1.java) に以前に保存されていた情報はすべて上書きされます。アプリケーションでリストボックスの項目を要求間で維持できるようにするには、項目を、セッションスコープにある Bean プロパティーに保存する必要があります。

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

1. 「ナビゲータ」ウィンドウで、SessionBean1 を右クリックして「Java ソースを編集」を選択します。
2. sessionBean1 クラスに「Option[] listOptions;」と入力します。

3. listOptions を右クリックしてコンテキストメニューから「コードを挿入」オプションを選択します。すると、次に示すように取得メソッドおよび設定メソッドのオプションが表示されます。

   
   「取得メソッドおよび設定メソッドの生成」ダイアログが開きます。

4. 次の図に示すように「listOptions」チェックボックスを選択し、「生成」を選択して、listOptions の取得メソッドと設定メソッドを追加します。

   
5. ページを右クリックして「インポートを修正」を選択します。リストから「com.sun.webui.jsf.model.Option」を選択します。

6. 「閉じる」をクリックします。

   listOptions 配列には Option 型のオブジェクトが含まれます。各オブジェクトはリスト内のオプションを表します。各オプションには表示名と値の両方が含まれます。表示名は常に String ですが、値は任意の型のオブジェクトにできます。この例では値も String になっています。
7. ここで、現在選択されている項目の値を保持する「choices」というプロパティーを作成します。sessionBean1 クラスに「String[] choices;」と入力します。
8. 「choices」を右クリックし、「コードを挿入」オプションを選択して取得メソッドと設定メソッドを設定します。listOptions のときと同じように追加します。

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

この節では、前の節で作成した SessionBean の 2 つのプロパティーの値を初期化します。また「listOptions」プロパティーに、リストボックスコンポーネントの初期の項目セットを入れます。

• SessionBean1 コンストラクタに次のコード行を追加します。この例とこのあとの例には、コードについて説明するコメントが含まれています。

  コード例 1: プロパティー値の初期化と選択肢の追加

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

  
  上記のコード例の 2 行目で「listOptions」プロパティーを初期化しています。続く 3 行でリストボックスに項目を追加しています。最初のパラメータ (ここでは「項目 1」) は項目の値です。この値は、項目が選択されたときにリストボックスコンポーネントの「value」プロパティーに取得されます。この例では String を使用していますが、任意の Java クラスのインスタンスを使用できます。2 番目のパラメータ (ここでは「選択項目 1」) は、リストボックスに表示されるテキストです。最後の行では、デフォルトで何も選択されないように「choices」プロパティーを初期化しています。

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

次に listbox1 と choices 配列の「items」プロパティーを SessionBean1.java 内のプロパティーにバインドします。プロパティーをバインドすることで、実際にはコンポーネントプロパティーの値が、Bean プロパティーの値に関連付けられます。

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

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

   「データにバインド」ダイアログが開きます。

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

   
3. 「閉じる」をクリックします。

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

   「listbox1 - selected」ダイアログが開きます。
5. バインド先として「SessionBean1」>「choices」を選択し、「了解」をクリックします。

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

次にリストボックスコンポーネントに 2 つの処理を行う動作を追加します。まず、現在選択されている項目のリストを SessionBean から取得します。次に、Ajax 機能を使用して、ページ全体を再表示しないでリストをテキスト領域に表示します。

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

1. ビジュアルデザイナで「リストボックス」コンポーネントを右クリックし、「イベントハンドラを編集」>「processValueChange」を選択します。
2. 次のイベントハンドラのコードを listbox1_processValueChange() メソッドに追加します。コードを挿入したら、Alt+Shift+F キーを押してコードを自動的に整形できます。

   コード例 2: listbox1_processValueChange() メソッド

   public String listbox1_processValueChange(ValueChangeEvent event) { // 現在の選択内容を SessionBean1 に設定 getSessionBean1().setChoices((String[]) listbox1.getSelected()); // 現在の選択内容を 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); }

3. ビジュアルデザイナで、リストボックスの「プロパティー」ウィンドウで「onChange」プロパティーの省略符号 (...) ボタンをクリックします。このプロパティーは、「プロパティー」ウィンドウの「JavaScript」セクションの下にあります。

4. 次のコードを javascript 式に追加します。

   コード例 3:「onChange」プロパティー

   document.getElementById('form1:textArea1').refresh('form1:listbox1'); return false;

   このコードでは、実際には Ajax 機能を使用して、ページ全体を再表示しないで TextArea を再表示しています。
5. メインツールバーの緑色の矢印をクリックするか、「実行」>「主プロジェクトを実行」を選択して、アプリケーションを構築して実行します。

6. 実行中のアプリケーションで、リストボックスで 1 つまたは複数の項目を選択すると、ページを再表示せずに、選択した項目がテキスト領域に表示されます。複数の項目を選択するには、Control キーを押しながらクリックします。

   配備されたアプリケーションを示します。

   

リストボックスの項目の追加と削除

この最後の節では、リストボックスの項目を追加および削除するボタンを作成します。リスト内の各項目には名前と値の両方があります。新規に追加された項目の値は、リスト内での項目の位置に基づいて設定します。また、リストから削除する項目の判別にも項目の値を使用します。

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

1. ビジュアルデザイナを開きます。「ナビゲータ」ウィンドウで SessionBean1 をダブルクリックしてソースコードを Java エディタで開きます。
2. SessionBean1 に「int counter = 0;」と入力します。
3. counter を右クリックし、「コードを挿入」オプションを選択して取得メソッドと設定メソッドを設定します。listOptions と choices のときと同じように、それらを追加します。

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

   コード例 4: SessionBean1 コンストラクタへの追加

   public void addOption() { // 新しい項目をリストに追加するために、 // 新しい項目を含む新しい配列を作成 setCounter(getCounter() + 1); // 一意の値を保証するカウンタ String newItemVal = "newitem"+getCounter(); Option opt = new Option(newItemVal, "New Item "+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); // 既存の選択されていた値を削除 } }

5. ビジュアルデザイナを開きます。パレットから「ボタン」コンポーネントをドラッグし、「リストボックス」コンポーネントの右側に置きます。ボタンのテキストを追加に変更します。
6. パレットからボタンをもう 1 つドラッグし、「追加」ボタンの下に置きます。このボタンのテキストは削除に変更します。

   注: Internet Explorer 7 での描画の問題を防ぐため、ボタンはグリッドに配置するか、サイズをプロパティーシートで明示的に設定するようにします。

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

   コード例 5: button1_action メソッド

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

8. ビジュアルデザイナを開きます。「削除」ボタンをダブルクリックします。

9. button2_action メソッドを次のコードに置き換えます。

   コード例 6: button2_action メソッド

   public String button2_action() { // 選択されている 1 つまたは複数の項目を削除 getSessionBean1().removeOptions((String[])getListbox1().getSelected()); getTextArea1().setText("選択した項目が削除された"); return null; }

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

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

    

まとめ

このチュートリアルでは、NetBeans Visual Web JSF フレームワークを使用して、複数選択のリストボックスと、Ajax 機能を使用するテキスト領域を使用するアプリケーションを作成しました。

関連項目

• Visual Web JSF アプリケーションの開発について
• Web アプリケーションの開発
• Web アプリケーションの学習