Lernprogramme > Lernprogramm zu XPages Site Finder >
< Zurück

XPage zum Suchen erstellen

Auf dieser Seite kann der Benutzer Suchparameter angeben und die Ergebnisse anzeigen. Als Suchparameter dienen Werte für den Ort, den Bundesstaat, das Land und die Postleitzahl. Der Benutzer kann beliebige dieser Parameter eingeben und auf eine Schaltfläche klicken. Die Seite wird aktualisiert und die Ergebnisse werden als Ansicht angezeigt. Durch eine Sucheigenschaft für die Ansicht wird die Anzeige auf Dokumente beschränkt, die den Suchparametern entsprechen.

Gehen Sie wie folgt vor:
  1. Klicken Sie am Anfang der Liste der XPages auf die Option für Neue XPage. Sie können aber auch im seitlichen Teilfenster mit der rechten Maustaste auf XPages > Neue XPage klicken.
  2. Ordnen Sie der neuen XPage den Namen SiteFinder zu und klicken Sie auf OK.
  3. Ziehen Sie aus dem Bereich unter Angepasste Steuerelemente im rechten Teilfenster das angepasste Steuerelement für Kopfzeile auf die XPage.

    Hierbei handelt es sich um dieselbe Grafik, die Sie auf der XPage SiteList platziert haben, allerdings wurde sie in ein angepasstes Steuerelement eingefügt, um die Verwaltung zu vereinfachen. Ein angepasstes Steuerelement ist mit einer Teilmaske vergleichbar.

  4. Fügen Sie der Seite eine Formatvorlage hinzu. Gehen Sie dazu wie folgt vor:
    1. Klicken Sie auf die aktuelle Seite und nicht auf Steuerelemente, sodass die Seite fokussiert wird.
    2. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Vorlage.
    3. Blättern Sie zum Ende und klicken Sie dann auf Formatvorlage zu Seite hinzufügen.
    4. Wählen Sie im Feld Formatvorlage zu Seite hinzufügen den Eintrag styles.css aus.
    5. Klicken Sie auf OK.
  5. Fügen Sie der Seite einen Titel hinzu. Gehen Sie dazu wie folgt vor:
    1. Drücken Sie auf der XPage nach der Kopfzeile die Eingabetaste, geben Sie einen Titel für die Seite ein, z. B. Site Finder, und drücken Sie erneut die Eingabetaste.
    2. Heben Sie den Text hervor.
    3. Klicken Sie bei Bedarf im unteren Teilfenster auf Vorlage.
    4. Klicken Sie in der Liste unter styles.css auf .title.
    Die Darstellung des Texts ändert sich entsprechend der ausgewählten Vorlage.
  6. Geben Sie unter dem Titeltext Anweisungen für den Benutzer ein, z. B. Fill in any or all of these fields and click Search, und drücken Sie die Eingabetaste.
  7. Erstellen Sie eine Tabelle mit vier Zeilen und zwei Spalten. Gehen Sie dazu wie folgt vor:
    1. Ziehen Sie aus dem Bereich Containersteuerelemente im rechten Teilfenster das Steuerelement Tabelle unter die Anweisungen auf der XPage.

      Das Dialogfeld Tabelle einfügen wird angezeigt.

    2. Geben Sie im Dialogfeld Tabelle einfügen für Zeilen den Wert 4 und für Spalten den Wert 2 an.
    3. Klicken Sie auf OK.
    4. Passen Sie die Breite der Tabelle mithilfe der Ziehpunkte an.
  8. Gehen Sie in jeder Zelle in der ersten Spalte wie folgt vor:
    1. Ziehen Sie aus dem Bereich Kernsteuerelemente im rechten Teilfenster das Steuerelement Beschriftung in die Zelle.
    2. Ändern Sie im unteren Teilfenster die Beschriftung des Steuerelements in City (Zeile 1), State (Zeile 2), Country (Zeile 3) bzw. Zip/Postal code (Zeile 4).
  9. Gehen Sie in jeder Zelle in der zweiten Spalte wie folgt vor:
    1. Ziehen Sie aus dem Bereich Kernsteuerelemente im seitlichen Teilfenster das Steuerelement Editierfeld in die Zelle.
    2. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Editierfeld.
    3. Ändern Sie die Namen in searchCity (Zeile 1), searchState (Zeile 2), searchCountry (Zeile 3) und searchZip (Zeile 4).
    4. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Daten.
    5. Klicken Sie für die Option für Daten binden mit auf Erweitert.
    6. Wählen Sie im Dropdown-Menü unter Verwenden die Option Bereichsvariable aus.
    7. Wählen Sie aus dem Listenfeld Parameter die Option Sitzungsbereich aus.
    8. Blättern Sie zum Ende und geben Sie als Variablennamen searchCity (Zeile 1), searchState (Zeile 2), searchCountry (Zeile 3) oder searchZip (Zeile 4) an.
    Durch das Binden dieser Editierfelder an Bereichsvariablen können Sie auf deren Werte in JavaScript-Code zugreifen anstatt im Datenspeicher. Eine Sitzungsvariable behält ihren Wert für die Dauer der Benutzersitzung auf dem Server seitenübergreifend.
  10. Gehen Sie wie folgt vor, um eine Schaltfläche zum Übergeben und zum Aktualisieren der Seite zu erstellen:
    1. Ziehen Sie aus dem Bereich Kernsteuerelemente im seitlichen Teilfenster das Steuerelement Schaltfläche in die Zeile unter der Tabelle.
    2. Ändern Sie im unteren Teilfenster die Beschriftung des Steuerelements in Search.
    3. Wählen Sie in der Dropdown-Liste als Schaltflächentyp Übergeben aus.
    Beim Klicken auf diese Schaltfläche wird die Seite an den Server übergeben und der Inhalt der Seite wird auf Basis der vom Benutzer eingegebenen Werte aktualisiert.
  11. Gehen Sie wie folgt vor, um die Abfrage anzuzeigen:
    1. Geben Sie auf der XPage in der nächsten Zeile Query string: und ein Leerzeichen ein.
    2. Ziehen Sie aus dem Bereich Kernsteuerelemente auf der rechten Seite das Steuerelement Berechnetes Feld auf die Seite.
    3. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Schriftart. Ändern Sie die Farbe in Blau.
    4. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Wert.
    5. Klicken Sie für die Option für Daten binden mit auf Erweitert.
    6. Wählen Sie im Dropdown-Menü unter Verwenden die Option Bereichsvariable aus.
    7. Wählen Sie aus dem Listenfeld Parameter die Option Sitzungsbereich aus.
    8. Blättern Sie zum Ende und geben Sie als Variablennamen queryString ein.

      Den Variablennamen können Sie frei wählen. Er hat keine besondere Bedeutung. Einen Wert weisen Sie der Variablen später zu.

    Auf diese Weise kann die später zu berechnende Abfrage angezeigt werden. In einer Produktionsanwendung ist diese Anzeige wahrscheinlich nicht erforderlich, in einer Testumgebung ist sie jedoch hilfreich.
  12. Ziehen Sie aus dem Bereich Containersteuerelemente im seitlichen Teilfenster das Steuerelement Ansicht in die nächste Zeile auf der Seite.
    1. Übernehmen Sie für Daten anzeigen aus die Einstellung Domino-Ansicht.
    2. Übernehmen Sie für Anwendung die Einstellung Aktuell.
    3. Wählen Sie in der Dropdown-Liste Ansicht den Eintrag SiteList aus.
    4. Übernehmen Sie view1 als Datenquellennamen.
    5. Inaktivieren Sie am Ende der Liste der Spalten alle Optionen bis auf SiteName, Phone, StreetAddress, City und State. Sie können hier auch andere anzuzeigende Spalten auswählen, jedoch muss auf jeden Fall SiteName enthalten sein.
    6. Klicken Sie auf OK.
  13. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Ansicht. Wählen Sie für Ausgewähltes Dokument zur Laufzeit öffnen mit die Option Site aus.
  14. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Daten. Stellen Sie sicher, dass als Ansicht SiteList festgelegt ist.
  15. Nun können Sie eine Suchabfrage festlegen, mit der die Ansicht auf die Dokumente beschränkt wird, die den Benutzereingaben in den Suchfeldern entsprechen. Gehen Sie wie folgt vor:
    1. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Alle Eigenschaften.
    2. Blättern Sie zum Ende. Erweitern Sie den Eintrag data und erweitern Sie dann das zweite Element namens data. Wählen Sie die Eigenschaft search aus.

      Die Anzeige sollte folgendermaßen aussehen.

      Eigenschaft 'search'

    3. Klicken Sie auf die Raute neben der Eigenschaft Suche und wählen Sie Wert berechnen aus.

      Der Scripteditor wird geöffnet.

    4. Geben Sie im Scripteditor folgenden Code ein. Stellen Sie sicher, dass als Sprache serverseitiges JavaScript und Dynamisch berechnen festgelegt ist.
      var tmpArray = new Array("");
      var cTerms = 0;
      if(sessionScope.searchZip != null & sessionScope.searchZip != "") {
      	tmpArray[cTerms++] = "(FIELD SearchZip = \"" + sessionScope.searchZip + "\")";
      }
      if(sessionScope.searchCity != null & sessionScope.searchCity != "") {
      	tmpArray[cTerms++] = "(FIELD SearchCity = \"" + sessionScope.searchCity + "\")";
      }
      if(sessionScope.searchState != null & sessionScope.searchState != "") {
      	tmpArray[cTerms++] = "(FIELD SearchState = \"" + sessionScope.searchState + "\")";
      }
      if(sessionScope.searchCountry != null & sessionScope.searchCountry != "") {
      	tmpArray[cTerms++] = "(FIELD Country = \"" + sessionScope.searchCountry + "\")";
      }
      qstring = tmpArray.join(" AND ").trim();
      sessionScope.queryString = qstring; // this just displays the query
      return qstring // this is what sets the search property

      Diesen Schritt führen Sie zwar nicht aus, aber Sie hätten die Möglichkeit, den Code in Form einer Funktion in eine Scriptbibliothek einzufügen. Die Scriptbibliothek würde dann der Seite als Ressource hinzugefügt und der Zugriff auf die Funktion würde über einen einfachen Verweis erfolgen. Bei einem solchen Vorgehen kann der Code an mehreren Stellen verwendet, dabei jedoch zentral verwaltet werden.

    5. Klicken Sie auf OK.
    Mit diesem Code werden die vom Benutzer auf der Seite eingegebenen Werte mithilfe der an die Editierfelder gebundenen Variablen für den Sitzungbereich abgerufen. Der Code erstellt eine Abfragezeichenfolge, die den Dokumentenwerten in den Feldern searchZip, searchCity, searchState und Country entspricht, und gibt diese zurück.

    Zur Verdeutlichung werden dieselben Feldnamen wie in den gesuchten Dokumenten verwendet. Es können aber beliebige Namen verwendet werden.

  16. Passen Sie die erste Spalte so an, dass der Benutzer das Dokument im Lesemodus öffnen kann:
    1. Klicken Sie auf der XPage in die erste Spalte der Ansicht.
    2. Klicken Sie unter Eigenschaften im unteren Teilfenster auf Anzeige.
    3. Aktivieren Sie Werte in dieser Spalte als Verknüpfungen anzeigen.
    4. Klicken Sie für die Option für Öffnungsmodus für das Dokument auf Schreibgeschützt.

    Webbenutzer, die Suchergebnisse anzeigen, können die gefundenen Dokumente nicht bearbeiten, wenn sie der Verknüpfung folgen. In einer realen Anwendung würden Sie außerdem die Zugriffskontrollliste verwenden.

  17. Speichern Sie die Änderungen und zeigen Sie eine Vorschau der neuen Suchanzeige an.
  18. Zeigen Sie optional eine Vorschau der Seite an. Führen Sie versuchsweise einige Suchvorgänge aus, z. B. nach der Postleitzahl 02108 oder 33432, nach dem Ort Boca Raton oder Boston, nach dem Bundesstaat MA oder nach dem Land France.
  19. Schließen Sie die XPage SiteFinder, indem Sie oben rechts im mittleren Teilfenster auf das X klicken.
Nun sollte Ihre XPage aussehen wie SiteFinderFinal, die Sie zum Vergleich öffnen können.

Die hier gezeigte Vorgehensweise ist nicht unbedingt die optimale Methode zum Organisieren einer Suchfunktion, aber es ist eine Möglichkeit. Sie könnten stattdessen auch die Eigenschaft "search" der Datenquelle im JavaScript-Code der Schaltfläche Suchen zuordnen. Auf diese Weise können auf der Seite leichter Informationen aus mehreren abgefragten Quellen angezeigt werden, möglicherweise auch mit mehreren Suchschaltflächen für verschiedene Arten von Suchvorgängen.

Es stehen auch Steuerelemente zur Verfügung, mit denen die Ergebnisse besser formatiert werden können. Mit einer Datentabelle beispielsweise können Sie mehr Einfluss auf das Layout der Suchergebnisse nehmen. Datentabellen werden häufig anstelle von Ansichten verwendet. Allerdings ist das Steuerelement Ansicht sehr einfach zu verwenden.

< Zurück


Zusätzliche Dokumentation | Marken |