JSF 2.0 Problem

Question

I am doing a project where I am using JSF 2.0 & Primefaces UI Components.

There is a tab view component with tabs, "Day","Week" & "Month". In all tab, I have to display Bar Charts in each. For the same, I am fetching three list using the following three method. In the following code, UpdateCountHelper is fetching the data from database. So, UpdateCountHelper is taking some time for fetching data.

This is code for fetching lists :

public List<UpdateCount> getDayUpdateCounts() {
        if (projectFlag == true) {
            if (displayFlag == 1) {
                dayUpdateCounts = UpdateCountHelper.getProjectUpdates(1);
            } else {
                dayUpdateCounts = UpdateCountHelper.getProjectUpdates(name, 1);
            }
        } else {
            dayUpdateCounts = UpdateCountHelper.getResourceUpdates(userName, 1);
        }

        return dayUpdateCounts;
    }

    public List<UpdateCount> getMonthUpdateCounts() {
        if (projectFlag == true) {
            if (displayFlag == 1) {
                monthUpdateCounts = UpdateCountHelper.getProjectUpdates(30);
            } else {
                monthUpdateCounts = UpdateCountHelper.getProjectUpdates(name, 30);
            }
        } else {
            monthUpdateCounts = UpdateCountHelper.getResourceUpdates(userName, 30);
        }

        return monthUpdateCounts;
    }

    public List<UpdateCount> getWeekUpdateCounts() {
        if (projectFlag == true) {

            if (displayFlag == 1) {
                weekUpdateCounts = UpdateCountHelper.getProjectUpdates(7);
            } else {
                weekUpdateCounts = UpdateCountHelper.getProjectUpdates(name, 7);
            }
        } else {
            weekUpdateCounts = UpdateCountHelper.getResourceUpdates(userName, 7);
        }

        return weekUpdateCounts;
    }

This is code for UI of Bar Chart :

<p:panel id="Chart">
                <p:tabView dynamic="false" cache="false">
                    <p:tab title="Day">
                        <p:panel id="chartDayPanel">
                            <center>
                                <h:outputText id="projectWiseDayText" rendered="#{systemUtilizationServiceBean.projectFlag}" value="Project Wise Day Update"/>
                                <p:columnChart id="projectWiseDayUpdateChart" rendered="#{systemUtilizationServiceBean.projectFlag}" value="#{systemUtilizationServiceBean.dayUpdateCounts}" var="dayWiseUpdate" xfield="#{dayWiseUpdate.name}" height="200px" width="640px">
                                    <p:chartSeries label="Project Wise Current Day Update" value="#{dayWiseUpdate.noUpdates}"/>
                                </p:columnChart>
                                <h:outputText id="resourceWiseDayText" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="Resource Wise Day Update"/>
                                <p:columnChart id="resourceWiseDayUpdateChart" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="#{systemUtilizationServiceBean.dayUpdateCounts}" var="dayWiseResourceUpdate" xfield="#{dayWiseResourceUpdate.name}" height="200px" width="640px">
                                    <p:chartSeries label="Resource Wise Current Day Update" value="#{dayWiseResourceUpdate.noUpdates}"/>
                                </p:columnChart>
                            </center>
</p:panel>
                    </p:tab>
                    <p:tab title="Week">
                        <p:panel id="chartWeekPanel">
                            <center>
                                <h:outputText id="projectWiseWeekText" rendered="#{systemUtilizationServiceBean.projectFlag}" value="Project Wise Week Update"/>
                                <p:columnChart id="projectWiseWeekUpdateChart" rendered="#{systemUtilizationServiceBean.projectFlag}" value="#{systemUtilizationServiceBean.weekUpdateCounts}" var="weekWiseUpdate" xfield="#{weekWiseUpdate.name}" height="200px" width="640px">
                                    <p:chartSeries label="Project Wise Current Week Update" value="#{weekWiseUpdate.noUpdates}"/>
                                </p:columnChart>
                                <h:outputText id="resourceWiseWeekText" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="Resource Wise Week Update"/>
                                <p:columnChart id="resourceWiseWeekUpdateChart" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="#{systemUtilizationServiceBean.weekUpdateCounts}" var="weekWiseResourceUpdate" xfield="#{weekWiseResourceUpdate.name}" height="200px" width="640px">
                                    <p:chartSeries label="Resource Wise Current Week Update" value="#{weekWiseResourceUpdate.noUpdates}"/>
                                </p:columnChart>
                            </center>
</p:panel>
                    </p:tab>
                    <p:tab title="Month">
                        <p:panel id="chartMonthPanel">
                            <center>
                                <h:outputText id="projectWiseMonthText" rendered="#{systemUtilizationServiceBean.projectFlag}" value="Project Wise Month Update"/>
                                <p:columnChart id="projectWiseMonthUpdateChart" rendered="#{systemUtilizationServiceBean.projectFlag}" value="#{systemUtilizationServiceBean.monthUpdateCounts}" var="monthWiseUpdate" xfield="#{monthWiseUpdate.name}" height="200px" width="640px">
                                    <p:chartSeries label="Project Wise Current Month Update" value="#{monthWiseUpdate.noUpdates}"/>
                                </p:columnChart>
                                <h:outputText id="resourceWiseMonthText" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="Resource Wise Month Update"/>
                                <p:columnChart id="resourceWiseMonthUpdateChart" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="#{systemUtilizationServiceBean.monthUpdateCounts}" var="monthWiseResourceUpdate" xfield="#{monthWiseResourceUpdate.name}" height="200px" width="640px">
                                    <p:chartSeries label="Resource Wise Current Month Update" value="#{monthWiseResourceUpdate.noUpdates}"/>
                                </p:columnChart>
                            </center>
