PanelStack

Table of Contents

Overview

Since 3.3.0P04 and 4.1

PanelStack is a controller container which contains children of markup

ace:stackPane
. A user would only see the single stackPane and its children of the stackPane that is the currently selectedId attribute for the panelStack component.
The stackPane manages its children by using a component tag handler which reads the attributes client and facelet and determines if the stackPane's children are added to the server-side component tree(SSCT). Rather than users having to use jstl tags like
c:forEach
or
ui:include
to try to reduce the size of the SSCT, this tag can be quite easily used and the stackPanes can be:-
1. client="true", meaning children of the stackPane are always in the SSCT and always rendered and good for static content. The DOMDIff algorithm will keep updates small since nothing changes anyways. Although the children of the stackPane are always rendered, they are only visible if the stackPane is the selectedId (otherwise, they are hidden). This might be of use if a control is modifying the stackPane and bandwidth is limited. The Domdiff will ensure the response size is small, and the selectedId of the panelStack can change rather quickly with little to no page update occupying bandwidth (for example mobile apps).
2. client="false", facelet="false". This is standard JSF behavior. All children of this stackPane are in the server-side component tree but only the children of the selected stackPane are rendered.
3. client="false", facelet="true". A pruned component tree will result in this case. The stackPane that has this combination will only include its children in the SSCT if it has the id which matches the panelStacks selectedId attribute. Note that the client attribute defaults to false.

See the ICEfaces Showcase not in online demo yet of this component, complete with source code.

Getting Started

            <ace:panelStack id="stack1" selectedId="#{panelStackBean.selectedId}">
                <ace:stackPane id="pane1" client="true">
                        ......//some number of children that are static content and always available to be visible quickly.
                </ace:stackPane>
                <ace:stackPane id="pane2">
                   <h:form>
                      ......//the children of pane2 will always be in the SSCT but only rendered when
                            // #{panelStackBean.selectedId}=pane2
                   </h:form>
                </ace:stackPane>
                <ace:stackPane id="pane3" facelet="true">
                   <h:form>
                      .....//the children of pane three will only be included in the SSCT 
                           //and rendered when #{panelStackBean.selectedId}=pane3
                   </h:form>
                   <h:form>
                       ......// and more children! not always part of the use-case for this customer either..
                   </h:form>
                </ace:stackpane>
            </ace:panelStack>

To understand this feature, in the above example, pane1 could have 1 child (just some text), pane2 could have 5 children and pane3 could have 30 children (perhaps a dataTable and the number of components that are state saved with it which could be quite a bit larger than 30!). Anyways, with this example, you reduce the size of the SSCT for each user/session by the amount of children placed in a facelet="true" situation like pane3 quite simply. The stackPane itself will always be part of the component tree, it is just the children that are either added or not, depending on the facelet attribute (as long as client is not true).

Attributes for panelStack

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

selectedId specifies whether the panel has a button to hide the panel by using the jQuery fadeOut() function.

Attributes for stackPane

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

id specifies the id of the stackPane and is REQUIRED for this component to work!

client specifies whether the children of the stackPane will be always rendered and not visible on the client side. Always included on server side as well.

facelet if client evaluates to false (default) and facelet is true, the children of the stackPane will NOT be included in the SSCT, reducing the size/memory usage on the server. Similar to using ui:include or c:forEach without the hastle of worrying about nesting these controls inside other facelet controls/taghandlers.

Event Listeners

None.

Client Behavior Events

None.

JavaScript API

ICEfaces 3.x

ICEfaces 4+

Keyboard and ARIA Support

CSS Classes

Known Issues

None.

Additional Resources

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2018 ICEsoft Technologies Canada Corp.