JSF Suche Beispiel für Primefaces Tree als Navigation

[_Andi91]

Hallo zusammen,

vorab: Ich würde mich selbst als Anfänger im Bereich JSF/Web bezeichnen, meine letzten Gehversuche in dem Bereich sind schon ein paar Jahre her.


Ich möchte eine Seite erstellen mit einem Tree links und einem Datenpanel rechts.
Je nach Selektion im Tree soll im Datenpanel ein anderer Inhalt angezeigt werden.
Also eigentlich ein Standard use case, so dachte ich jedenfalls. Allerdings finde ich dazu leider nichts, nur Beispiele in denen nur ein Tree für sich alleine dargestellt wird.

Hat hier evtl. jemand ein Beispiel parat wie das in JSF mit Primefaces umgesetzt werden kann?


Beispielanwendung:

Angenommene Selektierung im Tree = Kontaktdaten
Bei Selektion Bankdaten sollen dann im Datenpanel z.B. IBAN/BIC angezeigt werden etc...

+-- Tree ----------+_+------- Datenpanel - Kontaktdaten -----+
|_+ Kunden________|__|___________________________________________|
|__+ Max, Muster__|__| Name: Muster___________________________|
|___- Kontaktdaten|__| Vorname: Max___________________________|
|___- Bankdaten___|__| Strasse: Testweg 123____________________|
|___________________|__|___________________________________________|
+------------------+_+-------------------------------------------+


vg Andi

 

[mihe7]

nur Beispiele in denen nur ein Tree für sich alleine dargestellt wird.

Das liegt daran, dass es sich um universell einsetzbare Komponenten handelt. Es gibt ja zig Möglichkeiten, so etwas zu machen.

Ich gehe mal davon, aus dass Du AJAX verwenden willst, d. h. beim Klick auf einen Knoten im Baum soll lediglich der Inhalt rechts getauscht werden, ohne die Seite zu verlassen. Dann könnte beispielsweise das Folgende funktionieren (ich hab das jetzt nicht getestet).

Du hast Deine Seite (link Baum, rechts Inhalt), wobei der Inhalt auf der rechten Seite dynamisch via <ui:include> eingefügt wird. Das src-Attribut von include wird dabei an eine entsprechende Property einer Bean gebunden.

Dann registrierst Du einen Listener beim Baum (s. https://www.primefaces.org/showcase/ui/data/tree/events.xhtml), der auf select-Ereignisse hört und aktualisierst den Inhalt (update-Attribut auf die ID des Inhalts setzen). Der Listener setzt dann einfach die o. g. Property (an die das src-Attribut gebunden ist) auf die richtigen Inhaltsseite.

 

[_Andi91]

Danke, genau das meine ich.

Ich weis jetzt aber z.B. adhoc gar nicht wie ich "Du hast Deine Seite (link Baum, rechts Inhalt)" am besten in xhtml "programmiere".
Darum hatte ich gehofft es gibt irgendwo ein vollständiges Beispiel zu so einer mE Standardanwendung eines Trees.

 

[mihe7]

Ich weis jetzt aber z.B. adhoc gar nicht wie ich "Du hast Deine Seite (link Baum, rechts Inhalt)" am besten in xhtml "programmiere".

Zum Beispiel so: https://www.primefaces.org/showcase/ui/panel/grid.xhtml

Darum hatte ich gehofft es gibt irgendwo ein vollständiges Beispiel zu so einer mE Standardanwendung eines Trees.

Solltest Du das immer noch brauchen und ich später Zeit haben, kann ich Dir ggf. was zusammenschustern.