Componen, Fungsi & Event Framework zkoss - XV [ Miscellaneous ]

 

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 &lt;font color=red&gt;Cart&lt;/font&gt;

</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>

&#36;{c:l('username')}<textbox/>

</row>

<row>

&#36;{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, &lt;a href="http://www.zkoss.org"&gt;ZK&lt;/a&gt;.

</attribute>

</ginfo>

<gmarker id="mymark" lat="37.4410" lng="-122.1490" draggingEnabled="true">

<attribute name="content">

Hello, &lt;a href="http://www.zkoss.org"&gt;ZK&lt;/a&gt; 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="&#36;{mymap.lat}" onChange="mymap.panTo(self.doubleValue(), mymap.getLng())"/></row>

<row>Longitude: <doublebox id="mylng" value="&#36;{mymap.lng}" onChange="mymap.panTo(mymap.getLat(), self.doubleValue())"/></row>

<row>Zoom Level: <intbox id="myzoom" value="&#36;{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