Xpert.ivy Code Rezept: Realtime ProgressBar

Problem

Der Benutzer startet einen Request der mehrere Sekunden dauert. Während dieser Zeit soll dem Benutzer eine Progress Bar angezeigt werden, die ihm den Fortschritt in Echtzeit anzeigt.

Lösung

p:progressBar kann mit PrimePush in Echtzeit aktualisiert werden.

Dieses Tutorial zeigt Ihnen, wie Sie p:progressBar zusammen mit PrimePush kombinieren können, um dem Benutzer den Fortschritt in Echtzeit anzuzeigen. Zusätzlich wird p:blockUI verwendet, um alle Eingaben des Benutzers zu blockieren.
Abb. 1: Realtime Progress Bar

SVN

Das fertige Projekt kann per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/PrimePush in den Xpert.ivy Designer importiert werden.

Code

Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy und müssen PrimePush installiert haben.

Starten Sie die Engine und probieren Sie das Realtime ProgressBar Beispiel aus. Drück man auf Start, so wird eine p:progressBar angezeigt, die in Echtzeit von der Logic aktualisiert wird.

Schauen wir uns zuerst den Code der View an.

Code Snippet 1: View Code

Auf den Zeilen 15 - 18 wird eine p:blockUI definiert, die eine p:progressBar und ein Label anzeigt sobald der p:commandButton gedrückt wird. Wichtig ist, dass widgetVar definiert wird, damit wir in der handleProgress JavaScript Funktion auf die p:progressBar Komponente zugreifen können und den Prozentsatz setzen können (Zeile 5).

handleProgress nimmt einen JSON-String entgegen, der per eval in ein JavaScript Objekt umgewandelt wird (Zeile 4). Dieses Objekt enthält die Attribute progress und msg. progress ist der Fortschritt in Prozent und msg das Label das angezeigt werden soll.

Doch von wo wird handleProgress aufgerufen? Die Antwort ist auf Zeile 20 zu finden. Diese definiert per p:socket eine Verbindung zum Server und erlaubt uns, Nachrichten vom Server direkt an den Client zu senden. Die Verbindung zum Server ist im Idealfall ein Websocket. Falls Websockets nicht zur Verfügung stehen, wird eine Comet Verbindung aufgebaut. Dies braucht Sie aber nicht zu interessieren, da PrimePush automatisch die best mögliche Verbindung verwendet.

onMessage von p:socket ist die JavaScript Funktion die aufgerufen werden soll, wenn eine neue Nachricht vom Server auf den Client gepusht wurde.

Das channel Attribut von p:socket ist der Kanal worauf auf neue Nachrichten gehört wird. In diesem Fall ist dies der Wert, der in dem Datenklassen-Attribut channel des Html User Dialog steht. Er wird dynamisch beim Start generiert, da jede Instanz der View einen eigenen Kanal benötigt, damit die Updates nur bei dem Benutzer zu sehen sind, der den p:commandButton gedrückt hat.

Öffnen Sie nun die Logic von RealtimeProgressBar. Beim starten des Html User Dialog wird zuerst der Kanal per in.channel = "/realtime/" + java.util.UUID.randomUUID().toString(); generiert. Dies stellt sicher, dass jede Instanz der View einen eigenen Kanal hat.

Die Script-Steps die bei startLongRunningProcess durchlaufen werden senden alle eine Nachricht an die View. Dies wird per PushContextFactory.getDefault().getPushContext().push(in.channel, "{ 'progress' : 10, 'msg' : 'Daten aufbereiten'}"); gemacht. Der zweite Parameter ist der JSON-String der von handleProgress per eval in ein JavaScript Objekt umgewandelt wird.

Weiterführende Ressourcen

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Xpert.ivy Code Rezept: Lade-Indikatoren für Html User Dialog

Problem

Sie wollen dem Benutzer ein Visuelles Feedback geben während etwas am laden oder speichern ist.

Lösung

PrimeFaces bietet 2 Komponenten, p:ajaxStatus und p:blockUI, mit denen man dem Benutzer Lade-Indikatoren anzeigen kann.

Dieses Tutorial zeigt Ihnen, wie Sie die beiden Komponenten einsetzen können, um dem Benutzer Lade-Indikatoren wie auf Abbildung 1 anzuzeigen.
Abb. 1: p:ajaxStatus und p:blockUI in Aktion

SVN

Das fertige Projekt  kann per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importiert werden.

Code

Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy.

Starten Sie die Engine und probieren Sie die p:ajaxStatus and p:blockUI Demo aus. Wird der obere  Button gedrückt, sieht man, dass oberhalb des Button eine Lade Animation (p:ajaxStatus) angezeigt wird und über das ganze Panel ein grauer Layer mit einem Lade-Indikator (p:blockUI) gelegt wird.

Schauen wir uns den Code an der dazu nötig ist.


Code Snippet 1: Code für die Lade-Indikatoren

Zeilen 4 bis 12 zeigen, wie man p:ajaxStatus konfigurieren kann. p:ajaxStatus wird jedesmal getriggert, wenn ein Ajax Request gefeuert wird. Also z.B. wenn ein p:commandButton gedrückt wird. Sobald der Request abgefeuert wurde, wird der Inhalt der start facet (Zeile 5) eingeblendet. Wenn der Request fertig ist, wird der Inhalt von der complete facet (Zeile 9) angezeigt.

Wenn p:ajaxStatus nicht getriggert werden soll, muss das global Attribut des p:commandButton auf false gestellt werden. Dies ist auf dem p:commandButton auf Zeile 15 zu sehen.

p:blockUI (Zeilen 20 bis 23) funktioniert etwas anders: Man konfiguriert, welche Komponente blockiert werden soll (block="panel") und welche Komponente p:blockUI aktiviert (trigger="btn").

Es kann ein beliebiger Inhalt innerhalb von p:ajaxStatus und p:blockUI angezeigt werden.

Weiterführende Ressourcen

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

PrimeFaces Cookbook angekündigt

Packt Publishing hat das PrimeFaces Cookbook angekündigt. Es wir voraussichtlich im Februar 2013 erscheinen.

Von der Webseite:

What you will learn from this book

  • Learn basic concepts to be able to work with PrimeFaces.
  • Delve deep into 100+ rich UI components with all the required details
  • Get solutions to typical and advanced use cases
  • Use the best practices, avoid pitfalls, and get performance tips when working with the component suite
  • Gain know-how of writing custom components on basis of the PrimeFaces' core functionality
  • Meet additional components from the PrimeFaces Extensions

In Detail

PrimeFaces is the de facto standard in the Java web development. PrimeFaces is a lightweight library with one jar, zero-configuration, and no required dependencies. You just need to download PrimeFaces, add the primefaces-{version}.jar to your classpath and import the namespace to get started. This cookbook provides a head start by covering all the knowledge needed for working with PrimeFaces components in the real world.

"PrimeFaces Cookbook" covers over 100 effective recipes for PrimeFaces 3.x which is a leading component suite to boost JSF applications. The book’s range is wide? from AJAX basics, theming, and input components to advanced usage of datatable, menus, drag & drop, and charts. It also includes creating custom components and PrimeFaces Extensions.

You will start with the basic concepts such as installing PrimeFaces, configuring it, and writing a first simple page. You will learn PrimeFaces' theming concept and common inputs and selects components. After that more advanced components and use cases will be discussed. The topics covered are grouping content with panels, data iteration components, endless menu variations, working with files and images, using drag & drop, creating charts, and maps. The last chapters describe solutions for frequent, advanced scenarios and give answers on how to write custom components based on PrimeFaces and also show the community-driven open source project PrimeFaces Extension in action.

Approach

This is a cookbook with plenty of practical recipes enriched with code and detailed explanations.

Who this book is for

This book is for you if you would like to learn modern Java web development based on PrimeFaces and are looking for a quick introduction into this matter. Prerequisites required for this book are basic JSF and jQuery skills.

Sie können es hier vorbestellen.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

PrimeFaces Themes für Xpert.ivy installieren und erstellen

Mit PrimeFaces Themes können Sie Ihrer Applikation mit nur wenig Aufwand ein komplett neues Aussehen geben. Ich werde Ihnen zeigen, wie Sie Themes von der PrimeFaces Theme Gallery in Xpert.ivy installieren können und wie Sie Ihr eigenes mit jQuery ThemeRoller erstellen können.

