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

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

目次 -  「ドロップダウンリスト」コンポーネントを含むページの作成 -  コンポーネントのデータベースへの接続 -  「表」コンポーネントの追加 -  SQL クエリーの変更 -  表示される行の制御 -  その他の可能な操作

このチュートリアルを使用するには、NetBeans 5.5 IDE と NetBeans Visual Web Pack 5.5 がシステムにインストールされている必要があります。IDE の基本部分を十分に理解し、「NetBeans Visual Web Pack 5.5 について」を読んで 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 アプリケーション

1. 新しいプロジェクトを「DataboundComponents」という名前で作成します。「Page1」というデフォルトのホームページが作成され、そのページがビジュアルデザイナーに表示されます。
2. 「パレット」ウィンドウの「基本」ノードが展開されていない場合は、展開します。
3. ページの左側に「ラベル」コンポーネントをドラッグし、「名前を選択:」と入力して、Enter キーを押します。
4. 「ラベル」コンポーネントの右側に「ドロップダウンリスト」コンポーネントをドラッグします。
5. 「ドロップダウンリスト」コンポーネントの「プロパティー」ウィンドウで「id」プロパティーを personIdDD に変更します。

6. Ctrl-Shift キーを押しながら、「ドロップダウンリスト」コンポーネントを「ラベル」コンポーネントまでドラッグし、2 つのコンポーネントを関連付けます。

   「ラベル」コンポーネントの「for」プロパティーが personIdDD に設定されます。

7. 「パレット」ウィンドウから「メッセージグループ」コンポーネントをページ上の右上隅などの端の方にドラッグします。

   このコンポーネントは、プログラミングのエラーを診断するのに便利です。info(String)、error(String)、warn(String)、または fatal(String) メソッドを呼び出すことで、このコンポーネントに診断メッセージを表示できます。「メッセージグループ」コンポーネントには、String 型の引数の値が表示されます。また、このコンポーネントには、デフォルトで実行時エラー、妥当性検査エラー、および変換エラーに関するメッセージが表示されます。

コンポーネントのデータベースへの接続

IDE 作業スペースの左側に表示される「実行時」ウィンドウには、「データベース」ノードが含まれます。「データベース」ノードには、IDE に追加されたすべてのデータベースドライバと接続が表示されます。

NetBeans Visual Web Pack 5.5 にはサンプルの Travel データベースが付属しており、これは「データベース」ノードの下に表示されます。

データベースをコンポーネントにバインドすると、コンポーネントとデータベース表の間に 2 つの層が作成されます。行セットの層とデータプロバイダの層です。行セットの層でデータベースに接続し、クエリーが実行され、結果セットが管理されます。データプロバイダの層は、行セット、配列オブジェクト、エンタープライズ JavaBeans オブジェクトなどのさまざまなデータにアクセスするための共通のインタフェースを提供します。

一般に、行セットオブジェクトを操作するのは、クエリーのパラメータを設定するときだけです。その他のほとんどの場合は、データプロバイダを使ってデータのアクセスや操作を行います。データプロバイダの API を使用すると、ラップするデータの種類 (使用するデータプロバイダの実装) に関係なく同じ API を使用できるため、学習曲線を短くできます。

1. 「実行時」ウィンドウで、「データベース」ノードを展開し、Travel データベースが接続されているかどうかを確認します。

   Travel データベースのバッジの jdbc ノードが壊れていてノードを展開できない場合、IDE は、このデータベースに接続されていません。Travel データベースに接続するには、Travel の jdbc ノードを右クリックし、ポップアップメニューから「接続」を選択します。 「接続」ダイアログが表示されたら、 ユーザー名およびパスワードに「travel」と入力し、「セッション中はパスワードを保存」を選択して「了解」をクリックします。Travel データベースの jdbc ノードが表示されない場合は、「NetBeans Visual Web Pack 5.5 インストール」を参照して、Travel データベースを IDE で使用できるようにする手順に従います。

2. 「Travel」>「表」ノードを展開します。

   「表」の下には、CARRENTAL や FLIGHT など、データベース内の各表のノードが表示されます。次の図に、「実行時」ウィンドウで展開した「表」ノードを示します。

   図 2:「実行時」ウィンドウ

