Columnlayout"

From Documentation
m ((via JWB))
 
(18 intermediate revisions by 6 users not shown)
Line 2: Line 2:
  
 
= Columnlayout =
 
= Columnlayout =
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l3 Columnlayout]  
+
*Demonstration: [http://www.zkoss.org/zkdemo/layout/column_layout Columnlayout]  
 
*Java API: <javadoc>org.zkoss.zkex.zul.Columnlayout</javadoc>
 
*Java API: <javadoc>org.zkoss.zkex.zul.Columnlayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnlayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnlayout</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Columnlayout|Columnlayout]]
 +
*{{ZK PE and EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
A columnlayout lays out a container which can have multiple columns, and each column may contain one or more panel.Use Columnlayout need assign width (either percent or pixel) on every Columnchildren, or we cannot make sure about layout look.  
+
A columnlayout is a layout which can have multiple columns while each column may have any number of panels placed vertically with different heights. When using Columnlayout, you have to assign width (either percent or pixel) on every [[ZK Component Reference/Layouts/Columnlayout/Columnchildren|Columnchildren]], otherwise the result may depend on the browser and may not be as expected.
 +
 
 +
{{versionSince|6.0.0}}
 +
 
 +
Each column may have any number of any type of components.
 +
 
 
= Example =
 
= Example =
  
 
[[Image:ZKComRef_Columnlayout_Example.png]]  
 
[[Image:ZKComRef_Columnlayout_Example.png]]  
 +
 +
<source lang="xml" >
 +
    <columnlayout>
 +
        <columnchildren width="33%" style="padding: 5px">
 +
            <panel height="100px" title="column1-1" closable="true" collapsible="true"
 +
                  border="normal" maximizable="true" style="margin-bottom:10px">
 +
                <panelchildren>Panel</panelchildren>
 +
            </panel>
 +
            <panel height="100px" framable="true" title="column1-2"
 +
                  border="normal" maximizable="true" style="margin-bottom:10px">
 +
                <panelchildren>Panel</panelchildren>
 +
            </panel>
 +
            <panel height="100px" title="column1-3" border="normal"
 +
                  closable="true">
 +
                <panelchildren>Panel</panelchildren>
 +
            </panel>
 +
        </columnchildren>
 +
        <columnchildren width="33%" style="padding: 5px">
 +
            <panel height="100px" title="column2-1" closable="true" collapsible="true"
 +
                  border="normal" maximizable="true" style="margin-bottom:10px">
 +
                <panelchildren>Panel</panelchildren>
 +
            </panel>
 +
        </columnchildren>
 +
        <columnchildren width="33%" style="padding: 5px">
 +
            <panel height="100px" title="column3-1" closable="true" collapsible="true"
 +
                  border="normal" maximizable="true" style="margin-bottom:10px">
 +
                <panelchildren>Panel</panelchildren>
 +
            </panel>
 +
        </columnchildren>
 +
    </columnlayout>
 +
</source>
 +
 +
{{versionSince|6.0.0}}
 +
 +
Each column may have any number of any type of components.
 +
 +
[[Image:ZKComRef_Columnlayout_Example_ZK6.png]]
  
 
<source lang="xml" >
 
<source lang="xml" >
 
<columnlayout>
 
<columnlayout>
 
<columnchildren width="30%" style="padding: 5px">
 
<columnchildren width="30%" style="padding: 5px">
<panel height="100px" style="margin-bottom:10p title=" column1-1 "
+
<window height="100px" title="column1-1" closable="true"
border="normal" maximizable="true" collapsible="true">
+
border="normal" maximizable="true" style="margin-bottom:10px">
<panelchildren>Panel</panelchildren>
+
Panel
</panel>
+
</window>
<panel height="100px" framable="true" title="column1- border="
+
<panel height="100px" framable="true" title="column1-2"
normal " maximizable="true" style="margin-bottom:10px">
+
border="normal" maximizable="true" style="margin-bottom:10px">
 
<panelchildren>Panel</panelchildren>
 
<panelchildren>Panel</panelchildren>
 
</panel>
 
</panel>
Line 28: Line 72:
 
</panel>
 
</panel>
 
</columnchildren>
 
</columnchildren>
<columnchildren width="40%" style="padding: 10px">
+
<columnchildren width="40%" style="padding: 5px">
<panel title="Data" maximizable="true" border="normal"
+
<window id="dataWin" title="Data" maximizable="true" border="normal"
 
style="margin-bottom:10px">
 
style="margin-bottom:10px">
<panelchildren>
+
<grid fixedLayout="true" style="border:0px"
<grid fixedLayout="true" style="border:0px" height="100%">
+
height="100%">
<columns>
+
<columns>
<column label="category" />
+
<column label="category" />
<column label="value" />
+
<column label="value" />
</columns>
+
</columns>
<rows>
+
<rows>
<row>
+
<row>
<label id="c0" value="C/C++" />
+
<label id="c0" value="C/C++" />
<decimalbox id="v0" value="21. constraint=" no empty "
+
<decimalbox id="v0"
onChange="update(0)" />
+
value="21." constraint="no empty" onChange="update(0)" />
</row>
+
</row>
<row>
+
<row>
<label id="c1" value="VB" />
+
<label id="c1" value="VB" />
<decimalbox id="v1" value="10. constraint=" no empty "
+
<decimalbox id="v1"
onChange="update(1)" />
+
value="10." constraint="no empty" onChange="update(1)" />
</row>
+
</row>
<row>
+
<row>
<label id="c2" value="Java" />
+
<label id="c2" value="Java" />
<decimalbox id="v2" value="40. constraint=" no empty "
+
<decimalbox id="v2"
onChange="update(2)" />
+
value="40." constraint="no empty" onChange="update(2)" />
</row>
+
</row>
<row>
+
<row>
<label id="c3" value="PHP" />
+
<label id="c3" value="PHP" />
<decimalbox id="v3" value="28. constraint=" no empty "
+
<decimalbox id="v3"
onChange="update(3)" />
+
value="28." constraint="no empty" onChange="update(3)" />
</row>
+
</row>
</rows>
+
</rows>
</grid>
+
</grid>
</panelchildren>
+
</window>
</panel>
+
<vbox>
<panel border="normal">
+
<checkbox label="3D Chart" checked="true"
<panelchildren>
+
onCheck="mychart.setThreeD(self.isChecked())" />
<checkbox label="3D Chart" checked="true"
+
<chart id="mychart" title="Pie Chart Demo"
onCheck="mychart.setThreeD(self.isChecked())" />
+
width="320px" type="pie" threeD="true" fgAlpha="128">
<chart id="mychart" title="Pie Chart Demo" width="320p type="
+
<attribute name="onClick"><![CDATA[
pie " threeD="true" fgAlpha="128">
+
String areaid = event.getArea();
<attribute name="onClick"> String areaid = event.getArea(); if
+
if (areaid != null) {
(areaid!= null) { Area area = self.getFellow(areaid);
+
Area area = self.getFellow(areaid);
alert(""+area.getAttribute("entity")+":"+area.getTooltiptext()); }
+
alert("" + area.getAttribute("entity") + ":" + area.getTooltiptext());
</attribute>
+
}
<zscript> void update(int rowIndex) { Label lb = (Label)
+
]]></attribute>
self.getFellow("c"+rowIndex); Decimalbox db =
+
<zscript><![CDATA[
(Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value,
+
void update(int rowIndex) {
newDouble(db.getValue().doubleValue())); } PieModel model = new
+
Window dataWin = self.getParent().getParent().getFellow("dataWin");
SimplePieModel(); for(int j=0; j &lt; 4; ++j) { update(j); }
+
Label lb = (Label) dataWin.getFellow("c" + rowIndex);
                            mychart.setModel(model);
+
Decimalbox db = (Decimalbox) dataWin.getFellow("v" + rowIndex);
                        </zscript>
+
model.setValue(lb.value, new Double(db.getValue().doubleValue()));
                </chart>
+
}
            </panelchildren>
+
PieModel model = new SimplePieModel();
        </panel>
+
for (int j = 0; j < 4; ++j) {
    </columnchildren>
+
update(j);
</columnlayout>
+
}
 +
mychart.setModel(model);
 +
]]></zscript>
 +
</chart>
 +
</vbox>
 +
</columnchildren>
 +
</columnlayout>
 
</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 95: Line 145:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 100: Line 151:
 
[[ZK_Component_Reference/Layouts/Columnlayout/Columnchildren|Columnchildren]]
 
[[ZK_Component_Reference/Layouts/Columnlayout/Columnchildren|Columnchildren]]
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 111: Line 162:
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 10:35, 12 January 2022

Columnlayout

Employment/Purpose

A columnlayout is a layout which can have multiple columns while each column may have any number of panels placed vertically with different heights. When using Columnlayout, you have to assign width (either percent or pixel) on every Columnchildren, otherwise the result may depend on the browser and may not be as expected.

Since 6.0.0

Each column may have any number of any type of components.

Example

ZKComRef Columnlayout Example.png

    <columnlayout>
        <columnchildren width="33%" style="padding: 5px">
            <panel height="100px" title="column1-1" closable="true" collapsible="true"
                   border="normal" maximizable="true" style="margin-bottom:10px">
                <panelchildren>Panel</panelchildren>
            </panel>
            <panel height="100px" framable="true" title="column1-2"
                   border="normal" maximizable="true" style="margin-bottom:10px">
                <panelchildren>Panel</panelchildren>
            </panel>
            <panel height="100px" title="column1-3" border="normal"
                   closable="true">
                <panelchildren>Panel</panelchildren>
            </panel>
        </columnchildren>
        <columnchildren width="33%" style="padding: 5px">
            <panel height="100px" title="column2-1" closable="true" collapsible="true"
                   border="normal" maximizable="true" style="margin-bottom:10px">
                <panelchildren>Panel</panelchildren>
            </panel>
        </columnchildren>
        <columnchildren width="33%" style="padding: 5px">
            <panel height="100px" title="column3-1" closable="true" collapsible="true"
                   border="normal" maximizable="true" style="margin-bottom:10px">
                <panelchildren>Panel</panelchildren>
            </panel>
        </columnchildren>
    </columnlayout>

Since 6.0.0

Each column may have any number of any type of components.

ZKComRef Columnlayout Example ZK6.png

<columnlayout>
	<columnchildren width="30%" style="padding: 5px">
		<window height="100px" title="column1-1" closable="true"
			border="normal" maximizable="true" style="margin-bottom:10px">
			Panel
		</window>
		<panel height="100px" framable="true" title="column1-2"
			border="normal" maximizable="true" style="margin-bottom:10px">
			<panelchildren>Panel</panelchildren>
		</panel>
		<panel height="100px" title="column1-3" border="normal"
			closable="true">
			<panelchildren>Panel</panelchildren>
		</panel>
	</columnchildren>
	<columnchildren width="40%" style="padding: 5px">
		<window id="dataWin" title="Data" maximizable="true" border="normal"
			style="margin-bottom:10px">
			<grid fixedLayout="true" style="border:0px"
				height="100%">
				<columns>
					<column label="category" />
					<column label="value" />
				</columns>
				<rows>
					<row>
						<label id="c0" value="C/C++" />
						<decimalbox id="v0"
							value="21." constraint="no empty" onChange="update(0)" />
					</row>
					<row>
						<label id="c1" value="VB" />
						<decimalbox id="v1"
							value="10." constraint="no empty" onChange="update(1)" />
					</row>
					<row>
						<label id="c2" value="Java" />
						<decimalbox id="v2"
							value="40." constraint="no empty" onChange="update(2)" />
					</row>
					<row>
						<label id="c3" value="PHP" />
						<decimalbox id="v3"
							value="28." constraint="no empty" onChange="update(3)" />
					</row>
				</rows>
			</grid>
		</window>
		<vbox>
			<checkbox label="3D Chart" checked="true"
				onCheck="mychart.setThreeD(self.isChecked())" />
			<chart id="mychart" title="Pie Chart Demo"
				width="320px" type="pie" threeD="true" fgAlpha="128">
				<attribute name="onClick"><![CDATA[
					String areaid = event.getArea();
					if (areaid != null) {
						Area area = self.getFellow(areaid);
						alert("" + area.getAttribute("entity") + ":" + area.getTooltiptext());
					}
				]]></attribute>
				<zscript><![CDATA[
					void update(int rowIndex) {
						Window dataWin = self.getParent().getParent().getFellow("dataWin");
						Label lb = (Label) dataWin.getFellow("c" + rowIndex);
						Decimalbox db = (Decimalbox) dataWin.getFellow("v" + rowIndex);
						model.setValue(lb.value, new Double(db.getValue().doubleValue()));
					}
					PieModel model = new SimplePieModel();
					for (int j = 0; j < 4; ++j) {
						update(j);
					}
					mychart.setModel(model);
				]]></zscript>
			</chart>
		</vbox>
	</columnchildren>
</columnlayout>

Supported Events

Name
Event Type
None None

Supported Children

Columnchildren

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/01/12


Version Date Content
     



Last Update : 2022/01/12

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