< 前へ | 次へ >

演習 2: 検索関数のコードを追加する

Web ページの作成が終わったので、次に、Web ページから検索語を受け取り、これらの検索語に従ってデータベースを検索して、検索結果をページに表示する、EGL コードを追加します。

検索関数用のライブラリーを作成する

検索関数は複雑になる可能性があるため、 検索関数を保持するライブラリーを作成する必要があります。 ライブラリーがあれば、検索関数の再利用が可能となり、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 つのパラメーターを受け取ることです。
    • ストリング変数 lname。検索対象である顧客の姓を表します。
    • 文字変数 state。検索対象である顧客の州を表します。
    • 顧客レコードの配列 customer。検索結果を保持します。

    現時点では、この関数はデータベース内のすべてのレコードを取り出します。 次に、検索語 lnamestate に一致するレコードのみを返すように、この関数で生成される SQL ステートメントを編集します。

  2. この関数を挿入する際にコード補完機能を使用しなかった場合は、Ctrl+Shift+O を押してインポートを編成します。
  3. get customer 行の customer という単語を右クリックして、 ポップアップ・メニューで「SQL ステートメント」 > 「追加」の順にクリックします。 明示的な SQL ステートメントが、コードの get customer 行に追加されます。

    厳密に言えば、コードは何も変わっていません。 EGL は、get customer というコードが検出されたときに作成する、 デフォルトの SQL コードを公開しただけです。 この SQL コードがページ上に明示的に表示されたので、 これを編集して動作を変更することができます。 ここでは、すべての顧客レコードを取り出すのではなく、 姓と州が一致している顧客レコードのみを取り出すように、 ステートメントを変更します。

  4. from EGL.CUSTOMER 行の末尾に カーソルを置き、Enter キーを 押して、この行の下にブランク行を 1 行追加します。
  5. from EGL.CUSTOMER の下にできた新しいブランク行に、 次のコードを挿入します。
    where LASTNAME like :lname 
      and "STATE" = :state

    コードは、次のようになります。

    NameAndStateSearch_And 関数の外観

    追加したコードは、EGL ではなく SQL です。 LASTNAME は、 このプロジェクトで使用しているサンプル・データベース内にあるフィールドの、完全な名前です。 eglderbydb.data パッケージ内のレコード・パーツを 見れば、顧客レコードなどのレコードもこれらのフィールドを参照していることが分かります。 :lname コードと :state コードは、ホスト変数 と呼ばれ、ここでは、SQL コードで使用している EGL 変数です。 STATE は引用符で囲まれているので、"state" は SQL 予約語ではなく、 テーブルの名前として扱われます。

    EGL では、さまざまな方法で SQL ステートメントの作成と生成を行うことができます。 これまでの EGL チュートリアルでは、 特定の顧客 ID 番号を指定して、実際のデータベース・レコードを取り出しました。 この節では、先ほど追加した where ステートメントに 似た、SQL の where ステートメントを作成しました。 同様の操作を行うには、defaultSelectCondition を使用する方法もあります。

  6. ファイルを保存します。 EGL が自動的にファイルを生成します。
これで、ライブラリー・ファイルのコードが完成しました。 このエディター内にエラーがある場合 (赤の X 記号でマークされている場合) は、演習 2 終了後の SearchLibrary.egl ファイルのファイルに記載されているコードと、作成したコードが一致していることを確認してください。

JSF ハンドラーで検索関数を使用する

  1. customersearch.jsp ページを開きます。
  2. エディターでページのコンテンツ領域を右クリックし、 ポップアップ・メニューの「ページ・コードの編集」をクリックします。 ページ・コード・ファイルが開きます。
  3. customersearch.jsp ページの JSF ハンドラーで、 先ほど作成した次の変数 (検索語と検索結果を表すもの) を探します。
    searchTerms Customer;
    searchResults Customer[0];
  4. 先ほど作成した変数の直後に、次のコードを追加します。これは、2 つの追加変数を作成するコードです。
    resultMessage CHAR(80);
    numberOfResults INT;
    次に、Web ページから呼び出す関数を作成する必要があります。 この関数は、searchTerms 変数からライブラリー内の関数に、searchResults 変数と 必要なフィールドを渡します。
  5. JSF ハンドラーの最後の end ステートメントの直前に、 次の関数を追加します。
    	function searchFunction()
    		searchTerms.LastName = searchTerms.LastName::"%";
    		SearchLibrary.NameAndStateSearch_And(
    			searchTerms.LastName, 
    			searchTerms.State, searchResults);
    		resultMessage = " customer(s) found.";
    		numberOfResults = searchResults.getSize();
    	end
    ここでは赤の X は無視します。


  6. 検索が失敗した後でページをリセットするための コードを、onPreRender 関数に追加します。
    	function onPrerender()
    		if (searchResults.getSize() == 0)
    			resultMessage = "No customers found or no search criteria entered.";
    		end
    	end

    先ほど追加したページ・コードに関する情報を以下に示します。

    • searchTerms レコードと、 レコードの配列 searchResults は、 どちらも Customer レコードのインスタンスです。 レコード・パーツやデータ項目パーツのインスタンスは、複数作成することができます。
    • このコードに含まれる searchFunction 関数は、 このページの「Submit」ボタンにバインドされます。 この関数は、この演習の前半でライブラリーに追加した NameAndStateSearch_And 関数を呼び出します。
    • この検索関数は、ユーザーが入力した姓の末尾に、ワイルドカード文字を追加します。 例えば、ユーザーが Sm と入力した場合、 検索ストリングは Sm% に なるので、SmithSmiley といった結果が返されます。
    • この検索関数では、大/小文字を区別します。
  7. インポートを編成 (Ctrl+Shift+O) し、ファイルを保存します。