3. 「実行時」ウィンドウから「PERSON」をドラッグし、「ドロップダウンリスト」の上にドロップします。

   「ドロップダウンリスト」コンポーネントに「abc」というテキストが表示されます。「abc」のテキストは、表示フィールドが String 型オブジェクトにバインドされていることを示します。この例では、SQL 型 varchar のデータベース列です。さらに、IDE によってデータベース表の不可視の personDataProvider コンポーネントが追加されます。personDataProvider コンポーネントは「アウトライン」ウィンドウに表示されます。また、SessionBean1 に personRowSet プロパティーが追加されます。

4. 「ドロップダウンリスト」を右クリックし、ポップアップメニューから「データにバインド」を選択します。次の図に示すような「データにバインド」ダイアログが表示されます。

   図 3:ドロップダウンリストへのデータのバインド

   
   「ドロップダウンリスト」コンポーネントにデータをバインドするときは、リスト内で表示する項目 (表示フィールド) と、プログラムで使用する値 (値フィールド) を指定する必要があります。通常は、人の名前など、データベース表に含まれる意味のある値を表示し、プログラム内では ID など一意の識別子を使用します。ただし、このアプリケーションでは、このあとの 2 つの手順で説明するように、値フィールドと表示フィールドの両方を同一のデータベース列 (PERSON.NAME) にバインドします。
5. 「データにバインド」ダイアログの「値フィールド」リストで、「PERSON.PERSONID」を選択して、コンポーネントの getSelected メソッドが選択項目の PERSON.PERSONID を返すようにします。
6. 「表示フィールド」リストで「PERSON.NAME」を選択し、ドロップダウンリストにデータベースの PERSON.NAME 列の値が挿入されるようにします。
7. 「了解」をクリックします。

8. メインツールバーで「実行」>「主プロジェクトを実行」をクリックします。

   変更内容がすべて保存され、Web アプリケーションが構築、配備、および実行されます。まず、「出力」ウィンドウが IDE 下部に表示されます。このウィンドウには、コンパイルと配備の準備に関する情報が出力されます。構築中に問題が発生した場合は、まず「出力」ウィンドウを確認してください。次に、配備の状態を示すダイアログが開きます。配備が完了すると、アプリケーションを実行するための Web ブラウザが開きます。ブラウザでページが表示されるときに、PERSON 表の NAME 列のデータがドロップダウンリストに表示されます。

「表」コンポーネントの追加

1. パレットから「表」コンポーネントをドラッグし、「ドロップダウンリスト」コンポーネントの下に置きます。
2. 「実行時」ウィンドウで、「Travel」>「表」ノードを展開します。

3. 「実行時」ウィンドウから「TRIP」をドラッグし、「表」コンポーネントのタイトルバーの上へドロップします。

   注: TRIP データベースを「表」コンポーネントの別の部分にドロップした場合は、「ターゲットを選択」ダイアログが表示されます。「ターゲットを選択」ダイアログで「table1」を選択し、「了解」をクリックしてください。

4. 「表」コンポーネントを右クリックし、「表レイアウト」を選択します。

   「表レイアウト」ダイアログの「選択」リストに表の列がすべて表示されます。「選択」リストの項目を使用して、「表」コンポーネントに表示する列を指定します。
5. Ctrl キーを押したままクリックすることにより、「選択」リスト内の TRIP.DEPDATE、TRIP.DEPCITY、および TRIP.DESTCITY を除く項目を選択します。

6. 「<」ボタンをクリックします。

   次の図に示すように、選択した項目が「使用可能」リストへ移動し、次の 3 つの項目が「選択」リストに残ります。

   • TRIP.DEPDATE
   • TRIP.DEPCITY
   • TRIP.DESTCITY

   図 4:「表レイアウト」ダイアログ

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

   次の図に示すように、ビジュアルデザイナーで「表」コンポーネントに 3 つの列が表示されます。

   図 5:表の列の表示

SQL クエリーの変更

1. 「アウトライン」ウィンドウで「SessionBean1」ノードが展開されていない場合は、展開します。

   図 6:「アウトライン」ウィンドウの「SessionBean1」セクション

