The <o:borderLayoutPanel> tag can be used to add the BorderLayoutPanel component to a page. You can create a group of components aligned within a BorderLayoutPanel component using a SidePanel.
SidePanel is a container that can be placed inside of BorderLayoutPanel to layout one or more components near one of BorderLayoutPanel's edges. The user can change SidePanel's size by dragging its splitter if SidePanel is configured to be resizable (see the Resizing section below). A SidePanel is created by placing the <o:sidePanel> tag inside of the <o:borderLayoutPanel> tag and specifying its alignment attribute to specify the BorderLayoutPanel's edge where this panel should be placed. It is possible to place several ??SidePanel??s with the same alignment, which will result placing these components side by side in the specified alignment area (see SidePanel Placement Rules section below).
You can also add any content to the area in the center of BorderLayoutPanel that is not occupied by any ??SidePanel??s by adding child components right into the <o:borderLayputPanel> tag.
In the example below, the BorderLayoutPanel component is split into two parts by placing one SidePanel and specifying child components of BorderLayoutPanel component.
<o:borderLayoutPanel> <o:sidePanel alignment="left" size="50%"> <h:outputText value="Left side content area"/> </o:sidePanel> <h:outputText value="Right side content area"/> </o:borderLayoutPanel>
You can specify the caption of SidePanel component using by using the caption attribute for text caption or "caption" facet for more complex caption content.
<o:sidePanel caption="SidePanel caption"> <h:outputText value="SidePanel content"> </o:sidePanel>
The <o:sidePanel> tag has two special attributes: alignment and size.
Here's an example of using these attributes:
<o:borderLayoutPanel> <o:sidePanel alignment="top" size="150px" minSize="300px" maxSize="50%"> ... </o:sidePanel> </o:borderLayoutPanel>
Each SidePanel can optionally be configured to have resizing capability by dragging the panel's separator, and/or expanding/collapsing capability by clicking on the separator.
By default, resizing capability is turned on, so no additional actions are required if you intend to make a dynamic layout. Though if you're creating a static layout, you can disable the resizing capability by setting the SidePanel's resizable attribute to "false".
Here's an example of how to create "collapsible only" and "fixed size" ??SidePanel??s:
<o:borderLayoutPanel> <o:sidePanel resizable="false"> This is a collapsible, but non-resizable SidePanel </o:sidePanel> <o:sidePanel resizable="false" collapsible="false"> This is a fixed size SidePanel </o:sidePanel> </o:borderLayoutPanel>
The BorderLayoutPanel is a container for SidePanel components, and here are the SidePanel placement rules:
The BorderLayoutPanel component provides an ability to create quite common kind of layouts where components are aligned by container's edges, though in some cases this basic layout is not enough. An example is a typical layout of desktop mail reading applications, where a screen is separated onto three parts: the left area contains the list of mail folders, and the right area is vertically separated onto two areas, where the the top one lists e-mails in the current folder, and the bottom one displays the selected e-mail. These use cases can be addressed using the feature of nested BorderLayoutPanel components.
Here's an example demonstrating the E-mail reader layout described above:
<o:borderLayoutPanel> <o:sidePanel id="folderList" alignment="left" size="35%"> ... </o:sidePanel> <o:borderLayoutPanel> <o:sidePanel id="emilList" alignment="top"> ... </o:sidePanel> <f:panelGroup id="emailPreview"> ... </f:panelGroup> </o:borderLayoutPanel> </o:borderLayoutPanel>
This way you can place <o:borderLayoutPanel> tags inside of SidePanel??s to make an arbitrary hierarchy of ??BorderLayoutPanel components.
You can customize a style for any element of SidePanel or BorderLayoutPanel using the following attributes:
The both of SidePanel and BorderLayoutPanel components support the following standard client-side events: onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress. In additional it provides follow component-specific events:
|© 2010 TeamDev Ltd.|