Xpert.ivy Code-Rezept: Drill-Down Master-Detail-Edit Formular erstellen

Problem

Sie wollen ein Formular mit Drill-Down Master-Detail-Edit Funktionalität erstellen.

Lösung

Die PrimeFaces Extensions bieten eine pe:masterDetail Komponente an, mit der solche Formulare schnell und einfach erstellt werden können.

In diesem Tutorial zeige ich, wie man die pe:masterDetail Komponente einsetzt.

Abb. 1: Stufe 1 - Übersicht der Kontakte

Abb. 2: Stufe 2 - Detail des gewählten Kontaktes

Abb. 3: Stufe 3 - Kontakt bearbeiten

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

Die Demo Master Detail Edit Demo zeigt ein Beispiel, wie man pe:masterDetail einsetzen kann (Abbildungen 1 bis 3).

Als kleinen Bonus habe ich noch ein Beispiel für das hinzufügen und löschen von Kontakten reingepackt. Dies hat aber nichts mit der pe:masterDetail Komponente an sich zu tun und ist fürs Selbststudium gedacht.

Code-Snippet 1: MasterDetail Code der Demo

Code-Snippet 1 zeigt den ganzen JSF Code der für die Demo benötigt wird.

Während dies nach sehr viel Code aussieht, kann man das Ganze auf 1 Pattern reduzieren, dass Allgemein eingesetzt werden kann, um mit pe:masterDetail zu Entwickeln.

Code-Snippet 2: pe:masterDetail Pattern

Der pe:masterDetail Tag kann 1 oder mehrere pe:masterDetailLevel beinhalten. Im pe:masterDetail konfiguriert man das Allgemeine Verhalten der Komponente wie z.B. ob oberhalb der Levels ein Breadcrumb angezeigt werden soll. Die pe:masterDetailLevel beinhalten die eigentlichen Komponenten, die je nach Level angezeigt werden sollen.

Allgemein hat man im ersten Level eine Liste/Tabelle von etwas, von dem man das Detail im zweiten Level anzeigt.

pe:selectDetailLevel kann als Child-Element von p:commandButton und p:commandLink verwendet werden. pe:selectDetailLevel bestimmt, zu welchem Level gewechselt wird, wenn man z.B. einen Button drück. Des Weiteren kann man das selektierte Objekt per contextValue übergeben, dass danach im nächsten pe:masterDetailLevel per contextVar zur Verfügung steht.

Mit dem selectLevelListener kann man pe:selectDetailLevel übersteuern. Schauen Sie sich dazu die selectLevel Methode in der Logic an.

Wie man sieht, kann man dieses Pattern beliebig weit erweitern. In der Demo habe ich z.B. ein drittes Level erstellt, über das man den selektierten Kontakt direkt bearbeiten kann.

Bei Objekten die selber wieder Listen von Objekten beinhalten, kann man mit der pe:masterDetail Komponte einfach weitere Levels hinzufügen und somit einen Drill-Down Effekt erzielen.

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.

Keine Kommentare:

Kommentar veröffentlichen

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.