Nutzung des IBM Workplace Designer

09.02.2007 von Elmar Fuchs
Mit dem Workplace Designer steht erstmals ein Werkzeug zur Verfügung, mit welchem ohne Java/J2EE-Kenntnisse die Entwicklung von Portlets für den Workplace Collaboration Server möglich ist. Die starke Anlehnung des Workplace Designer an den Domino Designer ermöglicht Entwicklern von Notes Datenbanken einen leichten Einstieg in die Workplace-Welt.

Der Workplace Designer ermöglicht die schnelle, visuelle und dokumentzentrierte Entwicklung von Komponenten für den Workplace Collaboration Server. Durch einen im Vergleich zu anderen Systemen stark vereinfachten Deployment- Prozess werden diese Komponenten als Portlets auf dem Workplace Server eingerichtet und können in Seiten und Anwendungen eingebunden werden. Der Workplace Designer ist in seinem Aufbau und der Art, wie mit ihm Software programmiert wird, dem Domino Designer ähnlich.
Damit wird Notes-Entwicklern, die häufig als Quereinsteiger zur Programmierung gekommen sind und keine oder nur wenig Java/J2EE-Kenntnisse besitzen, eine Möglichkeit eröffnet, in einer ihnen vertrauten Art und Weise Anwendungen für den Workplace-Server zu erstellen. Gleichzeitig steht erstmals ein Werkzeug zur Verfügung, das die schnelle und unkomplizierte Anwendungsentwicklung (Rapid-Application Development) in der Workplace-Welt unterstützt.Durch die Möglichkeit, mit JavaScript auf die Java- APIs des Workplace-Servers zuzugreifen, bietet der Workplace Designer umfassende Möglichkeiten zur Entwicklung von Komponenten. Eine spätere Weiterverwendung im IBM Rational Developer ist ebenfalls möglich.

Die Entwicklungsumgebung

Basis für den Workplace Designer ist Eclipse, ein Open-Source Framework, das eine Grundlage für die Entwicklung komplexer Anwendungen darstellt. Die bekannteste ist die Java-Entwicklungsumgebung, die häufig mit Eclipse gleichgesetzt wird. Der Workplace Designer wird als zusätzliches Element des Workplace Managed Client installiert, welcher ebenfalls auf Eclipse basiert. Durch die Verwandtschaft mit Eclipse steht dem Entwickler bereits in der ersten Version des Workplace Designer eine leistungsfähige Entwicklungsumgebung zur Verfügung. Dies zeigt sich zum Beispiel im integrierten JavaScript- Editor, welcher vielfältige Funktionen zur Unterstützung bei der Erstellung von Programmcode bietet. Genannt seien hier die automatische Syntaxkontrolle, Farbkodierung und die automatische Code-Vervollständigung. Das Fenster der Entwicklungsumgebung des Workplace Designer umfasst 5 Bestandteile. Im linken Teil befindet sich der Komponenten-Navigator, in der Mitte oben der Arbeitsbereich zur Gestaltung der Masken und zum Erfassen des Programmcodes. Mehrere geöffnete Elemente sind über Register zugänglich. Unterhalb dieses Canvas genannten Bereichs können Sie im Eigenschaftsfenster die Eigenschaften des jeweils ausgewählten Designelements bearbeiten. Im rechten Teil der Entwicklungsumgebung sind die Fenster für die UI-Controls sowie für die Schemas angeordnet (Bild 1).

Bild 1: Die Arbeitsumgebung des Domino Designer.

Ein Anwendungsbeispiel

Im Beispiel wird eine einfache Verwaltung für Bücher erstellt. Eine Maske listet die vorhandenen Exemplare auf, die zweite ermöglicht die Detailanzeige eines vorhandenen oder die Erfassung eines neuen Buchs. Zur Steuerung werden einige Schaltflächen, einfache Aktionen sowie JavaScript genutzt.

Als Erstes erstellen wir eine neue Komponente. Neben der kompletten Neuerstellung ist auch der Import einer vorhandenen Domino-Anwendung möglich. Im Beispiel wird die Komponente komplett neu erstellt und erhält den Namen Bibliothek.

