5 Replies Latest reply on Mar 8, 2009 12:47 AM by zjda

    Data cache for dynamic tab


      Hi, When I double-click a tree node, I want to add a tab to a rich:tabPanel which has a rich:editor to open th tree node content.

      <a4j:support event="ondblclick" action="#{navTree.openObjectAction}"

      The action method is to add the node to the openedNodes list, and the "mainFrame" has tabPanel and c:forEach to create the dynamic tab:

      <rich:tabPanel switchType="client" binding="#{navTree.tabPanel}">
       <c:forEach items="${navTree.openedNodes}" var="node">
       <rich:tab name="#{node.objectID}" label="#{node.name}>

      I set the switchType to "client" because I want the client to hold all modified contents until I click the save button to upload them to the server.

      Everything works well. However, when I double-click another tree node, it goes back to the server to repopulate all tabs and all modified data on the client are lost.

      Is it possible to add a new tab on client and use a4j:jsFunction to get data from the server to populate the new tab without touching the existing tabs?

      I saw that there is a suggestion to use ajax mode and ontableave="saveData()" to save the tab data on server. It is not best solution for my case since there is a lot of data going back and forward and it consumes the server memory. And I don't know how to trigger saveData() from double-click event on the tree node.

      Any suggestion will be appreciated.


        • 1. Re: Data cache for dynamic tab

          Looks like that I cannot cache the modified data on the client and I have to send them to the server. Therefore, I added a4f:jsFunction to each tab:

          <rich:tab name="#{node.objectID}" label="#{node.name}" ontableave="saveData();">
           <a4j:jsFunction name="saveData" eventsQueue="queue" />

          The data is sent to the server when switching active tab. However, I don't know how to call the saveData() function from the a4j:support which is used to handle double-click event for treenode:

          <a4j:support event="ondblclick" action="#{navTree.openObjectAction}"
           reRender="mainFrame" endered="#{navTree.selectedNode.contentable}" immediate="true">
           <a4j:actionparam name="view" value="shared/contentTabView.xhtml" assignTo="#{navTree.view}" />

          Please help. Thanks,

          • 2. Re: Data cache for dynamic tab

            Hello ZJ,

            You can do the following:

            <a4j:support onsubmit="saveData()" ... />

            • 3. Re: Data cache for dynamic tab

              Note, you should add eventsQueue="queue" to a4j:support in order to prevent concurrent requests.

              • 4. Re: Data cache for dynamic tab

                Hi Nick,

                Thank you for you answers. However, it does not work well. The problem is that the tabPanel parent form is not always submitted. First time when I double-click a tree node, it adds a tab. I type a string in the text field, then double-click another node. the text field is uploaded to server. However, when I do same thing again, the text field is not uploaded to the server anymore. Switching active tab always submits the form. Also, if I double-click same node twice, the second time the form is submitted. Do I miss something? Does the nodeSelectListener cause any problem?

                Here is my code:

                <rich:treeNode type="#{item.typeName}" acceptedTypes="#{item.allowedChildTypeString}" dropValue="#{treeNode}" dragIndicator=":treeindicator"
                dragType="#{item.typeName}" nodeSelectListener="#{navTree.nodeSelectListener}" data="#{treeNode}" >
                 <rich:dndParam name="label" type="drag">#{item} </rich:dndParam>
                 <h:outputText value="#{item.name}" />
                <a4j:support event="ondblclick" action="#{navTree.openObjectAction}" onsubmit="saveData();" reRender="mainFrame" rendered="#{item.contentable}" immediate="true" eventsQueue="contentQueue">

                <a4j:form ajaxSubmit="true">
                 <a4j:jsFunction name="saveData" eventsQueue="contentQueue" />
                 <h:outputText value="No object opened." rendered="#{empty navTree.openedNodes}" />
                 <rich:tabPanel id="contentTab" switchType="ajax" binding="#{navTree.tabPanel}" rendered="#{not empty navTree.openedNodes}">
                 <c:forEach items="${navTree.openedNodes}" var="node">
                 <rich:tab name="#{node.bjectID}" abel="#{node.name}">
                 <h:inputText value="#{node.test}" />


                • 5. Re: Data cache for dynamic tab

                  I figured it out ...

                  I set the active tab in the nodeSelectListener


                  After I removed the line of code, saveData is called and the tab data is uploaded to the server when double-click a tree node.

                  Thanks for help.