EGL
を使った JSF 検索ページの作成
目次
EGL
を使った JSF 検索ページの作成 . . 1
概要 . . . 1 演習 1: シンプルな検索ページを作成する . . . . 3 Web ページを作成する . . . 3 レコードを作成する . . . 3 ページにレコードを追加する . . . 4 演習のチェックポイント . . . 7 演習 2: 検索関数のコードを追加する . . . 7 検索関数用のライブラリーを作成する . . . 7 SQL 検索関数をライブラリーに追加する . . . . 8 JSF ハンドラーで検索関数を使用する . . . . 10 検索関数を Web ページにバインドする . . . . 12 演習のチェックポイント . . . 13 演習 3: OR 検索条件を使用する . . . 14 OR 検索コードをライブラリーに追加する . . . 14 ラジオ・ボタン・グループをページに追加する . 15 OR 検索コードをページに追加する . . . 16 演習のチェックポイント . . . 17 演習 4: コンボ・ボックスに動的にデータを取り込む 18 コードをライブラリーに追加する . . . 18 コードを JSF ハンドラーに追加する . . . 19 コンボ・ボックスをページに追加する . . . . 20 演習のチェックポイント . . . 22 演習 5: 検索結果をカスタマイズする . . . 23 コードをライブラリーに追加する . . . 23 コードをページ・コード・ファイルに追加する . 24 カスタマイズしたデータ・テーブルを作成する . 25 演習のチェックポイント . . . 26 まとめ . . . 26 リソース . . . 27 演習 2 終了後の SearchLibrary.egl ファイル . . 27 演習 2 終了後の customersearch.egl ファイル . . 28 演習 3 終了後の SearchLibrary.egl ファイル . . 29 演習 3 終了後の customersearch.egl ファイル . . 29 演習 4 終了後の SearchLibrary.egl ファイル . . 30 演習 4 終了後の customersearch.egl ファイル . . 31 演習 5 終了後の SearchLibrary.egl ファイル . . 32 演習 5 終了後の customersearch.egl ファイル . . 33EGL
を使った JSF 検索ページの作成
このチュートリアルでは、EGL と JSF の高度な使い方を解説しながら、チュートリアル「EGL の紹介 (クイック・スタート・ガイド)」の内容をさらに深く掘り下げます。このチュートリアルでは、ユーザーが データベース検索を行うことができるページを作成します。学習目標
このチュートリアルでは、次の作業を行う方法を学習します。 v SQL ステートメントを使用して、検索ページの結果をフィルターに掛ける v カスタマイズした EGL レコード・パーツを作成して、ページに表示する v JSF コンボ・ボックスに動的なデータを取り込む所要時間
60 分 関連情報 EGL の紹介 (クイック・スタート・ガイド) EGL での Hello world プログラムの作成PDF バージョンの表示
概要
このチュートリアルでは、EGL と JSF の高度な使い方を解説しながら、チュートリアル「EGL の紹介 (クイック・スタート・ガイド)」の内容をさらに深く掘り下げます。このチュートリアルでは、ユーザーが データベース検索を行うことができるページを作成します。 このページでは、ユーザーによるデータ入力が可能です。入力されたデータについて、一致するレコードが データベースで検索され、同じページに検索結果が表示されます。検索ページを作成するには、他にも優れ た方法がありますが、この方法では EGL と JSF の重要な概念が説明されます。 このモジュールで作成する検索ページは、インターネットや単一の Web サイトを検索する Web 検索エン ジンや Web 検索ページとは、まったく異なるものです。ここで作成する検索ページは、データベース・レ コードを検索するものであって、Web ページや Web ページ上の情報を検索するものではありません。学習目標
このチュートリアルでは、次の作業を行う方法を学習します。 v SQL ステートメントを使用して、検索ページの結果をフィルターに掛ける v カスタマイズした EGL レコード・パーツを作成して、ページに表示する v JSF コンボ・ボックスに動的なデータを取り込む所要時間
このチュートリアルの所要時間は、約 60 分です。このチュートリアルに関する他の概念を参照した場合 は、この時間内に終わらない可能性がありますのでご注意ください。前提条件
このチュートリアルを始める前に、チュートリアル「EGL の紹介 (クイック・スタート・ガイド)」を終了 しておく必要があります。チュートリアル・アプリケーション
このチュートリアルを終了した時点で、検索ページが完成します。このページでは、ユーザーからのデータ 入力を受け付けて、入力内容をデータベース内のデータと比較し、その結果をユーザーに返すことができま す。ここでは、2 つのパラメーターを同時に使用する検索 (AND 検索) の作成方法を学習します。また、 AND 検索を変更して、2 つのパラメーターのいずれかを使用する検索 (OR 検索) にする方法も学習しま す。この場合は、ユーザーがいずれかのタイプを選択できるように、ページ上にラジオ・ボタン・グループ を配置します。また、ページ上にコンボ・ボックスを配置して、検索パラメーターの選択項目を限定する方 法も学習します。コンボ・ボックスでは、ユーザーが文字列を入力する代わりに、選択項目のリストが表示 されます。最後に、フィールドを組み合わせたり、出力のページ上での表示方法を決めることによって、検 索結果をカスタマイズする方法を学習します。 チュートリアル完了後に作成される検索ページは、次のようになります。演習 1: シンプルな検索ページを作成する
この演習では、シンプルな検索ページのセットアップを行います。検索機能を実行する EGL コードの追加 については、次の演習で説明します。 このページを作成する基本的なステップは、他の EGL-JSF Web ページの場合と基本的に同じです。 1. Web ページを作成する。 2. EGL 変数を作成する。 3. EGL データを JSF コンポーネントにバインドする。 4. EGL 変数を管理する EGL 関数を追加する。 この演習では、最初の 3 つのステップを説明します。 4 つ目のステップは、次の演習で説明します。Web
ページを作成する
1. プロジェクト・エクスプローラー・ビューで、EGLWeb プロジェクトの WebContent フォルダーをク リックして選択します。 2. 「ファイル」 → 「新規」 → 「その他」の順にクリックします。 3. 「新規」ウィンドウで「Web」を展開し、「Web ページ」をクリックします。 4. 「次へ」をクリックします。 「新規 Web ページ」ウィンドウが開きます。 5. 「ファイル名」フィールドに、新規ファイルの名前として次のテキスト (拡張子を含む) を入力しま す。 customersearch.jsp 6. 「フォルダー」フィールドに /EGLWeb/WebContent フォルダーが表示されていることを確認します。 7. 「テンプレート」リストで、「マイ・テンプレート」をクリックします。 8. 「プレビュー」ボックスで、A_gray.htpl テンプレートをクリックします。 9. 「終了」をクリックします。 新規ページが作成されて、エディターに表示されます。 10. デフォルトのテキストに代えて、「Customer Search」 と入力します。 11. Enter キーを 3 回押して、ブランク行を 3 行挿入します。レコードを作成する
次に、EGL レコードを 2 つ作成します。 searchTerms レコードは、検索用の入力データ、つまり検索語 を表します。この場合、searchTerms レコードには、検索する顧客の名前と顧客の州が保持されます。 searchResults[] レコード配列は、検索結果、つまり検索入力と一致するデータベースのレコードを表しま す。 1. 「パレット」ビューの「EGL」ドロワーから、ページ上の「Customer Search」テキストの下に、「新 規変数」をドラッグします。 「新規 EGL データ変数の作成」ウィンドウが開きます。 2. 「型の選択」で、「レコード」をクリックします。 3. 「レコード型」で、「Customer」をクリックします。 4. 「フィールド名を入力してください」フィールドに、次のテキストを入力します。 searchTerms 5. 「配列」チェック・ボックスのチェック・マークを外します。 6. 「コントロールを追加して EGL 要素を Web ページに表示」チェック・ボックスのチェック・マー クを外します。7. 「OK」をクリックします。 8. 「パレット」ビューからページ上の「Customer Search」テキストの下に、もう一度「新規変数」をド ラッグします。 「新規 EGL データ変数の作成」ウィンドウが再び開きます。 9. 「型の選択」で、「レコード」をクリックします。 10. 「レコード型」で、「Customer」をクリックします。 11. 「フィールド名を入力してください」で、次のフィールド名を入力します。 searchResults 12. 「配列」チェック・ボックスにチェック・マークを付けます。 13. 「コントロールを追加して EGL 要素を Web ページに表示」チェック・ボックスのチェック・マー クを外します。 14. 「OK」をクリックします。 これで、ページ・データ・ビューに 2 つの新しい変数が表示されます。
ページにレコードを追加する
1. ページ・データ・ビューで、「JSF ハンドラー」を展開します。 2. ページ・データ・ビューからページ上の「Customer Search」テキストの下に、searchTerms -Customer レコードをドラッグします。 「挿入のコントロール」ウィンドウが開きます。 3. 「挿入のコントロール」ウィンドウの「コントロールの作成対象」で、「既存レコードの更新」をクリ ックします。 4. 「表示するフィールド」のフィールド・リストで、「なし」ボタンをクリックします。これで、すべ てのチェック・ボックスのチェック・マークが外れます。 5. 「LastName」フィールドと「State」フィールドの横にあるチェック・ボックスに、チェック・マーク を付けます。 6. 「オプション」ボタンをクリックします。 7. 「オプション」ウィンドウで、「実行ボタン」チェック・ボックスにチェック・マークを付けます。 8. 「実行ボタン」の「「ラベル 」フィールドに、 「Submit」 と入力します。 9. 「削除」ボタンのチェック・ボックスのチェック・マークを外します。 10. 「OK」をクリックします。 11. 「終了」をクリックします。 ページ上に、顧客の姓のフィールドと顧客の州のフィールドがあるフォ ームが表示されます。これらの入力フィールドに、顧客を検索するための検索語を入力します。このペ ージは、次のようになります。12. 「Submit」ボタンの右側の {エラー・メッセージ} フィールドにカーソルを置き、Enter キーを押し て、「Submit」ボタンの下にブランク行を 1 行追加します。
13. パレットから、「拡張 Faces コンポーネント」ドロワーを開きます。
14. 「拡張 Faces コンポーネント」ドロワーからページ上の「Submit」ボタンの下の新しい行に、「出
力」コンポーネントを 2 つドラッグします。 これらの出力フィールドには、返された結果の数と、
「5 Customer(s) found. Search again? (該当する顧客は 5 人です。もう一度検索しますか?)」 とい うようなメッセージが表示されます。 15. ページ・データ・ビューからページ上の「Submit」ボタンと 2 つの新しい出力フィールドの下に、 searchResults - Customer[] をドラッグします。 「リスト挿入のコントロール」ウィンドウが開きま す。 16. 「リスト挿入のコントロール」ウィンドウで、「既存レコードの表示 (読み取り専用)」の横にあるラ ジオ・ボタンをクリックします。 17. 「表示するカラム」のリストで、「なし」ボタンをクリックします。これで、チェック・ボックスのチ ェック・マークが外れます。 18. 「LastName」フィールド、「EmailAddress」フィールド、および「State」フィールドの横にあるチェ ック・ボックスに、チェック・マークを付けます。 「リスト挿入のコントロール」ウィンドウは、次 のようになります。
19. 「終了」をクリックします。
20. ページを保管します。
これで、ユーザーが検索語を入力するための入力フィールドと、検索結果を表示するためのデータ・テーブ ルが、この検索ページに作成されました。検索ページは、次のようになります。
演習のチェックポイント
これで、シンプルな検索ページが作成されました。 この演習では、次の作業を行う方法を学習しました。 v EGL Web ページを作成する v EGL レコードを作成する v Web ページに EGL レコードを追加する では、『演習 2: 検索関数のコードを追加する』に進みましょう。演習 2: 検索関数のコードを追加する
Web ページの作成が終わりましたので、次に EGL コードを追加します。この EGL コードで、Web ペー ジから検索語を受け取り、これらの検索語に従ってデータベースを検索して、検索結果をページに表示しま す。
検索関数用のライブラリーを作成する
検索関数は複雑になる可能性があるため、検索関数を保持するライブラリーを作成する必要があります。ラ イブラリーがあれば、検索関数の再利用が可能となり、JSF ハンドラーを単純なままにしておくことができ ます。 1. EGLWeb プロジェクトの EGLSource フォルダーを右クリックして、「新規」 → 「ライブラリー」の 順にクリックします。「新規 EGL ライブラリー」ウィンドウが開きます。2. 「EGL ソース・ファイル名」フィールドに、新規ライブラリー用の名前として、次の名前を入力しま す。 SearchLibrary 3. 「パッケージ」フィールドに、libraries と入力します。 この名前を持つパッケージがない場合は、新 しいパッケージが EGL によって自動的に作成されます。 4. 「EGL ライブラリー型」で、「基本」をクリックします。 5. 「終了」をクリックします。 新規ライブラリーが作成され、EGL エディターに表示されます。 6. 新規ライブラリーから事前に挿入されたテキストを削除していき、次のコードだけが残るようにしま す。 package libraries;
library SearchLibrary type BasicLibrary end
これで、このライブラリーに関数を追加して、その関数を JSF ハンドラーで使用できるようになります。
SQL
検索関数をライブラリーに追加する
1. SearchLibrary ファイル内にある最後の End ステートメントの直前に、次のコードを挿入します。 function NameAndStateSearch_And(lname string in,
state char(2) in, customer Customer[]) get customer; end この関数は、他のライブラリーにある、データベースからすべてのレコードを取り出す関数と似ていま す。異なる点は、この関数は次の 3 つのパラメーターを受け取ることです。 v ストリング変数 lname。検索対象である顧客の姓を表します。 v 文字変数 state。検索対象である顧客の州を表します。 v 顧客レコードの配列 customer。検索結果を保持します。 現時点では、この関数はデータベース内のすべてのレコードを取り出します。次に、検索語 lname と state に一致するレコードのみを返すように、この関数で生成される SQL ステートメントを編集しま す。 2. この関数を挿入する際にコード補完機能を使用しなかった場合は、ライブラリーの package libraries; 行の直下に、次の import ステートメントを追加します。 import eglderbyr7.data.Customer;
3. 先ほど追加したコード内の get customer 行で、customer という単語を直接クリックします。 get customer 行の customer という単語に、カーソルを置いてください。ここにカーソルを置かないと、 SQL ステートメントを編集できません。
4. get customer 行の customer という単語を右クリックして、ポップアップ・メニューで「SQL ステー
トメント」 → 「追加」の順にクリックします。 明示的な SQL ステートメントが、get customer 命令
行に追加されます。
厳密に言えば、コードは何も変わっていません。 EGL は、get customer というコードが検出されたと きに使用する、デフォルトの SQL コードを公開しただけです。この SQL コードがページ上に明示的
に表示されたので、これを編集して get customer コードの動作を変更することができます。ここで は、すべての顧客レコードを取り出すのではなく、姓と州が一致している顧客レコードのみを取り出す ように、ステートメントを変更します。
5. from EGL.CUSTOMER 行の末尾にカーソルを置き、Enter キーを押して、この行の下にブランク行を 1 行 追加します。
6. from EGL.CUSTOMER の下にできた新しいブランク行に、次のコードを挿入します。 where EGL.CUSTOMER.LAST_NAME like :lname
and EGL.CUSTOMER."STATE" = :state コードは、次のようになります。 追加したコードは、EGL ではなく SQL です。 EGL.CUSTOMER.LAST_NAME コードは、このプロジェクト で使用しているサンプル・データベース内にあるフィールドの、完全な名前です。 eglderbyr7.data パッ ケージ内のレコード・パーツを見れば、顧客レコードなどのレコードもこれらのフィールドを参照して いることが分かります。 :lname コードと :state コードは、ホスト変数 と呼ばれます。このコンテキ ストでは、SQL コードで使用している EGL 変数が、ホスト変数に相当します。 STATE は引用符で囲 まれているので、″state″ は予約語ではなく、テーブルの名前になります。 EGL では、さまざまな方法で SQL ステートメントの作成と生成を行うことができます。これまでの EGL チュートリアルでは、特定の顧客 ID 番号を指定して、実際のデータベース・レコードを取り出し
ました。この節では、先ほど追加した where ステートメントに似た、SQL の where ステートメントを 作成しました。同様の操作を行うには、defaultSelectCondition を使用する方法もあります。 7. ファイルを保管します。 8. ライブラリーを生成します。Ctrl+G キーを押すか、右クリックして 「生成」をクリックするか、いず れかを行ってください。 これで、ライブラリー・ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 27 ページの『演習 2 終了後の SearchLibrary.egl ファイル』 内の コードと、作成したコードが一致していることを確認してください。
JSF
ハンドラーで検索関数を使用する
1. customersearch.jsp ページを開きます。 2. エディターでページ上を右クリックし、ポップアップ・メニューの「ページ・コードの編集」をクリッ クします。ページ・コード・ファイルが開きます。 3. customersearch.jsp ページの JSF ハンドラーで、先ほど作成した次の変数 (検索語と検索結果を表すも の) を探します。 searchResults Customer[0]; searchTerms Customer; 4. 先ほど作成した変数の直後に、次のコードを追加します。これは、2 つの追加変数を作成するコードで す。 resultMessage char(80); numberOfResults int; 次に、Web ページから呼び出す関数を作成する必要があります。この関数は、searchTerms 変数からラ イブラリー内の関数に、searchResults 変数と必要なフィールドを渡します。 5. 次の関数を、JSF ハンドラーに追加します。 function searchFunction() searchTerms.LastName = searchTerms.LastName::"%"; SearchLibrary.NameAndStateSearch_And( searchTerms.LastName, searchTerms.State, searchResults); resultMessage = " customer(s) found."; numberOfResults = searchResults.getSize(); end 6. この関数を挿入する際にコード補完機能を使用しなかった場合は、package jsfhandlers; 行の直下に、 次の import ステートメントを追加します。 import libraries.SearchLibrary; 最後に、検索が失敗した後でページをリセットするためのコードを、onPreRender 関数に追加する必要 があります。 7. 次の関数を、JSF ハンドラーに追加します。 function onPreRender() if (searchResults.getSize() == 0)resultMessage = "No customers found or no search criteria entered."; end
end
8. onPreRenderFunction プロパティーを JSF ハンドラーに追加します。ハンドラーの宣言は、次のよう になります。
handler customersearch type JSFHandler {onConstructionFunction = onConstruction,
onPreRenderFunction = onPreRender, view = "customersearch.jsp"}
先ほど追加したページ・コードに関する技術上の注意点は、次のとおりです。
v searchTerms レコードと、レコードの配列 searchResults は、どちらも Customer レコードのイン スタンスです。レコード・パーツやデータ項目パーツのインスタンスは、複数作成することができま す。 v このコードに含まれる searchFunction 関数は、このページの「Submit」ボタンにバインドされま す。この関数は、この演習の前半でライブラリーに追加した NameAndStateSearch_And 関数を呼び出 します。 v この検索関数は、ユーザーが入力した姓の末尾に、ワイルドカード文字を追加します。例えば、ユー ザーが Sm と入力した場合、検索ストリングは Sm% になるので、Smith や Smiley といった結果が 返されます。 v この検索関数では、大/小文字を区別します。 9. ファイルを保管して、生成します。 このファイルは、次のようになります。
これで、customersearch.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 28 ページの『演習 2 終了後の customersearch.egl ファイル』 内 のコードと、作成したコードが一致していることを確認してください。
検索関数を Web ページにバインドする
JSF ハンドラーでのデータと関数のセットアップが終わったので、ページ上での使用が可能になります。 1. customersearch.jsp ページを開きます。 2. ページ・データ・ビューで、「JSF ハンドラー」を展開します。 3. 「Submit」ボタンの下にある、左側の出力テキスト・フィールドに、numberOfResults 変数を直接ドラ ッグ・アンド・ドロップします。 4. 右側の出力テキスト・フィールドに、resultMessage 変数を直接ドラッグします。 5. ページ上の「Submit」ボタンに、searchFunction() を直接ドラッグ・アンド・ドロップします。 ペー6. ページを保管します。 7. サーバーでページを実行し、検索語をページに入力して、ページをテストします。 a. プロジェクト・エクスプローラー・ビューで customersearch.jsp を右クリックして、「実行」 → 「サーバーで実行」の順にクリックします。 プロジェクトのデフォルト・サーバーは、以前のチュ ートリアルですでに設定しているはずです。まだ設定していない場合、または設定を変更した場合 は、使用するサーバーを再度選択する必要があります。 b. Web ブラウザーでページを開いたら、「LastName」フィールドと「State」フィールドに文字を入力 して、「Submit」ボタンをクリックします。 この検索では大文字/小文字が区別されますので、注意 してください。 例えば、「LastName」フィールドに F と入力し、「State」フィールドに NJ と入力した場合は、次 の画面のような結果がページに表示されます。 この検索ページは、使いやすくありません。顧客の州と顧客の姓の、両方の先頭文字をユーザーが知ってい なければならないからです。ユーザーが AND 検索と OR 検索のどちらかを選択できれば、使いやすさは 向上します。次の演習では、このオプションをページに追加します。その次の演習では、「State」入力フィ ールドをコンボ・ボックスに変更し、データベースで使用されている有効な州がすべてリストされるように します。
演習のチェックポイント
前回の演習で作成した検索ページを強化する、EGL コードを作成しました。 この演習では、次の作業を行う方法を学習しました。 v EGL ライブラリーを作成して、関数を組み込む v ライブラリー内の関数を呼び出すようにコードを編集して、EGL JSF ハンドラーに追加する v JSF ハンドラー内の関数を、Web ページ上のコントロールにバインドする では、『演習 3: OR 検索条件を使用する』に進みましょう。演習 3: OR 検索条件を使用する
この演習では、ユーザーが AND 検索条件と OR 検索条件のいずれかを選択できるラジオ・ボタン・グル ープを、ページに追加します。 このページを実行すると、次のようになります。OR
検索コードをライブラリーに追加する
前回の演習では、AND 条件で検索する関数を追加しました。次に、OR 条件で検索する関数を追加しま す。このようにすることで、姓または州のいずれかが一致するレコードを、ユーザーが検索できるようにな ります。 1. SearchLibrary.egl ライブラリー・ファイルを開きます。 2. このファイルの最後の end ステートメントの直前に、次のコードを追加します。 function NameAndStateSearch_Or(lname string in,state char(2) in, customer Customer[]) get customer with
#sql{ select EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME, EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET, EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname or EGL.CUSTOMER."STATE" = :state order by
EGL.CUSTOMER.CUSTOMER_ID asc };
この関数は、前回の演習で追加した NameAndStateSearch_And 関数とほぼ同じですが、where ステート メントで AND ではなく OR を使用する点が異なります。 3. ファイルを保管します。 4. ライブラリー・ファイルの Java™ を生成します。Ctrl+G キーを押すか、ファイルを右クリックしてポ ップアップ・メニューで「生成」をクリックするか、いずれかを行ってください。 5. ファイルを閉じます。 これで、SearchLibrary.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 29 ページの『演習 3 終了後の SearchLibrary.egl ファイル』 内の コードと、作成したコードが一致していることを確認してください。
ラジオ・ボタン・グループをページに追加する
2 つの異なる検索関数が使えるようになったので、ユーザーがどちらの検索タイプを使用するかを選択でき るように、ラジオ・ボタンをページに追加する必要があります。 1. customersearch.jsp ファイルに戻ります。 2. カーソルを「実行」ボタンの左側に置き、Enter キーを押して、「実行」ボタンの上に新しい行を追加 します。 3. パレットから、「拡張 Faces コンポーネント」ドロワーを開きます。 4. 「ラジオ・ボタン・グループ」を新しい行にドラッグします。 5. ラジオ・ボタン・グループをクリックして、選択します。 6. プロパティー・ビューが開いていない場合は、「ウィンドウ」 → 「ビューの表示」 → 「プロパティ ー」の順にクリックして、このビューを開きます。 7. プロパティー・ビューで、「選択項目の追加」ボタンをクリックします。 「選択項目の追加」ボタン は、プロパティー・ビューの右端にあります。 ボタンの左側にあるテーブルに、ラジオ・ボタン・グ ループの新しい選択項目がリストされます。 8. 新しい選択項目の「ラベル」フィールドに、次のテキストを入力します。 AND 9. この選択項目の「値」フィールドに、次のテキストを入力します。 AND 10. 「選択項目の追加」を再びクリックします。 11. 2 つ目の選択項目の「ラベル」と「値」に、次のテキストを入力します。OR 終了すると、プロパティー・ビューは次のようになります。 12. ページを保管します。 ラジオ・ボタン・グループの追加が終了すると、このページは次のようになります。
OR
検索コードをページに追加する
次に、ラジオ・ボタンからの入力によって、どちらの検索関数を使用するかを決定するように、JSF ハンド ラーを構成する必要があります。 1. ページを右クリックし、ポップアップ・メニューの「ページ・コードの編集」をクリックします。 エデ ィター上で、customersearch.egl ファイルが開きます。andOr char(3); 次に、この変数をラジオ・ボタンにバインドします。この変数は、ページ上で選択されたラジオ・ボタ ンに応じて、値 ″AND″ または ″OR″ を保持します。 3. searchFunction という関数を、次の新しいバージョンに置き換えます。 function searchFunction() searchTerms.LastName = searchTerms.LastName+"%"; if (andOr == "AND") SearchLibrary.NameAndStateSearch_And( searchTerms.LastName, searchTerms.State, searchResults); else SearchLibrary.NameAndStateSearch_Or( searchTerms.LastName, searchTerms.State, searchResults); end
resultMessage = "Customer(s) found. Search again?"; numberOfResults = searchResults.getSize();
end
この関数は、前回の演習で追加した関数とほぼ同じですが、次の点が異なります。
v 文字変数 andOr は、選択されたラジオ・ボタンの値 (AND または OR) を表しています。
v この searchFunction 関数には、if ステートメントがあります。ユーザーが AND のラジオ・ボタン を選択した場合は、この関数はライブラリー内の NameAndStateSearch_And 関数を使用します。それ 以外の場合は、NameAndStateSearch_Or 関数を使用します。 4. ファイルを保管し、閉じて、生成します。 5. customersearch.jsp ページに戻ります。 6. ページ・データ・ビューで、ページ上のラジオ・ボタン・グループに andOr - char(3) 変数をドラッグ して、ラジオ・ボタン・グループにバインドします。 7. searchFunction() 関数を、ページ上の「実行」ボタンにバインドします。 8. ページを保管します。 9. ページのテストを行います。 ページをテストする際には、新しいラジオ・ボタン機能を使用するようにしてください。ラジオ・ボタンの いずれか一方を選択して、検索ページが正しく動作することを確認する必要があります。 サンプル・データベース内のレコード数が多くないのに対して、選択肢となる州の数が多くなるため、この 検索ページもまだ使いやすいとは言えません。次の演習では、「State」入力フィールドをコンボ・ボックス に変更し、データベースで使用されている有効な州がすべてリストされるようにします。 これで、customersearch.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 29 ページの『演習 3 終了後の customersearch.egl ファイル』 内 のコードと、作成したコードが一致していることを確認してください。
演習のチェックポイント
同時に 2 つのパラメーターに基づいて検索することもでき、一方のパラメーターのみに一致する結果を検 索することもできる、検索ページを作成しました。 この演習では、次の作業を行う方法を学習しました。v EGL ライブラリー内の検索関数に、OR 検索を追加する v ラジオ・ボタン・グループを、検索ページに追加する v OR 検索コードを、JSF ハンドラーに追加する v 新しい検索関数を、ラジオ・ボタン・グループにバインドする では、『演習 4: コンボ・ボックスに動的にデータを取り込む』に進みましょう。
演習 4: コンボ・ボックスに動的にデータを取り込む
この演習では、顧客の州のうち有効な選択項目のみをコンボ・ボックスにリストすることで、検索ページを さらに使いやすくします。 ユーザーができるだけ簡単に検索を行えるようにするには、ユーザー・エラーを防ぎ、ユーザーが行わなけ ればならない決定を可能な限り簡素化する必要があります。この演習では、「State」入力フィールドをコン ボ・ボックスに置き換えることで、検索ページをより使いやすくする方法を学習します。このコンボ・ボッ クスには、データベース内で少なくとも 1 つの顧客レコードで表示されている州のみをリストして、ユー ザーがどの州を使用するかを検討する手間を省きます。コードをライブラリーに追加する
まず、データベース内で表示されている州をすべて取り出す関数を、ライブラリーに追加する必要がありま す。この関数は、ライブラリー内の他の関数よりも単純なものになります。データベースから 1 つの列だ けを取り出せばよく、検索の入力パラメーターもありませんし、出力配列に保持されるのは州のリストだけ です。州情報に対して、顧客レコードの配列を使用することもできますが、レコード内の他のフィールドは 必要ないので、ストリングの配列を使用する方が作業は単純になります。 1. SearchLibrary.egl を開きます。 2. 次の関数をライブラリーに追加します。function getAllCustomerStates(listOfStates string[]) customers Customer[0];
counter int; get customers with
#sql{
select EGL.CUSTOMER."STATE" from EGL.CUSTOMER
group by EGL.CUSTOMER."STATE" order by EGL.CUSTOMER."STATE" asc };
listOfStates.removeAll();
for (counter from 1 to customers.getSize() by 1) listOfStates.appendElement(customers[counter].State); end end 3. ファイルを保管します。 4. ライブラリーを生成します。 先ほど追加した getAllCustomerStates 関数に関する技術上の注意点は、次のとおりです。 v この関数は、getAllCustomers 関数と同じように、データベースの顧客レコードにアクセスします。た だし、getAllCustomerStates 関数が大きく異なる点は、Customer テーブル内のすべてのフィールドでは なく、STATE フィールドのみを選択するところです。
v group by EGL.CUSTOMER."STATE" 行によって、州別に結果がグループ化されるため、各州は結果の中で 1 度しかリストされません。
v order by EGL.CUSTOMER."STATE" asc 行によって、結果がアルファベット順に並べられます。 v for ループによって、state フィールドのみがレコードから文字列の配列に移動します。 これで、SearchLibrary.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 30 ページの『演習 4 終了後の SearchLibrary.egl ファイル』 内の コードと、作成したコードが一致していることを確認してください。
コードを JSF ハンドラーに追加する
1. customersearch.jsp ページに戻ります。 2. customersearch.jsp ページを右クリックし、ポップアップ・メニューで「ページ・コードの編集」をクリ ックします。 3. andOr char(3); 行の後に、次の命令行を追加します。 customerStates string[0]; この変数は、ライブラリー内の関数から返された州のリストを保持します。 4. Function onPreRender() 命令行の後に、ブランク行を 1 行追加します。このブランク行に、次の命令 行を追加します。 SearchLibrary.getAllCustomerStates(customerStates); 5. ファイルを保管します。 6. ファイルを生成します。 生成が終了すると、customersearch.egl ファイルは次のようになります (一部の関数は、省略されていま す)。先ほど追加したコードに関する技術上の注意点は、次のとおりです。 v customerStates 配列には、データベース内で少なくとも 1 人の顧客で表示される州のリストが保持さ れます。 v onPreRender 関数に追加した行によって、customerStates 配列がライブラリー内の getAllCustomerStates 関数に送られ、この配列に州のリストが取り込まれます。 これで、customersearch.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 31 ページの『演習 4 終了後の customersearch.egl ファイル』 内 のコードと、作成したコードが一致していることを確認してください。
コンボ・ボックスをページに追加する
動的にデータが取り込まれるコンボ・ボックスの追加は、前回の演習で追加したラジオ・ボタン・グループ のような、事前定義された値を持つ JSF コントロールの追加よりも、複雑な作業になります。このコンv customerStates 配列。オプションのリストを、コンボ・ボックスに提供します。 v searchTerms.State 変数。コンボ・ボックスからユーザーが選択した項目を保持します。 1. customersearch.jsp ページに戻ります。 2. 「STATE」入力フィールドをクリックし、Delete キーを押します。 入力フィールドが、ページから削 除されます。 3. パレットから、「拡張 Faces コンポーネント」ドロワーを開きます。 4. 「コンボ・ボックス」項目をページにドラッグし、「STATE」入力フィールドがあった場所に配置し ます。 5. ページ・データ・ビューで、searchTerms - Customer を展開します。
6. ページ・データ・ビューの searchTerms - Customer で、State - State をコンボ・ボックスまでドラ ッグします。 7. コンボ・ボックスをクリックして、選択します。 8. プロパティー・ビューを開きます。 プロパティー・ビューでは、「値」フィールドに #{customersearch.searchTerms.State} が設定されています。これは、コンボ・ボックスで選択された 項目の値が searchTerms レコードの State フィールドに挿入されることを示します。 9. プロパティー・ビューの右端で、選択項目のテーブルの近くにある「選択項目のセットを追加」をクリ ックします。 選択項目のリストに、<selectitems> ラベルとデフォルト値を持つ、新しい項目が追加 されます。 <selectitems> ラベルは、単一の静的ラベルではなく、複数のオプションを表す JSF タグ です。言い換えれば、このコンボ・ボックスは、コンボ・ボックス内の両方のラベルの「値」 列で指 定した値と、それらのラベルで表される値を使用します。 10. <selectitems> ラベルの横にある「値」 フィールドで、「ページ・データ・オブジェクトの選択」ボ タンをクリックします。 「ページ・データ・オブジェクトの選択」ウィンドウが開きます。 11. 「ページ・データ・オブジェクトの選択」ウィンドウで、customerStates - string[] をクリックしま す。 「ページ・データ・オブジェクトの選択」ウィンドウは、次のようになります。
12. 「OK」をクリックします。 これで、customerStates 変数から取り出されたものがコンボ・ボックス 内の選択項目になり、コンボ・ボックスで選択された州が searchTerms 変数に挿入されます。 13. ページを保管します。 14. ページのテストを行います。
演習のチェックポイント
検索パラメーターのリストを作成するコンボ・ボックスを、Web ページ上に作成しました。 この演習では、次の作業を行う方法を学習しました。 v 限定検索用のコードを、ライブラリーに追加する v 変更した検索関数を呼び出すコードを、JSF ハンドラーに追加する v コンボ・ボックスを、Web ページに追加する v 変更した検索関数を、コンボ・ボックスにバインドする では、『演習 5: 検索結果をカスタマイズする』に進みましょう。演習 5: 検索結果をカスタマイズする
この演習では、検索結果を表示するために、より複雑なデータ・テーブルを作成する方法を学習します。 これまでは、Web ページに追加した JSF コンポーネントはそれぞれ、単一のデータベース・テーブルのデ ータにバインドしていました。複雑なリレーショナル・データベースを使用する場合には、複数のテーブル のデータを一度に処理することができます。 この演習では、Customer テーブルと State テーブルの両方のデータを表示することで、結果のカスタマイ ズを行います。このようにすると、顧客の名前 (Customer テーブルのデータ) と、顧客の完全な (2 文字の 略称ではない) 州名 (State テーブルのデータ) の両方が、結果に表示されます。また、顧客の姓と名を組み 合わせてフルネームのフィールドを作成することで、結果のカスタマイズを行うこともできます。最終的な データ・テーブルは、次のようになります。 このようなカスタマイズを施したデータ・テーブルを作成する一番簡単な方法は、このデータ・テーブル内 の単一のレコードを表す EGL レコードを、カスタマイズして作成することです。そして、これらのレコー ドの配列を作成して、データ・テーブルにバインドします。この演習でカスタマイズして作成する EGL レ コードは、次の 3 つのフィールドから成り立っています。 v email フィールド。Customer テーブルにある顧客の電子メール・アドレスを保持します。 v fullName フィールド。Customer テーブルにある顧客の姓と名を組み合わせた名前を保持します。 v State フィールド。顧客の完全な州名を保持します。この検索関数は、完全な名前を取得するために、 Customer テーブルにある顧客の州の略称と、State テーブルにある略称と州名のリストを相互参照しま す。コードをライブラリーに追加する
1. SearchLibrary.egl を開きます。 2. 次の関数をライブラリーに追加します。 function getOneState(state Statetable)get state; end
stateTable レコードは、Statetable.egl ファイルで定義されています。関数を入力する際にコード補 完機能を使用しなかった場合は、このレコードをインポートする必要があります。
3. SearchLibrary.egl ファイルの package libraries; 行の直後に、次のステートメントを追加します。 import eglderbyr7.data.Statetable;
4. このファイルのライブラリーの最後にある end ステートメントの直後に、次のコードを追加します。 Record customizedResult type basicRecord
fullName string
{displayName = "Full Name"}; email string
{displayName = "Email Address"}; stateName string
{displayName = "State"}; end
注: ライブラリーそのものにレコード定義を組み込むことができないため、customizedResult レコード 定義は、ライブラリーを閉じる end ステートメントの後に追加しなければなりません。 5. ファイルを保管します。 6. ファイルを生成します。 これで、SearchLibrary.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 32 ページの『演習 5 終了後の SearchLibrary.egl ファイル』 内の コードと、作成したコードが一致していることを確認してください。
コードをページ・コード・ファイルに追加する
1. customersearch.jsp ページに戻ります。 2. customersearch.jsp ページを右クリックし、ポップアップ・メニューで「ページ・コードの編集」をクリ ックします。 3. JSF ハンドラーの customerStates string[0]; 行の後に、次の変数定義を追加します。 allRecords customizedResult[0]; この変数は、先ほど作成したカスタマイズ・レコードに基づいて、新しい検索結果を表示します。 4. このコード行を挿入する際にコード補完機能を使用しなかった場合は、JSF ハンドラーの package jsfhandlers; 行の下に、次の import ステートメントを追加します。 import libraries.customizedResult; 5. 次の関数を JSF ハンドラーに追加します。function generateCustomResults(passedResults Customer[]) allRecords.removeAll();
oneRecord customizedResult; counter int = 1;
state Statetable;
// 返された検索結果ごとに 1 回ループする while (counter <= (passedResults.getSize()))
oneRecord.fullName = passedResults[counter].FirstName :: " " :: passedResults[counter].LastName; oneRecord.email = passedResults[counter].EmailAddress; state.StateAbbrev = passedResults[counter].state; SearchLibrary.getOneState(state); oneRecord.stateName = state.StateName; allRecords.appendElement(oneRecord); counter = counter + 1; end end この関数によって、検索結果をカスタマイズしたものが組み立てられます。この関数は、 searchFunction 関数の最後に呼び出さなければなりません。 6. JSF ハンドラーで、searchFunction 関数を閉じる end ステートメントの直前に、次の命令行を追加し ます。 generateCustomResults (searchResults); 7. ファイルを保管します。 JSF ハンドラーに追加した新しい関数が、次の一般的なステップに従って、カスタマイズされた検索結果を 組み立てます。 1. 姓と名を使って、顧客のフルネームを組み立てます。
3. 顧客の州の略称を取得します。 4. 略称と一致する州名を検索します。 5. フルネーム、電子メール・アドレス、および州名を allRecords 配列に追加します。 これで、customersearch.egl ファイルのコードが完成しました。このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、ファイル 33 ページの『演習 5 終了後の customersearch.egl ファイル』 内 のコードと、作成したコードが一致していることを確認してください。
カスタマイズしたデータ・テーブルを作成する
1. customersearch.jsp ページに戻ります。 2. 古い検索結果を削除するには、古いデータ・テーブルを削除します。次のステップは、任意で実行して ください。 a. 古い検索結果テーブル内のどこかをクリックして、そのテーブル内にカーソルを移動します。 b. 下矢印キーを押します。 データ・テーブル全体が選択されます。 c. Delete キーを押します。 データ・テーブルがページから削除されます。 3. ページ・データ・ビューから、ページ上の他のデータ・テーブルの直下に、allRecords -customizedResult[] をドラッグします。 「リスト挿入のコントロール」ウィンドウが開きます。 4. 「既存レコードの表示 (読み取り専用)」の横にある、ラジオ・ボタンをクリックします。 5. 「終了」をクリックします。 新しいデータ・テーブルが、ページ上に作成されます。 6. ページを保管します。 7. ページのテストを行います。 顧客を検索すると、顧客のフルネーム、電子メール・アドレス、および州名がデータ・テーブルに表示され るようになります。このページは、次のようになります。演習のチェックポイント
「FirstName」フィールドと「LastName」フィールドを組み合わせて「Fullname」フィールドにし、 「State」フィールドの 2 文字のコードを完全な州名に変換することで、検索結果をカスタマイズしまし た。 この演習では、次の作業を行う方法を学習しました。 v 結果をカスタマイズする関数を、ライブラリーに追加する v ライブラリー・ファイルで、ライブラリー自身の外側にレコードを追加する v 新たにカスタマイズされた結果関数を、JSF ハンドラーに追加する v 新しい結果テーブルを、Web ページに配置する v 新しい結果関数を、テーブルにバインドする これで、『演習 5: 検索結果をカスタマイズする』が終わりました。以上で、チュートリアルはすべて終了 です。まとめ
これで、チュートリアル「EGL を使った JSF 検索ページの作成」は終了しました。学習した演習
このチュートリアルでは、次の作業を行う方法を学習しました。 v シンプルな検索ページを作成する v EGL ライブラリーを作成して、検索ページから呼び出す関数を組み込むv カスタマイズした EGL レコード・パーツを作成して、ページに表示する
v EGL コードで SQL ステートメントを使用して、検索ページの結果をフィルターに掛ける
v 拡張 Java Server Faces コンポーネントを Web ページ上に作成し、そのコンポーネントに関数と変数を バインドする v ユーザーが検索タイプを選択できるように、検索関数を変更する v 検索結果をカスタマイズする このチュートリアル・アプリケーションを利用して、学習を続けることもできます。次の機能を、自分で追 加してみましょう。 v ここまでのチュートリアルで作成した検索ページから、updatecustomer.jsp ページへのリンクを追加しま す。 allcustomers.jsp ページで作成したものと同様に、パラメーターを渡すリンクを作成する必要があり ます。 v 顧客の名前、電子メール・アドレス、州以外のデータが含まれるように、検索結果をカスタマイズして みましょう。 関連情報
JavaServer Faces を使った Web ページでの動的な情報の表示 (Display dynamic information on Web pages with JavaServer Faces)
Web サイトのレイアウトと構造の設計 (Design the layout and structure of your Web site)
リソース
このチュートリアルでは、次のリソースを使用しました。 v 『演習 2 終了後の SearchLibrary.egl ファイル』 v 28ページの『演習 2 終了後の customersearch.egl ファイル』 v 29ページの『演習 3 終了後の SearchLibrary.egl ファイル』 v 29ページの『演習 3 終了後の customersearch.egl ファイル』 v 30ページの『演習 4 終了後の SearchLibrary.egl ファイル』 v 31ページの『演習 4 終了後の customersearch.egl ファイル』 v 32ページの『演習 5 終了後の SearchLibrary.egl ファイル』 v 33ページの『演習 5 終了後の customersearch.egl ファイル』演習 2 終了後の SearchLibrary.egl ファイル
次のコードは、演習 2 を終了した時点での SearchLibrary.egl ファイルのバージョンです。このファイル内 にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致しているこ とを確認してください。 package libraries; import eglderbyr7.data.Customer; library SearchLibrary type BasicLibraryfunction NameAndStateSearch_And(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME,
EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET,
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname and EGL.CUSTOMER."STATE" = :state order by EGL.CUSTOMER.CUSTOMER_ID asc }; end end 7ページの『演習 2: 検索関数のコードを追加する』 に戻る。
演習 2 終了後の customersearch.egl ファイル
次のコードは、演習 2 を終了した時点での customersearch.egl ファイルのバージョンです。このファイル 内にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致している ことを確認してください。 package jsfhandlers; import eglderbyr7.data.*; import libraries.SearchLibrary;handler customersearch type JSFHandler {onConstructionFunction = onConstruction, onPreRenderFunction = onPreRender, view = "customersearch.jsp"} searchTerms Customer; searchResults Customer[0]; resultMessage char(80); numberOfResults int; function searchFunction() searchTerms.LastName = searchTerms.LastName::"%"; SearchLibrary.NameAndStateSearch_And( searchTerms.LastName, searchTerms.State, searchResults);
resultMessage = " customer(s) found."; numberOfResults = searchResults.getSize(); end
function onPreRender()
if (searchResults.getSize() == 0)
resultMessage = "No customers found or no search criteria entered."; end end function onConstruction() end end 7ページの『演習 2: 検索関数のコードを追加する』 に戻る。
演習 3 終了後の SearchLibrary.egl ファイル
次のコードは、演習 3 を終了した時点での SearchLibrary.egl ファイルのバージョンです。このファイル内 にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致しているこ とを確認してください。 package libraries; import data.Customer;library SearchLibrary type BasicLibrary
function NameAndStateSearch_And(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME,
EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET,
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname and EGL.CUSTOMER."STATE" = :state order by
EGL.CUSTOMER.CUSTOMER_ID asc };
end
function NameAndStateSearch_Or(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME,
EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET,
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname or EGL.CUSTOMER."STATE" = :state order by EGL.CUSTOMER.CUSTOMER_ID asc }; end end 14ページの『演習 3: OR 検索条件を使用する』 に戻る。
演習 3 終了後の customersearch.egl ファイル
次のコードは、演習 3 を終了した時点での customersearch.egl ファイルのバージョンです。このファイル 内にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致している ことを確認してください。 package jsfhandlers; import eglderbyr7.data.*; import libraries.searchLibrary; handler customersearch type JSFHandler{onConstructionFunction = onConstruction, onPreRenderFunction = onPreRender, view = "customersearch.jsp"} searchTerms Customer; searchResults Customer[0]; resultMessage char(80); numberOfResults int; andOr char(3); customerStates string[0]; function searchFunction() searchTerms.LastName = searchTerms.LastName + "%"; if (andOr == "AND") SearchLibrary.NameAndStateSearch_And( searchTerms.LastName, searchTerms.State, searchResults); else SearchLibrary.NameAndStateSearch_Or( searchTerms.LastName, searchTerms.State, searchResults); end
resultMessage = " customer(s) found."; numberOfResults = searchResults.getSize(); end
function onPreRender()
if (searchResults.getSize() == 0)
resultMessage = "No customers found or no data entered."; end end function onConstruction() end end 14ページの『演習 3: OR 検索条件を使用する』 に戻る。
演習 4 終了後の SearchLibrary.egl ファイル
次のコードは、演習 4 を終了した時点での SearchLibrary.egl ファイルのバージョンです。このファイル内 にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致しているこ とを確認してください。 package libraries; import data.Customer;library SearchLibrary type BasicLibrary
function NameAndStateSearch_And(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME,
EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET,
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
EGL.CUSTOMER.CUSTOMER_ID asc };
end
function NameAndStateSearch_Or(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME,
EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET,
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname OR EGL.CUSTOMER."STATE" = :state order by
EGL.CUSTOMER.CUSTOMER_ID asc };
end
function getAllCustomerStates(listOfStates string[]) customers Customer[0];
counter int; get customers with
#sql{
select EGL.CUSTOMER."STATE" from EGL.CUSTOMER
group by EGL.CUSTOMER."STATE" order by EGL.CUSTOMER."STATE" asc };
listOfStates.removeAll();
for (counter from 1 to customers.getSize() by 1) listOfStates.appendElement(customers[counter].State); end end end 18ページの『演習 4: コンボ・ボックスに動的にデータを取り込む』 に戻る。
演習 4 終了後の customersearch.egl ファイル
次のコードは、演習 4 を終了した時点での customersearch.egl ファイルのバージョンです。このファイル 内にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致している ことを確認してください。 package jsfhandlers; import eglderbyr7.data.*; import libraries.SearchLibrary; handler customersearch type JSFHandler{onConstructionFunction = onConstruction, onPreRenderFunction = onPreRender, view = "customersearch.jsp"} searchTerms Customer; searchResults Customer[0]; resultMessage char(80); numberOfResults int; andOr char(3); customerStates Customer[];
function searchFunction() searchTerms.LastName = searchTerms.LastName+"%"; if (andOr == "AND") SearchLibrary.NameAndStateSearch_And(searchTerms.LastName, searchTerms.State, searchResults); else SearchLibrary.NameAndStateSearch_Or(searchTerms.LastName, searchTerms.State, searchResults); end
resultMessage = "Customer(s)found. Search again?"; numberOfResults = sysLib.size(searchResults); end
function onPreRender()
SearchLibrary.getAllCustomerStates(customerStates); if (searchResults.getSize() == 0)
resultMessage = "No customers found or no search criteria entered."; end end function onConstruction() end end 18ページの『演習 4: コンボ・ボックスに動的にデータを取り込む』 に戻る。
演習 5 終了後の SearchLibrary.egl ファイル
次のコードは、演習 5 を終了した時点での SearchLibrary.egl ファイルのバージョンです。このファイル内 にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致しているこ とを確認してください。 package libraries; import data.Customer;library SearchLibrary type BasicLibrary
function NameAndStateSearch_And(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.CUSTOMER_ID, EGL.CUSTOMER.FIRST_NAME,
EGL.CUSTOMER.LAST_NAME, EGL.CUSTOMER.PASSWORD, EGL.CUSTOMER.PHONE, EGL.CUSTOMER.EMAIL_ADDRESS, EGL.CUSTOMER.STREET,
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname and EGL.CUSTOMER."STATE" = :state order by
EGL.CUSTOMER.CUSTOMER_ID asc };
end
function NameAndStateSearch_Or(lname string in, state char(2) in,
customer Customer[]) get customer with
#sql{ select
EGL.CUSTOMER.APARTMENT, EGL.CUSTOMER.CITY, EGL.CUSTOMER."STATE", EGL.CUSTOMER.POSTALCODE, EGL.CUSTOMER.DIRECTIONS
from EGL.CUSTOMER
where EGL.CUSTOMER.LAST_NAME like :lname OR EGL.CUSTOMER."STATE" = :state order by
EGL.CUSTOMER.CUSTOMER_ID asc };
end
function getAllCustomerStates(listOfStates string[]) customers Customer[0];
counter int; get customers with
#sql{
select EGL.CUSTOMER."STATE" from EGL.CUSTOMER
group by EGL.CUSTOMER."STATE" order by EGL.CUSTOMER."STATE" asc };
listOfStates.removeAll();
for (counter from 1 to customers.getSize() by 1) listOfStates.appendElement(customers[counter].State); end
end
Function getOneState(state Statetable) get state;
end end
Record customizedResult type basicRecord fullName string
{displayName = "Full Name"}; email string
{displayName = "Email Address"}; stateName string {displayName = "State"}; end 23ページの『演習 5: 検索結果をカスタマイズする』 に戻る。
演習 5 終了後の customersearch.egl ファイル
次のコードは、演習 5 を終了した時点での customersearch.egl ファイルのバージョンです。このファイル 内にエラーがある場合 (赤の X 記号でマークされます) は、作成したコードがこのコードと一致している ことを確認してください。 package jsfhandlers; import eglderbyr7.data.*; import libraries.SearchLibrary; import libraries.customizedResult; handler customersearch type JSFHandler{onConstructionFunction = onConstruction, onPreRenderFunction = onPreRender, view = "customersearch.jsp"} searchTerms Customer; searchResults Customer[0]; resultMessage char(80); numberOfResults int; andOr char(3); customerStates Customer[];
allRecords customizedResult[]; function searchFunction() searchTerms.LastName = searchTerms.LastName+"%"; if (andOr == "AND") SearchLibrary.NameAndStateSearch_And(searchTerms.LastName, searchTerms.State, searchResults); else SearchLibrary.NameAndStateSearch_Or(searchTerms.LastName, searchTerms.State, searchResults); end
resultMessage = "Customer(s)found. Search again?"; numberOfResults = sysLib.size(searchResults); generateCustomResults (searchResults); end function onPreRender() SearchLibrary.getAllCustomerStates(customerStates); if (searchResults.getSize() == 0)
resultMessage = "No customers found or no search criteria entered."; end
end
function onConstruction() end
function generateCustomResults(passedResults Customer[]) allRecords.removeAll();
oneRecord customizedResult; counter int = 1;
state stateTable;
//loop once for each search result returned while (counter <= (passedResults.getSize()))
oneRecord.fullName = passedResults[counter].FirstName :: " " :: passedResults[counter].LastName; oneRecord.email = passedResults[counter].EmailAddress; state.StateAbbrev = passedResults[counter].state; SearchLibrary.getOneState(state); oneRecord.stateName = state.StateName; allRecords.appendElement(oneRecord); counter = counter + 1; end end end 23ページの『演習 5: 検索結果をカスタマイズする』 に戻る。
