Componen, Fungsi & Event Framework zkoss - XII [ Ajax Push & Animation]

 

Berikut adalah contoh componen pada zkoss 

1. Comet Server Push

<zk>

<style dynamic="true">

.comet-news {

color: #0A94F3;

}

</style>

<window> Please press the "Start" button to see the demo "Comet Server Push".

<button label="Start" onClick="org.zkoss.zksandbox.CometServerPush.start(info, listbox)"/>

<button label="Stop" onClick="org.zkoss.zksandbox.CometServerPush.stop()"/>

<separator/>

<hbox>

Change Maximum Diameter:

<listbox id="listbox" rows="1" mold="select" onSelect="">

<listitem label="20" selected="true"/>

<listitem label="40"/>

<listitem label="60"/>

</listbox>

</hbox>

<image id="info" width="150px" height="150px"/>

</window>

</zk>

2. Drag & Drop

<zk>

Drag project to other list or same list for reorder

<hbox>

<listbox id="left" height="250px" width="200px" onDrop="move(event.dragged)" droppable="true"

oddRowSclass="non-odd">

<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Forge" />

</listitem>

<listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> 

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Mobile" />

</listitem>

<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK GWT" />

</listitem>

<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK JSF" />

</listitem>

<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK JSP" />

</listitem>

<listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Spring" />

</listitem>

</listbox>

<separator />

<listbox id="right" height="250px" width="200px"

oddRowSclass="non-odd" onDrop="move(event.dragged)" droppable="true"

multiple="true" >

<listitem draggable="true"  droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK" />

</listitem>

<listitem draggable="true"  droppable="true" onDrop="move(event.dragged)">

<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Studio" />

</listitem>

</listbox>

</hbox>

<zscript>

void move(Component dragged) {

if (self instanceof Listitem) {

if (dragged.getParent().getId().equals("right")) {

self.parent.insertBefore(dragged, self.getNextSibling());

} else {

self.parent.insertBefore(dragged, self.getNextSibling());

}

} else {

self.appendChild(dragged);

}

}

</zscript>

</zk>

3. Animations

<zk xmlns:w="client">

<style dynamic="true">

.ctl { border: 1px outset #777; background:#cfeaf1; margin: 2px;

margin-right: 10px; padding-left: 2px; padding-right: 2px;

display: block; width:80px; height:32px; text-align:center; cursor:pointer;}

</style>

<hbox>

<groupbox mold="3d" width="150px">

<caption label="Appear" />

<label sclass="ctl" value="SlideDown"

w:onClick="jq(this.$f('t')).hide().slideDown()"/>

<label sclass="ctl" value="Appear"

w:onClick="jq(this.$f('t')).hide().fadeIn()"/>

<label sclass="ctl" value="Slowly"

w:onClick="jq(this.$f('t')).hide().fadeIn(2500)"/>

</groupbox>

<groupbox mold="3d" width="150px">

<caption label="Disappear" />

<label sclass="ctl" value="SlideUp"

w:onClick="jq(this.$f('t')).show().slideUp()"/>

<label sclass="ctl" value="Fade"

w:onClick="jq(this.$f('t')).show().fadeOut()"/>

</groupbox>

</hbox>

<div id="t" style="position:relative;zoom:1">

<groupbox>

<caption label="Dynamic Content" />

Content to show and hide dynamically.

<datebox />

</groupbox>

Description

<textbox />

</div>

</zk>

4. Custom JavaScript

<zk>

<grid xmlns:w="client">

    <rows>

        <row>

            <label value="text1: " />

            <textbox

            w:onFocus="jq(this.$f('help1')).fadeIn()"

w:onBlur="jq(this.$f('help1')).fadeOut()"/>

            <label id="help1" visible="false"

value="This is help for text1." />

        </row>

        <row>

            <label value="text2: " />

            <textbox

            w:onFocus="jq(this.$f('help2')).fadeIn()"

w:onBlur="jq(this.$f('help2')).fadeOut()"/>

            <label id="help2" visible="false"

value="This is help for text2." />

        </row>

    </rows>

</grid>

</zk>

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