Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkPractice information
1ssan92200.25.215.215niibt1May 20, 2013 10:12:40 PMlinkresources
index.zulzul<zk>
<style>
/* Start: Modal window
---------------------------------------------- */
.z-window-modal-hm, .z-window-modal-br, .z-window-modal-cr,
.z-window-modal-cl, .z-window-modal-hr, .z-window-modal-tr,
.z-window-modal-hl { background-image:none; background-color :
#0C6BA8; }
.z-window-modal-icon { width: 20px; height: 16px; border-width:
1px; border-style: solid; border-color: #0C6BA8 #0C6BA8 #0C6BA8
#0C6BA8; box-shadow: inset 0 1px 0 #0C6BA8, inset -1px -1px 0
#0C6BA8, inset -1px -2px 0 #0C6BA8; }
.z-window-modal-close { background:url('../img/close.jpg')
transparent no-repeat 0 0; }
.z-window-modal-header, .z-window-modal-header-noborder {
padding-top : 1px; padding-right : -1px; padding-bottom : 1px;
padding-left : 0; margin-right: -4px; }
/* End: Modal Window
---------------------------------------------- */
/* Start: Form Grid
---------------------------------------------- */
.fgrid tr.z-row td.z-row-inner,tr.z-row,div.z-grid-body
div.z-cell,div.z-grid { border: none; overflow: hidden; zoom: 1;
background: white; border-top: none; border-left: none;
border-right: none; border-bottom: none;}
/* End: Form Grid ----------------------------------------------
*/
/* Start: Form TextBox
---------------------------------------------- */
.ftextbox.z-textbox.z-textbox-focus { border-style : solid;
border-width : 1px; border-color : blue; }
/* End: Form TextBox
---------------------------------------------- */
/* Start: Combo Box
---------------------------------------------- */
.fcombofocus.z-combobox.z-combobox-focus .z-combobox-inp{
border-style : solid; border-width : 1px; border-color : blue;
}
/* End: Combox Box
---------------------------------------------- */
/* Start: Input Form Title
---------------------------------------------- */
.flbltitle.z-label { font-size : 14px; font-weight : bolder;
color:#0C6BA8;
}
/* End: Input Form Title
---------------------------------------------- */
/* Start: Input Form Label
---------------------------------------------- */
.flabel.z-label { font-size : 12px; font-family:
verdana,arial,sans-serif }
/* End: Input Form Label
---------------------------------------------- */
/* Start: Required Field asterix
---------------------------------------------- */
.flblreq.z-label { font-size : 16px; font-weight : bolder;
color:red; }
/* End: Required Field asterix
---------------------------------------------- */
/* button ---------------------------------------------- */
.mybutton.z-button .z-button-cm { background-image: none; color:
white; font-weight : bolder; }
.mybutton.z-button .z-button-tm, .z-button .z-button-bm {
background-image: none; }
.mybutton.z-button .z-button-cl, .z-button .z-button-cr {
background-image: none; }
.mybutton.z-button .z-button-tl { background-image: none; }
.mybutton.z-button .z-button-bl { background-image: none; }
.mybutton.z-button .z-button-tr { background-image: none; }
.mybutton.z-button .z-button-br { background-image: none; }
.button { display: inline-block; zoom: 1; /* zoom and *display =
ie7 hack for display:inline-block */ *display: inline;
vertical-align: baseline; margin: 0 2px; outline: none; cursor:
pointer; text-align: center; text-decoration: none; font:
14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius:
.5em; -moz-border-radius: .5em; border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0
1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.button:hover { text-decoration: none; } .button:active {
position: relative; top: 1px; }
.bigrounded { -webkit-border-radius: 2em; -moz-border-radius:
2em; border-radius: 2em; } .medium { font-size: 12px; padding:
.4em 1.5em .42em; } .small { font-size: 11px; padding: .2em 1em
.275em; }
/* color styles ----------------------------------------------
*/
/* black */ .black { color: #d7d7d7; border: solid 1px #333;
background: #333; background: -webkit-gradient(linear, left top,
left bottom, from(#666), to(#000)); background:
-moz-linear-gradient(top, #666, #000); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',
endColorstr='#000000'); } .black:hover { background: #000;
background: -webkit-gradient(linear, left top, left bottom,
from(#444), to(#000)); background: -moz-linear-gradient(top,
#444, #000); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
endColorstr='#000000'); } .black:active { color: #666;
background: -webkit-gradient(linear, left top, left bottom,
from(#000), to(#444)); background: -moz-linear-gradient(top,
#000, #444); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#666666'); }
/* gray */ .gray { color: #e9e9e9; border: solid 1px #555;
background: #6e6e6e; background: -webkit-gradient(linear, left
top, left bottom, from(#888), to(#575757)); background:
-moz-linear-gradient(top, #888, #575757); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
endColorstr='#575757'); } .gray:hover { background: #616161;
background: -webkit-gradient(linear, left top, left bottom,
from(#757575), to(#4b4b4b)); background:
-moz-linear-gradient(top, #757575, #4b4b4b); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
endColorstr='#4b4b4b'); } .gray:active { color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom,
from(#575757), to(#888)); background: -moz-linear-gradient(top,
#575757, #888); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
endColorstr='#888888'); }
/* white */ .white { color: #606060; border: solid 1px #b7b7b7;
background: #fff; background: -webkit-gradient(linear, left top,
left bottom, from(#fff), to(#ededed)); background:
-moz-linear-gradient(top, #fff, #ededed); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); } .white:hover { background: #ededed;
background: -webkit-gradient(linear, left top, left bottom,
from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top,
#fff, #dcdcdc); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#dcdcdc'); } .white:active { color: #999;
background: -webkit-gradient(linear, left top, left bottom,
from(#ededed), to(#fff)); background: -moz-linear-gradient(top,
#ededed, #fff); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
endColorstr='#ffffff'); }
/* orange */ .orange { color: #fef4e9; border: solid 1px
#da7c0c; background: #f78d1d; background:
-webkit-gradient(linear, left top, left bottom, from(#faa51a),
to(#f47a20)); background: -moz-linear-gradient(top, #faa51a,
#f47a20); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
endColorstr='#f47a20'); } .orange:hover { background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom,
from(#f88e11), to(#f06015)); background:
-moz-linear-gradient(top, #f88e11, #f06015); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
endColorstr='#f06015'); } .orange:active { color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom,
from(#f47a20), to(#faa51a)); background:
-moz-linear-gradient(top, #f47a20, #faa51a); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
endColorstr='#faa51a'); }
/* red */ .red { color: #faddde; border: solid 1px #980c10;
background: #d81b21; background: -webkit-gradient(linear, left
top, left bottom, from(#ed1c24), to(#aa1317)); background:
-moz-linear-gradient(top, #ed1c24, #aa1317); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
endColorstr='#aa1317'); } .red:hover { background: #b61318;
background: -webkit-gradient(linear, left top, left bottom,
from(#c9151b), to(#a11115)); background:
-moz-linear-gradient(top, #c9151b, #a11115); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
endColorstr='#a11115'); } .red:active { color: #de898c;
background: -webkit-gradient(linear, left top, left bottom,
from(#aa1317), to(#ed1c24)); background:
-moz-linear-gradient(top, #aa1317, #ed1c24); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
endColorstr='#ed1c24'); }
/* blue */ .blue { color: #d9eef7; border: solid 1px #0076a3;
background: #0095cd; background: -webkit-gradient(linear, left
top, left bottom, from(#00adee), to(#0078a5)); background:
-moz-linear-gradient(top, #00adee, #0078a5); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
endColorstr='#0078a5'); } .blue:hover { background: #007ead;
background: -webkit-gradient(linear, left top, left bottom,
from(#0095cc), to(#00678e)); background:
-moz-linear-gradient(top, #0095cc, #00678e); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',
endColorstr='#00678e'); } .blue:active { color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom,
from(#0078a5), to(#00adee)); background:
-moz-linear-gradient(top, #0078a5, #00adee); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
endColorstr='#00adee'); }
/* rosy */ .rosy { color: #fae7e9; border: solid 1px #b73948;
background: #da5867; background: -webkit-gradient(linear, left
top, left bottom, from(#f16c7c), to(#bf404f)); background:
-moz-linear-gradient(top, #f16c7c, #bf404f); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',
endColorstr='#bf404f'); } .rosy:hover { background: #ba4b58;
background: -webkit-gradient(linear, left top, left bottom,
from(#cf5d6a), to(#a53845)); background:
-moz-linear-gradient(top, #cf5d6a, #a53845); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',
endColorstr='#a53845'); } .rosy:active { color: #dca4ab;
background: -webkit-gradient(linear, left top, left bottom,
from(#bf404f), to(#f16c7c)); background:
-moz-linear-gradient(top, #bf404f, #f16c7c); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',
endColorstr='#f16c7c'); }
/* green */ .green { color: #e8f0de; border: solid 1px #538312;
background: #64991e; background: -webkit-gradient(linear, left
top, left bottom, from(#7db72f), to(#4e7d0e)); background:
-moz-linear-gradient(top, #7db72f, #4e7d0e); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',
endColorstr='#4e7d0e'); } .green:hover { background: #538018;
background: -webkit-gradient(linear, left top, left bottom,
from(#6b9d28), to(#436b0c)); background:
-moz-linear-gradient(top, #6b9d28, #436b0c); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',
endColorstr='#436b0c'); } .green:active { color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom,
from(#4e7d0e), to(#7db72f)); background:
-moz-linear-gradient(top, #4e7d0e, #7db72f); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',
endColorstr='#7db72f'); }
/* pink */ .pink { color: #feeef5; border: solid 1px #d2729e;
background: #f895c2; background: -webkit-gradient(linear, left
top, left bottom, from(#feb1d3), to(#f171ab)); background:
-moz-linear-gradient(top, #feb1d3, #f171ab); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',
endColorstr='#f171ab'); } .pink:hover { background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom,
from(#f4aacb), to(#e86ca4)); background:
-moz-linear-gradient(top, #f4aacb, #e86ca4); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',
endColorstr='#e86ca4'); } .pink:active { color: #f3c3d9;
background: -webkit-gradient(linear, left top, left bottom,
from(#f171ab), to(#feb1d3)); background:
-moz-linear-gradient(top, #f171ab, #feb1d3); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',
endColorstr='#feb1d3'); }
</style>
<window id="win" title=" " width="520px" height="470px"
border="normal" minimizable="false" mode="modal" maximizable="false"
closable="true" action="show: slideDown;hide: slideUp">
<separator />
<label value="Practice information" sclass="flbltitle" />
<separator />
<panel width="100%">
<panelchildren>
<separator />
<grid width="99.5%" sclass="fgrid">
<columns>
<column label="" width="150px" />
<column label="" />
</columns>
<rows>
<row>
<hbox>
<label value="Practice Name" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<textbox cols="50" sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="Street Address" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<textbox cols="50" sclass="ftextbox" />
</row>
<row>
<label value="" />
<textbox cols="50" sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="City" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<textbox cols="50" sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="State" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<combobox cols="20" sclass="fcombofocus">
<comboitem label="" />
<comboitem label="" />
</combobox>
</row>
<row>
<hbox>
<label value="Zip" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<textbox cols="30" sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="Login url" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<textbox cols="50" sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="NPI" sclass="flabel" />
</hbox>
<textbox sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="Email" sclass="flabel" />
</hbox>
<textbox cols="50" sclass="ftextbox" />
</row>
<row>
<hbox>
<label value="Phone" sclass="flabel" />
<label value="*" sclass="flblreq" />
</hbox>
<hbox>
<textbox sclass="ftextbox" />
<label value="Ext" sclass="flabel" />
<textbox sclass="ftextbox" />
</hbox>
</row>
<row>
<hbox>
<label value="Fax" sclass="flabel" />
</hbox>
<textbox sclass="ftextbox" />
</row>
</rows>
</grid>
</panelchildren>
</panel>
<separator />
<div align="center">
<button mold="trendy" sclass="mybutton orange small bigrounded" label="Submit" onClick="" />
<button mold="trendy" sclass="mybutton orange small bigrounded" label="Cancel" onClick="" />
</div>
</window>
</zk>TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}