ICEfaces
  1. ICEfaces
  2. ICE-6527

Dynamically adding/removing ace:tabPane Results in ace:tabset Retrieving Entire Tabset Content

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.0.0
    • Fix Version/s: 2.1-Beta, 3.0, EE-2.0.0.GA_P01
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      JSF 2.0.3 ICEfaces 2
    • Assignee Priority:
      P1

      Description

      We have a client requirement that an iframe tab in a tabset not be reloaded as the user interacts with the component. The following clientSide="true" configuration is working fine until a new ace:tabPane is dynamically added, at that point the DOM update is returning ALL the existing tabSet content, when ideally it should just be returning the new tab.

      I think this is undesirable under normal circumstances as a situation where the user has many tabs with say ice:dataTables holding many items could result in very sluggish performance when adding a new tab.

          <ace:tabSet id="tabSet"
                      clientSide="true"
                      orientation="bottom"
                      selectedIndex="#{tabset.visibleTab}"
                      rendered="#{not empty tabset.tabs}" >

          <c:forEach items="#{tabset.tabs}" var="tab">
              <ace:tabPane label="#{tab.label}" >
                  <ui:include src="#{tab.include}" />
              </ace:tabPane>
          </c:forEach>

          </ace:tabSet>

        Issue Links

          Activity

          Brad Kroeger created issue -
          Brad Kroeger made changes -
          Field Original Value New Value
          Assignee Ken Fyten [ ken.fyten ]
          Ken Fyten made changes -
          Salesforce Case []
          Fix Version/s 2.0.1 [ 10255 ]
          Assignee Priority P1
          Assignee Ken Fyten [ ken.fyten ] Mark Collette [ mark.collette ]
          Hide
          Mark Collette added a comment -

          Since we don't currently have dom insert capabilty, but rather dom replace, the trick is to already have rendered a place-holder for future content. For ace:tabSet, we could render some tuned number of future place-holder tabPane root divs, each styled to be hidden. Then, when a tab is added, the first place-holder will be swapped out for an actual tabPane, styled to no longer be hidden. The key is that as tabs are added and removed, they are taken from and returned to the pool of place-holders, so that the dom element child count does not vary, which would cause then all to be dom updated.

          Show
          Mark Collette added a comment - Since we don't currently have dom insert capabilty, but rather dom replace, the trick is to already have rendered a place-holder for future content. For ace:tabSet, we could render some tuned number of future place-holder tabPane root divs, each styled to be hidden. Then, when a tab is added, the first place-holder will be swapped out for an actual tabPane, styled to no longer be hidden. The key is that as tabs are added and removed, they are taken from and returned to the pool of place-holders, so that the dom element child count does not vary, which would cause then all to be dom updated.
          Ken Fyten made changes -
          Salesforce Case []
          Assignee Mark Collette [ mark.collette ] Judy Guglielmin [ judy.guglielmin ]
          Hide
          Brad Kroeger added a comment -

          This also applies to removing an ace:tabPane

          Show
          Brad Kroeger added a comment - This also applies to removing an ace:tabPane
          Brad Kroeger made changes -
          Summary Dynamically adding ace:tabPane Results in ace:tabset Retrieving Entire Tabset Content Dynamically adding/removing ace:tabPane Results in ace:tabset Retrieving Entire Tabset Content
          Salesforce Case []
          Ken Fyten made changes -
          Assignee Judy Guglielmin [ judy.guglielmin ] Ken Fyten [ ken.fyten ]
          Ken Fyten made changes -
          Issue Type Bug [ 1 ] Improvement [ 4 ]
          Salesforce Case []
          Fix Version/s 2.1 [ 10241 ]
          Fix Version/s 2.0.1 [ 10255 ]
          Hide
          Mark Collette added a comment - - edited

          This could be addressed by ICE-6560.

          Show
          Mark Collette added a comment - - edited This could be addressed by ICE-6560 .
          Mark Collette made changes -
          Link This issue depends on ICE-6560 [ ICE-6560 ]
          Hide
          Mark Collette added a comment -

          This was solved by ICE-6728.

          Show
          Mark Collette added a comment - This was solved by ICE-6728 .
          Mark Collette made changes -
          Link This issue depends on ICE-6728 [ ICE-6728 ]
          Hide
          Mark Collette added a comment -

          Care has to be taken to limit dom changes, so we don't want generated ids that can shift when tabs are added and removed.

          <ice:tabSet id="tbset">
          <c:forEach id="cForEachId" items="#

          {dynamic.movies}

          " var="tab">
          <ice:tabPane label="#

          {tab.title}

          " id="tab_#

          {tab.id}">
          <f:subview id="sub_#{tab.id}

          ">
          <h:panelGroup id="pnlGrp">
          <h3>something on the pane</h3>
          <h:outputText id="spn" value="#

          {tab.plot}

          "/>
          </h:panelGroup>
          <iframe src="http://www.intel.com/"/>
          </f:subview>
          </ice:tabPane>
          </c:forEach>
          </ice:tabSet>

          Show
          Mark Collette added a comment - Care has to be taken to limit dom changes, so we don't want generated ids that can shift when tabs are added and removed. <ice:tabSet id="tbset"> <c:forEach id="cForEachId" items="# {dynamic.movies} " var="tab"> <ice:tabPane label="# {tab.title} " id="tab_# {tab.id}"> <f:subview id="sub_#{tab.id} "> <h:panelGroup id="pnlGrp"> <h3>something on the pane</h3> <h:outputText id="spn" value="# {tab.plot} "/> </h:panelGroup> <iframe src="http://www.intel.com/"/> </f:subview> </ice:tabPane> </c:forEach> </ice:tabSet>
          Mark Collette made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          Fix Version/s EE-2.0.0.GA_P01 [ 10271 ]
          Resolution Fixed [ 1 ]
          Mark Collette made changes -
          Link This issue depends on ICE-6560 [ ICE-6560 ]
          Ken Fyten made changes -
          Fix Version/s 2.1-Beta [ 10291 ]
          Fix Version/s 2.1 [ 10241 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #26469 Fri Nov 18 13:24:15 MST 2011 ken.fyten ICE-7138 ace:tabSet additional cacheStatically policies
          ICE-7044 ace:tabSet use DOM difference don't compare don't update element sub-tree (new cache attribute)
          ICE-6527 Dynamically adding/removing ace:tabPane Results in ace:tabset Retrieving Entire Tabset Content
          ICE-6738 Add client-side cache support for ace:tabPane within a 'clientSide=false'
          ICE-7057 Implement Themeroller support for ace:tabSet
          ICE-7176 ace:tabSet now does not depend on yui3 or 2in3, but instead YUI 2.8.
          ICE-6970 Adopted Apache 2.0 license source-code headers for ACE source-code.
          Files Changed
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneMeta.java
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetProxyMeta.java
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPane.java
          Commit graph DEL /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tab
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.css
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
          Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneCache.java
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetMeta.java
          Commit graph DEL /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/skins
          Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset
          Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/Tabs.java
          Commit graph DEL /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tab
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetProxy.java
          Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneUtil.java
          Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSet.java
          Ken Fyten made changes -
          Fix Version/s 3.0 [ 10241 ]
          Ken Fyten made changes -
          Status Resolved [ 5 ] Closed [ 6 ]

            People

            • Assignee:
              Ken Fyten
              Reporter:
              Brad Kroeger
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: