Columnchildren"

From Documentation
m ((via JWB))
 
(9 intermediate revisions by 5 users not shown)
Line 6: Line 6:
 
*Java API: <javadoc>org.zkoss.zkex.zul.Columnchildren</javadoc>
 
*Java API: <javadoc>org.zkoss.zkex.zul.Columnchildren</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnchildren</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnchildren</javadoc>
*Style Guide: [http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Columnlayout Columnlayout]
+
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Columnlayout| Columnlayout]]
 +
*{{ZK PE and EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
 
Columnchildren can only allow Panel as its child.
 
Columnchildren can only allow Panel as its child.
 +
 +
{{versionSince|6.0.0}}
 +
 +
* Columnchildren can allow any Component as its child.
  
 
= Example =
 
= Example =
Line 17: 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 88: Line 93:
 
         </panel>
 
         </panel>
 
     </columnchildren>
 
     </columnchildren>
  </columnlayout></source>
+
  </columnlayout>
 +
</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 104: Line 110:
  
 
  *[[ZK_Component_Reference/Containers/Panel | Panel]]
 
  *[[ZK_Component_Reference/Containers/Panel | Panel]]
 +
 +
{{versionSince|6.0.0}}
 +
 +
*Any
  
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 117: 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.