PanelStack

compared with
Current by Judy Guglielmin
on Jun 17, 2015 12:26.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 11 changes. View first change.

 h2. Overview
 _Since 3.3.0P04 and 4.1_
  
 PanelStack is a controller container which contains children of markup {code}ace:stackPane{code}. 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 {code}c:forEach{code} or {code}ui:include{code} 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.
  
 {tip}See the ICEfaces Showcase [not in online demo yet|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=panelBean] of this component, complete with source code.{tip}
  
  
 h2. Getting Started
  
 {panel}
 {code:xml|borderStyle=dashed} <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>
 {code}
 {panel}
h2. Attributes
  
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).
  
  
 h2. Attributes for panelStack
  
 {tip:title=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|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/panel.html].{tip}
 {panel}
 *selectedId* specifies whether the panel has a button to hide the panel by using the jQuery fadeOut() function.
 {panel}
 
 h2. Attributes for stackPane
  
 {tip:title=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|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/panel.html].{tip}
 {panel}
*toggleable* specifies whether the panel has a button to collapse/expand the contents of the panel by using the jQuery slideToggle() function.
  *id* specifies the id of the stackPane and is *REQUIRED* for this component to work!
 {panel}
 {panel}
*collapsed* specifies whether the panel is collapsed.
  *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.
 {panel}
 {panel}
*footer* specifies the footer text of the panel.
  *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.
 {panel}
 {panel}
 *header* specifies the header text of the panel.
 {panel}
   
 h2. Event Listeners
  
 None.
  
 h2. Client Behavior Events
  
 None.
  
 h2. JavaScript API
  
 h4. ICEfaces 3.x
  
  
 h4. ICEfaces 4+
  
  
 h2. Keyboard and ARIA Support
  
  
 h2. CSS Classes
  
  
 h2. Known Issues
  
 None.
  
 h2. Additional Resources

© Copyright 2018 ICEsoft Technologies Canada Corp.