SplitPane

Added by Arturo Zambrano, last edited by Arturo Zambrano on Dec 11, 2014  (view change)
Table of Contents

Overview

Since 4.0

The ace:splitPane component is a container that renders a <div> element divided into a left and a right pane, which in turn can include any arbitrary content.

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

Getting Started

To use the SplitPane component nest two facets inside the ace:splitPane tag, one named 'left' and another named 'right'. These facets can include any arbitrary content and components.

<ace:splitPane id="splitPane" scrollable="true" columnDivider="50">

	<f:facet name="left" id="leftFacet">
		<h:outputText value="Left pane content" />
	</f:facet>

	<f:facet name="right" id="rightFacet">
		<h:outputText value="Right pane content" />
	</f:facet>

</ace:splitPane>

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.

The scrollable flag determines if both panes are scrollable.

The columnDivider attribute is used to specify the percentage of the total width of the component that will be given to the left pane.

Event Listeners

None.

Client Behavior Events

None.

JavaScript API

ICEfaces 3.x

The client side component object is exposed through the global variable name specified in the widgetVar attribute.

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">).
This component doesn't have a client-side API made specifically to be used by application developers. However, the component's internal methods and variables can be accessed in this way, including the underlying jQuery object and objects from underlying Javascript libraries (if applicable), and can be used for whatever purpose a developer might have in mind.

Keyboard Support

None.

Known Issues

None.

CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

<!-- Root container -->
<div class="ui-widget ace-splitpane [user defined classes]" style="[user defined styles]">
	<!-- Left pane -->
	<div class="ui-widget-content ace-splitpane-scrollable [user defined classes]">
		<!-- Left pane content -->
	</div>
	<!-- Right pane -->
	<div class="ui-widget-content ace-splitpane-scrollable [user defined classes]">
		<!-- Right pane content -->
	</div>
</div>

Additional Resources

Tutorials

This component appears in the following ICEfaces tutorials:

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

© Copyright 2021 ICEsoft Technologies Canada Corp.