Berikut adalah contoh componen pada zkoss
1. Macro Components
<?component name="newProduct" macroURI="/misc/includedMacro.zul"?>
<zk>
<hbox>
<newProduct />
<newProduct title="Monitor" img="/img/item1.jpg" desc="The new HDMI monitor"/>
<newProduct title="Cell" img="/img/item2.jpg" desc="This is zPhone"/>
</hbox>
</zk>
2. Slider
<zk>
<hbox>
<vbox>
<groupbox mold="3d" width="250px">
<caption label="Default" />
<slider id="slider1" onScroll="zoom(slider1, img1)" />
<image id="img1" src="/img/sun.jpg" width="10px" />
</groupbox>
<groupbox mold="3d" width="250px" if="true">
<caption label="Scale" />
<slider id="slider3" onScroll="zoom(slider3, img3)"
mold="scale" />
<image id="img3" src="/img/sun.jpg" width="10px" />
</groupbox>
</vbox>
<groupbox mold="3d" width="280px">
<caption label="Sphere slider:" />
<slider id="slider21"
onScroll="zoom(slider21, img2);syncs(-1)" mold="sphere" />
<hbox width="250px">
<hbox width="225px">
<image id="img2" src="/img/sun.jpg" width="10px" />
</hbox>
<slider id="slider22"
onScroll="zoom(slider22, img2);syncs(1)" mold="sphere"
orient="vertical" />
</hbox>
</groupbox>
</hbox>
<zscript>
void syncs(int slid ){
(slid > 0 ? slider21.setCurpos(slider22.getCurpos()):
slider22.setCurpos(slider21.getCurpos()));
}
void zoom(Slider slider, Image img) {
int v = slider.getCurpos();
int w = v*1.5 > 10 ? v*1.5 :10;
img.setWidth(w + "px");
}
</zscript>
</zk>
3. Include
<zk>
Hello, World!
<include src="/misc/includedHello.zul"/>
</zk>
4. iframes
<zk>
<iframe id="iframe" src="http://www.zkoss.org" vflex="1" width="100%"
style="border: 1px solid gray" />
<separator bar="true" if="true" />
<hbox if="true">
<button upload="true" label="show data in iframe">
<attribute name="onUpload">{
Object media = event.getMedia();
if (media != null)
iframe.setContent(media);
}</attribute>
</button>
</hbox>
</zk>
5. HTML Elements
<zk xmlns:h="xhtml" xmlns:zk="zk">
<html>
<attribute name="content" >
This is a shopping <font color=red>Cart</font>
</attribute>
</html>
<h:table border="1">
<h:tr>
<h:td>Drinks</h:td>
<h:td>
<listbox id="list" mold="select">
<listitem selected="true" label="----" />
<listitem label="Coke" />
<listitem label="Sprite" />
<listitem label="Fanta" />
</listbox>
</h:td>
<h:td>
<h:ul id="ul">
<h:li>Nestle Coffee</h:li>
<h:li>Evian Water</h:li>
</h:ul>
<h:input type="button" value="Add Item"
zk:onClick="addItem()" />
</h:td>
</h:tr>
</h:table>
<zscript>
import org.zkoss.zhtml.Li;
import org.zkoss.zhtml.Text;
void addItem() {
if ("----".equals(list.getSelectedItem().getLabel())) {
alert("Please select one item.");
return;
}
Li li = new Li();
li.setParent(ul);
new Text(list.getSelectedItem() == null ? "Null" :
list.getSelectedItem().getLabel() ).setParent(li);
}
</zscript>
</zk>
6. Localization
<zk>
<grid>
<rows>
<row>
${c:l('username')}<textbox/>
</row>
<row>
${c:l('password')}<textbox type="password"/>
</row>
</rows>
</grid>
</zk>
7. Custom Style
<zk>
<style>
.myBlack {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #666666 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #666666 100%); /* W3C */
;
}
.myBlack:focus {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #666666 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #666666 100%); /* W3C */
;
}
.myBlack:hover {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #A6A6A6 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #A6A6A6 100%); /* W3C */
;
}
.myBlack:active {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #000000 100%); /* W3C */
;
}
.myBlue {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #6666FF 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #6666FF 100%); /* W3C */
;
}
.myBlue:focus {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #6666FF 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #6666FF 100%); /* W3C */
;
}
.myBlue:hover {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #A6A6FF 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #A6A6FF 100%); /* W3C */
;
}
.myBlue:active {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #0000FF 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #0000FF 100%); /* W3C */
;
}
.myRed {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #FF6666 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #FF6666 100%); /* W3C */
;
}
.myRed:focus {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #FF6666 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #FF6666 100%); /* W3C */
;
}
.myRed:hover {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #FFA6A6 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #FFA6A6 100%); /* W3C */
;
}
.myRed:active {
background: -webkit-linear-gradient(top, #FFFFFF 0%, #FF0000 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #FFFFFF 0%, #FF0000 100%); /* W3C */
;
}
.myBlack:hover, .myBlue:hover, .myRed:hover {
border-color: #CFCFCF;
}
.myBlack:focus, .myBlue:focus, .myRed:focus {
border-color: #CFCFCF;
-webkit-box-shadow: inset 0 0 2px #A6A6A6;
box-shadow: inset 0 0 2px #A6A6A6;;
}
</style>
<hbox>
<groupbox mold="3d" width="150px" if="true">
<caption label="Use Style Tag" />
<div class="btndiv">
<button id="btn" label="My Button" height="38px" sclass="myBlack" width="106px" />
</div>
</groupbox>
<groupbox mold="3d" width="150px">
<caption label="Use style attribute" />
<hbox>
<radiogroup
onCheck='msg.style = "color:white;background:" + self.selectedItem.label;
btn.sclass = "my" + self.SelectedItem.label;'>
<vbox>
<radio label="Black" checked="true" />
<radio label="Blue" />
<radio label="Red" />
</vbox>
</radiogroup>
<label id="msg" value="Hello, ZK"
style="color:white;background:black" />
</hbox>
</groupbox>
</hbox>
</zk>
8. Google Map
<window title="Google Maps" xmlns:w="client">
<attribute w:name="doClick_">
function (evt) {
if (!evt.domTarget)
evt.domTarget = this.$n(); // gmaps/gmarker do not has dom element in evt
}
</attribute>
<vbox>
<gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true">
<attribute name="onMapMove">
mylat.setValue(self.getLat());
mylng.setValue(self.getLng());
</attribute>
<attribute name="onMapZoom">
myzoom.setValue(self.getZoom());
</attribute>
<attribute name="onMapClick">
if (event.getReference() instanceof org.zkoss.gmaps.Gmarker) {
event.getReference().setOpen(true);
}
</attribute>
<ginfo id="myinfo" open="true">
<attribute name="content">
Hello, <a href="http://www.zkoss.org">ZK</a>.
</attribute>
</ginfo>
<gmarker id="mymark" lat="37.4410" lng="-122.1490" draggingEnabled="true">
<attribute name="content">
Hello, <a href="http://www.zkoss.org">ZK</a> on top of Gmarker.
</attribute>
<attribute w:name="_initListeners">
function() {
// google map will ignore marker click in map click event if marker is draggable
// listen to marker's event directly
var gmarker = this.mapitem_,
gmarkerwgt = this;
this.$_initListeners();
google.maps.event.addListener(gmarker, "click", function(event) {event.target = gmarkerwgt; event.opts = {}; gmarkerwgt.parent.doClick_(event);});
}
</attribute>
</gmarker>
</gmaps>
<grid><rows>
<row>Latitude: <doublebox id="mylat" value="${mymap.lat}" onChange="mymap.panTo(self.doubleValue(), mymap.getLng())"/></row>
<row>Longitude: <doublebox id="mylng" value="${mymap.lng}" onChange="mymap.panTo(mymap.getLat(), self.doubleValue())"/></row>
<row>Zoom Level: <intbox id="myzoom" value="${mymap.zoom}" onChange="mymap.setZoom(self.getValue())"/></row>
<row>Open Info: <button label="Change" onClick="myinfo.isOpen() ? mymark.setOpen(true) : myinfo.setOpen(true)"/></row>
</rows></grid>
</vbox>
</window>
Reference : https://www.zkoss.org/zksandbox/#g2