Borderlayout"

From Documentation
Line 14: Line 14:
 
A borderlayout could be nested to another borderlayout (actually, almost all kinds of components) to form a complicated layout.
 
A borderlayout could be nested to another borderlayout (actually, almost all kinds of components) to form a complicated layout.
  
= Configure to Disable the Animation Effects as Default =
+
= Width and Height =
 
 
If you prefer to disable the animation effects as default, you could configure ZK by adding the following to <tt>/WEB-INF/zk.xml</tt>
 
 
 
<source lang="xml">
 
<library-property>
 
<name>org.zkoss.zul.borderlayout.animation.disabed</name>
 
<value>true</value>
 
</library-property>
 
</source>
 
 
 
  Since 5.0.8
 
 
 
== Width and Height ==
 
  
 
When using a borderlayout as a child of other component, you have to specify the width and height of its parent components. Otherwise, the browser usually assigns zero width and height to the borderlayout such that it won't be visible.
 
When using a borderlayout as a child of other component, you have to specify the width and height of its parent components. Otherwise, the browser usually assigns zero width and height to the borderlayout such that it won't be visible.
Line 92: Line 79:
 
You can specify this property to true to disable the animation effects of this component.
 
You can specify this property to true to disable the animation effects of this component.
 
  Since 5.0.8
 
  Since 5.0.8
 +
=== Configure to Disable the Animation Effects as Default ===
 +
 +
If you prefer to disable the animation effects as default, you could configure ZK by adding the following to <tt>/WEB-INF/zk.xml</tt>
  
 +
<source lang="xml">
 +
<library-property>
 +
<name>org.zkoss.zul.borderlayout.animation.disabed</name>
 +
<value>true</value>
 +
</library-property>
 +
</source>
 +
 +
  Since 5.0.8
 
=Supported Events=
 
=Supported Events=
  

Revision as of 10:14, 28 May 2012

Borderlayout

Employment/Purpose

The layout component is a nested component. The parent component is borderlayout, and its children components include north, south, center, west, and east. All extra space is placed in the center area. The combination of children components of borderlayout is free.

A borderlayout could be nested to another borderlayout (actually, almost all kinds of components) to form a complicated layout.

Width and Height

When using a borderlayout as a child of other component, you have to specify the width and height of its parent components. Otherwise, the browser usually assigns zero width and height to the borderlayout such that it won't be visible.

<window width="100%" height="100%">
  <borderlayout width="100%" height="100%">
...

Example

ZKCompRef Borderlayout.jpg

<borderlayout height="450px">
	<north title="North" maxsize="300" size="50%" splittable="true" collapsible="true">
		<borderlayout>
			<west title="West" size="25%" flex="true" maxsize="250" splittable="true" collapsible="true">
				<div style="background:#B8D335">
					<label value="25%"
						style="color:white;font-size:50px" />
				</div>
			</west>
			<center border="none" flex="true">
				<div style="background:#E6D92C">
					<label value="25%"
						style="color:white;font-size:50px" />
				</div>
			</center>
			<east size="50%" border="none" flex="true">
				<label value="Here is a non-border"
					style="color:gray;font-size:30px" />
			</east>
		</borderlayout>
	</north>
	<center border="0">
		<borderlayout>
			<west maxsize="600" size="30%" flex="true" border="0" splittable="true">
				<div style="background:#E6D92C">
					<label value="30%"
						style="color:white;font-size:50px" />
				</div>
			</west>
			<center>
				<label value="Here is a border"
					style="color:gray;font-size:30px" />
			</center>
			<east title="East" size="30%" flex="true" collapsible="true">
				<div style="background:#B8D335">
					<label value="30%"
						style="color:white;font-size:50px" />
				</div>
			</east>
		</borderlayout>
	</center>
</borderlayout>


Properties

AnimationDisabled

You can specify this property to true to disable the animation effects of this component.

Since 5.0.8

Configure to Disable the Animation Effects as Default

If you prefer to disable the animation effects as default, you could configure ZK by adding the following to /WEB-INF/zk.xml

<library-property>
	<name>org.zkoss.zul.borderlayout.animation.disabed</name>
	<value>true</value>
</library-property>
 Since 5.0.8

Supported Events

Name
Event Type
None None

Supported Children

* North,  South,  Center,  West,  East

Use Cases

Version Description Example Location
     

Version History

Last Update : 2012/05/28


Version Date Content
5.0.8 August 11, 2011 Added a way to disable the animation of borderlayout.


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.