入力コントロールへの先行入力サポートの指定

JSF テキスト入力コントロールは、JSF 先行入力フィーチャーを使用して、ユーザーが入力コントロールに入力する可能性があるものを予測することができます。 先行入力を使用した入力コントロールでは、ユーザーがそのコントロールに入力した最初の数文字を基にした選択肢のリストが表示されます。 続いて、ユーザーは、これらのオプションから 1 つを選択するか、別のテキストの入力を続行することができます。

入力コントロールでの先行入力

ユーザーが入力を続行している間、先行入力フィーチャーは、ユーザーがフィールドに入力した新規の値に一致するように、オプションをフィルタリングします。

ユーザーからの追加入力によってフィルタリングされている入力コントロールの先行入力

EGL は、以下の 3 つの方法のうちの 1 つにより、先行入力フィールドのオプションを取得できます。

先行入力の使用に関するステップは、オプションのリストを取得するためにどの方法を使用するかによって異なります。

データ・テーブルまたは有効値のオプションを使用する

先行入力関数のオプションを指定するための簡単な方法は、データ・テーブルまたは有効値のリストのいずれかで、フィールドにバインドされた変数をオプションのリストに関連付けることです。

  1. JSF ハンドラー・パーツで、ページの入力フィールドに入力された値を表す、文字変数または数値変数を作成します。
    state STRING;
  2. この変数で、typeahead プロパティーを YES に設定します。
    state STRING {typeahead = YES};
  3. validValues プロパティーまた は validatorDataTable プロパティーのいずれかを使用して、 この変数をオプションのリストに関連付けます。
    • validValues を使用する場合、オプションをプロパティーの値として指定します。
      state STRING {typeahead = YES, 
          validValues = ["AK","AL","AR","AZ",
              "NC","NY","NH","NJ",
              "NM","NE","NV","ND"]};
      この例では、有効な値は、文字「A」および「N」で始まるアメリカの州名の省略形です。 ユーザーが文字「A」を入力コントロールに入力すると、先行入力は、「A」で始まる省略形を提示し、文字「N」の場合も同様に「N」で始まる省略形を提示します。

      有効な値のリストによる先行入力を使用するときに、有効な値に範囲を含めることはできません。

    • データ・テーブルを使用する場合は 、変数の validatorDataTable プロパティーに、 データ・テーブルの名前を設定します。 DataTable パーツを、import ステートメントによって スコープに取り込むこともできます。
      state string {typeahead = YES, 
          ValidatorDataTable = data.stateAbbrevs};
      一致するデータ・テーブルは、以下の例のように表示されます。上記の validValues のサンプルの場合と同様の情報を示します。
      package data;
      
      dataTable stateAbbrevs type MatchValidTable {shared = no, resident = no}
        
        3 abbrev char(2);
        
        {contents = [
          ["AK"],["AL"],["AR"],["AZ"],
          ["NC"],["NY"],["NH"],["NJ"],
          ["NM"],["NE"],["NV"],["ND"]
        ]}
        
      end
      先行入力で使用するデータ・テーブルは、MatchValidTable 型である必要があります。
  4. Web ページ上で、「ページ・データ」ビューから Web ページに変数をドラッグします。 「レコードの挿入」ウィンドウが開きます。
  5. 「レコードの挿入」ウィンドウで 、「既存レコードの更新」をクリックします。
  6. 変数の「コントロール・タイプ」「入力フィールド」に設定されていることを確認します。先行入力は、入力コントロールでのみ使用することができます。
  7. 「終了」をクリックします。JSF ハンドラーの変数にバインドされ、 先行入力を使用するように構成された入力コントロールが、ページ上に作成されます。

カスタム関数のオプションを使用する

