Box"

From Documentation
Line 3: Line 3:
 
= Box =
 
= Box =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l12 boxes]
+
*Demonstration: [http://www.zkoss.org/zkdemo/layout/box Box]
 
*Java API: <javadoc>org.zkoss.zul.Box</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Box</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Box | Box]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 28: Line 29:
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 37: Line 38:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
=Supported molds=
+
=Supported Molds=
 
Available molds of a component are defined in lang.xml embedded in zul.jar.
 
Available molds of a component are defined in lang.xml embedded in zul.jar.
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 55: Line 57:
 
  *ALL
 
  *ALL
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"

Revision as of 08:56, 17 November 2010

Box

  • Demonstration: Box
  • Java API: Box
  • JavaScript API: Box
  • Style Guide: Box

Employment/Purpose

The box model of XUL is used to divide a portion of the display into a series of boxes. Components inside of a box will orient themselves horizontally or vertically. By combining a series of boxes and separators, you can control the layout of the visual presentation.

A box can lay out its children in one of two orientations, either horizontally or vertically. A horizontal box lines up its components horizontally and a vertical box orients its components vertically. You can think of a box as one row or one column from an HTML table.

Example

ZKComRef Box Example.png

 <zk>
     <box orient="vertical">
         <button label="Button 1"/>
         <button label="Button 2"/>
     </box>
     <box  orient="horizontal">
         <button label="Button 3"/>
         <button label="Button 4"/>
     </box>
 </zk>

Supported Events

Name
Event Type
None None

Supported Molds

Available molds of a component are defined in lang.xml embedded in zul.jar.

Name
Snapshot
horizontal
Box mold horizontal.png
vertical
Box mold vertical.png

Supported Children

*ALL

Use Cases

Version Description Example Location
 

Version History

Last Update : 2010/11/17


Version Date Content
5.0.4 August, 2010 Add a sizedByContent method for splitter to resize smoothly



Last Update : 2010/11/17

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