Dynamische Tabs in Primefaces

DaBe1812

Bekanntes Mitglied
Hi,

ich habe eine Anwendung, die Primefaces 12 als Frontend verwendet.
Aktuell arbeite ich an einem Part, bei dem der User sich Daten suchen kann und diese dann in einer Liste angezeigt bekommt.
In der Liste soll er sich einen Datensatz aussuchen können, der ihm dann im Detail angezeigt wird.
Vorgestellt hatte ich mir das mit einer Ansicht in dynamischen Tabs, der erste Tab soll die Suche sein und nicht geschlossen werden können und dann geht mit jedem geöffneten Datensatz ein neuer Tab auf, der aber auch wieder geschlossen werden kann.

Problem 1:
Tabs funktionieren in Primefaces nicht wie Columns oder MenuItems, d.h. diese beiden Elemente kann ich auch dynamisch erzeugen, ABER ich habe immer die Möglichkeit eigene Elemente dazu zu packen. Bei Tabs scheint das anders zu sein, entweder meine Tabs sind alle dynamisch oder nicht.

Problem 2:
Die Detailansichten sind unterschiedlich. In der Suche kann ich in verschiedenen Tabellen suchen (Server, Windows System, Aufträge,...) diese benötigen dann auch alle eine eigene Detailansicht, die ich gerne alle als eigenes xhtml hätte.

Aktuell probiere ich folgendes:
Ich habe eine Head-View
HTML:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
    template="../layout.xhtml">

    <ui:define name="header">
        ProIPS - Datenpflege
    </ui:define>

    <ui:define name="main">

        <f:event type="preRenderView" listener="#{proIpsSearchHandler.onLoad}" />

        <h:form id="datenpflegeForm">
            <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />

            <div class="card">
                <p:tabView dynamic="true" value="#{proIpsSearchHandler.openTabList}" var="tabDetails" cache="false" scrollable="true">
                    <p:ajax event="tabChange" listener="#{proIpsSearchHandler.onTabChange}" update=":datenpflegeForm:msgs" />
                    <p:ajax event="tabClose" listener="#{proIpsSearchHandler.onTabClose}" update=":datenpflegeForm:msgs" />

                    <p:tab title="#{tabDetails.title}" closable="#{tabDetails.closable}">
                        <ui:include src="./dataexplorer/#{tabDetails.subpage}.xhtml" />
                    </p:tab>
                </p:tabView>
            </div>
        </h:form>
    </ui:define>
</ui:composition>

Die Suche habe ich also schon als eigene Subpage gebaut, die eben als einziges closable==false hat. Aber include scheint preRenderView zu schlagen. So, wie das Beispiel jetzt ist, läuft die Seite auf Fehler, weil er die Seite ./dataexplorer/.xhtml nicht im Pfad finden kann.

Im PreRenderView lege ich dort allerdings eine Seite ab. Habe ich getestet in dem ich im Include mal hart die Suchseite hinterlegt hatte, und dann hatte er sowohl den Titel, als auch das cloasable sauber geladen.

Jetzt bin ich am suchen, ob man die Tabs irgendwie codeseitig erzeugen kann, oder ob ich das include-Problem irgendwie aufgelöst bekomme. Danach werden sich weitere Probleme ergeben, aber da muss ich erstmal hin kommen.
 

Neue Themen


Oben