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

              depends on

              Improvement - An improvement or enhancement to an existing feature or task. ICE-6728 Add client-side cache support for ace:tabPane within a 'clientSide=false'

              • Major - Major loss of function.
              • Closed

                Activity

                Descending order - Click to sort in ascending order
                Hide
                Permalink
                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>
                Hide
                Permalink
                Mark Collette added a comment -

                This was solved by ICE-6728.

                Show
                Mark Collette added a comment - This was solved by ICE-6728 .
                Hide
                Permalink
                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 .
                Hide
                Permalink
                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
                Hide
                Permalink
                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.

                  People

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

                    Dates

                    • Created:
                      Updated:
                      Resolved: