Tablelayout"

From Documentation
 
(19 intermediate revisions by 8 users not shown)
Line 2: Line 2:
  
 
= Tablelayout =
 
= Tablelayout =
 +
{{ZK EE}}
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l5 Tablelayout]
+
*Demonstration: [http://www.zkoss.org/zkdemo/layout/table_layout Tablelayout]
*Java API: <javadoc>org.zkoss.zkex.zul.Tablelayout</javadoc>
+
*Java API: <javadoc>org.zkoss.zkmax.zul.Tablelayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Tablelayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Tablelayout</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Tablelayout | TableLayout]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Tablelayout lay outs a container as an HTML table whose columns can be specified, and rowspan and colspan of its child can also be specified to create complex layouts within the table.
+
Tablelayout lays out a container as an HTML table in which the columns can be specified, and rowspan and colspan of its child can also be specified to create complex layouts within the table.
  
 
= Example =
 
= Example =
 
[[Image:ZKComRef_Tablelayout_Example.PNG]]
 
[[Image:ZKComRef_Tablelayout_Example.PNG]]
  
 +
<source lang="xml" >
 +
<tablelayout columns="2">
 +
<tablechildren>
 +
<panel title="Table 1" border="normal" maximizable="true"
 +
collapsible="true" width="200px" height="200px">
 +
<panelchildren>Panel Content</panelchildren>
 +
</panel>
 +
</tablechildren>
 +
<tablechildren>
 +
<panel title="Table 2" border="normal" maximizable="true"
 +
collapsible="true" width="200px" height="200px">
 +
<panelchildren>Panel Content</panelchildren>
 +
</panel>
 +
</tablechildren>
 +
<tablechildren>
 +
<panel title="Table 3" border="normal" maximizable="true"
 +
collapsible="true" width="200px" height="200px">
 +
<panelchildren>Panel Content</panelchildren>
 +
</panel>
 +
</tablechildren>
 +
<tablechildren>
 +
<panel title="Table 4" border="normal" maximizable="true"
 +
collapsible="true" width="200px" height="200px">
 +
<panelchildren>Panel Content</panelchildren>
 +
</panel>
 +
</tablechildren>
 +
</tablelayout>
 +
</source>
  
<source lang="xml" >
+
{{versionSince| 6.0.0}}
<?xml version="1.0" encoding="UTF-8"?>
+
 
 +
The child of tablechildren can be any component:
  
<?component name="panel" extends="panel" width="200px" height="200px" ?>
+
[[Image:ZKComRef_Tablelayout_Example_ZK6.PNG‎]]
  
<zk>
+
<source lang="xml" >
<label value="3 columns, 1 colspan, 1 rowspan" />
+
<tablelayout columns="2">
<tablelayout id="tbl" columns="3">
+
    <tablechildren>
<tablechildren id="tc1" colspan="2">
+
        <label value="Table 1" />
<panel title="table1" border="normal" maximizable="true"
+
    </tablechildren>
collapsible="true">
+
    <tablechildren>
<panelchildren>Panel</panelchildren>
+
        <button label="Table 2" />
</panel>
+
    </tablechildren>
</tablechildren>
+
    <tablechildren>
<tablechildren>
+
        <textbox value="Table 3" />
<panel title="table2" border="normal" maximizable="true"
+
    </tablechildren>
collapsible="true">
+
    <tablechildren>
<panelchildren>Panel</panelchildren>
+
        <window border="normal">
</panel>
+
        Table 4
</tablechildren>
+
        </window>
 +
    </tablechildren>
 
</tablelayout>
 
</tablelayout>
</zk>
 
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 47: Line 78:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
  
<javadoc>org.zkoss.zkmax.zul.Tablechildren</javadoc>
+
*[[ZK_Component_Reference/Layouts/Tablelayout/TableChildren | Tablechildren]]
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
Line 63: Line 95:
  
 
=Version History=
 
=Version History=
 +
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.x.x
+
| &nbsp;
| x/x/20xx
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 06:03, 22 December 2023

Tablelayout

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Employment/Purpose

Tablelayout lays out a container as an HTML table in which the columns can be specified, and rowspan and colspan of its child can also be specified to create complex layouts within the table.

Example

ZKComRef Tablelayout Example.PNG

<tablelayout columns="2">
	<tablechildren>
		<panel title="Table 1" border="normal" maximizable="true"
			collapsible="true" width="200px" height="200px">
			<panelchildren>Panel Content</panelchildren>
		</panel>
	</tablechildren>
	<tablechildren>
		<panel title="Table 2" border="normal" maximizable="true"
			collapsible="true" width="200px" height="200px">
			<panelchildren>Panel Content</panelchildren>
		</panel>
	</tablechildren>
	<tablechildren>
		<panel title="Table 3" border="normal" maximizable="true"
			collapsible="true" width="200px" height="200px">
			<panelchildren>Panel Content</panelchildren>
		</panel>
	</tablechildren>
	<tablechildren>
		<panel title="Table 4" border="normal" maximizable="true"
			collapsible="true" width="200px" height="200px">
			<panelchildren>Panel Content</panelchildren>
		</panel>
	</tablechildren>
</tablelayout>

Since 6.0.0

The child of tablechildren can be any component:

ZKComRef Tablelayout Example ZK6.PNG

	<tablelayout columns="2">
	    <tablechildren>
	        <label value="Table 1" />
	    </tablechildren>
	    <tablechildren>
	        <button label="Table 2" />
	    </tablechildren>
	    <tablechildren>
	        <textbox value="Table 3" />
	    </tablechildren>
	    <tablechildren>
	        <window border="normal">
	        	Table 4
	        </window>
	    </tablechildren>
	</tablelayout>

Supported Events

Name
Event Type
None None

Supported Children

* Tablechildren

Use Cases

Version Description Example Location
     

Version History

Last Update : 2023/12/22


Version Date Content
     



Last Update : 2023/12/22

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