DrawerPanel

compared with
Current by Arturo Zambrano
on Jul 10, 2017 17:22.


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

View page history


There are 1 changes. View first change.

 h2. Overview
 _Since 4.2 EE_
  
 The _ace:drawerPanel_ component is a container component that can overlay other elements on the page, appearing from an edge of the page. The DrawerPanel has several customization options such as modal, width, position.
  
 {tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:drawerPanel] of this component, complete with source code.{tip}
  
  
 h2. Getting Started
  
 In most cases, it's enough to add the tag on the page without any configuration.
  
 {panel}
 {code:xml|borderStyle=dashed}<html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
 <h:body>
  <h:form>
  <ace:drawerPanel id="drawer">
  <!-- Content goes here -->
  </ace:drawerPanel>
  </h:form>
 </h:body>
 </html>
 {code}
 {panel}
  
 h2. Attributes
  
 {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://res.icesoft.org/docs/v4_latest/ace/tld/ace/drawerPanel.html].{tip}
 {panel}
 *container:* Specify the container whose edges the drawer will appear from. The default mode is the entire window, but it's possible to specify a client id of an element on the page to have the drawer.
 {panel}
 {panel}
 *position:* Specifies the side on which the drawer should be displayed. Possible values are 'left', 'right', 'top', and 'bottom'.
 {panel}
 {panel}
 *header:* Text that will appear in the header of the drawer.
 {panel}
 {panel}
 *showHandleOpen:* Boolean value that specifies whether to display a three-horizontal-bars icon to open the drawer. This handle will appear at the upper left corner of the viewport if the 'position' is 'left' or 'top', at the uper right corner of the viewport if the 'position' is 'right', and at the lower left corner of the viewport if the 'position' is 'bottom'. This handle will only be displayed if the 'container' is set to 'window'. If a handle is desired when applying the drawer to a specific container, it has to be done manually; please consult the wiki page for this component for guidelines and sample markup.
 {panel}
 {panel}
 *showHandleClose:* Boolean value that specifies whether to display a three-horizontal-bars icon inside the drawer to close it. This handle will appear at the upper left corner of the drawer, inside the drawer's header.
 {panel}
 {panel}
 *effect:* Effect to use when opening and closing the drawer. Possible values are 'drop', 'fade', and 'slide'. The default effect is 'slide'.
 {panel}
 {panel}
 *modal:* Boolean value that specifies whether the document should be shielded with a partially transparent mask to require the user to close the panel before being able to activate any elements in the document.
 {panel}
  
 h2. Client Behavior Events
  
 | open | Fired when the drawer panel is opened (default event). |
 | close | Fired when the drawer panel is closed. |
  
 h2. Javascript API
  
 h4. ICEfaces 4+
  
 The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use.
  
 {code}var widget = ice.ace.instance('frm:componentId);{code}
  
 {tip}The _ice.ace.instance_ function requires the _full_ client id of the component to be specified, such as "j_idt77:componentId" instead of just "componentId". To reduce the complexity of working with complete IDs with this function it may be preferable in some cases to use {{prependId="false"}} in the enclosing form (e.g. _<h:form prependId="false">_).{tip}
  
  {info}Once the drawer panel object is retrieved in the client via ice.ace.instance(). The *open()* and *close()* methods are available to programatically open and close the drawer panel, respectively.
 {info}
  Once the drawer panel object is retrieved in the client via ice.ace.instance(). The *open()* and *close()* methods are available to programatically open and close the drawer panel, respectively.
  
 h2. Keyboard and ARIA Support
  
 Not supported at the moment.
  
 h2. Known Issues
  
 None at the moment.

© Copyright 2018 ICEsoft Technologies Canada Corp.