< 前へ | 次へ >

演習 6: 先行入力を使用したユーザーへの候補の表示

先行入力 機能を持つコントロールは、ユーザーが入力フィールドに入力する内容を予測し、データ入力のプロセスを速めます。この演習では、先行入力機能を使用して前の検索ページとは異なる方法で検索する、別の検索ページを作成する方法を学習します。

先行入力機能は、AJAX、つまり、非同期 JavaScript と XML を使用します。これは、ページ全体を再ロードすることなく Web アプリケーションが Web ページの一部を変更できるようにする、Web テクノロジーです。この場合は、AJAX 機能を使用して、EGL JSF ハンドラーがページを再実行依頼することなく、入力コントロールに入力候補を追加および除去できるようにします。EGL 先行入力機能は、一般的な AJAX 機能の使用方法へのショートカットを提供しますので、お客様ご自身で AJAX 要求にまとめる必要がなくなります。次の演習では、カスタム AJAX 要求を作成する方法を学習します。

慣例により、先行入力を使用する入力コントロールは、ユーザーがフィールドに入力する最初の数文字に基づいてオプションを提供します。
ドロップダウン・メニューには、データベース内の文字「L」で始まる名前がすべて表示されます。

先行入力の EGL コードの書き方により、入力された最初の数文字を基に候補を表示させることも、動的に候補を決定する任意の機能を使用して候補を表示させることもできます。

入力した最初の数文字に基づいて先行入力の候補を表示するには、設計時に validValues プロパティーまたは「データ・テーブル」パーツのいずれかにそれらの候補を指定する必要があります。次の例では、validValues アプローチを使用します。
state STRING {typeahead = YES, 
    validValues = ["AK","AL","AR","AZ",
        "NC","NY","NH","NJ",
        "NM","NE","NV","ND"]};
この変数の有効な値は、文字「A」および「N」で始まる米国の州名の略語です。 ユーザーが文字「A」を入力コントロールに入力すると、先行入力により、先頭が「A」の略語が表示されます。同様に、文字「N」に対しては、先頭が「N」の略語が表示されます。