Unter http://www.primefaces.org/themes.html finden Sie über 30 Themes die Sie installieren können. Die Downloads für die Themes befinden sich unter http://repository.primefaces.org/org/primefaces/themes.

Ich werde das Redmond Theme in diesem Beispiel hier installieren. Sie könne es unter http://repository.primefaces.org/org/primefaces/themes/redmond/1.0.8/redmond-1.0.8.jar herunterladen.

Kopieren Sie redmond-1.0.8.jar in das webapps/ivy/WEB-INF/lib Verzeichnis des Designers.

Als nächstes müssen Sie webapps/ivy/WEB-INF/web.xml in einem Texteditor öffnen. Suchen Sie nach dem context-param mit dem param-name primefaces.THEME. Ersetzen Sie den param-value mit redmond.

Nun können Sie den Xpert.ivy Designer neu starten und Ihre Html User Dialoge erscheinen nun in diesem Theme.

Falls keines der verfügbaren Themes Ihrem Geschmack entspricht, können Sie mit dem jQuery ThemeRoller Ihr eigenes Theme erstellen und in Xpert.ivy installieren.

Öffnen Sie den ThemeRoller unter http://jqueryui.com/themeroller und gestalten Sie Ihr eigenes Theme. Wenn Sie zufrieden sind, klicken Sie auf Download theme. Scrollen Sie ganz nach unten und laden Sie das Theme herunter.

Nachdem Sie das Theme heruntergeladen haben, entpacken Sie das Zip und wechseln Sie in das css/theme-name Verzeichnis der entpackten Zip Datei.

Bevor wir das Theme verwenden könnnen, müssen wir noch ein paar Anpassungen vornehmen.

Löschen Sie als erstes jquery-ui-1.9.2.custom.min.css. Als nächstest müssen Sie jquery-ui-1.9.2.custom.css nach theme.css umbenennen.

Öffnen Sie theme.css in einem Texteditor. Sie müssen die Urls zu den Bildern anpassen. Hier ein Beispiel:

Vorher: url(images/einbild.png)
Nachher: url("#{resource['primefaces-xpertivy-hacker:images/einbild.png']}")

Falls Sie einen anderen Namen als xpertivy-hacker für das Theme gewählt haben, müssen Sie primefaces-xpertivy-hacker mit primefaces-ihr-theme-name ersetzen. Dies gilt für den Rest dieses Tutorials überall wo Sie xpertivy-hacker sehen.

Wenn Sie theme.css mit Notepad++ geöffnet haben, können Sie die Urls folgendermassen automatisch ersetzen lassen:
  • Drücken Sie CTRL+h um den Search/Replace Dialog zu öffnen
  • Wählen Sie Regular expression bei den Search Mode Optionen aus
  • Suchen Sie nach url\((.+)\)
  • Ersetzen Sie mit url("#{resource['primefaces-xpertivy-hacker:\1']}")
  • Klicken Sie Replace All
Erstellen Sie nun folgende Ordnerstruktur:
  • META-INF
    • resources
      • primfaces-xpertivy-hacker

Verschieben Sie theme.css und das images Verzeichnis in das primefaces-xpertivy-hacker Verzeichnis. Zum Schluss müssen Sie aus dem META-INF Verzeichnis eine Zip Datei machen und nach xpertivy-hacker.jar umbennen. Beachten Sie, dass die gezipte Datei nun mit .jar und nicht mehr mit .zip endet.

Jetzt ist Ihr Theme fertig. Kopieren Sie das Jar wie vorher in das lib Verzeichnis und ändern Sie den Wert für primefaces.THEME im web.xml auf xpertivy-hacker.

Starten Sie den Xpert.ivy Designer neu und probieren Sie Ihr eigenes Theme aus.

Weiterführende Ressourcen

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

PrimePush installieren

Mit Xpert.ivy 5.0 können Sie mit PrimePush in Echtzeit Nachrichten an den Browser senden.

Out of the box unterstützt Xpert.ivy PrimePush noch nicht, aber Sie können es ganz einfach dazu installieren.

PrimePush benutzt das Atmosphere Framework um Push zu implementieren. Ich habe Ihnen die benötigten Jars hier zur Verfügung gestellt. Entpacken Sie die Zip Datei und kopieren Sie die 4 Jars in das webapps/ivy/WEB-INF/lib Verzeichnis des Designers.