2. 「アウトライン」ウィンドウの「SessionBean1」セクションで、「tripRowSet」ノードを右クリックし、「SQL 文を編集」を選択します。

   編集領域にクエリーエディタが表示され、「tripRowSet」タブが表示されます。

   ヒント:「出力」ウィンドウが開いている場合は、ウィンドウを閉じてクエリーエディタに使用できるスペースを広げます。

3. 図 7 に示すように、「実行時」ウィンドウから>「Travel」>「表」>「TRIPTYPE」ノードをドラッグし、デザインビューにドロップします。

   別の表の図が表示され、2 つの図がリンクされます。このリンクは結合を表します。「ソースコード」区画で select 文がどのように変更されているかを確認してください。

4. TRIPTYPE 表内の TRIPTYPEID のチェックボックスの選択を解除します。

   この操作によって、次の図に示すように、結果セットと、「ソースコード」区画内の SQL クエリーからこれらの列が削除されます。

   図 7:クエリーエディタ

5. SQL クエリーエディタを開いたままにします。
6. 編集領域で「Page1」タブをクリックします。

7. ビジュアルデザイナーで、「表」コンポーネントを右クリックし、「表レイアウト」を選択します。

   「表レイアウト」ダイアログが表示されます。tripRowSet の SQL クエリーを変更したので、使用可能な列が増えています。
8. 「選択」リストに TRIPTYPE.DESCRIPTION 列を追加します。

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

   「表」コンポーネントに 4 つ目の列が表示されます。

表示される行の制御

TRIP 表のデータプロバイダを追加したときに、行セットオブジェクトと、表内のすべての列のすべての行を返す SQL クエリーが作成されました。この時点でアプリケーションを配備し、実行した場合、「表」コンポーネントには、TRIP 表のすべての旅行情報が表示されます。

1. 編集領域で「tripRowSet (SessionBean1)」タブをクリックして、クエリーエディタに切り替えます。
2. クエリーエディタのデザイングリッドで、PERSONID 行の任意のセルを右クリックし、「クエリー条件を追加」を選択します。
3. 「比較」ドロップダウンリストを「=等しい」に設定し、「パラメータ」ラジオボタンを選択します。

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

   PERSONID の「条件」列に「=?」と表示され、SQL クエリーに次の WHERE 句が追加されます。

   コード例 1:SQL クエリー内の WHERE 句

   WHERE TRAVEL.TRIP.PERSONID = ?

   
   トラブルシューティングのヒント: この時点で、クエリーが正しく設定されているかどうかを確認できます。クエリーエディタ内で右クリックし、「クエリーを実行」を選択します。「パラメータ値を指定」ダイアログで、パラメータ TRAVEL.TRIP.PERSONID の値に「1」を入力し、「了解」をクリックします。PERSONID が 1 のクエリーの出力は、クエリーエディタの結果の区画に入ります。
5. クエリーエディタのデザイングリッドで、DEPDATE 行の「ソート方法」セルをクリックし、ドロップダウンリストを表示します。

6. 「ソート方法」セルのドロップダウンリストから「昇順」を選択します。

   ソートの順序が自動的に設定され、SQL クエリーにソート句が追加されます。
7. クエリーエディタを閉じます。

8. ビジュアルデザイナーで、「ドロップダウンリスト」コンポーネントをダブルクリックします。

   Page1 クラスのソースが Java エディタに表示され、personIdDD_processValueChange メソッドの本体にカーソルが配置されます。イベントハンドラメソッドのスタブは、「ドロップダウンリスト」コンポーネントをはじめてダブルクリックしたときに作成されます。

9. personIdDD_processValueChange メソッドの本体を次のコード (太字部分) に置き換えます。

   コード例 2:「ドロップダウンリスト」コンポーネントの値変更イベント処理

   public void personIdDD_processValueChange(ValueChangeEvent event) { try { getSessionBean1().getTripRowSet().setObject( 1, personIdDD.getSelected()); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + personDataProvider.getValue( "PERSON.PERSONID")); log("Cannot switch to person " + personDataProvider.getValue( "PERSON.PERSONID"), e); } }

   
   

   このコードは、ドロップダウンリストで現在選択されている名前 (NAME) の PERSONID の値を、tripRowSet オブジェクトの SQL 文のパラメータにバインドし、クエリーを実行し、新しい結果セットを取得します。

   setObject メソッドによって、クエリー内の ? が PERSONID の値に置き換わります。refresh メソッドによって新しいクエリーが実行され、結果セットが更新されます。メソッド呼び出しを右クリックし、ポップアップメニューから「Javadoc を表示」を選択すると、これらのメソッドについての説明を表示できます。データプロバイダまたは行セットの Javadoc を表示するには、それぞれ「ヘルプ」>「Javadoc 参照」>「Data Provider」または「ヘルプ」>「Javadoc 参照」>「RowSet」を選択します。

   ユーザーの問題を検出および診断できるように、log メソッドによって、メッセージと関連付けられているスタックトレースがアプリケーションサーバーのログへ送信されます。サーバーのログを表示するには、「実行時」ウィンドウで、サーバーノードを右クリックし、ポップアップメニューから「サーバーログを表示」を選択します。
