CODEWITHSUNDEEP
jsfjsf-2primefaces
Tot
Tot

Reputation: 207

Primefaces On-Demand Loading tabbed panel component does not work

I am trying to do a Primefaces On-Demand Loading tabbed panel component which has a inputTextArea component inside it. I follow this tutorial Primefaces Tutorial. My .xhtml form looks like this:

<h:form>
        <h:outputText
            value="Write a comment" />
        <p:tabView dynamic="true" cache="true">
            <p:tab title="Possitive">
                <h:panelGrid columns="2" cellpadding="10">
                    <p:inputTextarea rows="5" cols="130" />
                </h:panelGrid>
            </p:tab>
            <p:tab title="Negative">
                <h:panelGrid columns="2" cellpadding="10">
                    <p:inputTextarea rows="5" cols="130" />
                </h:panelGrid>
            </p:tab>
        </p:tabView>
        <p:commandButton value="Publish"></p:commandButton>
    </h:form>

But these inputTextBox are always loaded, nevertheless i did not click on them. Can they be loaded only on demand and how to do this?

Thanks in advance for the help!

Upvotes: 0

Views: 1386

Answers (1)

skybber
skybber

Reputation: 409

Primefaces builds JSF tree for all tabs. Both inputTextarea(s) are created on server side. It can be solved by ui:include. Put the content of p:tab into extra file and use ui:include to fetch the content:

<p:tabView>
    <p:tab title="Possitive">
        <ui:include src="#{tabViewBean.getTabSource('tabPositive')}"/>
    </p:tab>
    <p:tab title="Negative">
        <ui:include src="#{tabViewBean.getTabSource('tabNegative')}"/>
    </p:tab>
</p:tabView>

TabViewBean holds active tab name and is used for resolving tab sources as well. If a tab is NOT ACTIVE then the method tabViewBean.getTabSource() returns another file with EMPTY content:

public String getTabSource(String tabName)
{
    return tabName.equals(activeTabName) ? 
          getTabSourceForTabName(tabName) :  
          "EmptyTab.xhtml";
}

public String getTabSourceForTabName(String tabName)
{
   if ("tabPositive".equals(tabName)) return "TabPositive.xhtml";
   if ("tabNegative".equals(tabName)) return "TabNegative.xhtml";
}

You should have EmptyTab.xhtml somewhere. Set listener in p:tabView to listen the tab change event :

<p:tabView listener="#{tabViewBean.tabChangeListener}">

tabChange listener sets the name of active tab:

public void tabChangeListener(UIComponentBase tabView)
{
    activeTabName = getTabNameByIndex(tabView.getActiveIndex());
}

public String getTabNameByIndex(int index)
{
  if (i==0) return "tabPositive";
  if (i==1) return "tabNegative";
}

Upvotes: 1

Related Questions