Sie können eine Variable im JSF-Handler an ein Eingabe- oder Ausgabesteuerelement auf der Webseite binden. Wenn eine Variable an ein Steuerelement auf der Seite gebunden wird und der Benutzer den Wert im Steuerelement ändert, wird der Wert der Variable entsprechend geändert und wenn der Wert der Variable durch die Logik im JSF-Handler geändert wird, ändert sich der Wert auf der Seite entsprechend.
Es gibt mehrere Möglichkeiten, Webseitensteuerelemente an EGL-Variablen zu binden:
- Erstellen Sie die Steuerelemente automatisch aus vorhandenen EGL-Variablen.
- Erstellen Sie die Steuerelemente selbst und binden Sie Variablen explizit an diese Steuerelemente.
- Erstellen Sie die Steuerelemente und Variablen gleichzeitig.
JSF-Steuerelemente automatisch aus EGL-Variablen erstellen
Mit diesem Verfahren können Sie Variablen im JSF-Handler erstellen und EGL dann erlauben, entsprechende Darstellungen auf der Seite zu erstellen.
- Öffnen Sie den der Webseite zugeordneten JSF-Handler. Wenn Sie die JSP-Seite im Editor betrachten, können Sie deren JSF-Handler durch einen Rechtsklick auf der Seite und anschließendes Klicken auf 'Seitencode bearbeiten' öffnen.
- Definieren Sie im JSF-Handler EGL-Basiselemente, -Datenelemente oder -Datensatzvariablen und speichern Sie die Datei. Damit die Variablen auf der Webseite verwendet werden können, müssen sie sich direkt im JSF-Handlerabschnitt befinden und nicht in einer der Funktionen im Abschnitt.
- Öffnen Sie die JSP-Datei.
- Erweitern Sie in der Sicht 'Seitendaten' die Anzeige für die Überschrift 'JSF-Handler'.
Die Variablen, die im JSF-Handler definiert sind, werden hier aufgelistet.
- Ziehen Sie die Variable von der Sicht 'Seitendaten' direkt auf die Webseite. Abhängig von dem Typ der Variable, die Sie ziehen, wird das Fenster 'Steuerelement einfügen' oder 'Listenfeld einfügen' geöffnet.
- Klicken Sie unter 'Steuerelemente erstellen zum' auf ein Optionsfeld:
- Wenn Sie schreibgeschützte Ausgabesteuerelemente verwenden möchten, wählen Sie 'Anzeigen eines bestehenden Datensatzes' aus.
- Wenn Sie bearbeitbare Eingabesteuerelemente verwenden möchten, wählen Sie 'Aktualisieren eines bestehenden Datensatzes' oder 'Erstellen eines neuen Datensatzes' aus.
In diesem Kontext sind diese Optionen funktional entsprechend.
In diesem Assistenten werden alle EGL-Variablen wie Datensätze behandelt.
- Wenn Sie eine Datensatzvariable oder mehrere Variablen ausgewählt haben, wählen Sie die Kontrollkästchen neben den anzuzeigenden Steuerelementen oder Variablen aus. Sie können auch einen Typ von Steuerelement zum Darstellen der Steuerelemente oder Variablen aus der Spalte 'Steuerungstyp' auswählen.
- Klicken Sie auf 'Fertig stellen'.
Die Steuerelemente werden zur Seite hinzugefügt und automatisch an die Variablen gebunden, die Sie auf die Seite gezogen haben. Sie können prüfen, an welche Variable ein JSF-Steuerelement gebunden ist, indem Sie auf das Steuerelement klicken, um es auszuwählen, und es dann in der Eigenschaftsansicht öffnen. Im Feld 'Wert' sehen Sie, an welche Variable das ausgewählte Steuerelement gebunden ist.
JSF-Steuerelemente erstellen und manuell binden
Sie können eigene Steuerelemente erstellen und manuell an EGL-Variablen binden.
Dieses Verfahren ist nützlich, wenn Sie zuerst das Erscheinungsbild Ihrer Seite entwerfen und der Seite danach Daten hinzufügen möchten.
- Öffnen Sie den der Webseite zugeordneten JSF-Handler. Wenn Sie die JSP-Seite im Editor betrachten, können Sie deren JSF-Handler durch einen Rechtsklick auf der Seite und anschließendes Klicken auf 'Seitencode bearbeiten' öffnen.
- Definieren Sie im JSF-Handler EGL-Basiselemente, -Datenelemente oder -Datensatzvariablen und speichern Sie die Datei. Damit die Variablen auf der Webseite verwendet werden können, müssen sie sich direkt im JSF-Handlerabschnitt befinden und nicht in einer der Funktionen im Abschnitt.
- Öffnen Sie die JSP-Datei.
- Erweitern Sie in der Palettenansicht die Anzeige für das Fach 'Erweiterte Faces-Komponenten' und ziehen Sie ein Steuerelement auf die Webseite.
Wenn Sie möchten, dass ein Steuerelement schreibgeschützt sein soll, verwenden Sie ein Ausgabesteuerelement wie zum Beispiel ein Steuerelement für die Ausgabe. Wenn das Steuerelement für Eingaben und Ausgaben bearbeitbar sein soll, verwenden Sie ein Steuerelement für die Eingabe. Verwenden Sie für Datensätze ein Steuerelement für Datentabellen und erstellen Sie für jedes Feld im Datensatz eine Spalte in der Datentabelle.
- Erweitern Sie in der Sicht 'Seitendaten' die Anzeige für die Überschrift 'JSF-Handler'.
Die Variablen, die im JSF-Handler definiert sind, werden hier aufgelistet.
- Ziehen Sie die Variable von der Sicht 'Seitendaten' direkt auf das Steuerelement auf der Webseite und stellen Sie dabei sicher, dass Sie die passenden Steuerelemente für die EGL-Variablentypen verwenden. Einzelne Basisvariablen und Datenelemente können an einzelne Eingabe- und Ausgabesteuerelemente gebunden werden. Feldgruppen und Datensätze müssen an Spalten in Datentabellen gebunden werden.
Steuerelemente und Variablen gleichzeitig erstellen
Sie können gebundene Steuerelemente und Variablen gleichzeitig mithilfe des Elements 'Neue Variable' im EGL-Fach in der Palettenansicht erstellen.
- Erweitern Sie in der Palettenansicht die Anzeige für das Fach 'EGL'.
- Ziehen Sie eine neue Variable auf die Seite. Das Fenster 'Neue EGL-Datenvariable erstellen' wird geöffnet.
- Wählen Sie unter 'Typ auswählen' aus, ob Sie ein Basiselement, Datenelement oder eine Datensatzvariable benötigen. Die übrigen Optionen auf der Seite unterscheiden sich je nach Typ der ausgewählten Variable.
- Wählen Sie den Typ der Variablen aus. Wählen Sie für Datenelemente und Datensätze einen Abschnitt aus Ihrem Projekt aus. Wählen Sie für Basiselementvariablen einen primitiven Datentyp aus und geben Sie bei Bedarf eine Dimension an.
- Benennen Sie die Variable im Feld 'Namen des Feldes eingeben'.
- Wenn die Variable eine Feldgruppe sein soll, wählen Sie das Kontrollkästchen 'Feldgruppe' aus und geben Sie im Feld 'Größe' eine Startlänge an.
- Wählen Sie 'Steuerelemente zum Anzeigen des EGL-Elements auf der Webseite' aus.
- Klicken Sie auf 'OK'. Abhängig von dem Typ der Variable wird das Fenster 'Steuerelement einfügen' oder 'Listenfeld einfügen' geöffnet.
- Klicken Sie unter 'Steuerelemente erstellen zum' auf ein Optionsfeld:
- Wenn Sie schreibgeschützte Ausgabesteuerelemente verwenden möchten, wählen Sie 'Anzeigen eines bestehenden Datensatzes' aus.
- Wenn Sie bearbeitbare Eingabesteuerelemente verwenden möchten, wählen Sie 'Aktualisieren eines bestehenden Datensatzes' oder 'Erstellen eines neuen Datensatzes' aus.
In diesem Kontext sind diese Optionen funktional entsprechend.
In diesem Assistenten werden alle EGL-Variablen wie Datensätze behandelt.
- Wenn Sie eine Datensatzvariable mit mehreren Feldern ausgewählt haben, wählen Sie die Kontrollkästchen neben den anzuzeigenden Feldern aus. Sie können auch einen Typ von Steuerelement zum Darstellen der Felder oder Variablen aus der Spalte 'Steuerungstyp' auswählen.
- Klicken Sie auf 'Fertig stellen'.
Beschränkungen
Das Binden von Steuerelementen an Variablen unterliegt aufgrund des Verhaltens von Webseiten Beschränkungen. Eine der wichtigsten Einschränkungen ist, dass der JSF-Handler nur die geänderten Variablen vom über die Webseite übermittelten Formular empfängt.
Angenommen, der folgende JSF-Handler besitzt zum Beispiel zwei Variablen und eine Funktion:
handler formTestPage type JSFHandler
{view = "formTestPage.jsp"}
stringOne string;
stringTwo string;
function doSomething()
SysLib.writeStderr("stringOne = " + stringOne);
SysLib.writeStderr("stringTwo = " + stringTwo);
end
end
Wenn Sie die Funktion an eine Schaltfläche und die Variablen an zwei Eingabesteuerelemente binden, können Sie die Werte in die Steuerelemente eingeben, die Schaltfläche anklicken und zusehen, wie die von Ihnen eingegebenen Werte in die Konsole geschrieben werden.
In diesem Beispiel wird vorausgesetzt, dass die Schaltfläche und die Steuerelemente in dasselbe HTML-Formular eingefügt wurden. Der Code des Hauptteils der Webseite könnte wie folgt aussehen:
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{formTestPage._preRender}"
postRender="#{formTestPage._postRender}">
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"
value="#{formTestPage.stringOne}"
binding="#{formTestPage.stringOne_Ref}"></h:inputText>
<br>
<h:inputText id="text2" styleClass="inputText"
value="#{formTestPage.stringTwo}"
binding="#{formTestPage.stringTwo_Ref}"></h:inputText>
<br>
<hx:commandExButton id="buttonDoSomething1"
styleClass="commandExButton" type="submit" value="doSomething"
action="#{formTestPage.doSomething}"
actionListener="#{formTestPage._commandActionListener}">
</hx:commandExButton>
</h:form>
</hx:scriptCollector>
</body>
Beachten Sie, dass das Tag
<h:form> sowohl die Schaltfläche (auf der Seite mit dem Tag
commandExButton dargestellt) als auch die zwei Eingabesteuerelemente (auf der Seite mit
inputText-Tags dargestellt) umfasst.
Auf diese Weise werden beide Eingabesteuerelemente für den JSF-Handler verfügbar gemacht, wenn Sie auf die Schaltfläche klicken. Das bedeutet, die in die Eingabesteuerelemente eingegebenen Werte werden den Variablen im Handler zugewiesen.
Wenn Sie jedoch die Steuerelemente auf der Seite weit auseinander platzieren, befinden sie sich möglicherweise nicht mehr im selben Tag des Formulars:
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{formTestPage._preRender}"
postRender="#{formTestPage._postRender}">
<h:inputText id="text1" styleClass="inputText"
value="#{formTestPage.stringOne}"
binding="#{formTestPage.stringOne_Ref}"></h:inputText>
<br>
<h:form id="form1" styleClass="form">
<h:inputText id="text2" styleClass="inputText"
value="#{formTestPage.stringTwo}"
binding="#{formTestPage.stringTwo_Ref}"></h:inputText>
<br>
<hx:commandExButton id="buttonDoSomething1"
styleClass="commandExButton" type="submit" value="doSomething"
action="#{formTestPage.doSomething}"
actionListener="#{formTestPage._commandActionListener}">
</hx:commandExButton>
</h:form>
</hx:scriptCollector>
</body>
In diesem Fall befindet sich das erste Eingabesteuerelement außerhalb des Formulars, aber das zweite Eingabesteuerelement und die Schaltfläche befinden sich innerhalb des Formulars. Wenn Sie nun auf die Schaltfläche klicken, empfängt der JSF-Handler nur das zweite Steuerelement und die an das erste Steuerelement gebundene Variable wird nicht geändert.