Borderlayout"

From Documentation
Line 9: Line 9:
 
= Employment/Purpose =
 
= Employment/Purpose =
  
The layout component is a nested component. The parent component is <tt>borderlayout</tt>, and its children components include <tt>north</tt>, <tt>south</tt>, <tt>center</tt>, <tt>west</tt>, and <tt>east</tt>. The combination of children components of <tt>borderlayout </tt>is free.
+
The layout component is a nested component. The parent component is <tt>borderlayout</tt>, and its children components include <tt>north</tt>, <tt>south</tt>, <tt>center</tt>, <tt>west</tt>, and <tt>east</tt>. The combination of children components of <tt>borderlayout</tt> is free.
  
 +
== 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.
 +
 +
<source lang="xml">
 +
<window width="100%" height="100%">
 +
  <borderlayout width="100%" height="100%">
 +
...
 +
</source>
  
 
= Example =
 
= Example =

Revision as of 00:53, 5 July 2010

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. The combination of children components of borderlayout is free.

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>


Supported events

Name
Event Type
None None

Supported Children

*ALL

Use cases

Version Description Example Location
     

Version History

Version Date Content
     



Last Update : 2010/07/05

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