Eine Komponente besteht aus Masken (Form), Schemas (Schema), Skripts (Scripts) und Bildern (Images). Hauptelement einer Komponente ist die Maske. Sie enthält die UI-Controls und Images. Im Gegensatz zu Notes ist die Benutzeroberfläche beim Workplace Designer von der Datenstruktur getrennt, die in einem XSD-Schema abgelegt wird. Vorteile dieser Vorgehensweise sind unter anderem die mehrfache Verwendung eines Schemas in verschiedenen Komponenten und die Verwendung verschiedener Schemas in einer Komponente bzw. sogar in einer Maske. Letztgenanntes wird durch die durch die Nutzung des UI-Controls Panel möglich. Mit einer Maske erstellte Dokumente werden entsprechend dem XSD-Schema als XML-Dokumente in einer relationalen Datenbank abgelegt. Bei der Erstellung einer Maske müssen Sie entscheiden, ob Sie für die Maske ein Schema erstellen, ein vorhandenes nutzen oder ohne Schema arbeiten wollen.

Über dem Menüpunkt File/New/Form erstellen Sie eine Maske Buch. Ein Schema soll automatisch erstellt werden. Dies erreicht man durch die Auswahl der Option Create a schema for this form.

Nach dem Erstellen der Maske können Sie deren Eigenschaften bearbeiten. Werden diese nicht angezeigt, verwenden Sie den Menüpunkt Element/Properties/Form. Im Register Data ist das automatisch erstellte Schema zugeordnet. Das Aussehen der Maske beeinflussen Sie im Register Format. Neben der direkten Einstellung können auch CSS (Cascading Style Sheets) genutzt werden. Im Register Events ist – analog zu Notes die Programmierung von Maskenereignissen möglich.

UI-Controls sind visuelle Elemente, die es dem Anwender ermöglichen, Daten in Masken zu erfassen und zu bearbeiten. Mittels Drag&Drop können die verschiedenen UI-Controls zu einer Maske hinzugefügt werden. Im Fenster UI-Control wird das gewünschte Element ausgewählt und mit der linken Maustaste an die gewünschte Position in der Maske gezogen.

Zur Auswahl stehen folgende Core-Controls:

Im Beispiel wollen wir zuerst ein Image einfügen. Analog zu den gemeinsamen Ressourcen in Notes werden Bilder zentral in der Komponente abgelegt und dann in den einzelnen Masken verwendet. Im Fenster UI-Controls wählen Sie Image und ziehen das Element in die linke obere Ecke der Maske. Im sich öffnenden Dialogfenster Select Image können Sie ein Bild auswählen. Da in der Komponente noch keine Bilder enthalten sind, fügen Sie über die Schaltfläche Add Image zuerst ein Bild zur Komponente hinzu, um es anschließend auszuwählen.

Texte können Sie mittels des UI-Controls Label oder wie in Notes direkt in die Maske hinzufügen. Die Verwendung des UI-Controls erlaubt neben der Formatierung die Steuerung einer ganzen Reihe von Eigenschaften wie zum Beispiel Visible und Enabled sowie die Programmierung verschiedener Ereignisse für den Text. Direkt in die Maske eingefügter Text kann im Gegensatz dazu lediglich formatiert werden. Im Beispiel werden alle Texte als UI-Control Label erstellt. Fügen Sie unterhalb des Bildes ein UI-Control Label ein. Im Feld Label des Registers Basics im Eigenschaftsfenster wird der anzuzeigende Text eingegeben, hier Titel. Beim Aktivieren des Eigenschaftsfeldes erscheint rechts neben dem Feld ein Schalter in Form eines {n}.

Dieser Schalter ermöglicht das Umschalten zwischen Non-Computed, der Standardeinstellung, und Computed und ist für eine Vielzahl von Eigenschaftseinstellungen vorhanden. Bei der Auswahl von Computed öffnet sich der Java- Script-Editor. In diesem können Sie den Programmcode zur Ermittlung des anzuzeigenden Textes eingeben.

Das Festlegen eines Namens für das Element im Feld Name, zum Beispiel lblTitel, ist nicht zwingend erforderlich, entspricht aber gutem Programmierstil.

Die UI Control Edit Box stellt ein einfaches Eingabefeld zu Verfügung. Ziehen Sie eine Edit Box neben den Text. Vergeben Sie im Eigenschaftsfenster den Namen ebTitel. Das Register Basics bietet eine Reihe von Möglichkeiten zur Gestaltung des Eingabefeldes. Die Festlegung des anzuzeigenden Datentyps sowie die Datenzuordnung zu einem Element des verwendeten Schemas erfolgt auf dem Register Data. Im Feld Data binding können Sie ein vorhandenes Schema- Element direkt auswählen, mit einem XPath- Ausdruck ermitteln oder ein neues Feld erstellen. Im Beispiel erstellen wir ein neues Feld Titel vom Feldtyp String. Der anzuzeigende Datentyp (Feld Display type) ist ebenfalls String. Nach dem Speichern der Komponente wird die aktualisierte Struktur des Schemas (Schema_Buch) im rechten unteren Fenster der Entwicklungsumgebung angezeigt. Da für jedes Buch zumindest ein Titel angegeben werden soll, aktivieren wir für das Eingabefeld zusätzlich die Eigenschaft Required Field im Bereich Validation auf dem Register Data. Die auszugebende Fehlermeldung für einen fehlenden Titel legen Sie im Feld Required field error message fest.

