HOME / Docs & Support / NetBeans 5.5

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

Web アプリケーションの開発

執筆: Visual Web Pack チュートリアルチーム

2007 年 5 月 [Revision number: V5.5.1-1]

このチュートリアルでは、NetBeans Visual Web Pack 5.5 を使用して、「Hello Web」という簡単な Web アプリケーションを作成し、実行します。このアプリケーションでは、名前を入力するとその名前を含むメッセージが表示されます。最初に、入力フィールドを含むページを実装します。次に、入力フィールドを、ユーザーが名前を選択できるドロップダウンリストに置き換えます。ドロップダウンリストには、データベース表から名前を取得します。

-	プロジェクトの作成
-	ページのデザイン
-	動作の追加
-	アプリケーションの実行
-	テキストフィールドをドロップダウンリストに置き換え
-	データベース表へのドロップダウンリストのバインド
-	動作の追加
-	アプリケーションの実行
-	その他の可能な操作

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

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 プラットフォームについては、「リリースノート」を参照してください。

プロジェクトの作成

メインメニューから「ファイル」>「新規プロジェクト」を選択します。
「新規プロジェクト」ウィザードで、「カテゴリ」リストから「Web」を選択し、「プロジェクト」リストから「Visual Web アプリケーション」を選択します。
「次へ」をクリックします。
プロジェクト名に「HelloWeb」と入力し、「完了」をクリックします。
ビジュアルデザイナーに最初のページ (Page1) が表示された状態でプロジェクトが開きます。

ページのデザイン

最初に、次の図に示すようなページをデザインします。

図 1:Page1 のデザイン

次の図に示すように、「プロパティー」ウィンドウで、「タイトル」プロパティーのテキストボックスに「Hello Web」と入力します。

ブラウザでこのページにアクセスすると、「タイトル」プロパティーの値がブラウザのタイトルバーに表示されます。

図 2:「プロパティー」ウィンドウのページのプロパティー

ヒント: 「プロパティー」ウィンドウでコンポーネントのプロパティーを表示するには、ビジュアルデザイナーまたは「アウトライン」ウィンドウでコンポーネントを選択します。ページのプロパティーを表示するには、ページの空白部分をクリックします。
「パレット」ウィンドウの「基本」ノードが展開されていない場合は、展開します。

このアプリケーションで使用するすべてのコンポーネントは、「パレット」の「基本」セクションにあります。
「パレット」が表示されていない場合は、「ウィンドウ」>「パレット」を選択すると表示されます。
「パレット」の「基本」セクションからビジュアルデザイナーのページの左側に「ラベル」コンポーネントをドラッグし、「名前:」と入力して、Enter キーを押します。

コンポーネントは、デフォルトではページ上のグリッドにスナップされます。また、「プロパティー」ウィンドウで「text」プロパティーの値が「名前:」になります。
ヒント: コンポーネントを編集モードに切り替えるには、コンポーネントを右クリックし、ポップアップメニューから「ラベルテキストを編集」を選択します。
「パレット」の「基本」セクションからビジュアルデザイナーに「テキストフィールド」コンポーネントをドラッグし、「名前を入力してください」と入力して、Enter キーを押します。
「プロパティー」ウィンドウで、テキストフィールドの「id」プロパティーを「textField1」から「nameField」に変更します。
「ラベル」コンポーネントを選択し、Ctrl-Shift キーを押しながら、「ラベル」コンポーネントから「テキストフィールド」コンポーネントへとドラッグします。
「ラベル」コンポーネントの「for」プロパティーが nameField に設定されます。
「テキストフィールド」コンポーネントの右側に「ボタン」コンポーネントをドラッグし、「あいさつする」と入力して、Enter キーを押します。
「プロパティー」ウィンドウで、「ボタン」コンポーネントの「id」プロパティーを「button1」から「helloButton」に変更します。
「ラベル」コンポーネントの下に「静的テキスト」コンポーネントをドラッグします。
「静的テキスト」コンポーネントの「id」プロパティーを「staticText1」から「helloText」に変更します。
「メッセージグループ」コンポーネントを、「静的テキスト」コンポーネントの下など、ページ上の空いた部分にドラッグします。
「メッセージグループ」コンポーネントには、実行時エラーやその他の種類のメッセージが表示されるので、このコンポーネントを追加すると、プログラミングのエラーを診断するのに便利です。
ビジュアルデザイナーの上部にある編集用ツールバーの「JSP」をクリックして、JavaServer Pages (JSP) ソースエディタに切り替えます。
コード内で、「プロパティー」ウィンドウで行なった変更がどのように保存されているかを確認します。ブラウザでページをはじめて開くとき、ページは JSP ページのタグで指定されているとおりに表示されます。プロパティーの値を変更するコードがページ Bean に含まれている場合、その変更内容は、ページの送信と再表示の要求があったときにのみ表示されます。

