Columnlayout"
From Documentation
Zkwikiadmin (talk | contribs) |
Jumperchen (talk | contribs) m |
||
Line 1: | Line 1: | ||
− | + | {{ZKComponentReferencePageHeader}} | |
+ | |||
+ | = Columnlayout = | ||
+ | *Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l3 Columnlayout] | ||
+ | *Java API: <javadoc>org.zkoss.zkex.zul.Columnlayout</javadoc> | ||
+ | *JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnlayout</javadoc> | ||
+ | |||
+ | = 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. | ||
+ | = Example = | ||
+ | |||
+ | [[Image:ZKComRef_Columnlayout_Example.jpg]] | ||
+ | |||
+ | <source lang="xml" > | ||
+ | <columnlayout> | ||
+ | <columnchildren width="30%" style="padding: 5px"> | ||
+ | <panel height="100px" style="margin-bottom:10p title=" column1-1 " | ||
+ | border="normal" maximizable="true" collapsible="true"> | ||
+ | <panelchildren>Panel</panelchildren> | ||
+ | </panel> | ||
+ | <panel height="100px" framable="true" title="column1- 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: 10px"> | ||
+ | <panel title="Data" maximizable="true" border="normal" | ||
+ | style="margin-bottom:10px"> | ||
+ | <panelchildren> | ||
+ | <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> | ||
+ | </panelchildren> | ||
+ | </panel> | ||
+ | <panel border="normal"> | ||
+ | <panelchildren> | ||
+ | <checkbox label="3D Chart" checked="true" | ||
+ | onCheck="mychart.setThreeD(self.isChecked())" /> | ||
+ | <chart id="mychart" title="Pie Chart Demo" width="320p type=" | ||
+ | pie " threeD="true" fgAlpha="128"> | ||
+ | <attribute name="onClick"> String areaid = event.getArea(); if | ||
+ | (areaid!= null) { Area area = self.getFellow(areaid); | ||
+ | alert(""+area.getAttribute("entity")+":"+area.getTooltiptext()); } | ||
+ | </attribute> | ||
+ | <zscript> void update(int rowIndex) { Label lb = (Label) | ||
+ | self.getFellow("c"+rowIndex); Decimalbox db = | ||
+ | (Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value, | ||
+ | newDouble(db.getValue().doubleValue())); } PieModel model = new | ||
+ | SimplePieModel(); for(int j=0; j < 4; ++j) { update(j); } | ||
+ | mychart.setModel(model); | ||
+ | </zscript> | ||
+ | </chart> | ||
+ | </panelchildren> | ||
+ | </panel> | ||
+ | </columnchildren> | ||
+ | </columnlayout> | ||
+ | </source> | ||
+ | |||
+ | =Supported events= | ||
+ | |||
+ | {| border="1" | width="100%" | ||
+ | ! <center>Name</center> | ||
+ | ! <center>Event Type</center> | ||
+ | |- | ||
+ | | NONE | ||
+ | | NONE | ||
+ | |} | ||
+ | |||
+ | =Supported Children= | ||
+ | |||
+ | [[ZK_Component_Reference/Layouts/Columnlayout/Columnchildren|Columnchildren]] | ||
+ | |||
+ | =Use cases= | ||
+ | |||
+ | {| border='1px' | width="100%" | ||
+ | ! Version !! Description !! Example Location | ||
+ | |- | ||
+ | | 5.0+ | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | =Version History= | ||
+ | |||
+ | {| border='1px' | width="100%" | ||
+ | ! Version !! Date !! Content | ||
+ | |- | ||
+ | | 5.0.1 | ||
+ | | 04/30/2010 | ||
+ | | Initialization | ||
+ | |} | ||
+ | |||
+ | {{ZKComponentReferencePageFooter}} |
Revision as of 08:37, 30 April 2010
Columnlayout
- Demonstration: Columnlayout
- Java API: Columnlayout
- JavaScript API: Columnlayout
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.
Example
File:ZKComRef Columnlayout Example.jpg
<columnlayout>
<columnchildren width="30%" style="padding: 5px">
<panel height="100px" style="margin-bottom:10p title=" column1-1 "
border="normal" maximizable="true" collapsible="true">
<panelchildren>Panel</panelchildren>
</panel>
<panel height="100px" framable="true" title="column1- 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: 10px">
<panel title="Data" maximizable="true" border="normal"
style="margin-bottom:10px">
<panelchildren>
<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>
</panelchildren>
</panel>
<panel border="normal">
<panelchildren>
<checkbox label="3D Chart" checked="true"
onCheck="mychart.setThreeD(self.isChecked())" />
<chart id="mychart" title="Pie Chart Demo" width="320p type="
pie " threeD="true" fgAlpha="128">
<attribute name="onClick"> String areaid = event.getArea(); if
(areaid!= null) { Area area = self.getFellow(areaid);
alert(""+area.getAttribute("entity")+":"+area.getTooltiptext()); }
</attribute>
<zscript> void update(int rowIndex) { Label lb = (Label)
self.getFellow("c"+rowIndex); Decimalbox db =
(Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value,
newDouble(db.getValue().doubleValue())); } PieModel model = new
SimplePieModel(); for(int j=0; j < 4; ++j) { update(j); }
mychart.setModel(model);
</zscript>
</chart>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
Supported events
NONE | NONE |
Supported Children
Use cases
Version | Description | Example Location |
---|---|---|
5.0+ |
Version History
Version | Date | Content |
---|---|---|
5.0.1 | 04/30/2010 | Initialization |