Eine Verknüpfung zwischen dem Text (lblTitel) und Feld (ebTitel) ist über die Eigenschaft Select Target Control des Labels möglich.

Bild 2: Eine erste Maske im Workplace Designer.

Fügen Sie in der nächsten Zeile der Maske analog ein weiteres Label (Name – lblAutor, Label – Autor) und eine Edit Box (Name – ebAutor) ein. Erstellen Sie das Feld Autor vom Typ String im Schema. Verknüpfen Sie die beiden UI-Controls miteinander. Eine Eingabeüberprüfung für ebAutor ist nicht notwendig.

In der nächsten Zeile fügen wir einen weiteren Text (Name – lblBereich, Label – Bereich) und ein UI-Control vom Typ Combo Box (Name – cobBereich) ein. Die Werte für die Combobox können im Register Values über eine Tabelle erfasst oder mittels einer Formel berechnet werden. Im Beispiel geben wir die Werte für den anzuzeigenden Text (Label) sowie den internen Wert (Value) in der Tabelle über die Schaltfläche New ein: Lotus omino/Domino sowie IBM Workplace/Workplace. Über Data binding erstellen wir im Schema ein neues Feld Bereich vom Typ String. Zum Abschluss verknüpfen wir die beiden Elemente lblBereich und cobBereich.

In der folgenden Zeile der Maske wiederholen wir die Schritte für die Erfassung einer Buchbewertung. Fügen Sie ein Label (Name – lblBewertung, Label – Bewertung) sowie eine Combobox Bewertung (Name – cobBewertung, Werte Gut/0, Durchschnitt/1, Schwach/2) hinzu. Erstellen Sie das Feld Bewertung vom Typ String im Schema. Verknüpfen Sie die neuen Elemente miteinander.

Ihre Maske Buch sollte in etwa der in Bild 2 dargestellten entsprechen.

Eine zweite Maske

Bevor wir die Schaltflächen zur Maske Buch hinzufügen und weitere Einstellungen an der Maske vornehmen, erstellen wir die zweite Maske zur´Anzeige der vorhandenen Bücher. Dies ist notwendig, da wir auf diese Maske in den Aktionen der Schaltflächen Bezug nehmen wollen.

Erstellen Sie zuerst eine neue Maske mit dem Namen Buchliste. Wählen Sie dabei die Option Use an existing schema und als Schema Schema_ Buch. Öffnen Sie die Maske und fügen Sie wiederum das Bild in der linken oberen Ecke ein. Die Darstellung vorhandener Dokumente erfolgt analog zu Notes in Views. Im Unterschied zu Notes werden diese jedoch immer mittels des Container-Controls View in eine Maske eingebettet und sind kein eigenständiges Gestaltungselement innerhalb der Komponente.

Fügen Sie unterhalb des Bildes ein UI-Control vom Typ View ein. Legen Sie im Register Basics als Namen vwBuchliste fest. Weitere Einstellungsmöglichkeiten sind hier neben anderen die maximale Anzahl von Zeilen (Maximum rows per page) und die Anzahl Seiten (Maximum page count). Verwenden Sie die Standardeinstellungen und aktivieren Sie den Navigator zum Wechseln zwischen den einzelnen Seiten (Show view navigator/ Top und /Bottom). Auf dem Register Data ist die Verbindung zum zu verwendenden Schema (Schema_Buch) eingestellt. Eine weitere Möglichkeit ist hier das Filtern der anzuzeigenden Daten über die Option Show results matching the following conditions. Bei Auswahl von Dynamic conditions based on column values öffnet die zugehörige Schaltfläche Edit den Query-Editor, bei der Auswahl von Static JavaScript conditions den JavaScript-Editor.

Im Beispiel sollen alle Daten angezeigt werden. Wählen Sie deshalb die Option Show all results. Die Sortierung der View kann nach dem Hinzufügen weiterer Spalten auf dem Register Sort/Filter erfolgen. Die Gestaltung bestimmen Sie auf den Registern Basics und Format.

