JSF Problem mit Primefaces

Dieses Thema JSF - Problem mit Primefaces im Forum "Web Tier" wurde erstellt von firestone, 31. Okt. 2014.

Thema: Problem mit Primefaces Guten Morgen Zusammen, ich habe ein Problem mit Primefaces ich versuche es mal so gut wie möglich zu beschreiben....

  1. Guten Morgen Zusammen,
    ich habe ein Problem mit Primefaces ich versuche es mal so gut wie möglich zu beschreiben.

    Was möchte ich eigentlich machen:
    - Ich habe einen TabView mit 2 Tabs erstellt
    - Auf jeden Tab habe ich eine p:dataTable erstellt die sortierbar und scrollbar ist die Tabelle habe ich als "livescroll" definiert ansonsten wäre die Performance unterirdisch
    - Auf dem ersten Tab habe ich einen globalFilter
    - In beiden Tabellen habe ich am Anfang der Reihe eine SelectBox wenn ich im ersten Tab deselektiere dann verschwindet der Eintrag in den zweiten Tab und umgekehrt
    - Im zweiten Tab habe ich die Zeilen selektierbar gemacht und möchte beim Zeilenklick in eine "DetailSeite" kommen und mit einem Button wieder zurück auf den vorher ausgewählten Tab (in diesem Fall der zweite)
    - Wenn ich von einem Tab in den anderen Wechsel möchte ich das diese sich "komplett" reseten und neu laden

    Nun zu den Problemen:
    1. Wenn ich im GlobaFilter etwas eingebe filtert er die Liste wie gewünscht klicke ich nun auf Tab2 und wieder zurück auf Tab1 so ist der Filter immer noch gesetzt ich möchte aber das alles resetet wird
    2. Solange ich die Tabelle nicht gefiltert habe funktionieren die CheckBoxen wie gewünscht da der Tabelle die Liste scrollBean.aktive zugrunde liegt. Sobald ich aber Filter, nimmt er anschließend die Liste scrollBean.filteredList und somit funktioniert das vorgehen nimm Eintrag aus aktive raus und stecke ihn in ausgelagert nicht mehr
    3. Ich habe den Livescroll auf 20 Einträge eingegrenzt wechsel ich nun in den zweiten Tab von hier aus in die Detailsicht wieder zurück auf den zweiten Tab und dann auf den ersten und führe hier nun die CheckBox aus, so enthält meine ausgelagerte Liste (auf Tab2) nur noch 20 Einträge

    :(:(:( Ich hoffe ihr könnt die Probleme Nachvollziehen anbei ein paar Codeausschnitte

    view.xhtml
    HTML:

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">



        <h:head>
            <title>Test</title>
        </h:head>

        <h:body>
            <h:form id="testForm">



                <p:tabView activeIndex="#{dtScrollView.activeIdx}" dynamic="true"
                    cache="false" id="tabView">

                    <p:ajax event="tabChange" listener="#{dtScrollView.onTabChange}"
                        process="@this" update=":#{p:component('tabView')}" />
                    <p:tab title="Aktive" id="tab1">
                        <p:dataTable styleClass="customTable" var="anlass"
                            value="#{dtScrollView.aktive}" scrollable="true" scrollRows="20"
                            liveScroll="true" scrollHeight="150"
                            widgetVar="anlassTable"
                            emptyMessage="Keine Anlässe gefunden"
                            filteredValue="#{dtScrollView.filteredAnlass}">
                            <f:facet name="header">
                                <p:outputPanel>
                                    <h:outputText value="Alle Felder durchsuchen:" />
                                    <p:inputText id="globalFilter"
                                        onkeyup="PF('anlassTable').filter()"
                                        style="width:150px" placeholder="Suchbegriff eingeben" />
                                    <p:commandButton icon="ui-icon-myCancel"
                                        onclick="PF('anlassTable').clearFilters();" />
                                </p:outputPanel>
                            </f:facet>


                            <p:column headerText="Aus" style="width:10%;">
                                <p:selectBooleanCheckbox id="cb"
                                    value="#{anlass.ausgelagert}">
                                    <p:ajax event="change"
                                        listener="#{dtScrollView.checkboxChanged}"
                                        update=":#{p:component('tabView')}" />
                                </p:selectBooleanCheckbox>
                            </p:column>

                            <p:column headerText="Prio" sortBy="#{anlass.prio}"
                                filterBy="#{anlass.prio}" filterStyleClass="hide">
                                <h:outputText value="#{anlass.prio}" />
                            </p:column>
                            <p:column headerText="Name" sortBy="#{anlass.name}"
                                filterBy="#{anlass.name}" filterStyleClass="hide">
                                <h:outputText value="#{anlass.name}" />
                            </p:column>
                            <p:column headerText="Vorname" sortBy="#{anlass.vorname}"
                                filterBy="#{anlass.vorname}" filterStyleClass="hide">
                                <h:outputText value="#{anlass.vorname}" />
                            </p:column>
                            <p:column headerText="Betreuer"
                                sortBy="#{anlass.betreuer}"
                                filterBy="#{anlass.betreuer}" filterStyleClass="hide">
                                <h:outputText value="#{anlass.betreuer}" />
                            </p:column>
                            <p:column headerText="erhalten"
                                sortBy="#{anlass.erhalten}"
                                filterBy="#{anlass.erhalten}" filterStyleClass="hide">
                                <h:outputText value="#{anlass.erhalten}" />
                            </p:column>
                        </p:dataTable>
                    </p:tab>

                    <p:tab title="Ausgeblendete - #{dtScrollView.cars1Size} " id="tab2">
                        <p:dataTable styleClass="aragTable" var="anlass"
                            value="#{dtScrollView.ausgeblendete}" scrollable="true"
                            scrollRows="30" liveScroll="true" scrollHeight="150"
                            selection="#{dtScrollView.selectedAnlass}"
                            selectionMode="single" rowKey="#{anlass.id}">
                            <p:ajax event="rowSelect"
                                listener="#{dtScrollView.onRowSelectNavigate}" />

                            <p:column headerText="Ein" style="width:10%;">
                                <p:selectBooleanCheckbox id="cb"
                                    value="#{anlass.ausgelagert}">
                                    <p:ajax event="change"
                                        listener="#{dtScrollView.checkboxChanged}"
                                        update=":#{p:component('tabView')}" />
                                </p:selectBooleanCheckbox>
                            </p:column>
                            <p:column headerText="Id" sortBy="#{anlass.id}">
                                <h:outputText value="#{anlass.id}" />
                            </p:column>
                            <p:column headerText="Prio" sortBy="#{anlass.prio}">
                                <h:outputText value="#{anlass.prio}" />
                            </p:column>
                        </p:dataTable>

                    </p:tab>
                </p:tabView>

            </h:form>
        </h:body>


    </ui:composition>
     
    dtScrollView.java
    Code (Java):

    package org.primefaces.showcase.view.data.datatable;

    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.List;

    import javax.annotation.PostConstruct;
    import javax.faces.application.ConfigurableNavigationHandler;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.ManagedProperty;
    import javax.faces.bean.SessionScoped;
    import javax.faces.context.FacesContext;
    import javax.faces.event.AjaxBehaviorEvent;

    import org.primefaces.component.datatable.DataTable;
    import org.primefaces.component.tabview.Tab;
    import org.primefaces.event.SelectEvent;
    import org.primefaces.event.TabChangeEvent;
    import org.primefaces.showcase.service.Anlass;
    import org.primefaces.showcase.service.AnlassService;
    import org.primefaces.showcase.service.Car;
    import org.primefaces.showcase.service.CarService;

    @ManagedBean(name = "dtScrollView")
    @SessionScoped
    public class ScrollView implements Serializable {

        private List<Car> cars1;
        private List<Anlass> anlaesse;
        private List<Anlass> filteredAnlaesse;

        private List<Car> aktive2 = new ArrayList<Car>();
        private List<Car> ausgeblendete2 = new ArrayList<Car>();

        private List<Anlass> aktive = new ArrayList<Anlass>();
        private List<Anlass> ausgeblendete = new ArrayList<Anlass>();

        private Anlass selectedAnlass;
        private Tab selectedTab;
        private int activeIdx;

        @ManagedProperty("#{carService}")
        private CarService service;

        @ManagedProperty("#{AnlassService}")
        private AnlassService AnlassService;

        @PostConstruct
        public void init() {
            cars1 = service.createCars(10);
            anlaesse = AnlassService.createAnlaesse(10000);
            reloadListen();
            DataTable test = new DataTable();

        }

        private void reloadListen() {
            aktive.clear();
            ausgeblendete.clear();
            for (int i = 0; i < anlaesse.size(); i++) {
                if (anlaesse.get(i).isAusgelagert()) {
                    ausgeblendete.add(anlaesse.get(i));
                } else {
                    aktive.add(anlaesse.get(i));
                }
            }
        }

        public List<Car> getCars1() {
            return cars1;
        }

        public int getCars1Size() {
            return ausgeblendete.size();
        }

        public int getAusgeblendeteSize() {
            return ausgeblendete.size();
        }

        public void setService(CarService service) {
            this.service = service;
        }

        public Anlass getSelectedAnlass() {

            return selectedAnlass;
        }

        public void setSelectedAnlass(Anlass selectedAnlass) {

            this.selectedAnlass = selectedAnlass;
        }

        public void onRowSelectNavigate(SelectEvent event) {

            ConfigurableNavigationHandler configurableNavigationHandler = (ConfigurableNavigationHandler) FacesContext
                    .getCurrentInstance().getApplication().getNavigationHandler();

            configurableNavigationHandler
                    .performNavigation("carDetail?faces-redirect=true");
        }

        public int getActiveIdx() {

            return activeIdx;
        }

        public void setActiveIdx(int activeIdx) {

            this.activeIdx = activeIdx;
        }

        public Tab getSelectedTab() {

            return selectedTab;
        }

        public void setSelectedTab(Tab selectedTab) {
            this.selectedTab = selectedTab;
        }

        public void onTabChange(TabChangeEvent event) {
            init();
        }

        public void checkboxChanged(AjaxBehaviorEvent event) {
            reloadListen();
        }

        public List<Anlass> getAktive() {
            return aktive;
        }

        public void setAktive(List<Anlass> aktive) {
            this.aktive = aktive;
        }

        public List<Anlass> getAusgeblendete() {
            return ausgeblendete;
        }

        public void setAusgeblendete(List<Anlass> ausgeblendete) {
            this.ausgeblendete = ausgeblendete;
        }

        public List<Anlass> getanlaesse() {
            return anlaesse;
        }

        public void setanlaesse(List<Anlass> anlaesse) {
            this.anlaesse = anlaesse;
        }

        public AnlassService getAnlassService() {
            return AnlassService;
        }

        public void setAnlassService(AnlassService AnlassService) {
            this.AnlassService = AnlassService;
        }

        public void setFilteredAnlaesse(List<Anlass> filteredAnlaesse) {
            this.filteredAnlaesse = filteredAnlaesse;
        }

        public List<Anlass> getFilteredAnlaesse() {
            return this.filteredAnlaesse;
        }

    }
     
    DetailSicht
    HTML:

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
         xmlns:h="http://java.sun.com/jsf/html"
         xmlns:f="http://java.sun.com/jsf/core"
         xmlns:ui="http://java.sun.com/jsf/facelets"
         xmlns:p="http://primefaces.org/ui">
         
           <h:head>
            <title>Test</title>
      </h:head>
       
        <h:body >
        <h:form>
        <p:fieldset>  
        <f:facet name="legend">  
           
        </f:facet>  
     
        <h:panelGrid id="display" columns="2" cellpadding="4">  
     
            <h:outputText value="ID:" />  
            <h:outputText value="#{dtScrollView.selectedAnlass.id}" style="font-weight:bold"/>  
     
            <h:outputText value="Versicherungsnummer" />  
            <h:outputText value="#{dtScrollView.selectedAnlass.vsnr}" style="font-weight:bold"/>  
     
            <h:outputText value="Betreuer:" />  
            <h:outputText value="#{dtScrollView.selectedAnlass.betreuer}" style="font-weight:bold"/>  
     
            <h:outputText value="Erhalten:" />  
            <h:outputText value="#{dtScrollView.selectedAnlass.erhalten}" style="font-weight:bold"/>  
        </h:panelGrid>  
    </p:fieldset>  
        <p:button outcome="view" value="With Icon" >
    </p:button>
    </h:form>

            </h:body>
         
       
    </ui:composition>
     

    Wer kann mir helfen :):):)
     
    Zuletzt von einem Moderator bearbeitet: 5. Nov. 2014
  2. Vielleicht helfen dir diese Java-Grundlagen weiter --> *Klick*
  3. Schonmal dran gedacht dir bestimmte daten in der session zu halten ;)

    Also was ich damit meine ist zb. dass du jedem Tab ein Filterobjekt zuweist welches du in der session hältst. Du kannst jegliche Einstellung mit den gewissen Zuweisungen ablegen und dynamisch drauf zugreifen.

    Grüße
     
    Zuletzt bearbeitet: 4. Nov. 2014
  4. Wie meinst du das ? Kann du das vielleicht noch etwas genauer beschreiben ? Das wäre super :)
     
  5. stg
    stg
    Ich hab gerade keine komplette Lösung für dein Problem, aber zwei Sachen springen mir ins Auge:

    erstens: Du erstellst in deiner init()-Methode eine lokale DataTable-Instanz, schmeißt diese aber sofort wieder weg.

    zweitens: Du kannst die Filter Serverseitig (z.B. in deinem tabChange-Listener) zurücksetzen. In etwa sollte das so aussehen:
    Code (Java):

    DataTable dataTable = (DataTable) FacesContext.getCurrentInstance()
            .getViewRoot().findComponent(dataTableId);
    dataTable.setFilteredValue(null);
    dataTable.setFilters(null);
     
    Näheres dazu findest du aber sicher in der PrimeFaces API.
     
    Zuletzt bearbeitet: 4. Nov. 2014
  6. Naja,

    viele Wege führen bekanntlich nach Rom. Ich würde das folgendermaßen lösen um auch die volle Kontrolle zu behalten.
    Sicherlich gibt es weniger aufwändige Ansätze.

    Deine Tabs haben Bezeichner oder besser noch sie sind Objekte. Diese beinhalten ein Filterobjekt sowie andere Parameter wie der Status einer Ansicht oder ob irgendeine Checkbox ausgewählt ist etc. pp. Diese Dinge hältst du in der HttpSession fest um Applikationsweit darauf zugreifen zu können... in etwa so:

    Es war einmal in einer weit, weit entfernten ManagedBean:
    Code (Java):

    HttpSession session = request.getSession(null); // null: keine Session anlegen falls keine existiert
    tab1.setFilter(filter1); // Tabinstanz1 hält Filterinstanz1
    tab2.setFilter(filter2); // Das gleiche für 2
    session.setAttribute("tab1", tab1);
    session.setAttribute("tab2", tab2);
     
    Natürlich muss du dir die Klassen erstellen und definieren. In deinen Faces hast du Zugriff auf die Session... glaube so

    Code (Text):

    #{session.getAttribute'tab1'}
     
    Keine Ahnung ob du die Klassen im Context registrieren musst um damit zu arbeiten? Das müsste man probieren.
    Jedenfalls kannst du dann super Dinge zwischenlagern, manipulieren, löschen etc. Dann kannst du deine html-Seiten noch dynamischer Aufbauen. Natürlich musst du beim initialen laden der Seiten dann auch dafür sorgen dass die entsprechenden Instanzen erzeugt und bereitgehalten werden.

    Wenn es eine einfachere Möglichkeit gibt, dann nutze lieber die ;)
     
  7. @stg
    Ich habe deinen Ansatz versucht und habe es serverseitig versucht. Leider ohne Erfolg der Filter bleibt weiterhin gesetzt :(
     
  8. Also ich habe gleiche view wie oben und habe meiner Tabelle eine id = testTable gegeben

    Dann habe ich es mit einem commandButton versucht der wie folgt aussieht
    HTML:

    <p:commandButton value="Ajax Submit" id="ajax" update=":#{p:component('testTable')}" actionListener="#{dtScrollView.buttonAction}" styleClass="ui-priority-primary" />
    Die dazugehörige ActionMethode sieht so aus

    Code (Java):

    public void buttonAction(ActionEvent actionEvent) {
            DataTable dataTable = (DataTable) FacesContext.getCurrentInstance()
            .getViewRoot().findComponent("testForm:tabView:testTable");
           
            if(dataTable!=null){
                System.out.println(dataTable.toString());
                System.out.println("RESET FILTER");
                dataTable.setFilteredValue(null);
                dataTable.setFilters(null);
               
            }
        }
     
    Was mir aufgefallen ist, das dataTable.toString immer eine andere ID ausgibt der Fett markierte Teil ist bei jedem Button klick ein anderer

    org.primefaces.component.datatable.DataTable@428d71a3

    Was mache ich falsch :(
     
    Zuletzt von einem Moderator bearbeitet: 5. Nov. 2014
  9. Ich glaube du musst deinem Objekt einen festen Namen geben damit diese uminöse Nummerierung verschwindet. Das gilt für jeden Wert den du übergibst.
     
  10. KOSTENLOSES Java-Grundlagen Training im Wert von 39 € Sichere dir hier den kostenlosen Zugriff auf umfangreiches Java-Know How und starte richtig durch!