XPage zur Bearbeitung erstellen

Zur Gestaltung von Webseiten können auch Masken verwendet werden, allerdings stehen auf XPages mehr UI-Optionen zur Verfügung und Sie können mit geringerem Aufwand die Darstellung besser steuern. Es ist hilfreich, zusätzlich ein Formular zur Bereitstellung einer Liste von Feldern für die Datenbindung zu verwenden. Außerdem können mithilfe der Maske Ergebnisfelder mit Feldformeln berechnet werden, sodass kein entsprechender Code auf der XPage eingefügt werden muss.

In dieser Lerneinheit lernen Sie, wie Sie einer Seite Text und Steuerelemente hinzufügen, die Darstellung einer Seite mithilfe von Formatvorlagen anpassen und Datenquellen an eine Seite binden. Es sind zahlreiche Schritte auszuführen. Führen Sie diese einfach einen nach dem anderen aus.

Gehen Sie wie folgt vor:

Klicken Sie am Anfang der Liste der XPages auf die Option für Neue XPage. Sie können aber auch mit der rechten Maustaste auf XPages > Neue XPage klicken.
Ordnen Sie der neuen XPage den Namen Site zu und klicken Sie auf OK. Die XPage und die Maske müssen nicht denselben Namen aufweisen, dies ist jedoch eine bewährte Praxis. Die Verwendung derselben Namen ermöglicht bestimmte automatische Verhaltensweisen, die jedoch den Umfang dieses Handbuchs übersteigen.
Fügen Sie der Seite eine Formatvorlage hinzu. Gehen Sie dazu wie folgt vor:
1. Klicken Sie im letzten Teilfenster auf Formatvorlage.
2. Blättern Sie zum Ende und klicken Sie dann auf Formatvorlage zu Seite hinzufügen.
3. Wählen Sie im Feld Formatvorlage zu Seite hinzufügen den Eintrag styles.css aus.
4. Klicken Sie auf OK.
Bei diesen CSS-Dateien handelt es sich um in der Musteranwendung enthaltene Gestaltungselemente von Formatvorlagen.
Fügen Sie einen Titel für die Seite hinzu und passen Sie die Darstellung an. Gehen Sie dazu wie folgt vor:
1. Geben Sie auf der XPage einen Titel für die Seite ein, z. B. Site Description, und drücken Sie die Eingabetaste.
2. Heben Sie den Text hervor.
3. Klicken Sie (falls nicht bereits geschehen) im letzten Teilfenster auf Formatvorlage.
4. Klicken Sie in der Liste unter styles.css auf .title.
Die Darstellung des Texts ändert sich entsprechend der ausgewählten Vorlage.
Verknüpfen Sie die XPage mit dem Back-End-Datenspeicher von Domino (d. h., binden Sie die XPage an den Datenspeicher). Gehen Sie dazu wie folgt vor:
1. Klicken Sie auf der XPage auf einen Punkt außerhalb des Texts, sodass die Seite selbst fokussiert wird.
2. Klicken Sie im unteren Teilfenster unter Eigenschaften auf Daten.
3. Klicken Sie auf Hinzufügen und wählen Sie Domino-Dokument aus.
  Eine Datenquelle mit dem Namen document1 wird angezeigt.
4. Suchen Sie seitlich im Teilfenster nach Maske und wählen Sie in der Dropdown-Liste Site aus.
  Dadurch wird die XPage den Datendefinitionen in der Maske Site zugeordnet.
Konfigurieren Sie die Datenpalette wie folgt:
1. Klicken Sie unten im Teilfenster auf die Verknüpfung für Datenpalette. Im seitlichen Teilfenster wird die Registerkarte Daten angezeigt. Sie können die Registerkarte "Daten" auch anzeigen, indem Sie auf Fenster > Eclipse-Ansichten anzeigen > Daten klicken.
2. Wählen Sie auf der Registerkarte Daten für Datenquelle den Eintrag document1 aus. Möglicherweise müssen Sie den Fokus auf die XPage setzen, bevor die neue Datenquelle in der Datenpalette angezeigt wird.
  Die Feldnamen und -typen für die Datenquelle werden unter dem Namen der Datenquelle angezeigt.
3. Klicken Sie in der oberen linken Ecke der Registerkarte Daten auf das Symbol für Dialogfeld zum Auswählen von Steuerelementen, um dieses zu aktivieren.
  Das Symbol für Dialogfeld zum Auswählen von Steuerelementen sieht folgendermaßen aus:
Wählen Sie alle Felder aus und ziehen Sie sie von der Datenpalette auf die XPage unterhalb des Titels.
Das Dialogfeld für An Daten gebundene Steuerelemente wird geöffnet.
Füllen Sie das Dialogfeld wie folgt aus:
1. Lassen Sie alle Kontrollkästchen aktiviert, um die Felder einzuschließen.
2. Lassen Sie den Beschriftungstext unverändert.
3. Ändern Sie den Steuerelementtyp für Standorttyp in Kombinationsfeld, indem Sie ihn auswählen und das Dropdown-Menü verwenden.
4. Ändern Sie den Steuerelementtyp für Einrichtungen in Listenfeld.
5. Ändern Sie den Steuerelementtyp für Directions in Multiline Edit Box
6. Aktivieren Sie die Option Generiertem Code Übergabeschaltfläche hinzufügen.
7. Aktivieren Sie die Option für Generiertem Code Nachrichtensteuerelement hinzufügen.
Das Dialogfeld sollte folgendermaßen aussehen.
Klicken Sie auf OK.
Dadurch wird eine Tabelle mit zwei Spalten erstellt, wobei die erste Spalte Beschriftungen enthält und die zweite Spalte Steuerelemente. Die zweite Spalte enthält zudem einen Bereich zum Anzeigen von Gültigkeitsfehlern und eine Schaltfläche Übergeben.
Setzen Sie den Fokus auf das Feld Standorttyp und passen Sie es wie folgt an:
1. Klicken Sie im letzten Teilfenster unter Eigenschaften auf Daten und geben Sie als Standardwert Office ein.
2. Klicken Sie unter Eigenschaften auf Werte, um weitere Optionen für die Standorttypen hinzuzufügen. Klicken Sie dreimal auf Element hinzufügen. Wählen Sie die Beschriftungen der einzelnen Einträge aus und ändern Sie sie von Unbenannt in Office, Retail und Restaurant.
  Für Werte müssen Sie nur eine Eingabe vornehmen, wenn der gespeicherte Wert vom Anzeigewert abweicht, was hier nicht der Fall ist.