Durch die Auswahl des Spaltenkopfs können Sie dessen Gestaltung und die Überschrift der Spalte festlegen. Bei Auswahl der Spalte ist auf dem Register Data im Feld Data field die Zuordnung des in der Spalte anzuzeigenden Wertes der einzelnen Dokumente möglich. Das Einfügen weiterer Spalten erfolgt über einen Klick mit der rechten Maustaste auf eine Spalte und die Auswahl des Menüpunktes Add Column bzw. Insert Column.

Spalte

Überschrift

Schema-Elements

Weitere Eigenschaften, Register Basics

1.

Keine

Bereiche

Category Column aktivieren, Width: 30 Pixels

2.

Title

Titel

Column Display - Check Box aktivieren, Show values in this
column as links aktivieren, Width: 300 Pixels

3.

Autor

Autor

Width: 150 Pixels

4.

Bewertung

<Siehe Text>

Width: 100 Pixels

Im Beispiel benötigen wir vier Spalten. Verwenden Sie die Einstellungen aus Tabelle 1.

Die aktivierten Eigenschaften der zweiten Spalte ermöglichen die Auswahl und das Öffnen der einzelnen Dokumente. In der vierten Spalte Bewertung sollen Bewertungen angezeigt werden. Da diese nicht im Klartext gespeichert werden, wollen wir einen JavaScript-Programmcode für die Anzeige verwenden, den wir in einer JavaScript-Bibliothek ablegen.

Wechseln Sie im Komponenten-Navigator zu Scripts/Script Libraries. Über die Schaltfläche New Script Library erstellen Sie eine neue Skriptbibliothek. Geben Sie ihr den Namen MyBib underfassen Sie folgende Funktion (beachten Sie, dass JavaScript Groß- und Kleinschreibung unterscheidet):

function Bewertung() {
var b = document.getStringValue("/Schema_Buch/Bewertung");
if (b == "0")
text = "Gut";
if (b == "1")
text = "Durchschnitt";
if (b == "2")
text = "Schwach";
return text;
}

Diese Funktion wird in der Spalte Bewertung genutzt. Aktivieren Sie dazu auf dem Register Data die Option Formula und rufen Sie im Script-Editor die Funktion auf:

import MyBib;
Bewertung();

Nach der Definition der Spalten können Sie die Sortierkriterien für die View vwBuchliste bestimmen. Dies erfolgt in den Eigenschaften der View auf dem Register Sort/Filter. Dabei können Sie geschachtelte Sortierkriterien definieren. Wählen Sie bei Sort first by this column die erste Spalte und für Then by this column die zweite Spalte jeweils in aufsteigender Reihenfolge.

Um aus der Buchliste heraus Bucheinträge hinzufügen bzw. entfernen zu können, werden zwei Schaltflächen benötigt. Fügen Sie unterhalb der View ein UI-Control vom Typ Button ein. Auf dem Register Basics bestimmen Sie den Namen (btnNeuesBuch) und die Beschriftung (Label – Neues Buch). Die Ereignisprogrammierung erfolgt auf dem Register Events. Es stehen einfache Aktionen oder JavaScript zur Auswahl. Bei JavaScript lässt sich außerdem festlegen, ob der Programmcode auf dem Client oder dem Server ausgeführt wird. Im Beispiel definieren wir für die Schaltfläche für das Ereignis onClick eine einfache Aktion. Wählen Sie dazu Simple Actions und klicken Sie auf Add. Bestimmen Sie im sich öffnenden Dialogfenster als Aktion Open a form.

Verwenden Sie folgende Argumente:

Fügen Sie anschließend neben dem ersten ein weiteres UI-Control vom Typ Button ein. Nennen Sie es btnBuchEntfernen. Legen Sie die Beschriftung mit Buch entfernen fest. Bestimmen Sie als Ereignis onClick die einfache Aktion Delete selected Document mit den Argumenten View name – vwBuchliste und Confirmation Text – Dokument entfernen? Ihre Maske Buchliste sollte in etwa der in Bild 3 dargestellten entsprechen.

Bild 3: Die zweite Maske in der Designer-Anwendung.

Weitere Einstellungen

