OverviewSince 3.3.0P04 and 4.1 PanelStack is a controller container which contains children of markup ace:stackPane 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 ui:include 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.
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
selectedId specifies whether the panel has a button to hide the panel by using the jQuery fadeOut() function. Attributes for stackPane
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 ListenersNone. Client Behavior EventsNone. JavaScript APIICEfaces 3.xICEfaces 4+Keyboard and ARIA SupportCSS ClassesKnown IssuesNone. Additional Resources |
PanelStack
© Copyright 2021 ICEsoft Technologies Canada Corp.