Columnchildren"

From Documentation
m ((via JWB))
 
(2 intermediate revisions by 2 users not shown)
Line 12: Line 12:
 
Columnchildren can only allow Panel as its child.
 
Columnchildren can only allow Panel as its child.
  
[since 6.0.0]
+
{{versionSince|6.0.0}}
  
 
* Columnchildren can allow any Component as its child.
 
* Columnchildren can allow any Component as its child.
Line 22: Line 22:
 
<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 "
+
        <panel height="100px" style="margin-bottom:10p" title="column1-1"
border="normal" maximizable="true" collapsible="true">
+
            border="normal" maximizable="true" collapsible="true">
<panelchildren>Panel</panelchildren>
+
            <panelchildren>Panel</panelchildren>
</panel>
+
        </panel>
<panel height="100px" framable="true" title="column1- border="
+
        <panel height="100px" framable="true" title="column1-2" border="normal"
normal " maximizable="true" style="margin-bottom:10px">
+
        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: 10px">
+
    <columnchildren width="40%" style="padding: 10px">
<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" height="100%">
+
                <grid fixedLayout="true" style="border:0px" 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" value="21." constraint="no empty"
onChange="update(0)" />
+
                                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" value="10." constraint="no empty"
onChange="update(1)" />
+
                                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" value="40." constraint="no empty"
onChange="update(2)" />
+
                                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" value="28." constraint="no empty"
onChange="update(3)" />
+
                                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" width="320px" type="pie" threeD="true" fgAlpha="128">
+
                <chart id="mychart" title="Pie Chart Demo" width="320px" type="pie" threeD="true" fgAlpha="128">
<attribute name="onClick">  
+
                    <attribute name="onClick">
                                                 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> void update(int rowIndex) { Label lb = (Label)
+
                    <zscript> void update(int rowIndex) { Label lb = (Label)
self.getFellow("c"+rowIndex); Decimalbox db =
+
                        self.getFellow("c"+rowIndex); Decimalbox db =
(Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value,
+
                        (Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value,
newDouble(db.getValue().doubleValue())); } PieModel model = new
+
                        new Double(db.getValue().doubleValue())); } PieModel model = new
SimplePieModel(); for(int j=0; j &lt; 4; ++j) { update(j); }
+
                        SimplePieModel(); for(int j=0; j &lt; 4; ++j) { update(j); }
 
                             mychart.setModel(model);
 
                             mychart.setModel(model);
 
                         </zscript>
 
                         </zscript>
Line 93: Line 93:
 
         </panel>
 
         </panel>
 
     </columnchildren>
 
     </columnchildren>
  </columnlayout></source>
+
  </columnlayout>
 
 
[since 6.0.0]
 
 
 
[[Image:ZKComRef_Columnlayout_Example_ZK6.png]]
 
 
 
<source lang="xml" >
 
<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>
 
 
</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 194: Line 111:
 
  *[[ZK_Component_Reference/Containers/Panel | Panel]]
 
  *[[ZK_Component_Reference/Containers/Panel | Panel]]
  
[since 6.0.0]
+
{{versionSince|6.0.0}}
  
 
  *Any
 
  *Any
Line 200: Line 117:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 210: Line 127:
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 10:35, 12 January 2022

Columnchildren

Employment/Purpose

Columnchildren can only allow Panel as its child.

Since 6.0.0

  • Columnchildren can allow any Component as its child.

Example

ZKComRef Columnlayout Example.png

<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-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: 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="320px" 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,
                        new Double(db.getValue().doubleValue())); } PieModel model = new
                        SimplePieModel(); for(int j=0; j &lt; 4; ++j) { update(j); }
                             mychart.setModel(model);
                         </zscript>
                 </chart>
             </panelchildren>
         </panel>
     </columnchildren>
 </columnlayout>

Supported Events

Name
Event Type
None None

Supported Children

* Panel

Since 6.0.0

*Any

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.