動作の追加

この節では、「こんにちは、<入力名> さん !」というメッセージを持つページを再表示するためのコードを追加します。具体的には、ボタンがクリックされたときにアプリケーションによって呼び出されるイベントハンドラを追加します。このイベントハンドラでは、「静的テキスト」コンポーネントの「text」プロパティーを「こんにちは、<入力名> さん !」というメッセージに設定し、ページの再表示によってそのメッセージが表示されるようにします。

編集用ツールバーの「デザイン」をクリックして、ビジュアルデザイナーに切り替えます。
「ボタン」コンポーネントをダブルクリックします。
編集領域が Java エディタに切り替わり、Page1 のページ Bean が表示されます。ボタンのイベントハンドラ helloButton_action がページ Bean に追加されています。

helloButton_action メソッドの本体を次のコード行 (太字で示した部分) に置き換えます。Ctrl-Shift-F キーを押して、コードを再フォーマットします。

コード例 1:helloButton_action() のコード

public String helloButton_action() { String name = (String)nameField.getText(); helloText.setText("こんにちは、" + name + " さん !"); return null;

太字の最初の行で、getText メソッドを使用して NameField テキストフィールドコンポーネントの「text」プロパティーの値を取得しています。この値は、Object 型のオブジェクトで、文字列にする必要があるので、String 型のオブジェクトにキャストしてから、name 変数に割り当てます。

太字の 2 行目で、HelloText 静的テキストコンポーネントの「text」プロパティーの値を設定しています。この値には、ユーザーが NameField テキストフィールドコンポーネントに入力した名前が含まれます。たとえば、ユーザーが「フレッド」と入力した場合は、このコード行によって、静的テキストコンポーネントの「text」プロパティーが「こんにちは、フレッドさん !」に設定されます。

アプリケーションの実行

Java エディタで Java コードにエラーがないことを確認します。

エラーがある場合は、赤い下線、またはコードの左端に赤いボックスが表示されます。コードにエラーがある場合は、プロジェクトを構築できません。
ヒント:コードの左端にある赤いボックスの上にマウスポインタを置くと、エラーの説明が表示されます。
「主プロジェクトを実行」ボタンをクリックします。
ファイルが保存され、プロジェクトが構築されます。画面下部に「出力」ウィンドウが表示され、関連する状態メッセージが表示されます。アプリケーションが構築されて配備されると、Web ブラウザが起動され (起動されていない場合)、Web アプリケーションが表示されます。
名前を入力し、「あいさつする」をクリックします。

ブラウザによってフォームが Web サーバーに送信され、サーバーから Web アプリケーションが呼び出されます。アプリケーションによって、ボタンアクションメソッドが実行され、ページ要素が更新されます。次に、データを変更して同じページが再表示されて、Web ブラウザに送信されます。次の図に、送信された名前が「Gus Townsend」の場合の結果を示します。

図 3:Hello Web の結果

テキストフィールドをドロップダウンリストに置き換え

このあとの節では、次の図に示すように、「テキストフィールド」コンポーネントの代わりに「ドロップダウンリスト」コンポーネントを使って、ユーザー入力を取得する方法を説明します。「ドロップダウンリスト」コンポーネントでは、IDE に付属の PERSON データベース表から項目のリストを取得します。

図 4:Hello Web の最終版

編集用ツールバーの「デザイン」をクリックして、ビジュアルデザイナーに切り替えます。
ビジュアルデザイナで nameField テキストフィールドコンポーネントを右クリックし、ポップアップメニューから「削除」を選択します。
「パレット」の「基本」セクションからビジュアルデザイナー内のページに「ドロップダウンリスト」コンポーネントをドラッグします。「テキストフィールド」コンポーネントがあった場所に「ドロップダウンリスト」コンポーネントを移動します。

次の図に示すように、「アウトライン」ウィンドウに、dropDown1 コンポーネントと dropDown1DefaultOptions オブジェクトが表示されます。「ドロップダウンリスト」コンポーネントの「items」プロパティーは、リスト内の項目を含むオブジェクトを特定します。「ドロップダウンリスト」コンポーネントをページに追加すると、デフォルトオプションオブジェクト (dropDown1DefaultOptions) が作成され、このオブジェクトが「ドロップダウンリスト」コンポーネントの「items」プロパティーの値として設定されます。ビジュアルデザイナーには、「ドロップダウンリスト」コンポーネントだけが表示されます。デフォルトオプションオブジェクトは、リストに表示される項目を提供するだけです。このあとの節では、「ドロップダウンリスト」コンポーネントを変更して、項目を別のソースから取得します。

図 5:「アウトライン」ウィンドウ内のコンポーネント
「プロパティー」ウィンドウで、コンポーネントの「id」プロパティーを「nameDropDown」に変更します。
「ラベル」コンポーネントを選択し、Ctrl-Shift キーを押しながら、「ラベル」コンポーネントを「ドロップダウンリスト」コンポーネントにドラッグします。
「ラベル」コンポーネントの「for」プロパティーが nameDropDown になります。

データベース表へのドロップダウンリストのバインド

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

NetBeans Visual Web Pack 5.5 には、サンプルの Travel データベースが付属しています。Travel データベースは「Databases」ノードの下に表示されます。チュートリアルのこの節では、Travel データベースの PERSON 表を使用して、「ドロップダウンリスト」コンポーネントの選択項目を指定します。

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

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

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

リストの表示が「項目 1」から「abc」に変わります。これは、リストがバインドされたデータを持ち、表示されているデータが String 型であることを示します。
データベース表の不可視の personDataProvider コンポーネントが追加されます。personDataProvider コンポーネントは「アウトライン」ウィンドウに表示されます。また、SessionBean1 に personRowSet プロパティーが追加されます。
「ドロップダウンリスト」を右クリックし、ポップアップメニューから「データにバインド」を選択します。次の図に示すような「データにバインド」ダイアログが表示されます。

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

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

動作の追加

ビジュアルデザイナーで、「ボタン」コンポーネントをダブルクリックします。
編集領域が Java エディタに切り替わり、helloButton_action メソッドに移動します。

helloButton_action メソッドの本体を次のコード (太字で示した部分) に置き換えます。

コード例 2:helloButton_action の置換コード

    public String helloButton_action() {
         String name = (String)nameDropDown.getSelected();
        String splitnames[] = name.split(",");
        helloText.setText("こんにちは、" + splitnames[1] + " さん !");
         return null;

1 行目では、getSelected メソッドを使って、ドロップダウンリストの現在の値 (リストで現在選択されている名前) を取得しています。

データは「<姓>, <名>」としてデータベースに保存されているので、表示する前に文字列を変更する必要があります。変更しなかった場合、アプリケーションは「こんにちは、<姓>, <名>さん !」と出力します。2 行目では、split メソッドを使って、文字列を配列に分割しています (区切り文字はコンマ)。配列の最初の項目 (位置 0) には姓が、位置 1 には名が含まれます。

3 行目では、「静的テキスト」コンポーネントの「text」プロパティーを、名を含む値に設定しています。

注:このメソッドでは、表内のすべての値が「<姓>, <名>」の形式になっていることを前提としています。この形式になっていない文字列は処理しません。

prerender メソッドに次のコードを追加します。このコードによって、リスト内の最初の項目が、デフォルトで選択される項目として設定されます。

コード例 3:prerender メソッドのコード

    public void prerender() {
         // 選択されない場合、デフォルトの選択を設定
        if (nameDropDown.getSelected() == null) {
            personDataProvider.cursorFirst();
            nameDropDown.setSelected
                    ((String)personDataProvider.getValue("person.name"));
        }
    }

アプリケーションの実行

「主プロジェクトを実行」ボタンをクリックします。
アプリケーションが構築、配備され、Web ブラウザにページが表示されます。
リストから名前を選択し、「あいさつする」をクリックします。
「ドロップダウンリスト」コンポーネントで選択された値がブラウザからサーバーに送信され、サーバーによってボタンの helloButton_action メソッドが実行されます。

その他の可能な操作

試してみましょう。「リストボックス」コンポーネントは「ドロップダウンリスト」コンポーネントと似ています。「ドロップダウンリスト」コンポーネントを「リストボックス」コンポーネントに置き換えてみてください。このアプリケーションでは、「リストボックス」コンポーネントの「multiple」プロパティーを有効にしてはいけません。一度に選択できる項目の数が 1 つに限られているためです。「リストボックス」をデータベース表にバインドし、「リストボックス」で選択された値を取得するように helloButton_action メソッドを変更します。

試してみましょう。このチュートリアルの手順を参考にして、TRIPTYPE 表のすべての DESCRIPTION 値をリストとして表示する「ドロップダウンリスト」コンポーネントを持つ Web アプリケーションを構築してみてください。ユーザーが「旅行の種類 ID を表示」ボタンをクリックすると、旅行の種類の TRIPTYPEID がページに表示されるようにします。この処理を追加するには、「ドロップダウンリスト」コンポーネントの表示フィールドを TRIPTYPE.DESCRIPTION にバインドし、コンポーネントの値フィールドを TRIPTYPE.TRIPTYPEID にバインドする必要があります。