10. Ctrl-Shift-F キーを押して、コードを再フォーマットします。

11. 「ナビゲータ」ウィンドウをクリックし、「prerender」と入力します。入力するとすぐに、次の図のように「高速検索」ダイアログが表示されます。最初に一致したエントリが「ナビゲータ」ウィンドウで強調表示されます。

    「ナビゲータ」ウィンドウと「アウトライン」ウィンドウは重なって表示されます。どちらかのウィンドウを前面に表示するには、ヘッダーをクリックします。

    図 8:「ナビゲータ」ウィンドウでの高速検索

12. Enter キーを押します。Java エディタに prerender メソッドが表示されます。

13. prerender メソッドの本体を次のコード (太字部分) に置き換えます。

    コード例 3:ページが最初に表示されるときにマスターデータと詳細データを同期

    public void prerender() { if ( personIdDD.getSelected() == null ) { try { personDataProvider.cursorFirst(); getSessionBean1().getTripRowSet().setObject( 1, personDataProvider.getValue("PERSON.PERSONID")); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID")); log("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"), e); } } }

    
    このコードは、Web ブラウザにページが表示される前に呼び出され、ページが最初にアクセスされたときの処理を行います。
14. Ctrl-Shift-F キーを押して、コードを再フォーマットします。
15. 編集用ツールバーの「デザイン」をクリックし、ビジュアルデザイナーに戻ります。

16. 「ドロップダウンリスト」コンポーネントを右クリックし、「変更時に自動送信」を選択します。

    「プロパティー」ウィンドウで、「onchange」プロパティーに次のコードが表示されます。

    コード例 4:「onchange」プロパティーのコード

    webuijsf.suntheme.common.timeoutSubmitForm(this.form, 'personIdDD');

    
    実行中の Web アプリケーションでユーザーがドロップダウンリストの選択内容を変更すると、ページが自動的に送信されます。

17. メインツールバーで「主プロジェクトを実行」をクリックします。

    変更したファイルがすべて保存され、アプリケーションが再構築され、サーバーに再配備されます。
18. 「ドロップダウンリスト」コンポーネントから名前を選択し、「表」コンポーネントでマスターデータと詳細データが同期される様子を確認します。DESTCITY 列のヘッダーをクリックし、「表」コンポーネントで行がソートされる様子を確認します。

その他の可能な操作

試してみましょう。 「静的テキスト」コンポーネントを「ドロップダウンリスト」コンポーネントの右側に追加します。「静的テキスト」コンポーネントを右クリックし、「データにバインド」を選択します。次に、コンポーネントを PERSON.JOBTITLE にバインドします。プログラムを実行し、ドロップダウンリストから別の名前を選択します。役職が変更されないことに注目してください。これは、アプリケーションによって personDataProvider をドロップダウンリストから選択した項目と同期させる必要があるからです。次のコード (太字部分) を prerender メソッドに追加し、アプリケーションを再度実行します。役職が選択した名前によって変わります。

public void prerender() {
    if ( personIdDD.getSelected() == null ) {
        try {
            personDataProvider.cursorFirst();
            getSessionBean1().getTripRowSet().setObject(
                1, personDataProvider.getValue("PERSON.PERSONID"));
            tripDataProvider.refresh();
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"));
            log("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"), e);
        }
    }
    else {
        try {
            // Synchronize data provider with current selection
            personDataProvider.setCursorRow(
                    personDataProvider.findFirst(
                    "PERSON.PERSONID", personIdDD.getSelected()));
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personIdDD.getSelected());
            log("Cannot switch to person " +
                    personIdDD.getSelected(), e);
        }
    }
}

試してみましょう。表のレイアウトオプションを操作します。「表」コンポーネントを右クリックし、ポップアップメニューから「表レイアウト」を選択します。「ヘッダーテキスト」を「出発日」、「出発地」、「到着地」、および「説明」に変更します。ダイアログの「オプション」タブで、表のタイトルを「旅行」に設定します。「ページ付けを有効」を選択し、「ページサイズ」を「3」に設定します。アプリケーションを実行し、変更内容が表の表示にどのように影響するかを確認します。

注: ページ付けのオプションを使用する場合は、personIdDD_processValueChange メソッドの tripDataProvider.refresh() 文のあとに tableRowGroup1.setFirst(0); を追加します。このコードによって、ドロップダウンリストから新しい名前が選択されたときに必ず最初のページが表示されます。

試してみましょう。「ドロップダウンリスト」コンポーネントと「表」コンポーネントを含む Web アプリケーションを構築します。「ドロップダウンリスト」コンポーネントに TRIPTYPE.DESCRIPTION を表示します。「表」コンポーネントに、選択されている TRIPTYPE と TRIPTYPEID が同じである TRIP レコードをすべて表示します。

1. コンストラクタ
2. prerender
3. コンストラクタ
4. personIdDD_processValueChange

ブラウザで最初にページが要求されるとき、アプリケーションによって Page1 のインスタンスが作成され、prerender が呼び出されます。サーバーによって応答 (HTML ページ) が送信され、Page1 のインスタンスが破棄されます。アプリケーションでは、ページの送信時にのみ値変更イベントが生成されるので (この例では新しい名前が選択されたとき)、値変更イベントハンドラは呼び出されません。

ドロップダウンリストから新しい名前を選択すると、ブラウザによってページが送信されます。アプリケーションによって Page1 の新しいインスタンスが作成され、前のインスタンスの値が復元されます (要求で渡される)。これは送信であり、また名前が変更されたので、アプリケーションによって値変更イベントが生成されます。その結果、personIdDD_processValueChange が呼び出され、アプリケーションによって行セットが更新されます。

値変更イベントハンドラが呼び出されたあとで、アプリケーションによって prerender メソッドが呼び出されます。ドロップダウンリストで値が選択されているので、アプリケーションでは、prerender メソッドの if セクションが省略されます。

まとめ

1. データベース表のノードをコンポーネントにドロップするか、ポップアップメニューから「データにバインド」を選択し、ドロップダウンリストから既存のデータプロバイダを選択することで、コンポーネントをデータベース表にバインドします。
2. 「データにバインド」ダイアログを使って、コンポーネントが表示するデータベースの列を設定します。リストタイプのコンポーネントの場合は、返す列を設定します。「表レイアウト」ダイアログを使用して、「表」コンポーネントに表示するデータベース表の列を設定することもできます。
3. 行セットオブジェクトのクエリーを変更するには、「アウトライン」ウィンドウから、行セットオブジェクトに対してクエリーエディタを開きます。
4. 行セットオブジェクトの setObject メソッドを呼び出して、クエリーのパラメータの値を設定します。データプロバイダの refresh メソッドを呼び出して、クエリーを実行し、結果セットを更新します。
5. コンポーネントの値の変更時にページを自動的に送信するには、「変更時に自動送信」メニュー項目を使用します。

6. 次の手順で詳細コンポーネントとマスターコンポーネントの同期をとります。

   1. ページ Bean の prerender メソッドに、詳細データの行セットオブジェクトの setObject メソッドを呼び出して、クエリーのパラメータをデフォルト値 (ドロップダウンリストの最初の名前) に設定するコードを追加します。次に、refresh メソッドを呼び出してクエリーを実行します。
   2. マスターコンポーネントを processValueChanged メソッドにバインドします。このメソッドで詳細データの行セットオブジェクトの setObject メソッドを呼び出して、新しいクエリーのパラメータを設定します。次に、refresh メソッドを呼び出してクエリーを実行します。

関連項目:

• コンポーネント
• 「ヘルプ」>「Javadoc 参照」>「データプロバイダ」
• 「JHelp」>「Javadoc 参照」>「RowSet」