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 :
Another new ZK fiddle
1guest172.70.80.2021nil9qsMay 3, 2024 2:07:26 PMlinkcustom menu on grid
3hiepgau162.158.179.130261rcaiMay 3, 2024 11:38:30 AMlinkUsing timer to refresh a grid
2hiepgau162.158.179.130261rcaiMay 3, 2024 11:37:57 AMlinkUsing timer to refresh a grid
1hiepgau162.158.179.130261rcaiMay 3, 2024 11:37:28 AMlinkUsing timer to refresh a grid
1guest162.158.179.13031t913jMay 3, 2024 11:36:44 AMlinktest textarea
39guest162.158.129.8edgdcgMay 3, 2024 6:53:22 AMlinkAnother new ZK fiddle
1guest172.71.102.2301fgjpg9May 1, 2024 11:20:42 AMlinkbasic upload button
37guest172.68.31.1503nocidtApr 30, 2024 6:00:06 PMlinkbasic upload button
36guest172.68.31.1513nocidtApr 30, 2024 5:59:30 PMlinklistbox styles
35guest162.158.129.2261nctej6Apr 30, 2024 2:19:32 PMlinkHTML Template with ZK
1guest162.158.178.2102847gt4Apr 23, 2024 2:39:12 AMlinkresources
index.zulzul<zk xmlns="xhtml" xmlns:zk="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul
http://www.zkoss.org/2005/zul/zul.xsd">
<link rel="stylesheet" type="text/css" href="style.css" />
<zk:div apply="pkg$.TestComposer">
<div id="container">
<div id="header">
<h1>
Slick<span class="off">Red</span>
</h1>
<h2>Time: <zk:label id="lblServerTime" /></h2>
</div>
<div id="menu">
<ul>
<li class="menuitem"><a href="#">Home</a></li>
<li class="menuitem"><a href="#">About</a></li>
<li class="menuitem"><a href="#">Products</a></li>
<li class="menuitem"><a href="#">Services</a></li>
<li class="menuitem"><a href="#">Design</a></li>
<li class="menuitem"><a href="#">Contact</a></li>
</ul>
</div>
<div id="leftmenu">
<div id="leftmenu_top"></div>
<div id="leftmenu_main">
<h3>Links</h3>
<ul>
<li><zk:a id="aSEO" href="#">SEO</zk:a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Web design</a></li>
<li><a href="#">Web Programming</a></li>
<li><a href="#">Content Creation</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">XHTML Templates</a></li>
</ul>
</div>
<div id="leftmenu_bottom"></div>
</div>
<div id="content">
<div id="content_top"></div>
<div id="content_main">
<div id="divContent">
<div id="htmlContent">
<h2>You may use this template in any manner you like. All I ask
is that you leave the link back to my site at the bottom of the
page.</h2>
<p><br/></p>
<p><br/></p>
<h3>Template Notes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p><br/></p>
<h3>More information</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p><br/></p>
<h3>Template Notes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p><br/></p>
<p><br/></p>
</div>
</div>
</div>
<div id="content_bottom"></div>
<div id="footer">
<h3>
<a href="http://www.bryantsmith.com">florida web design</a>
</h3>
</div>
</div>
</div>
</zk:div>
</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.*;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import org.zkoss.zhtml.A;
import org.zkoss.zhtml.H2;
import org.zkoss.zhtml.Li;
import org.zkoss.zhtml.Text;
import org.zkoss.zhtml.Ul;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Column;
import org.zkoss.zul.Columns;
import org.zkoss.zul.Datebox;
import org.zkoss.zul.Div;
import org.zkoss.zul.Filedownload;
import org.zkoss.zul.Grid;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Html;
import org.zkoss.zul.Label;
public class TestComposer extends GenericForwardComposer{
private Label lblServerTime;
private Div divContent;
private Html htmlContent;
private Ul ulLeftMenu;
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
lblServerTime.setValue(new Date().toString());
Li li = new Li();
A a = new A();
a.setStyle("color:yellow");
Text text = new Text("Runtime Link");
text.setParent(a);
a.setParent(li);
li.setParent(ulLeftMenu);
li = new Li();
Hbox hl = new Hbox();
hl.setAlign("center");
Datebox dbx = new Datebox();
dbx.setParent(hl);
hl.setParent(li);
li.setParent(ulLeftMenu);
}
public void onClick$aHome(Event e) throws InterruptedException{
List<Component> l2 = new ArrayList<Component>();
l2.addAll(divContent.getChildren());
for (Iterator<Component> iterator = l2.iterator(); iterator.hasNext();) {
Component component = (Component) iterator.next();
divContent.removeChild(component);
}
htmlContent.setParent(divContent);
}
public void onClick$aSEO(Event e) throws InterruptedException{
if(htmlContent!=null)
htmlContent = (Html)divContent.getFirstChild();
htmlContent.detach();
H2 h2 = new H2();
Text text = new Text("Dynamical H2 Text from Composer and Grid");
text.setParent(h2);
h2.setParent(divContent);
Grid grid = new Grid();
Columns cols = new Columns();
Column col = new Column("Col1");
col.setParent(cols);
col = new Column("Col2");
col.setParent(cols);
col = new Column("Col3");
col.setParent(cols);
cols.setParent(grid);
grid.setParent(divContent);
}
}
style.csscss/* A Free Design by Bryant Smith (bryantsmith.com) */
body {
margin: 0;
padding: 0;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #FACFCF;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 960px;
}
#header
{
height:85px;
width:960px;
}
#header h1
{
position:absolute;
text-align:left;
color:#FFFFFF;
font-size:43px;
color:#FFF;
left:14px;
top:18px;
}
#header h2
{
position:absolute;
text-align:right;
color:#FFD5D5;
left:490px;
top:38px;
width:400px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.off
{
color:#300;
}
#menu
{
display:block;
float:left;
clear:both;
width:960px;
height:54px;
float:left;
clear:both;
}
#leftmenu
{
margin-top:15px;
width:204px;
float:left;
}
#leftmenu_top
{
width:204px;
height:13px;
background-image:url(images/leftmenu_top.png);
}
#leftmenu_bottom
{
width:204px;
height:13px;
background-image:url(images/leftmenu_bottom.png);
}
#leftmenu_main
{
width:204px;
height:auto;
background-color:#420000;
}
#leftmenu_main ul
{
list-style: none;
padding: 0px;
width:204px;
}
#leftmenu_main h3
{
list-style: none;
padding: 0px;
width:204px;
color:#FFFFFF;
padding-left:10px;
padding-bottom:14px;
}
#leftmenu_main ul li
{
list-style: none;
padding: 0px;
width:204px;
text-align:left;
}
#leftmenu_main ul li a, #leftmenu_main ul li a:visited
{
display:block;
list-style: none;
padding: 0px;
width:192px;
padding-left:12px;
padding-top:4px;
height:30px;
text-align:left;
background-image:url(images/leftmenu_link.png);
background-repeat:repeat-x;
margin-top:5px;
color:#FFFFFF;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#leftmenu_main ul li a:hover
{
color:#EED7D7;
}
#content
{
display:block;
float:left;
width:689px;
height:auto;
padding-left:10px;
padding-top:15px;
padding-right:10px;
padding-bottom:5px;
}
#content_top
{
background-image:url(images/main_top.png);
background-repeat:no-repeat;
width:689px;
height:23px;
}
#content_main
{
background-image:url(images/main_back.png);
background-repeat:repeat-y;
width:659px;
padding-left:15px;
padding-right:15px;
}
#content_bottom
{
background-image:url(images/main_bottom.png);
background-repeat:no-repeat;
width:689px;
height:23px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#FFF;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:960px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
height: 36px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 18px;
font-size: 15px;
padding-left:13px;
padding-right:13px;
}
#menu a:hover{
background-image:url(images/link_background.png);
background-repeat:repeat-x;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}