これで、customersearch.egl ファイルのコードが完成しました。 このファイル内にエラーがある場合 (赤の X 記号でマークされます) は、演習 2 終了後の customersearch.egl ファイルのファイルに記載されているコードと、作成したコードが一致していることを確認してください。

検索関数を Web ページにバインドする

JSF ハンドラーでのデータと関数のセットアップが終わったので、 ページ上での使用が可能になります。
  1. customersearch.jsp ページを開きます。
  2. ページ・データ・ビューで、「JSF ハンドラー」を展開します。
  3. 「データ」グループから、「Submit」ボタンの下にある、左側の出力テキスト・フィールド に numberOfResults 変数を直接ドラッグします。
  4. 「データ」グループから、右側の出力テキスト・フィールド に resultMessage 変数を直接ドラッグします。
  5. 「アクション」グループから、ページ上の「Submit」ボタンに searchFunction() を 直接ドラッグします。 ページの外観は変わりませんが、関数がボタンにバインドされました。
  6. ページを保存します。
  7. サーバーでページを実行し、検索語をページに入力して、ページをテストします。
    1. プロジェクト・エクスプローラー・ビューで customersearch.jsp を右クリックして、 「実行」 > 「サーバーで実行」の順にクリックします。 プロジェクトのデフォルト・サーバーは、以前のチュートリアルですでに設定しているはずです。 まだ設定していない場合、または設定を変更した場合は、 使用するサーバーを再度選択する必要があります。
    2. Web ブラウザーでページを開いたら、 「LastName」フィールドと「State」フィールドに文字を入力して、 「Submit」ボタンをクリックします。 この検索では大文字/小文字が区別されますので、注意してください。

この検索ページは、使いやすくありません。 顧客の州と顧客の姓の、両方の先頭文字を ユーザーが知っていなければならないからです。 ユーザーが AND 検索と OR 検索のどちらかを選択できれば、使いやすさは向上します。 次の演習では、このオプションをページに追加します。 その次の演習では、 「State」入力フィールドをコンボ・ボックスに変更し、 データベースで使用されている有効な州がすべてリストされるようにします。

さらに、「customer(s) found」の表示には問題があります。出力では、「customer(s)」の前のスペースが失われています。 次の演習では、そのページのカスケーディング・スタイル・シート (CSS) を変更して、この問題を解決します。

CSS ファイルを変更する

カスケーディング・スタイル・シートは、HTML ページ内の要素を、それらの要素の表示方法を決定する一連のスタイルに関連付けることにより機能します。EGL は、選択したページ・テンプレートに対して以下の 2 つのスタイル・シートを提供します。
stylesheet.css
すべてのテンプレート用の汎用スタイル・シート
gray.css
A_gray.htpl テンプレートに固有のスタイル・シート。

この演習では、さらに一般的なテンプレートを変更します。

  1. ブラウザーで検索結果ページを閉じずに、「WebContent」および「theme」を展開します。 stylesheet.css をダブルクリックしてエディター上で開きます。
  2. エディターの右ペインで .outputText 要素を見つけます。 中括弧の間に次の行を追加します。
    padding-right:5px;
    これは、表示用にレンダリングするときに <h:outputText> というタグが付けられているすべてのテキストの右側に 5 ピクセルのスペースを追加することをブラウザーに要求します。この要素は次の例のようになります。フォントの色に注意してください。
    padding スタイルが要素に追加されます。
  3. CSS ファイルを保管して閉じます。
  4. ブラウザー・ウィンドウで検索結果ページ (customersearch) に戻ります。アドレスの横にあるページ最新表示アイコンをクリックします。
    最新表示アイコンは、円を形成する 2 つの小さい黄色の矢印で構成されています。
    最新表示されたページでは、数値と「customer(s) found」というメッセージのテキストの間にスペースが表示されるようになります。

演習のチェックポイント

前回の演習で作成した検索ページを強化する、EGL コードを作成しました。

この演習では、次の作業を行う方法を学習しました。
  • EGL ライブラリーを作成して、関数を組み込む
  • ライブラリー内の関数を呼び出すようにコードを編集して、EGL JSF ハンドラーに追加する
  • JSF ハンドラー内の関数を、Web ページ上のコントロールにバインドする
では、 『演習 3: OR 検索条件を使用する』に進みましょう。
< 前へ | 次へ >

フィードバック