Als nächstes müssen Sie webapps/ivy/WEB-INF/web.xml mit einem Texteditor öffnen. Scrollen Sie ganz nach unten und fügen Sie das folgende Code Snippet unterhalb von <!-- DO NOT REMOVE OR CHANGE THIS SERVLET --> ein.

Code Snippet 1: PrimePush Servlet konfigurieren

Starten Sie den Designer neu. Falls der Designer nicht mehr startet, ist das Servlet-Mapping nicht korrekt. Vergleichen Sie Ihr web.xml mit diesem hier.

Um zu testen ob PrimePush bei Ihnen funktioniert, können Sie das Beispiel Projekt von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/PrimePush auschecken.

Starten Sie den PrimePush Hello World Prozess in mehreren Browser und senden Sie dann eine Nachricht. Wenn Sie alles richtig installiert haben, sehen Sie die Nachrichten in jedem Browser Fenster wie in Abbildung 1.
Abb.1: PrimePush in IE, Firefox und Chrome

Weiterführende Ressourcen

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

PrimeFaces Mobile installieren

Seit Rothorn S13 wird PrimeFaces Mobile mit Xpert.ivy ausgeliefert. Diese Schritte sind also nicht mehr nötig.

Die nächste Version von Xpert.ivy 'Rothorn' (die Sie hier herunterladen können) bietet eine neue UI Technologie, die auf JSF bzw. PrimeFaces basiert, an. PrimeFaces bietet neben der Standard JSF Implementation auch PrimeFaces Mobile an. PrimeFaces Mobile erlaubt es Ihnen, Benutzeroberflächen für Smartphones und Tablets zu erstellen. PrimeFaces Mobile basiert auf jQuery Mobile.

Out of the box bietet Xpert.ivy nur die Standard JSF Implementierung von PrimeFaces an. PrimeFaces Mobile kann aber ganz einfach dazu installiert werden.

Gehen Sie auf http://www.primefaces.org/downloads.html und laden Sie das primefaces-mobile-x.x.x.jar herunter. Kopieren Sie dieses jar in das webapps/ivy/WEB-INF/lib Verzeichnis des Xpert.ivy Designers.

Nach einem Neustart des Designers steht Ihnen PrimeFaces Mobile zur Verfügung.

Dasselbe können Sie für den Xpert.ivy Server machen, damit es auch dort zur Verfügung steht.

Um zu testen ob es funktioniert, können Sie ein Beispiel Projekt von mir unter http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/PrimeFacesMobile auschecken und das PrimeFaces Mobile Hello World Beispiel ausprobieren. Der Code wurde 1:1 von diesem Beispiel von PrimeFaces übernommen. Der Vollständigkeit halber ist hier noch der Code vom Beispiel.

Code Snippet 1: PrimeFaces Mobile Hello World

Das ganze sieht dann so aus:
Abb. 1: PrimeFaces Mobile Hello World
Hinweis: Die Serverseite (actionListener, value) habe ich nicht implementiert, da wir nur PrimeFaces Mobile installieren wollen. Sie können dies aber gerne tun.

Weiterführende Ressourcen

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Xpert.ivy Prozesse Debuggen

Wenn ein Prozess nicht so läuft wie Sie glauben das er laufen sollte, müssen Sie das Problem untersuchen und den Prozess Debuggen.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie Prozesse mit dem Xpert.ivy Designer Debuggen können.

Die Simulation

Das einfachste und zugleich eines der effektivsten Werkzeuge ist die Simulation.
Abb. 1: Simulationseinstellungen
Auf Abbildung 1 sehen Sie wie Sie die Simulation ein- bzw. ausschalten können und wie Sie die Geschwindigkeit anpassen können.

In den Preferences (Window -> Preferences) finden Sie unter Xpert.ivy -> Engine weitere Einstellungen die die Simulation beeinflussen.
Abb. 2: Weitere Simulationseinstellungen
Punkt 1 lässt Sie kontrollieren, ob und wann die Simulation den Prozessfluss simuliert. Mit Punkt 2 können Sie Start Event Beans und Intermediate Event Beans ausführen lassen bzw. unterdrücken. Dies kann praktisch sein, wenn Sie diese Events nicht benötigen.

