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 AMlinkZK UserHeader
8dtaylor172.70.127.2111p46nu8Sep 9, 2025 5:28:24 PMlinkresources
index.zulzul<zk>
<window>
<splitterView orientation="vertical">
<splitterPane size="47" relative="false">
<splitterview orientation="horizontal">
<splitterpane size="50" relative="true">
<vlayout apply="${patientHeaderController}" spacing="0"
height="100%" width="100%">
<hlayout sclass="cwf-header-row" hflex="1" vflex="1">
<label id="patientHeader" value="No Patient Selected" />
</hlayout>
<hlayout sclass="cwf-header-row" hflex="1" vflex="1">
<div hflex="1">
<a id="select" label="Select a patient"
tooltiptext="Click here to select a patient." />
<label id="lblHeader" value="" style="color:red"/>
</div>
<div style="text-align:right">
<a id="registrations" label="Select View by Institution"
tooltiptext="Click here to see all registrations for this patient."
visible="false" />
</div>
</hlayout>
</vlayout>
</splitterpane>
<splitterpane size="50" relative="true">
<vlayout apply="${userHeaderController}" spacing="0" height="100%"
width="100%">
<hlayout sclass="cwf-header-row" >
<label id="userHeader" value="Current user" hflex="1" vflex="1" />
</hlayout>
<hlayout sclass="cwf-header-row" hflex="1" vflex="1">
<div hflex="1">
<a id="password" label="Change password"
tooltiptext="Click here to change your password." visible="true" />
</div>
<div style="text-align:right">
<a id="logout" label="Logout"
tooltiptext="Click here to logout." />
</div>
</hlayout>
</vlayout>
</splitterpane>
</splitterview>
</splitterPane>
</splitterView>
</window>
</zk>
TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.*;
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 SelectorComposer {
@Wire
private Window window;
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
@Listen("onClick=#btn")
public void onClick(Event e) {
Messagebox.show("Hi btn");
}
}
splitterView.jsjavascriptzk.$package('cwf.ext');
var SplitterView =
cwf.ext.SplitterView = zk.$extends(zul.Widget, {
_horizontal: true,
$define: {
horizontal: function(horizontal) {
this.rerender();
},
resize: function() {
this.resize();
}
},
getZclass: function() {
return this._zclass == null ? 'cwf-splitterview' : this._zclass;
},
//-- super --//
onChildAdded_: function(child) {
this.$supers('onChildAdded_', arguments);
child.setHorizontal(this._horizontal);
this.resize();
},
onChildRemoved_: function(child) {
this.$supers('onChildRemoved_', arguments);
if (!this.childReplacing_)
this.resize();
},
bind_: function() {
this.$supers(SplitterView, 'bind_', arguments);
zWatch.listen({onSize: this});
this.resize(25);
},
unbind_: function() {
zWatch.unlisten({onSize: this});
this.$supers(SplitterView, 'unbind_', arguments);
},
_getPaneSize: function(wgt, hor) {
var n = !wgt ? null : wgt.$n('real');
return !n ? 0 : hor ? n.offsetWidth : n.offsetHeight;
},
beforeMinFlex_: function(o) {
var hor = o == 'w';
var val = 0;
var k = this.nChildren;
for (var j = 0; j < k; ++j) {
var pane = this.getChildAt(j);
var sz = this._getPaneSize(pane, hor);
if (sz > val)
val = sz;
}
return val;
},
//@Override, region with vflex/hflex, must wait flex resolved then do resize
afterChildrenFlex_: function() {
//region's min vflex/hflex resolved and try the border resize
//@see #_resize
if (this._isOnSize)
this._resize(true);
},
/**
* Re-sizes this layout component.
*/
resize: function(delay) {
if (this.desktop)
if (delay >= 0) {
var _this = this;
setTimeout(function(){_this.resize();}, delay);
} else
this._resize();
},
_resize: function(isOnSize) {
this._isOnSize = this._isOnSize || isOnSize;
if (this._sizing || !this.isRealVisible())
return;
this._sizing = true;
var el = this.$n(),
view = {
offset: 0,
width: el.offsetWidth,
height: el.offsetHeight
};
var k = this.nChildren;
for (var j = 0; j < k; ++j) {
var pane = this.getChildAt(j);
pane.setHorizontal(this._horizontal);
if (zk(pane.$n()).isVisible()) {
this._positionPane(pane, view);
}
}
this._isOnSize = false; // reset
this._sizing = false;
},
_positionPane: function(pane, view) {
var ambit = pane._ambit(view),
real = pane.$n('real'),
$real = zk(real),
hor = this._horizontal;
if (!pane._nextSibling()) {
var rm = (hor ? view.width : view.height) - view.offset;
ambit.size += rm;
}
ambit.size = Math.max(0, ambit.size);
var w = hor ? ambit.size : view.width,
h = hor ? view.height : ambit.size;
w = $real.revisedWidth(w);
h = $real.revisedHeight(h);
zk.copy(real.style, {
left: jq.px(hor ? ambit.offset : 0),
top: jq.px(hor ? 0 : ambit.offset),
width: jq.px0(w),
height: jq.px0(h)
});
if (!this._ignoreResize(real)) {
var cave = pane.$n('cave'),
$cave = zk(cave),
cap = pane.$n('cap');
w = $cave.revisedWidth(w);
if (cap)
h = Math.max(0, h - cap.offsetHeight);
h = $cave.revisedHeight(h);
zk.copy(cave.style, {
width: jq.px0(w),
height: jq.px0(h)
});
if (!this._isOnSize)
zUtl.fireSized(pane);
}
},
_ignoreResize : function(el) {
var w = el.offsetWidth,
h = el.offsetHeight;
if (el._lastSize && el._lastSize.width == w && el._lastSize.height == h) {
return true;
} else {
el._lastSize = {width: w, height: h};
return false;
}
},
//zWatch//
onSize: function() {
this._resize(true);
}
});
splitterViewMold.jsjavascript/**
* Mold: SplitterView.js
*/
function (out) {
var zcls = this.getZclass();
out.push('<div', this.domAttrs_(), '>');
for (var child = this.firstChild; child; child = child.nextSibling)
child.redraw(out);
out.push('</div>');
}
splitterView.css.dspcss<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
@media print {
.cwf-splitterview {
<c:if test="${c:browser('safari')}">
position: static;
</c:if>
}
}
@media screen {
.cwf-splitterview {
position: relative;
}
}
.cwf-splitterview {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #CDE6F5;
border: 0;
padding: 0;
}
.cwf-splitterview-icon {
overflow: hidden;
width: 16px;
height: 16px;
float: right;
background: transparent no-repeat 0 0;
background-image: url(${c:encodeURL('~./org/carewebframework/ui/zk/splitterview-icon.png')});
margin-left: 2px;
cursor: pointer;
}
.cwf-splitterpane-vert,
.cwf-splitterpane-horz {
border: 1px solid #9ECAD8;
position: absolute;
overflow: hidden;
background-color: white;
}
.cwf-splitterpane-vert {
width: 100%;
}
.cwf-splitterpane-horz {
height: 100%;
}
.cwf-splitterpane-horz-noborder,
.cwf-splitterpane-vert-noborder {
border:0;
}
.cwf-splitterpane-horz-splt {
position: absolute;
height: 100%;
width: 4px;
background: transparent left;
cursor: col-resize;
cursor: ew-resize;
line-height: 0;
font-size: 0;
z-index: 100;
}
.cwf-splitterpane-vert-splt {
position: absolute;
height: 4px;
width: 100%;
background: transparent top;
cursor: row-resize;
cursor: ns-resize;
line-height: 0;
font-size: 0;
z-index: 100;
}
.cwf-splitterpane-horz-splt:hover,
.cwf-splitterpane-vert-splt:hover {
background-color: #C4DCFB;
}
.cwf-splitterpane-splt-ghost {
background-color: #AAA;
}
.cwf-splitterpane-horz {
z-index: 12;
}
.cwf-splitterpane-vert {
z-index: 16;
}
.cwf-splitterpane-horz-header,
.cwf-splitterpane-vert-header {
color: #0F3B82;
font-size: ${fontSizeMS};
font-family: ${fontFamilyT};
font-weight: bold;
padding: 5px 3px 4px 5px;
border-bottom: 1px solid #9ECAD8;
background: transparent repeat-x 0 0;
background-image: url(${c:encodeURL('~./org/carewebframework/ui/zk/splitterpane-hm.png')});
white-space: nowrap;
overflow: hidden;
line-height: 15px;
zoom: 1;
cursor: default;
}