Berikut adalah contoh componen pada zkoss
1. Fileupload
<zk>
<vlayout>
<button label="Upload" upload="true">
<attribute name="onUpload">
org.zkoss.util.media.Media media = event.getMedia();
if (media instanceof org.zkoss.image.Image) {
org.zkoss.image.Image img = (org.zkoss.image.Image) media;
if (img.getWidth() > img.getHeight()){
if (img.getHeight() > 300) {
pics.setHeight("300px");
pics.setWidth(img.getWidth() * 300 / img.getHeight() + "px");
}
}
if (img.getHeight() > img.getWidth()){
if (img.getWidth() > 400) {
pics.setWidth("400px");
pics.setHeight(img.getHeight() * 400 / img.getWidth() + "px");
}
}
pics.setContent(img);
} else {
Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
break; //not to show too many errors
}
</attribute>
</button>
<image id="pics" />
</vlayout>
</zk>
2. Filedownload
<zk>
<button label="Download sun.jpg">
<attribute name="onClick">
Filedownload.save("/img/sun.jpg", null);
</attribute>
</button>
</zk>
3. Timer
<zk>
<label id="now" />
<timer id="timer" delay="1000" repeats="true">
<attribute name="onTimer">
now.setValue(new Date().toString());
pm.value = pm.value == 100 ? 0 : pm.value + 10;
</attribute>
</timer>
<separator bar="true" />
<progressmeter id="pm" value="0" />
<separator bar="true" />
<button label="Stops timer" onClick="timer.stop()" />
<button label="Starts timer" onClick="timer.start()" />
</zk>
4. Flash
<zk>
<flash src="http://www.zkoss.org/resource/file/product/zkstudio/zkstudio.swf"
height="300" width="800">
</flash>
</zk>
5. Audio
<zk>
<audio id="audio" height="40" />
<separator />
<fileupload id="fileupload" label="Upload">
<attribute name="onUpload">
Object media = event.getMedia();
</attribute>
</fileupload>
<separator />
<button label="Play">
<attribute name="onClick">{
import org.zkoss.util.media.Media;
try{
if (media instanceof org.zkoss.sound.Audio)
audio.setContent(media);
else if (media != null)
Messagebox.show("Not an audio: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
}catch(e){}
audio.play();
}
</attribute>
</button>
<button label="Stop" onClick="audio.stop()" />
</zk>
6. Dynamic Image
<zk>
<hbox>
<window title="Label and Image" border="normal" width="300px">
<image src="/img/Centigrade-Widget-Icons/Globe-128x128.png"/>
<separator/>
Do you like the photo?
<label id="label"/>
<hbox>
<button label="Yes" onClick="label.value = self.label"/>
<button label="No" onClick="label.value = self.label"/>
</hbox>
</window>
<window title="Dynamic Image" border="normal" width="300px">
Click the button to Change Image
<hbox>
<vbox>
<button label="Change Resource">
<attribute name="onClick">
image.setContent(new org.zkoss.image.AImage("t", desktop.webApp.getResourceAsStream((odd = !odd) ? "/img/msn2.gif" : "/img/msn1.gif")));
</attribute>
</button>
<image id="image" src="/img/msn1.gif" />
</vbox>
<vbox>
<button label="Dynamic Render" onClick="update()" />
<image id="img" />
</vbox>
</hbox>
<zscript>
import java.awt.*;
import java.awt.image.*;
import java.awt.geom.*;
boolean odd = false;
boolean odd1 = false;
void update() {
BufferedImage bufferimg = newimg((odd1 = !odd1));
img.setContent(bufferimg);
}
BufferedImage newimg(boolean update) {
BufferedImage bi = new BufferedImage(150, 150, BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = bi.createGraphics();
g2d.setStroke(new BasicStroke(5));
Line2D line = null; Rectangle2D retangle = null ;
if (update) {
line = new Line2D.Double(10, 10, 130, 130);
retangle = new Rectangle2D.Double(25,25,85,85);
}else {
line = new Line2D.Double(10, 130, 130, 10);
retangle = new Rectangle2D.Double(25,25,85,85);
}
g2d.setColor(update ? Color.cyan : Color.RED);
g2d.draw(line);
g2d.setColor(update ? Color.yellow : Color.pink);
g2d.draw(retangle);
return bi;
}
BufferedImage bufferimg = newimg(false);
img.setContent(bufferimg);
</zscript>
</window>
</hbox>
</zk>
Reference : https://www.zkoss.org/zksandbox/#g2