DrawerPanel

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.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

In most cases, it's enough to add the tag on the page without any configuration.

<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>

Attributes

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.

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.

position: Specifies the side on which the drawer should be displayed. Possible values are 'left', 'right', 'top', and 'bottom'.

header: Text that will appear in the header of the drawer.

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.

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.

effect: Effect to use when opening and closing the drawer. Possible values are 'drop', 'fade', and 'slide'. The default effect is 'slide'.

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.

Client Behavior Events

open	Fired when the drawer panel is opened (default event).
close	Fired when the drawer panel is closed.

Javascript API

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.

var widget = ice.ace.instance('frm:componentId);

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">).

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.

Keyboard and ARIA Support

Not supported at the moment.

Known Issues

None at the moment.