Die History View

Das nächste Werkzeug ist die History View. Die History View speichert einen Snapshot der Prozessdaten auf jedem Prozesselement zum Zeitpunkt als der Prozess das Element durchlief.

Wenn Sie die Engine starten und einen Prozess ausführen, klicken Sie auf das Prozesselement das Sie interessiert. In der History View sehen Sie dann alle Prozessdaten die zum Zeitpunkt, als das Prozesselement durchlaufen wurde, aktuell waren.
Abb. 3: History View

Breakpoints

Mit Breakpoints können Sie stellen in Ihrem Prozess markieren, an denen die Engine anhalten soll. Wenn die Engine einen Breakpoint erreicht hat, können Sie die Variablen untersuchen.

Um einen Breakpoint auf einem Prozesselement zu setzen, klicken Sie mit der rechten Maustaste auf das Prozesselement und wählen Breakpoint -> Add Breakpoint. Auf dem Prozesselement ist nun eine kleine blaue Kugel zu sehen.

Starten Sie die Engine und einen Prozess. Sobald der Prozess das Prozesselement erreicht, stopp die Prozessausführung.
Abb. 4: Prozessausführung stoppt bei Breakpoint
Auf Abbildung 4 sehen Sie wie der Prozess auf ein Prozesselement mit einem Breakpoint gelaufen ist und angehalten hat. Dies erkennt man an dem blauen Pfeil links neben dem Prozesselement. In der Variables View sehen Sie welche Werte die Variablen zu diesem Zeitpunkt haben.

Nun haben Sie 2 Möglichkeiten. Sie können mit F8 zum nächsten Breakpoint springen, oder per F6 durch jedes nachfolgende Prozesselement steppen.

Conditional Breakpoints

Neben den normalen Breakpoints gibt es auch die so genannten Conditional Breakpoints. Diese stoppen die Ausführung des Prozesses nur, wenn eine gewisse Bedingung erfüllt ist. Beispielsweise wenn ein Zähler einen gewissen Wert erreicht hat.

Um einen Conditional Breakpoint zu erstellen, klicken Sie mit der rechten Maustaste auf das Prozesselement und wählen Breakpoint -> Conditional Breakpoint. Ein Fenster wie in Abbildung 5 geht auf, dass Sie auffordert eine Bedingung einzugeben.
Abb. 5: Bedingung des Conditional Breakpoint eingeben

Breakpoints auf Datenklassen

Die letzte Art von Breakpoint ist der Breakpoint auf einem Datenklassen-Attribut. Öffnen Sie dazu eine Datenklasse und wählen Sie das Attribut aus, auf welchem Sie den Breakpoint setzen wollen.
Abb. 6: Breakpoint auf Datenklassen-Attribut setzen
Beachten Sie den kleinen Bleistift der nun auf dem roten A-Symbol des Attributes zu sehen ist. Dieses weist darauf hin, dass auf diesem Attribut ein Breakpoint ist.

Wenn sich dieses Attribut ändert, wird die Prozessausführung gestoppt. In der Variables View sehen Sie unter dem Eintrag debug den alten und neuen Wert des Attributes.

Breakpoints deaktivieren

Sie können in der Breakpoints View die Breakpoints ein- und ausschalten oder ganz löschen.
Abb. 7: Breakpoints View

Debug Log Statements

Die letzte Technik die ich Ihnen zeigen werde ist das ausgeben von Log Statements. Dazu müssen Sie nur folgenden Code in einem Script-Step ausführen.
Code Snippet 1: Debug Log Statement

Dieses Log Statement wird beim durchlaufen des Script-Step im Runtime Log angezeigt. Sie müssen dazu den Log Level auf Debug einstellen und Filter user logs aktivieren.
Abb. 8: Das Runtime Log
Per Doppelklick auf einen Log Eintrag, öffnet sich ein Fenster mit Details.
Abb. 9: Log Details
Von hier aus können Sie, wie in Abbildung 9 gezeigt wird, direkt auf das Prozesselement springen, welches das Log ausgegeben hat. Dies funktioniert auch für Errors.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Xpert.ivy Code Rezept: Formulare mit Html User Dialog erstellen

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.
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.

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)
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.