Problem
Sie müssen ein Web Formular mit Xpert.ivy erstellen, dass Benutzereingaben entgegennimmt, validiert und Fehler anzeigt.
Lösung
Mit dem Html User Dialog können Sie schnell und einfach solche Formulare erstellen.
Dieses Tutorial zeigt Ihnen, wie Sie Formulare mit Validierung und Fehleranzeige mit dem Html User Dialog und PrimeFaces erstellen. Abbildung 1 zeigt Ihnen das fertige Formular das wir zusammen erstellen werden.
Dieses Tutorial zeigt Ihnen, wie Sie Formulare mit Validierung und Fehleranzeige mit dem Html User Dialog und PrimeFaces erstellen. Abbildung 1 zeigt Ihnen das fertige Formular das wir zusammen erstellen werden.
 |
| Abb. 1: Das Formular |
SVN
Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.
Code
Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy.
Starten Sie die Engine und probieren Sie das Simple Form Formular aus. Wie Sie sehen prüft es, ob alle Eingabefelder korrekt ausgefüllt wurden. Wenn alles OK ist, wird das Formular ausgeblendet und eine Nachricht dem Benutzer angezeigt.
Schauen wir uns jetzt den Code an der dazu nötig ist.
Code Snippet 1: SimpleForm View
Strukturell unterscheiden sich Html User Dialog Formulare und normale HTML Formularen kaum. Alle Input-Felder die innerhalb des h:form sind, werden an den Server gesendet.
Das Layout wird mit p:panelGrid automatisch für Sie gemacht. Sie brauchen nur zu sagen, wie viele Spalten (columns) es haben soll. Danach werden die Komponenten innerhalb der p:panelGrid automatisch in die richtige Spalte gerendert.
Die Input-Felder werden durch das value Attribut mit der Datenklasse des Html User Dialoges verknüpft. Dies wir mit #{data.attributInDerDatenklasse} gemacht. Xpert.ivy bietet per CTRL+Leertaste Autovervollständigung der Datenklassen-Attribute an.
Die Validation dieser Input-Felder geschieht direkt auf der Komponente selber. Wenn Sie required="true" setzen hat dies zur Folge, dass die Eingabe nun zwingend ist. Des Weiteren werden automatisch die * neben den Labels gesetzt, sofern das Attribut for des p:outputLabel auf die id des korrespondierenden Input-Feldes zeigt.
Wenn Sie nun Registrieren drücken, wird das Formular per AJAX an den Server gesendet. Der Server validiert dieses Formular und zeigt Fehler an falls dies nötig ist. Ist alles OK, werden die Daten vom Formular auf die Datenklasse gemappt und die Logik des Html User Dialog ausgeführt. Der Event der in der Logik aufgerufen werden soll, wird auf dem actionListener Attribut des p:commandButton definiert. Dies sieht dann so aus: actionListener="#{logic.eventName}". Auch hier bietet Xpert.ivy Autovervollständigung an.
Beachten Sie das Attribut update auf dem p:commandButton. Dieses veranlasst alle Komponenten innerhalb von simpleForm sich nach jedem drücken des Button sich zu updaten. Das bedeutet, wenn sich ein Attribut in der Datenklasse geändert hat, dass auf ein Input-Feld gebunden ist, wird das Input-Feld den neuen Wert anzeigen.
Ähnlich verhält es sich mit der p:messages Komponente. Diese zeigt alle Nachrichten an, die nach dem drücken des Buttons dem FacesContext hinzugefügt worden sind. Um eine oder mehrere Nachrichten dem FacesContext hinzuzufügen, können Sie folgenden Code in einem Script-Step verwenden.
Code Snippet 2: Nachricht dem FacesContext hinzufügen
Als letztes möchte ich Ihnen das rendered Attribut vorstellen. Dieses nimmt als Wert true, false oder einen Verweis auf ein Datenklassen-Attribut per #{data.booleanAttribute} an. Wenn der Wert auf true ist, wird die Komponente und deren Kinder angezeigt, andernfalls wird sie ausgeblendet.
Schauen wir uns jetzt den Code an der dazu nötig ist.
Code Snippet 1: SimpleForm View
Strukturell unterscheiden sich Html User Dialog Formulare und normale HTML Formularen kaum. Alle Input-Felder die innerhalb des h:form sind, werden an den Server gesendet.
Das Layout wird mit p:panelGrid automatisch für Sie gemacht. Sie brauchen nur zu sagen, wie viele Spalten (columns) es haben soll. Danach werden die Komponenten innerhalb der p:panelGrid automatisch in die richtige Spalte gerendert.
Die Input-Felder werden durch das value Attribut mit der Datenklasse des Html User Dialoges verknüpft. Dies wir mit #{data.attributInDerDatenklasse} gemacht. Xpert.ivy bietet per CTRL+Leertaste Autovervollständigung der Datenklassen-Attribute an.
Die Validation dieser Input-Felder geschieht direkt auf der Komponente selber. Wenn Sie required="true" setzen hat dies zur Folge, dass die Eingabe nun zwingend ist. Des Weiteren werden automatisch die * neben den Labels gesetzt, sofern das Attribut for des p:outputLabel auf die id des korrespondierenden Input-Feldes zeigt.
Wenn Sie nun Registrieren drücken, wird das Formular per AJAX an den Server gesendet. Der Server validiert dieses Formular und zeigt Fehler an falls dies nötig ist. Ist alles OK, werden die Daten vom Formular auf die Datenklasse gemappt und die Logik des Html User Dialog ausgeführt. Der Event der in der Logik aufgerufen werden soll, wird auf dem actionListener Attribut des p:commandButton definiert. Dies sieht dann so aus: actionListener="#{logic.eventName}". Auch hier bietet Xpert.ivy Autovervollständigung an.
Beachten Sie das Attribut update auf dem p:commandButton. Dieses veranlasst alle Komponenten innerhalb von simpleForm sich nach jedem drücken des Button sich zu updaten. Das bedeutet, wenn sich ein Attribut in der Datenklasse geändert hat, dass auf ein Input-Feld gebunden ist, wird das Input-Feld den neuen Wert anzeigen.
Ähnlich verhält es sich mit der p:messages Komponente. Diese zeigt alle Nachrichten an, die nach dem drücken des Buttons dem FacesContext hinzugefügt worden sind. Um eine oder mehrere Nachrichten dem FacesContext hinzuzufügen, können Sie folgenden Code in einem Script-Step verwenden.
Code Snippet 2: Nachricht dem FacesContext hinzufügen
Als letztes möchte ich Ihnen das rendered Attribut vorstellen. Dieses nimmt als Wert true, false oder einen Verweis auf ein Datenklassen-Attribut per #{data.booleanAttribute} an. Wenn der Wert auf true ist, wird die Komponente und deren Kinder angezeigt, andernfalls wird sie ausgeblendet.
Weiterführende Ressourcen
Core JavaServer Faces (3rd Edition) (Amazon.de Affiliate)
JavaServer Faces 2.0: Ein Arbeitsbuch für die Praxis (Amazon.de Affiliate)
JSF 2.0 Cookbook (Amazon.de Affiliate)
JavaServer Faces 2.0: Ein Arbeitsbuch für die Praxis (Amazon.de Affiliate)
JSF 2.0 Cookbook (Amazon.de Affiliate)
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter
Keine Kommentare:
Kommentar veröffentlichen
Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.