Setzen Sie den Fokus auf das Feld Einrichtungen und passen Sie es wie folgt an:
1. Klicken Sie im letzten Teilfenster unter Eigenschaften auf Listenfeld und aktivieren Sie Mehrfachauswahl zulassen.
2. Klicken Sie unter Eigenschaften auf Werte. Klicken Sie viermal auf Element hinzufügen. Wählen Sie die Beschriftungen der einzelnen Einträge aus und ändern Sie sie von Unbenannt in Cafeteria, Fitness Center, Visitor Center und Executive Briefing Center.
3. Klicken Sie in der ersten Spalte in die Zelle, aber nicht auf das Steuerelement für die Beschriftung ("Einrichtungen:"). Klicken Sie unter Eigenschaften auf Tabellenzelle und wählen Sie als Option für die Vertikale Ausrichtung der Zelle den Eintrag Oben aus.
  Dadurch wird die Beschriftung am Anfang der Zelle ausgerichtet.
Wenn Sie für "Einrichtungen" Kontrollkästchen bevorzugen, können Sie das Listenfeld entfernen und eine Kontrollkästchengruppe aus der Palette der Steuerelemente ziehen. Binden Sie die Kontrollkästchengruppe, indem Sie unter Eigenschaften auf Daten klicken und im Dropdown-Menü Binden an die Option Einrichtungen auswählen. Geben Sie die Werte auf der Registerkarte Werte ein, wie oben in Schritt 11.
Der Grund, warum sowohl das Feld City als auch das Feld searchCity verwendet werden, liegt darin, dass auf diese Weise nach einem anderen Ort als dem im Standortnamen angegebenen gesucht werden kann. Beispielsweise befindet sich einer der Musterstandorte in Brighton, einem Vorort von Boston. Für die Suche wird daher angegeben, dass sich der Standort in Boston befindet. Beim Land hingegen wird davon ausgegangen, dass das eigentliche Land und das für die Suche angegebene Land übereinstimmen.

Die XPage sollte folgendermaßen aussehen.

Nun sollte Ihre XPage aussehen wie Site1, die Sie zum Vergleich öffnen können.
Passen Sie die Tabelle so an, dass die Zeile mit der Schaltfläche Übergeben ausgeblendet ist, wenn die Seite nicht editierbar ist. Sie werden ein kleines JavaScript benötigen.
1. Klicken Sie auf die Tabellenzelle, die die Schaltfläche Übergeben enthält (auf die Zelle, nicht auf die Schaltfläche).
2. Klicken Sie im unteren Teilfenster unter Eigenschaften auf Tabellenzelle, sofern diese Option nicht bereits ausgewählt ist.
3. Klicken Sie auf die Raute neben Sichtbar und klicken Sie dann auf Wert berechnen. Der Scripteditor wird geöffnet.
4. Klicken Sie im Scripteditor in der Liste der globalen Variablen doppelt auf document1 und geben Sie dann einen Punkt ein.
  Die globale Variable document1 ist ein Objekt des Typs NotesXspDocument, das das aktuelle auf der XPage angezeigte Dokument darstellt. Wenn Sie den Punkt eingeben, wird eine Liste von Methoden für das Objekt angezeigt.
5. Blättern Sie in der Liste der Methoden bis zum Ende und klicken Sie doppelt auf isEditable().
  Wenn das Dokument editierbar ist, wird true zurückgegeben, andernfalls false. Die Formel sollte wie folgt aussehen:
```
document1.isEditable()
```
6. Klicken Sie auf OK.
  Der Scripteditor wird geschlossen und der Code wird gespeichert.
Wenn der Rückgabewert false lautet, wird durch diesen Code die Zelle mit der Schaltfläche ausgeblendet. Sie können auch die Schaltfläche statt der Zelle ausblenden.
Klicken Sie auf der XPage auf einen Punkt außerhalb aller Steuerelemente, setzen Sie den Fokus auf die Seite und drücken Sie Strg+S, um die Seite zu speichern.
Klicken Sie unter "Entwurf" auf die Option für "Vorschau im Web-Browser" und dann auf die Option für "Standard-Web-Browser des Systems"(oder wählen Sie einen anderen Browser aus). Sie können zum Testen der Anwendung Werte eingeben und auf Übergeben klicken. Dadurch sollte ein neues Dokument in der Datenbank gespeichert werden. Wenn Sie eine Liste der Dokumente anzeigen möchten, verwenden Sie den Notes-Client. Schließen Sie anschließend den Browser.
Nun sollte Ihre XPage aussehen wie SiteFinal, die Sie zum Vergleich öffnen können.
Schließen Sie die XPage Site, indem Sie im mittleren Teilfenster rechts oben auf das X klicken.