この演習では、先行入力機能を使用することによりデータベース内の顧客の姓の候補が表示され、その中からユーザーが姓を検索します。この場合、先行入力の候補はデータベース内の値によって決まるため、実行時に候補を決定する必要があります。したがって、ユーザーが入力フィールドに入力した内容とデータベース内の顧客の姓を比較する関数を、新規 JSF ハンドラーに作成してください。これにより、関数は入力と一致する名前を先行入力の候補として提供します。

  1. 次のようにして、EGLWeb プロジェクト内に customersearchAJAX.jsp という名前の新規 Web ページを作成します。
    1. 「プロジェクト・エクスプローラー」ビューで、EGLWeb プロジェクトの「WebContent」フォルダーを右クリックし、「新規」 > 「Web ページ」をクリックします。
    2. 「ファイル名」フィールドに、新規ファイルの名前として次のテキスト (拡張子を含む) を入力します。
      customersearchAJAX.jsp
    3. 「フォルダー」フィールドに /EGLWeb/WebContent フォルダーが表示されていることを確認します。
    4. 「テンプレート」リストで、 「マイ・テンプレート」をクリックします。
    5. 「プレビュー」ボックスで、「A_gray.htpl」テンプレートをクリックします。
    6. 「終了」をクリックします。 新規ページが作成されてエディターで開きます。
    7. このページからデフォルトのテキストを削除し、次のテキストで置換します。
      Customer search with type-ahead
    8. Enter キーを 3 回押して、ページ・タイトルの下にブランク・スペースを作成します。
  2. ページのコンテンツ領域を右クリックし、「ページ・コードの編集」をクリックして、ページの JSF ハンドラーを開きます。
  3. 次の 3 つの変数を JSF ハンドラーに追加します。
    lastNameInput STRING {TypeaheadFunction = suggestLastNames};
    allLastNames Customer[0];
    customerToDisplay Customer;

    1 つ目の変数は、ページで入力コントロールにバインドされます。TypeaheadFunction プロパティーは、この変数が先行入力の候補を提供する関数を持つことを示します。この演習の後の方で、この関数を作成します。

    2 つ目の変数は、データベース内の姓のリストを保持します。候補を提供する関数でこのリストが必要になります。

    3 つ目の変数は、検索結果を表示する単一レコードです。

  4. onConstructionFunction プロパティーを JSF ハンドラーから除去しますが、onPreRenderFunction は残します。
    handler customersearchAJAX type JSFHandler
    	{onPreRenderFunction = onPreRender,
    	view = "customersearchAJAX.jsp",
    	viewRootVar = viewRoot} 
  5. スタブ onConstruction() 関数を除去します。
  6. スタブ onPreRender() 関数を完成させます。
    	function onPreRender()
    		get allLastNames with
    			#sql{
    				select
    					LASTNAME
    				from EGL.CUSTOMER
    				group by
    					EGL.CUSTOMER.LASTNAME
    			};
    	end
    ユーザーの入力と比較する顧客の姓のリストをデータベースから取り出すために、この関数はページが更新されるたびに実行されます。
  7. 次の関数を、JSF ハンドラーに追加します。
    	function suggestLastNames(typedCharacters STRING in) returns (STRING[])
    		matchingLastNames STRING[0];
    		oneCustomer Customer;
    		oneCustomerName STRING;
    
    		//This variable represents the characters the user has typed.
    		typedCharacters = StrLib.upperCase(typedCharacters);
    
    		//Compare the user input to the values in the database.
    		for (counter INT from 1 to allLastNames.getSize())
    			oneCustomer = allLastNames[counter];
    			oneCustomerName = StrLib.upperCase(oneCustomer.LastName);
    
    			if (StrLib.indexOf(oneCustomerName, typedCharacters) == 1)
    				//This value starts with the same characters.
    				//Add this value to the type-ahead suggestions.
    				matchingLastNames.appendElement(oneCustomer.LastName);
    			end
    		end
    		return (matchingLastNames);
    	end
    この関数は、前に作成した変数の TypeaheadFunction プロパティー内で参照される関数です。その名前が示すように、この関数は先行入力の候補を提供します。この関数は 1 つのパラメーター、つまり、ユーザーが入力コントロールに入力した文字を示す STRING を受け取る必要があります。また、候補を示す STRING の配列を戻す必要があります。 この関数を使用すると、任意の EGL ロジックを使用して先行入力の候補を決定できます。

    このケースでは、関数は、ユーザーが入力コントロールに入力したのと同じ文字で候補が始まるという規則に従います。関数は、ユーザーが入力した文字を、それぞれの顧客の姓と比較します。その際に、ケースごとに両方の値を大文字に設定して、大文字と小文字の使い分けの違いをなくします。関数がマッチングを見つけるたびに、先行入力の候補を示す結果の配列にその顧客の姓が追加されます。

  8. 次の関数を、JSF ハンドラーに追加します。
    	function displayCustomer()
    		get customerToDisplay with
    			#sql{
    				select
    					CUSTOMERID, FIRSTNAME, LASTNAME, PASSWORD, PHONE, 
    					EMAILADDRESS, STREET, APARTMENT, CITY, "STATE", 
    					POSTALCODE, DIRECTIONS
    				from EGL.CUSTOMER
    				where
    					LASTNAME = :lastNameInput
    			};
    	end
    この関数は、ページ上のボタンにバインドされます。先行入力コントロールにより固有の顧客名が表示されたときに、ユーザーはボタンをクリックしてこの関数を実行し、顧客の詳細を取得します。
  9. インポートを最適化し、JSF ハンドラー・ファイルを保存します。


  10. ページ・データ・ビューで、「JSF ハンドラー」および「データ」を展開します。 lastNameInput 変数を customersearchAJAX.jsp ページ上にドラッグします。 「レコードの挿入」ウィンドウが開きます。
  11. 「既存レコードの更新」をクリックして、入力コントロールの「コントロール・タイプ」「入力フィールド」に設定されていることを確認します。 先行入力は JSF 入力コントロールにしか使用できません。
  12. 「オプション」をクリックします。
  13. 「オプション」ウィンドウで、「削除ボタン」チェック・ボックスをクリアし、「実行ボタン」チェック・ボックスを選択します。 ボタンのデフォルトのラベル Submit はそのままにしておきます。
  14. 「OK」をクリックします。
  15. 「終了」をクリックします。 入力コントロールおよびボタンがページ上に作成されます。変数の TypeaheadFunction プロパティーにより、新規入力コントロールは自動的に先行入力用に構成されます。 入力コントロールの右側にある先行入力アイコンをクリックし、「プロパティー」ビューを開くと、候補が表示されるまでの遅延時間など、先行入力機能のオプションを表示できます。
    先行入力コントロールのオプションを表示している「プロパティー」ビュー
  16. CustomerToDisplay 変数を「ページ・データ」ビューからページ下部にドラッグします。 「挿入のコントロール」ウィンドウが開きます。
  17. 「挿入のコントロール」ウィンドウで、「既存レコードの表示 (読み取り専用)」をクリックします。
  18. 「表示するフィールド」で、検索結果で表示したい顧客レコードのフィールドの横にあるチェック・ボックスを選択します。 例えば、CustomerId、FirstName、LastName、および Phone フィールドを選択します。
    「データ・コントロールの構成」ウィザードでは、4 つのフィールドが選択されています。
  19. 「終了」をクリックします。 検索結果を示すコントロールが、ページに追加されます。
  20. displayCustomer() 関数を「ページ・データ」ビューから「実行」ボタンにドラッグして、関数をページ上の「実行」ボタンにバインドします。
これで、先行入力を使用するようにページが構成されました。このページは次のようになります。
完成したページのピクチャー

ページをテストするには、サーバー上でページを実行し、入力フィールドに顧客の名前の最初の 1、2 文字を入力します。

候補を表示している先行入力コントロールのピクチャー

顧客名を選択した後で、「実行」をクリックし、顧客情報を表示できます。

検索の結果を表示するページのピクチャー

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

演習のチェックポイント

この演習では、先行入力サポートを入力フィールドに適用する方法を学習しました。先行入力を使用すると、ユーザーが有効な情報を入力するのに便利ですが、候補を提供するシステムに負担をかけることに注意する必要があります。入力コントロールの値が変更されるたびに、先行入力コントロールに関連付けられた関数が実行されます。できるだけ単純な関数を使用して、システムに負荷がかかりすぎないようにする必要があります。
先行入力について詳しくは、Providing type-ahead support for input controlsを参照してください。
これで、チュートリアルを終了します。
< 前へ | 次へ >

フィードバック