Componen, Fungsi & Event Framework zkoss - XI [ Data & Report - I ]

 

Berikut adalah contoh componen pada zkoss 

1. Flash Chart

<vbox>

<grid width="400px">

<columns>

<column label="category" width="150px" />

<column label="value" />

</columns>

<rows>

<row>

<label id="c0" value="C/C++" />

<doublebox id="v0" value="21.2" constraint="no empty"

onChange="update(0)" />

</row>

<row>

<label id="c1" value="VB" />

<doublebox id="v1" value="10.2" constraint="no empty"

onChange="update(1)" />

</row>

<row>

<label id="c2" value="Java" />

<doublebox id="v2" value="40.4" constraint="no empty"

onChange="update(2)" />

</row>

<row>

<label id="c3" value="PHP" />

<doublebox id="v3" value="28.2" constraint="no empty"

onChange="update(3)" />

</row>

</rows>

</grid>

<flashchart id="mychart" width="500" height="250"

type="pie">

<zscript>

void update(int rowIndex) {

Label lb = (Label) self.getFellow("c"+rowIndex);

Doublebox db = (Doublebox) 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>

</flashchart>

<toolbarbutton label="See More chart..." href="/data/moreflashchart.zul" target="zksandbox"/>

</vbox>

2. Chart

<vbox>

<grid width="400px">

<columns>

<column label="category" width="150px" />

<column label="value" />

</columns>

<rows>

<row>

<label id="c0" value="C/C++" />

<doublebox id="v0" value="21.2" constraint="no empty"

onChange="update(0)" />

</row>

<row>

<label id="c1" value="VB" />

<doublebox id="v1" value="10.2" constraint="no empty"

onChange="update(1)" />

</row>

<row>

<label id="c2" value="Java" />

<doublebox id="v2" value="40.4" constraint="no empty"

onChange="update(2)" />

</row>

<row>

<label id="c3" value="PHP" />

<doublebox id="v3" value="28.2" constraint="no empty"

onChange="update(3)" />

</row>

</rows>

</grid>

<checkbox label="3D Chart" checked="true"

onCheck="mychart.setThreeD(self.isChecked())" />

<chart id="mychart" title="Pie Chart Demo" width="500" height="250"

type="pie" threeD="true" fgAlpha="128">

<attribute name="onClick">

Area area = event.getAreaComponent();

if (area != null) {

    alert(""+area.getAttribute("entity")+": "+area.getTooltiptext());

}

</attribute>

<zscript>

void update(int rowIndex) {

Label lb = (Label) self.getFellow("c"+rowIndex);

Doublebox db = (Doublebox) 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>

<toolbarbutton label="See More chart..." href="/data/morechart.zul" target="zksandbox"/>

</vbox>

3. JasperReport

<zk>

Choice the file type : <listbox id="format" mold="select" onSelect="showReport()" >

<listitem label="PDF" value="pdf" selected="true" />

<listitem label="XML" value="xml" />

<listitem label="HTML" value="html" />

<listitem label="Word (RTF)" value="rtf" />

<listitem label="Excel" value="xls" />

<listitem label="Excel (JXL)" value="jxl" />

<listitem label="CSV" value="csv" />

<listitem label="OpenOffice (ODT)" value="odt" unless="false"/>

</listbox>

<button label="Report!" onClick='showReport()'/>

<jasperreport id="report" height="360px" />

<zscript>

import org.zkoss.zksandbox.CustomDataSource;

void showReport() {

//Preparing parameters

Map parameters = new HashMap();

parameters.put("ReportTitle", "Address Report");

parameters.put("DataFile", "CustomDataSource from java");

report.setSrc("/data/jasperreport.jasper");

report.setParameters(parameters);

report.setDatasource(new CustomDataSource());

report.setType((String) format.getSelectedItem().getValue());

}

</zscript>

</zk>

Reference : https://www.zkoss.org/zksandbox/#g2