Type-ahead-Unterstützung für Eingabesteuerelemente bereitstellen

Von JSF-Eingabesteuerelementen (JSF - JavaServerFaces) für Text kann die JSF-Funktion Eingabepuffer (Type-ahead) verwendet werden, um im Voraus zu erkennen, welchen Text ein Benutzer in das Eingabesteuerelement eingeben wird. Eingabesteuerelemente mit Eingabepuffer bieten eine Liste mit Optionen, die auf den ersten Zeichen basiert, die der Benutzer in das Steuerelement eingibt. Der Benutzer kann daraufhin eine dieser Optionen verwenden oder mit der Eingabe von anderem Text fortfahren:

Eingabepuffer in einem Eingabesteuerelement

Während der Benutzer mit der Eingabe fortfährt, filtert die Eingabepufferfunktion die Optionen, um die neuen Werte abzugleichen, die der Benutzer in das Feld eingegeben hat:

Eingabepuffer in einem Eingabesteuerelement wird anhand der weiteren Eingabe des Benutzers gefiltert

Für EGL (Enterprise Generation Language) stehen drei Möglichkeiten zur Verfügung, um Optionen für das mit dem Eingabepuffer versehene Eingabefeld abzurufen:

Die Schritte für die Verwendung des Eingabepuffers (Type-ahead) hängen davon ab, welche von diesen Methoden Sie verwenden, um die Liste mit den Optionen abzurufen.

Optionen aus einer Datentabelle oder aus einer Liste mit gültigen Werten verwenden

Der einfachste Weg, um Optionen für die Eingabepufferfunktion bereitzustellen, besteht darin, die an das Feld gebundene Variable einer Liste mit Optionen zuzuordnen, entweder in einer Datentabelle oder in einer Liste mit gültigen Werten.

  1. Erstellen Sie in einem JSF-Handlerabschnitt eine Zeichen- oder eine numerische Variable, um den in das Eingabefeld auf der Seite eingegebenen Wert darzustellen:
    state STRING;
  2. Legen Sie für die Eigenschaft typeahead der Variable den Wert 'Ja' (YES) fest:
    state STRING {typeahead = YES};
  3. Ordnen Sie die Variable einer Liste mit Optionen zu. Verwenden Sie dabei entweder die Eigenschaft validValues oder validatorDataTable.
    • Wenn Sie validValues verwenden, müssen Sie die Optionen als Werte der Eigenschaft angeben:
      state STRING {typeahead = YES, 
          validValues = ["AK","AL","AR","AZ",
              "NC","NY","NH","NJ",
              "NM","NE","NV","ND"]};
      In diesem Beispiel sind die Abkürzungen für US-Bundesstaaten, deren Bezeichnung mit den Buchstaben 'A' und 'N' beginnen, gültige Werte. Wenn der Benutzer den Buchstaben 'A' in das Eingabesteuerelement eingibt, stellt der Eingabepuffer die mit 'A' beginnenden Abkürzungen und bei 'N' entsprechend die mit 'N' beginnenden Abkürzungen bereit.

      Bei der Verwendung des Eingabepuffers zusammen mit einer Liste mit gültigen Werten, dürfen die gültigen Werte keinen Bereich enthalten.

    • Wenn Sie eine Datentabelle verwenden, legen Sie für die Eigenschaft validatorDataTable der Variable den Namen der Datentabelle fest. Möglicherweise müssen Sie den Datentabellenabschnitt mit der Anweisung import in den Gültigkeitsbereich setzen.
      state string {typeahead = YES, 
          ValidatorDataTable = data.stateAbbrevs};
      Die passende Datentabelle kann wie im folgenden Beispiel aussehen und dieselben Informationen bereitstellen, wie im Beispiel validValues oben.
      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
      Datentabellen, die mit dem Eingabepuffer verwendet werden, müssen den Typ 'MatchValidTable' aufweisen.
  4. Ziehen Sie auf der Webseite die Variable aus der Sicht 'Seitendaten' auf die Webseite. Das Fenster zum Einfügen von Datensätzen wird geöffnet.
  5. Klicken Sie im Fenster zum Einfügen von Datensätzen auf Aktualisieren eines bestehenden Datensatzes.
  6. Stellen Sie sicher, dass als Steuerungstyp der Variable die Option Eingabefeld festgelegt ist. Der Eingabepuffer (Type-ahead) kann nur für Eingabesteuerelemente verwendet werden.
  7. Klicken Sie auf Fertig stellen. Ein Eingabesteuerelement wird auf der Seite erstellt, die an die Variable im JSF-Handler gebunden und für die Verwendung des Eingabepuffers konfiguriert ist.

Optionen aus einer angepassten Funktion verwenden