先行入力で 提示されるオプションをより細かく制御するために、実行時にオプションを動的に決定する関数を作成できます。

  1. JSF ハンドラーまたはライブラリー・パーツで、先行入力オプションを決定する関数を作成します。 この関数は、ユーザーが入力コントロールに入力したテキストを表す、STRING と いう 1 つのパラメーターを正確に受け入れなければなりません。 また、この関数は、入力コントロールで提示される先行入力オプションを表す、STRING の配列を戻す必要があります。
    // 以下の任意の州名を戻す
    //キーは完全な州名のサブストリング。
    function getStateChoices( key string in ) returns( string[] )
      results string[0];
      key_upper string = strlib.upperCase( key );
      value string;
    
      // 同じ文字で始まる値を検索する。
      for ( i int from 1 to syslib.size( states ) )
    
        // データ・テーブルの各値とキーとを比較する。
        value = strlib.upperCase( states.fullname[i] );
        if ( strlib.indexOf( value, key_upper ) == 1 )
          // この値は、キーと同じ文字で始まる。
          // それをオプションのリストに追加する。
          results.appendElement( states.fullname[i] );
        end
    
      end
    
      return( results );
    
    end
    この関数は、ユーザーが入力フィールドに入力したテキスト (変数 key によって表される) と、データ・テーブルの値を比較します。 コード if ( strlib.indexOf( value, key_upper) == 1 ) は、 データ・テーブルの値が、ユーザーが入力した文字で始まるかどうかを判別し、該当する場合、code results.appendElement( states.fullname[i] ); は、データ・テーブルの値を、先行入力のオプションの配列に追加します。

    この関数は、以下の例にあるようにデータ・テーブルの情報を使用しますが、関数は、データベースやレコード変数など、任意のソースからデータを検索することができます。

    package data;
    
    dataTable states type MatchValidTable 
      {shared = no, resident = no}
    	
      3 fullname char(20);
        {contents = [
          ["ALASKA"],
          ["ALABAMA"],
          ["ARKANSAS"],
          ["ARIZONA"],
          ["NORTH CAROLINA"],
          ["NORTH DAKOTA"],
          ["NEBRASKA"],
          ["NEW HAMPSHIRE"],
          ["NEW JERSEY"],
          ["NEW MEXICO"],
          ["NEVADA"],
          ["NEW YORK"]
        ]}
    
    end
  2. JSF ハンドラー・パーツで、ページの入力フィールドに入力された値を表す、文字変数または数値変数を作成します。
    state STRING;
  3. この変数で、typeaheadFunction プロパティーに、関数の名前を設定します。
    state STRING {typeaheadFunction = getStateChoices};
  4. Web ページ上で、「ページ・データ」ビューから Web ページに変数をドラッグします。 「レコードの挿入」ウィンドウが開きます。
  5. 「レコードの挿入」ウィンドウで 、「既存レコードの更新」をクリックします。
  6. 変数の「コントロール・タイプ」「入力フィールド」に設定されていることを確認します。先行入力は、入力コントロールでのみ使用することができます。
  7. 「終了」をクリックします。JSF ハンドラーの変数にバインドされ、 先行入力を使用するように構成された入力コントロールが、ページ上に作成されます。

先行入力のオプションを設定する

ページでの先行入力機能の外観と動作をカスタマイズできます。 これらのオプションを設定するには、次のステップを実行します。

  1. Web ページで、先行入力アイコンをクリックして選択する。先行入力アイコンは、 先行入力が使用可能となっている入力コントロールのすぐ右側にあります。
  2. 先行入力アイコンを選択した状態で、「プロパティー」ビューを開く 。
    先行入力アイコンを選択した状態の「プロパティー」ビュー
  3. 「プロパティー」ビューで、先行入力フィーチャーのオプションを設定する。先行 入力フィールドのサイズ、オプションが提示されるまでにコントロールが待機すべき時間、EGL がオプションを戻すのを待機する間の入力コントロールの動作について設定できます。 先行入力に関連付けられたオプションについて詳しくは、『先行入力完了コンポーネント』を参照してください。

フィードバック