Nach dem Erstellen der zweiten Maske können wir noch einige Einstellungen an der Maske Buch vornehmen. Der Anwender muss in der Maske Buch die Möglichkeit bekommen, neu erfasste Dokumente bzw. Änderungen an vorhandenen Dokumenten abzuspeichern oder die Aktion abzubrechen. Dazu werden zwei Schaltflächen benötigt. Fügen Sie unterhalb der Zeile mit der Bewertung ein UI-Control vom Typ Button ein. Nennen Sie es btnSpeichern. Legen Sie die Beschriftung mit Speichern fest. Wählen Sie auf dem
Register Basics für Button type den Eintrag Submit. Erstellen Sie neben der ersten eine zweite Schaltfläche und nennen Sie sie btnAbbrechen. Legen Sie die Beschriftung mit Abbrechen fest. Wählen Sie als Ereignisprogrammierung im Ereignis onClick die einfache Aktion Open a form – Buchliste.

Um nach dem erfolgreichen Erfassen eines neuen Dokuments wieder die Buchliste anzuzeigen, stellen Sie in den Eigenschaften der Maske Buch auf dem Register Basics im Feld Next page (successful update) den Eintrag Other page ein. Als Form bestimmen Sie Buchliste.

Wie im Domino Designer können Sie im Workplace Designer berechnete Felder nutzen, um statische Texte zusammen mit dynamischen Werten auszugeben. Unterhalb der Schaltflächen soll das Datum der Erstellung des Dokuments angezeigt werden. Fügen Sie ein berechnetes Feld (UI-Control Computed Field) ein. Nennen Sie es cfDatum. Auf dem Register Value erfassen Sie den JavaScript-Programmcode für den Feldinhalt. Dabei können Sie die im Workplace Designer vorhandenen @-Funktionen verwenden. Diese entsprechen der aus dem Domino Designer bekannten Formelsprache die in großen Teilen in JavaScript umgesetzt worden ist. Als Programmcode für das berechnete Feld nutzen wir

"Erstellt am " + @Created

Auch hier erhalten Sie Unterstützung vom JavaScript-Editor. Drücken Sie nach der Eingabe des Zeichens @ die Tastenkombination [Ctrl]+ Leerzeichen, werden alle verfügbaren @-Funktionen angezeigt. Nach der Eingabe eines [C] reduziert sich die Anzeige entsprechend (Bild 4). Wählen Sie den gewünschten Befehl aus und fügen Sie ihn mit der Taste [Enter] ein.

Bild 4: Der JavaScript-Ausdruck im Workplace Designer.

Zum Abschluss bestimmen Sie die beim Aufruf des Portlets zu verwendende Startmaske. Führen Sie im Komponenten-Navigator einen Doppelklick auf den Namen der Komponente Bibliothek aus. Im Eigenschaftsfenster werden nun die Eigenschaften der Komponente angezeigt. Auf dem Register Basics legen Sie als Default design element die Maske Buchliste fest. Eine weitere interessante Möglichkeit ist die Festlegung von Parametern im Register Parameters. Die Verwendung von Parametern ermöglicht es, Komponenten zu entwickeln, die ohne Programmieraufwand angepasst werden können. Der Entwickler bestimmt die Parameter und nutzt sie im Workplace Designer mittels der JavaScript- Methode

context.getComponentParameter("<NameDesParameters>").

Der Workplace-Administrator weist den Parametern bei der Anwendung der Komponente (des Portlets) dann konkrete Werte zu. Eine Komponente kann so für verschiedene Zusammenhänge genutzt werden.

Deployment

Im Notes Designer entwickelte Anwendungen können sofort gestestet und genutzt werden. Für Komponenten, die mit dem Workplace Designer für einen Workplace-Server entwickelt werden, gilt dies nicht. Die Komponente muss zuerst einen Deployment-Prozess durchlaufen. Dabei wird sie in eine Vielzahl von Dateien innerhalb einer Ordnerstruktur *.ear umgewandelt und als Portlet auf dem Workplace Collaboration Services Server installiert. Für die verwendete Datenbank müssen eine Reihe von Konfigurationseinstellungen vorgenommen werden.

Passend zum Ansatz der schnellen Anwendungsentwicklung ist dieser Prozess im Workplace Designer stark vereinfacht. Das Deployment ist ohne genaue Kenntnisse des Deployment-Prozesses möglich und wird über ein Deployment-Profil gesteuert (Bild 5). In diesem werden einige Angaben bezüglich des verwendeten Workplace Collaboration Services Server, des Administrators, der zur verwendeten Datenbank und zu den JDBC-Optionen gemacht. Ist das Deployment-Profil einmal erstellt, können die einzelnen Komponenten schnell auf dem orkplace Collaboration Services Server eingerichtet erden. Im Beispiel wird die Datenbank Cloudscape mit den Standardeinstellungen Benutzer user, Password user verwendet.