Für mehr Kontrolle über die mit dem Eingabepuffer bereitgestellten Optionen können Sie eine Funktion erstellen, die die Optionen während der Ausführungszeit dynamisch festlegt.

  1. Erstellen Sie die Funktion, die die Eingabepufferoptionen festlegt, in einem JSF-Handlerabschnitt oder einem Bibliotheksabschnitt. Diese Funktion muss exakt einen einzigen Parameter akzeptieren: ein Element STRING (eine Zeichenfolge), das den Text darstellt, den der Benutzer in das Eingabesteuerelement eingegeben hat. Die Funktion muss außerdem eine Feldgruppe von STRING (Zeichenfolge) zurückgegeben, die die im Eingabesteuerelement bereitgestellten Eingabepufferoptionen darstellt.
    // Alle Namen von Bundesstaaten zurückgeben, in denen 
    //der Schlüssel (key) eine Teilzeichenfolge des vollständigen Staatennamens ist.
    function getStateChoices( key string in ) returns( string[] )
      results string[0];
      key_upper string = strlib.upperCase( key );
      value string;
    
      // Nach Werten mit denselben Anfangszeichen suchen.
      for ( i int from 1 to syslib.size( states ) )
    
        // Jeden Wert in der Datentabelle mit dem Schlüssel vergleichen.
        value = strlib.upperCase( states.fullname[i] );
        if ( strlib.indexOf( value, key_upper ) == 1 )
          // Dieser Wert beginnt mit denselben Zeichen wie der Schlüssel.
          // Diesen Wert zur Liste mit den Optionen hinzufügen.
          results.appendElement( states.fullname[i] );
        end
    
      end
    
      return( results );
    
    end
    Diese Funktion vergleicht den vom Benutzer in das Eingabesteuerelement eingegebenen Text, der durch die Variable key dargestellt wird, mit den Werten in der Datentabelle. Mithilfe des Codes if ( strlib.indexOf( value, key_upper ) == 1 ) wird ermittelt, ob der Wert in der Datentabelle mit den Zeichen beginnt, die der Benutzer eingegeben hat. Ist dies der Fall, wird mithilfe von code results.appendElement( states.fullname[i] ); der Wert aus der Datentabelle der Feldgruppe von Optionen für den Eingabepuffer hinzugefügt.

    Obwohl diese Funktion Informationen aus einer Datentabelle (wie im folgenden Beispiel) verwendet, könnte die Funktion Daten aus einer beliebigen Quelle, wie beispielsweise einer Datenbank oder einer Datensatzvariable, abrufen.

    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. Erstellen Sie in einem JSF-Handlerabschnitt eine Zeichen- oder eine numerische Variable, um den in das Eingabefeld auf der Seite eingegebenen Wert darzustellen:
    state STRING;
  3. Legen Sie als Eigenschaft typeaheadFunction der Variable den Namen der Funktion fest:
    state STRING {typeaheadFunction = getStateChoices};
  4. Ziehen Sie auf der Webseite die Variable aus der Sicht 'Seitendaten' auf die Webseite. Das Fenster zum Einfügen von Datensätzen wird geöffnet.
  5. Klicken Sie im Fenster zum Einfügen von Datensätzen auf Aktualisieren eines bestehenden Datensatzes.
  6. Stellen Sie sicher, dass als Steuerungstyp der Variable die Option Eingabefeld festgelegt ist. Der Eingabepuffer (Type-ahead) kann nur für Eingabesteuerelemente verwendet werden.
  7. Klicken Sie auf Fertig stellen. Ein Eingabesteuerelement wird auf der Seite erstellt, die an die Variable im JSF-Handler gebunden und für die Verwendung des Eingabepuffers konfiguriert ist.

Optionen für den Eingabepuffer (Type-ahead) festlegen

Sie können das Aussehen und das Verhalten der Eingabepufferfunktionalität auf der Seite anpassen. Gehen Sie zum Festlegen dieser Optionen wie folgt vor:

  1. Klicken Sie auf der Webseite auf das Symbol für den Eingabepuffer, um es auszuwählen. Das Symbol für den Eingabepuffer befindet sich gleich rechts neben dem Eingabesteuerelement, für das der Eingabepuffer aktiviert ist.
  2. Wenn das Symbol für den Eingabepuffer ausgewählt ist, öffnen Sie die Eigenschaftsansicht.
    Eigenschaftsansicht mit ausgewähltem Symbol für den Eingabepuffer
  3. Legen Sie in der Eigenschaftsansicht die Optionen für die Eingabepufferfunktion. Sie können Folgendes festlegen: die Größe des Eingabepufferfelds, wie lange das Eingabesteuerelement mit der Bereitstellung von Optionen warten soll und das Verhalten des Eingabesteuerelements, während auf die Rückgabe von Optionen durch Enterprise Generation Language gewartet wird. Weitere Informationen zu den Optionen, die dem Eingabepuffer zugeordnet sind, finden Sie in Eingabepuffer - vollständige Komponente.

Feedback