Columnlayout"

From Documentation
Line 17: Line 17:
 
<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"
+
        <panel height="100px" title="column1-2" closable="true" collapsible="true"
title="column1-1" border="normal" maximizable="true"
+
            border="normal" maximizable="true" style="margin-bottom:10px">
collapsible="true">
+
            <panelchildren>Panel</panelchildren>
<panelchildren>Panel</panelchildren>
+
        </panel>
</panel>
+
        <panel height="100px" framable="true" title="column1-2"
<panel height="100px" framable="true" title="column1-2"
+
            border="normal" maximizable="true" style="margin-bottom:10px">
border="normal" maximizable="true" style="margin-bottom:10px">
+
            <panelchildren>Panel</panelchildren>
<panelchildren>Panel</panelchildren>
+
        </panel>
</panel>
+
        <panel height="100px" title="column1-3" border="normal"
<panel height="100px" title="column1-3" border="normal"
+
            closable="true">
closable="true">
+
            <panelchildren>Panel</panelchildren>
<panelchildren>Panel</panelchildren>
+
        </panel>
</panel>
+
    </columnchildren>
</columnchildren>
+
    <columnchildren width="40%" style="padding: 5px">
<columnchildren width="40%" style="padding: 5px">
+
        <panel title="Data" maximizable="true" border="normal"
<panel title="Data" maximizable="true" border="normal"
+
            style="margin-bottom:10px">
style="margin-bottom:10px">
+
            <panelchildren>
<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"
<decimalbox id="v0"
+
                                value="21." constraint="no empty" 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"
<decimalbox id="v1"
+
                                value="10." constraint="no empty" 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"
<decimalbox id="v2"
+
                                value="40." constraint="no empty" 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"
<decimalbox id="v3"
+
                                value="28." constraint="no empty" onChange="update(3)" />
value="28." constraint="no empty" onChange="update(3)" />
+
                        </row>
</row>
+
                    </rows>
</rows>
+
                </grid>
</grid>
+
            </panelchildren>
</panelchildren>
+
        </panel>
</panel>
+
        <panel border="normal">
<panel border="normal">
+
            <panelchildren>
<panelchildren>
+
                <checkbox label="3D Chart" checked="true"
<checkbox label="3D Chart" checked="true"
+
                    onCheck="mychart.setThreeD(self.isChecked())" />
onCheck="mychart.setThreeD(self.isChecked())" />
+
                <chart id="mychart" title="Pie Chart Demo"
<chart id="mychart" title="Pie Chart Demo"
+
                    width="320px" type="pie" threeD="true" fgAlpha="128">
width="320px" type="pie" threeD="true" fgAlpha="128">
+
                    <attribute name="onClick"><![CDATA[
<attribute name="onClick"><![CDATA[
+
                        String areaid = event.getArea();
String areaid = event.getArea();
+
                        if (areaid != null) {
if (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>
]]></attribute>
+
                    <zscript><![CDATA[
<zscript><![CDATA[
+
                        void update(int rowIndex) {
void update(int rowIndex) {
+
                            Label lb = (Label) self.getFellow("c" + rowIndex);
Label lb = (Label) self.getFellow("c" + rowIndex);
+
                            Decimalbox db = (Decimalbox) self.getFellow("v" + rowIndex);
Decimalbox db = (Decimalbox) self.getFellow("v" + rowIndex);
+
                            model.setValue(lb.value, new Double(db.getValue().doubleValue()));
model.setValue(lb.value, new Double(db.getValue().doubleValue()));
+
                        }
}
+
                        PieModel model = new SimplePieModel();
PieModel model = new SimplePieModel();
+
                        for (int j = 0; j < 4; ++j) {
for (int j = 0; j < 4; ++j) {
+
                            update(j);
update(j);
+
                        }
}
+
                        mychart.setModel(model);
mychart.setModel(model);
+
                    ]]></zscript>
]]></zscript>
+
                </chart>
</chart>
+
            </panelchildren>
</panelchildren>
+
        </panel>
</panel>
+
    </columnchildren>
</columnchildren>
 
 
</columnlayout>
 
</columnlayout>
 
 
</source>
 
</source>
  

Revision as of 06:18, 23 December 2010

Columnlayout

Employment/Purpose

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

Example

ZKComRef Columnlayout Example.png

<columnlayout>
    <columnchildren width="30%" style="padding: 5px">
        <panel height="100px" title="column1-2" 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="40%" style="padding: 5px">
        <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="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) {
                            Label lb = (Label) self.getFellow("c" + rowIndex);
                            Decimalbox db = (Decimalbox) self.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>
            </panelchildren>
        </panel>
    </columnchildren>
</columnlayout>

Supported Events

Name
Event Type
None None

Supported Children

Columnchildren

Use Cases

Version Description Example Location
     

Version History

Last Update : 2010/12/23


Version Date Content
     



Last Update : 2010/12/23

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