Bild 5: Das Deployment-Profil der erstellten Anwendung.

Anwenden des Portlets im IBM Workplace

Nach dem Start (Aufruf von http://<hostname>/ lwp/workplace im Browser) und der Anmeldung als Benutzer bei IBM Workplace kann das erstellte Portlet in eine Seite eingefügt werden. Über den Punkt Team Collaboration im Navigator können Sie unter Team Spaces über die Schaltfläche Neu einen neuen Team Space, z. B. mit der Schablone Team-Projekt einrichten. Öffnen Sie anschließend den neuen Team Space. Über den Menüpunkt Aktionen/bearbeiten können Sie im Bereich Seiten und Layout eine neue Seite erstellen. Bestimmen Sie den Titel und das Layout.

Kehren Sie danach mit Ok und Fertig in den Team Space zurück. Wählen Sie die neue leere Seite im Navigator aus. Öffnen Sie am rechten Fensterrand das Fenster Inhalt einfügen und fügen Sie das Portlet über Hinzufügen zur Liste hinzu. Ziehen Sie es anschließend aus der Liste an den oberen Rand der neuen Seite. Wird ein roter Strich angezeigt, ist dies der Hinweis, dass Sie die linke Maustaste loslassen können. Das Portlet ist nun auf der Seite verankert und kann getestet werden (Bild 6). Nach dem Erfassen einiger Bücher zu Testzwecken können Sie in den Workplace Designer zurückgehen, um noch einige Verbesserungen an dem Portlet vorzunehmen.

Bild 6: Das Portlet im Browser- Client des IBM Workplace.

Weitere Veränderungen und Tests

Wie bereits oben erwähnt, werden im Workplace Designer die Daten getrennt vom User Interface in einem XSD-Schema gespeichert. Dieses Schema können Sie direkt bearbeiten. Dazu steht Ihnen sowohl ein visueller als auch ein Text-Editor zur Verfügung. Öffnen Sie im Komponenten- Navigator das Schema Schema_Buch. Wählen Sie im visuellen Editor ein Feld des Schemas mit der rechten Maustaste und fügen Sie ein weiteres Feld Anmerkung vom Typ String über Insert Element/ As Sibling hinzu (Bild 7). Nach dem Speichern steht diese Änderung allen Komponenten zur Verfügung, die dieses Schema nutzen. Das neue Feld wird im unteren rechten Fenster Data des Workplace Designer innerhalb der Struktur des Schemas Schema_Buch angezeigt. Mittels Drag&Drop können Sie es verwenden,um in einer Maske ein neues UI-Control vom Typ Edit Box zu erstellen. Öffnen Se die Maske Buch. Fügen Sie oberhalb der Schaltflächen eine neue Zeile ein. Erstellen Sie ein UI-Control vom Typ Label (Name –lblAnmerkung, Label –Anmerkung). Ziehen Sie mit der linken Maustaste das Feld Anmerkung aus der Schemastruktur in die Maske neben den erstellten Text.

Bild 7: Das XSD-Schema im IBM Workplace.

Zum Abschluss soll in der Maske in Abhängigkeit vom Status des Dokuments ein Text angezeigt werden. Das Anzeigen und Verbergen von Elementen ist in Masken des Workplace Designer genau wie in Notes-Masken möglich. Die Bedingungen werden jedoch im Gegensatz zum Domino Designer als Positivregel definiert (Element ist sichtbar, wenn …).

Fügen Sie in der Maske Buch unterhalb des Bildes ein Label (Name – lblNeuesBuch, Label – Neues Buch erfassen) ein. Auf dem Register Basics bestimmen Sie im Feld Visible, wann der Text sichtbar ist. Aktivieren Sie den Eintrag Computet und hinterlegen Sie den JavaScript-Programmcode

document.isNewDocument()

Erstellen Sie anschließend ein zweites UI-Control vom Typ Label (Name –blBuchBearbeiten, Label – Bucheintrag bearbeiten). Verwenden Sie für dieses Element den Programmcode

document.isEditable() && !document.isNewDocument()

Speichern Sie zum Abschluss alle Designelemente und führen Sie den Deployment-Prozess erneut aus. Da Sie das Profil bereits erstellt haben, müssen Sie den Prozess nur starten. Testen Sie im Anschluss die Änderungen im Portlet. Um diese zu sehen, müssen Sie gegebenenfalls den Browser aktualisieren bzw. den Browser-Cache löschen.