Borderlayout"

From Documentation
m
m
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
  
= (Your Component Name) =
+
= Borderlayout =
  
 
*Demonstration:  
 
*Demonstration:  
*Java API: <javadoc>org.zkoss.zul.XXX</javadoc>
+
*Java API: <javadoc>org.zkoss.zkex.zul.Borderlayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.YYY.XXX</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.YYY.XXX</javadoc>
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
Space is a Separator with the orient default to "horizontal".
+
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.
 
 
In other words, <space> is equivalent to <separator orient="horizontal">
 
 
 
  
  
 
= Example =
 
= Example =
  
 +
[[Image:layout.jpg]]
  
 +
<source lang="xml" >
 +
<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>
 +
</source>
  
  
Line 50: Line 92:
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.x.x
+
| 5.0.1
| x/x/20xx
+
| 05/11/2010
 
| Initialization
 
| Initialization
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 07:20, 11 May 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.


Example

File:Layout.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
5.0+    

Version History

Version Date Content
5.0.1 05/11/2010 Initialization


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