</p:panel>
                    </p:tab>
                </p:tabView>
            </p:panel>

Now, I have to display same data in other tabview with same tabs as mentioned above & only thing is now I have to display in Pie Chart. Now in pie chart, I am using the same lists. So, it will again fetch the data from database & waste time. To solve that problem I have created other three lists & have given only reference of those previous lists. So, now no database fetching occur.

The Code for applying the reference is :

public List<UpdateCount> getPieDayUpdateCounts() {

        pieDayUpdateCounts = dayUpdateCounts;
        return pieDayUpdateCounts;
    }

    public List<UpdateCount> getPieMonthUpdateCounts() {
        pieMonthUpdateCounts = monthUpdateCounts;
        return pieMonthUpdateCounts;
    }

    public List<UpdateCount> getPieWeekUpdateCounts() {
        pieWeekUpdateCounts = weekUpdateCounts;
        return pieWeekUpdateCounts;
    } 

But, over here the problem occurring is that only chart of which the tab is enable is displayed but the other remaining 2 tabs are not showing any chart.

The code for UI is :

<p:tabView dynamic="false" cache="false">
                <p:tab title="Day">
                    <center>
                        <p:panel id="pieChartDayPanel">
                            <h:outputText id="projectWiseDayPieChartText" rendered="#{systemUtilizationServiceBean.projectFlag}" value="Project Wise Day Update"/>
                            <p:pieChart id="projectWiseDayUpdatePieChart" rendered="#{systemUtilizationServiceBean.projectFlag}" value="#{systemUtilizationServiceBean.dayUpdateCounts}" var="dayWisePieUpdate" categoryField="#{dayWisePieUpdate.name}" dataField="#{dayWisePieUpdate.noUpdates}" height="200" width="200"/>
                            <h:outputText id="resourceWiseDayPieChartText" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="Resource Wise Day Update"/>
                            <p:pieChart id="resourceWiseDayUpdatePieChart" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="#{systemUtilizationServiceBean.dayUpdateCounts}" var="dayWiseResourcePieUpdate" categoryField="#{dayWiseResourcePieUpdate.name}" dataField="#{dayWiseResourcePieUpdate.noUpdates}" height="200" width="200"/>
                        </p:panel>
                    </center>
                </p:tab>
                <p:tab title="Week">
                    <center>
                        <p:panel id="pieChartWeekPanel">
                            <h:outputText id="projectWiseWeekPieChartText" rendered="#{systemUtilizationServiceBean.projectFlag}" value="Project Wise Week Update"/>
                            <p:pieChart id="projectWiseWeekUpdatePieChart" rendered="#{systemUtilizationServiceBean.projectFlag}" value="#{systemUtilizationServiceBean.weekUpdateCounts}" var="weekWisePieUpdate" categoryField="#{weekWisePieUpdate.name}" dataField="#{weekWisePieUpdate.noUpdates}" height="200" width="200"/>
                            <h:outputText id="resourceWiseWeekPieChartText" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="Resource Wise Week Update"/>
                            <p:pieChart id="resourceWiseWeekUpdatePieChart" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="#{systemUtilizationServiceBean.weekUpdateCounts}" var="weekWiseResourcePieUpdate" categoryField="#{weekWiseResourcePieUpdate.name}" dataField="#{weekWiseResourcePieUpdate.noUpdates}" height="200" width="200"/>
                        </p:panel>
                    </center>
                </p:tab>
                <p:tab title="Month">
                    <center>
                        <p:panel id="pieChartMonthPanel">
                            <h:outputText id="projectWiseMonthPieChartText" rendered="#{systemUtilizationServiceBean.projectFlag}" value="Project Wise Month Update"/>
                            <p:pieChart id="projectWiseMonthUpdatePieChart" rendered="#{systemUtilizationServiceBean.projectFlag}" value="#{systemUtilizationServiceBean.monthUpdateCounts}" var="monthWisePieUpdate" categoryField="#{monthWisePieUpdate.name}" dataField="#{monthWisePieUpdate.noUpdates}" height="200" width="200"/>
                            <h:outputText id="resourceWiseMonthPieChartText" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="Resource Wise Month Update"/>
                            <p:pieChart id="resourceWiseMonthUpdatePieChart" rendered="#{systemUtilizationServiceBean.resourceFlag}" value="#{systemUtilizationServiceBean.monthUpdateCounts}" var="monthWiseResourcePieUpdate" categoryField="#{monthWiseResourcePieUpdate.name}" dataField="#{monthWiseResourcePieUpdate.noUpdates}" height="200" width="200"/>
                        </p:panel>
                    </center>
                </p:tab>
            </p:tabView>

What should be the reason behind this ?

Answer 1

Rather than trying to keep multiple copies of your list, use JSF Scopes to manage when/ how often they are fetched.

Scope your backing bean to RequestScoped or ViewScoped, create a method that fetches the lists from the database (if using CDI, then annotate a method @PostConstruct, otherwise invoke it with a PreRenderViewEvent or in the constructor itself). Now access your lists via simple getters.