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 AMlinkpreemptive alerts-2
1503okspry134.68.31.2272q0rn3uJan 2, 2013 7:55:42 PMlinkresources
index.zulzul
<zk xmlns:w="client">
<script>
function show(thingid) {
var zkwidget = zk.Widget.$('$'+ thingid); //zk
zkwidget.setVisible(true);
}
function hide(thingid) {
var zkwidget = zk.Widget.$('$'+ thingid); //zk
zkwidget.setVisible(false);
}
//begin toggle div visibility//
function isVisible(elem) {
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}
function switchVisibility(thingid) {
var zkwidget = zk.Widget.$('$'+ thingid); //zk
var show;
if (zkwidget.isVisible()) {
show = false;
} else {
show = true;
}
if (show) {
zkwidget.setVisible(true); // zk
} else {
zkwidget.setVisible(false);
}
};
function toggleVisibility() {
// 'G3_bar', 'dashboard'
switchVisibility('G3_bar' );
switchVisibility('dashboard');
switchVisibility('patient_landing');
}
//end toggle div visibility//
</script>
<style>
.formDiv {
border-bottom:1px solid #bbb;
background-color:#fff;
}
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd {
background: #fff;
}
tr.z-grid-odd:hover td.z-row-inner, tr.z-grid-odd {
background: #fff;
}
.mainPatNav {
background: #f3f3f3;
border:1px solid #ccc;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
}
.mainPatNav .z-label {
color:#666;
text-shadow:1px 1px 1px #fff;
font-size:1em;
font-family:helvetica;
}
.mainPatNavSelected {
background: #f3f3f3;
border:1px solid #ccc;
padding-top:4px;
padding-bottom:14px;
padding-left:5px;
padding-right:5px;
box-shadow:0 2px 3px #bbb inset;
}
.mainPatNavSelected .z-label {
color:#666;
text-shadow:1px 1px 1px #fff;
font-size:1em;
font-family:helvetica;
}
.mainDocNav {
background: #f3f3f3;
border:1px solid #ccc;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
}
.mainDocNav .z-label {
color:#666;
text-shadow:1px 1px 1px #fff;
font-size:1em;
font-family:helvetica;
}
.mainDocNavSelected {
background: #f3f3f3;
border:1px solid #ccc;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
}
.mainDocNavSelected .z-label {
color:#666;
text-shadow:1px 1px 1px #fff;
font-size:1em;
font-family:helvetica;
}
.actionBtn.z-button .z-button-tl, .actionBtn.z-button .z-button-tr,
.actionBtn.z-button .z-button-bl, .actionBtn.z-button .z-button-br,
.actionBtn.z-button .z-button-tm, .actionBtn.z-button .z-button-bm,
.actionBtn.z-button .z-button-cl, .actionBtn.z-button .z-button-cr {
background-image:none;
}
.actionBtn.z-button .z-button-cm {
background-image:none;
background: rgb(219,219,219); /* Old browsers */
background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(190,190,190,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,219,219,1)), color-stop(100%,rgba(190,190,190,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bebebe',GradientType=0 ); /* IE6-9 */
border:1px solid #bbb;
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#777;
font-size:1em;
text-shadow:1px 1px #ddd;
font-weight:bold;
font-family:helvetica;
}
.actionBtn.z-button:hover .z-button-cm {
background-image:none;
background: rgb(219,219,219); /* Old browsers */
background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(190,190,190,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,219,219,1)), color-stop(100%,rgba(190,190,190,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(219,219,219,1) 0%,rgba(190,190,190,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bebebe',GradientType=0 ); /* IE6-9 */
border:1px solid #bbb;
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#fff;
font-size:1em;
text-shadow:1px 1px #777;
font-weight:bold;
font-family:helvetica;
}
.actionBtnSelected.z-button .z-button-cm {
background-image:none;
background: rgb(125,125,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,125,125,1) 0%, rgba(151,151,151,1) 24%, rgba(183,183,183,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,125,125,1)), color-stop(24%,rgba(151,151,151,1)), color-stop(100%,rgba(183,183,183,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,125,125,1) 0%,rgba(151,151,151,1) 24%,rgba(183,183,183,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,125,125,1) 0%,rgba(151,151,151,1) 24%,rgba(183,183,183,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,125,125,1) 0%,rgba(151,151,151,1) 24%,rgba(183,183,183,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,125,125,1) 0%,rgba(151,151,151,1) 24%,rgba(183,183,183,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#b7b7b7',GradientType=0 ); /* IE6-9 */
border:1px solid #bbb;
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#666;
font-size:1em;
text-shadow:1px 1px #ccc;
font-weight:bold;
font-family:helvetica;
}
.top.z-button .z-button-tl, .top.z-button .z-button-tr,
.top.z-button .z-button-bl, .top.z-button .z-button-br,
.top.z-button .z-button-tm, .top.z-button .z-button-bm,
.top.z-button .z-button-cl, .top.z-button .z-button-cr {
background-image:none;
}
.top-selected.z-button .z-button-tl, .top-selected.z-button .z-button-tr,
.top-selected.z-button .z-button-bl, .top-selected.z-button .z-button-br,
.top-selected.z-button .z-button-tm, .top-selected.z-button .z-button-bm,
.top-selected.z-button .z-button-cl, .top-selected.z-button .z-button-cr {
background-image:none;
}
.top-unfulfilled.z-button .z-button-tl, .top-unfulfilled.z-button .z-button-tr,
.top-unfulfilled.z-button .z-button-bl, .top-unfulfilled.z-button .z-button-br,
.top-unfulfilled.z-button .z-button-tm, .top-unfulfilled.z-button .z-button-bm,
.top-unfulfilled.z-button .z-button-cl, .top-unfulfilled.z-button .z-button-cr {
background-image:none;
}
.top-disabled.z-button .z-button-tl, .top-disabled.z-button .z-button-tr,
.top-disabled.z-button .z-button-bl, .top-disabled.z-button .z-button-br,
.top-disabled.z-button .z-button-tm, .top-disabled.z-button .z-button-bm,
.top-disabled.z-button .z-button-cl, .top-disabled.z-button .z-button-cr {
background-image:none;
}
.top-selected.z-button .z-button-cm {
background-image:none;
background: rgb(85,102,112); /* Old browsers */
background: -moz-linear-gradient(top, rgba(85,102,112,1) 0%, rgba(100,120,132,1) 49%, rgba(136,159,170,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,102,112,1)), color-stop(49%,rgba(100,120,132,1)), color-stop(100%,rgba(136,159,170,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(85,102,112,1) 0%,rgba(100,120,132,1) 49%,rgba(136,159,170,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(85,102,112,1) 0%,rgba(100,120,132,1) 49%,rgba(136,159,170,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(85,102,112,1) 0%,rgba(100,120,132,1) 49%,rgba(136,159,170,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(85,102,112,1) 0%,rgba(100,120,132,1) 49%,rgba(136,159,170,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#556670', endColorstr='#889faa',GradientType=0 ); /* IE6-9 */
border:1px solid #44555F;
box-shadow:1px -1px 2px 0 #99A8AF inset;
border-radius:8px;
color:#4B5A63;
text-shadow:1px 1px 1px #99A8AF;
font-weight:bold;
font-family:helvetica;
padding-left:9px;
padding-right:9px;
padding-top:5px;
padding-bottom:5px;
}
.top.z-button .z-button-cm {
background-image:none;
background: transparent;
box-shadow:0px 0px 0px 1px #7A8C96 inset;
border:1px solid #44555F;
border-radius:8px;
color:#fff;
text-shadow:-1px 1px 1px #44555F;
font-weight:bold;
font-family:helvetica;
padding-left:9px;
padding-right:9px;
padding-top:5px;
padding-bottom:5px;
}
.top-unfulfilled.z-button .z-button-cm {
background-image:none;
background: transparent;
box-shadow:0px 0px 0px 1px #7A8C96 inset, 0px 0px 6px 1px #baccd5;
border:1px solid #44555F;
border-radius:8px;
color:#fff;
text-shadow:-1px 1px 1px #44555F;
font-weight:bold;
font-family:helvetica;
padding-left:9px;
padding-right:9px;
padding-top:5px;
padding-bottom:5px;
}
.top-disabled.z-button .z-button-cm {
background-image:none;
background: transparent;
border:1px solid #44555F;
border-radius:8px;
color:#4B5A63;
text-shadow:1px 1px 1px #99A8AF;
font-weight:bold;
font-family:helvetica;
padding-left:9px;
padding-right:9px;
padding-top:5px;
padding-bottom:5px;
}
.selected.z-button .z-button-tl, .selected.z-button .z-button-tr,
.selected.z-button .z-button-bl, .selected.z-button .z-button-br,
.selected.z-button .z-button-tm, .selected.z-button .z-button-bm,
.selected.z-button .z-button-cl, .selected.z-button .z-button-cr {
background-image:none;
}
.selected.z-button .z-button-cm {
background-image:none;
background: transparent;
box-shadow:0px 0px 0px 1px #7A8C96 inset, 0px 16px 7px 3px #576873 inset;
border:1px solid #44555F;
border-radius:8px;
color:#c7c7c7;
text-shadow:1px -1px #44555F;
font-weight:bold;
font-family:helvetica;
padding-left:9px;
padding-right:9px;
padding-top:5px;
padding-bottom:5px;
}
.activeOrdersDiv {
font-size:2em;
width:100%;
padding:4px;
margin-left;-4px;
color:#777;
text-shadow:1px 1px #e5e5e5;
border-radius:3px;
background: rgb(236,236,236); /* Old browsers */
background: -moz-linear-gradient(top, rgba(236,236,236,1) 0%, rgba(222,222,222,1) 50%, rgba(214,214,214,1) 51%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,236,236,1)), color-stop(50%,rgba(222,222,222,1)), color-stop(51%,rgba(214,214,214,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(222,222,222,1) 50%,rgba(214,214,214,1) 51%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(222,222,222,1) 50%,rgba(214,214,214,1) 51%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(222,222,222,1) 50%,rgba(214,214,214,1) 51%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(236,236,236,1) 0%,rgba(222,222,222,1) 50%,rgba(214,214,214,1) 51%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
}
.bigDiv {
overflow-y:auto;
overflow-x:hidden;
padding:5px;
}
.module {
padding:5px;
overflow-x:hidden;
overflow-y:hidden;
border:1px solid #bbb;
border-radius:5px;
}
.mainHeader {
float:left;
padding-bottom:6px;
}
.arrow-container {
width:80px;
float:right;
right:.4em;
}
.previous {
float:left;
color:black;
}
.next {
float:right;
color:black;
}
.alert {
margin-top:6px;
}
.alert-container {
float:left;
width:90%;
}
.alert-title {
font-size:.8em;
font-weight:bold;
}
.alert-title2 {
font-size:.8em;
font-weight:bold;
margin-top:14px;
}
.alert-warning {
font-size:.8em;
color:red;
font-family:courier;
}
.alert-details {
font-size:.8em;
font-family:trebuchet;
display:none;
}
.alert-detailsDisplayed {
font-size:.8em;
font-family:trebuchet;
display:inline;
}
.pulldown {
padding:7px;
text-align:center;
position:relative;
margin-top:-3px;
margin-left:-6px;
margin-right:-6px;
background-color:#fff;
box-shadow: 0 1px 0px #ddd, 0 -1px 0px #ddd;
}
.pulldown:hover {
padding:7px;
text-align:center;
position:relative;
margin-top:-3px;
margin-left:-6px;
margin-right:-6px;
background-color:#fff;
box-shadow: 0 2px 3px #bbb, 0 -1px 0px #bbb;
}
.pulldownSelected {
padding:7px;
text-align:center;
position:relative;
margin-top:-3px;
margin-left:-6px;
margin-right:-6px;
background-color:#d6d6d6;
box-shadow: 0 2px 6px #bbb inset, 0 -2px 0 #eaeaea inset;
}
a {
color:#777;
text-decoration:underline;
}
</style>
<vlayout spacing="0">
<hlayout width="100%" style="padding-top:7px;">
<hlayout hflex="1" style="padding-top:11px;">
<a label="Feedback" style="padding:5px; font-size:.9em;"/>
<a label="Help" style="padding:5px; font-size:.9em;"/>
<a label="External links" style="padding:5px; font-size:.9em;"/>
</hlayout>
<hlayout valign="top" hflex="1">
<vlayout spacing="0">
<div id="G3_btn" sclass="mainPatNavSelected">
<label value="Gopher"/>
</div>
<div width="100%" height="8px" zindex="90000" visible="true" style="margin-top:-6px; background-color:#f3f3f3;"/>
</vlayout>
<vlayout spacing="0">
<div id="viewChart_btn" sclass="mainPatNav">
<label value="View Chart"/>
</div>
<div width="100%" height="8px" zindex="90000" visible="false" style="margin-top:-16px; background-color:#f3f3f3;"/>
</vlayout>
</hlayout>
<hlayout valign="top" hflex="1">
<vlayout spacing="0">
<hlayout id="User_btn" sclass="mainDocNav">
<label value="Blaine Takesue @ Blackburn"/>
<image src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_arrow_down.png"/>
</hlayout>
<div width="100%" height="8px" zindex="90000" visible="false" style="margin-top:-16px; background-color:#f3f3f3;"/>
</vlayout>
<div id="logout_btn" style="padding-top:11px;">
<a label="logout" style="padding:5px; font-size:.9em;"/>
</div>
</hlayout>
</hlayout>
<div id="dashboard" visible="false">
<borderlayout height="35px" style="box-shadow:0px -17px 0px 0px #647884 inset; background: -webkit-gradient(linear, 0% 0%, 0% 84%, from(#7A8C96), to(#647884));">
<west style="padding:8px; border:none; box-shadow:0px -17px 0px 0px #647884 inset; background: -webkit-gradient(linear, 0% 0%, 0% 84%, from(#7A8C96), to(#647884));">
<div>
<a label="Doctor Dashboard" style="font-size:1em; color:#f9f9f9; text-decoration:none;"/>
</div>
</west>
</borderlayout>
</div>
<div id="G3_bar" visible="true" zindex="1" style="margin-top:-6px;">
<hlayout height="35px" style="box-shadow: 0 2px 3px #bbb inset;
padding:7px;
border-left:1px solid #ccc;
border-right:none; border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
background: #f3f3f3;">
<div hflex="3">
<image id="downArrow2" src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_arrow_down.png"
w:onClick="show('upArrow2'), hide('downArrow2')"/>
<image id="upArrow2" visible="false" src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_arrow_up.png"
w:onClick="show('downArrow2'), hide('upArrow2')"/>
<a label="Deborah McCleod (3333444) @ BLACKBURN Bed:A66" style="font-size:1em; color:#666; text-shadow:1px 1px 1px #fff; text-decoration:none;"/>
<a label="change" style="padding-left:8px; font-size:11pt; text-shadow:1px 1px 1px #fff;"/>
</div>
<div hflex="1" style="float:right; margin-right:25px;">
<textbox value="Search Chart" width="260px" mold="rounded" style="padding-top:5px;"/>
</div>
</hlayout>
</div>
<columnlayout id="patient_landing" visible="true" >
<columnchildren width="100%" height="600px">
<panel>
<panelchildren>
<div style="padding:10px; background: rgb(136,159,170); /* Old browsers */
background: -moz-linear-gradient(top, rgba(136,159,170,1) 0%, rgba(115,134,144,1) 50%, rgba(100,120,132,1) 51%, rgba(117,140,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(136,159,170,1)), color-stop(50%,rgba(115,134,144,1)), color-stop(51%,rgba(100,120,132,1)), color-stop(100%,rgba(117,140,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(136,159,170,1) 0%,rgba(115,134,144,1) 50%,rgba(100,120,132,1) 51%,rgba(117,140,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(136,159,170,1) 0%,rgba(115,134,144,1) 50%,rgba(100,120,132,1) 51%,rgba(117,140,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(136,159,170,1) 0%,rgba(115,134,144,1) 50%,rgba(100,120,132,1) 51%,rgba(117,140,153,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(136,159,170,1) 0%,rgba(115,134,144,1) 50%,rgba(100,120,132,1) 51%,rgba(117,140,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#889faa', endColorstr='#758c99',GradientType=0 ); /* IE6-9 */">
<button label="Diagnoses" sclass="top" id="problems" style="margin-left:1%; font-size:1em;" image="http://www.famfamfam.com/lab/icons/silk/icons/status_online.png" tooltip="reznor"/>
<button label="Note" sclass="top" id="note" style="margin-left:1%; font-size:1em;"/>
<button label="Orders" sclass="top-selected" id="orders" style="margin-left:1%; font-size:1em;"/>
<button label="Allergies" sclass="top-unfulfilled" id="allergies" style="margin-left:1%; font-size:1em;"/>
<button label="Observations" sclass="top" id="observations" style="margin-left:1%; font-size:1em;" image="http://www.famfamfam.com/lab/icons/silk/icons/status_online.png" tooltip="nanu"/>
<button label="Sign" sclass="top-disabled" id="sign" style="margin-left:1%; font-size:1em;">
<attribute name="onClick">{
Messagebox.show("Question is pressed. Are you sure?", "Question", Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION);
}</attribute>
</button>
</div>
<columnlayout>
<columnchildren width="70%" height="600px">
<panel>
<panelchildren>
<!--CART DIV-->
<div id="cart">
<vlayout style="padding-left:5px;">
<hlayout style="margin-top:7px;">
<combobox value="All" mold="rounded" width="100px"/>
<bandbox id="bd" mold="rounded" autodrop="true" style="margin-left:-10px;"
width="400px">
<bandpopup>
<listbox width="450px" mold="paging" autopaging="false"
onSelect="bd.value=self.selectedItem.label; bd.close();">
<listitem>
<listcell><label value="Top Choices" style="font-weight:bold; color:#777;"/></listcell>
</listitem>
<listitem>
<listcell
w:onClick="this.$f('aspirinForm').setVisible(true),
this.$f('cart').setVisible(false),
this.$f('aspirinAlert').setVisible(true),
this.$f('pulldown1').setSclass('pulldownSelected'),
this.$f('alertDetailAspirin').setSclass('alert-detailsDisplayed'),
this.$f('alertDetailHydro').setSclass('alert-detailsDisplayed'),
this.$f('alertDetailWarfarinDDI1').setSclass('alert-detailsDisplayed'),
this.$f('alertDetailWarfarinDDI2').setSclass('alert-detailsDisplayed'),
hide('more1'),
show('less1'),
this.$f('hydroAlert').setVisible(false)">
<label value="Aspirin"/><label value="Intolerance" style="padding-left:20px; color:red"/>
</listcell>
</listitem>
<listitem>
<listcell><label value="Acetaminophen"/><label value="DDI w/ Warfarin" style="padding-left:20px; color:red"/></listcell>
</listitem>
<listitem>
<listcell><label value="Ibuprofen"/></listcell>
</listitem>
<listitem>
<listcell><label value="Warfarin"/><label value="In cart" style="padding-left:20px; color:blue"/></listcell>
</listitem>
<listitem>
<listcell><label value="Lisinopril"/></listcell>
</listitem>
<listitem>
<listcell><label value="Hydrocodone/Acetaminophen 5/325mg"/><label value="DDI w/ Warfarin" style="padding-left:20px; color:red"/></listcell>
</listitem>
</listbox>
</bandpopup>
</bandbox>
<div style="width:10px; height:22px; margin-left:-405px; margin-top:0px;
background-color:#fbfbfb; border-top:1px solid #bbb; border-bottom:1px solid #bbb;">
<div style="width:5px; height:18px; border-right:1px solid #bbb; margin-top:2px;"></div>
</div>
</hlayout>
</vlayout>
</div>
<!--FORM DIV-->
<div sclass="formDiv" id="aspirinForm" visible="false" style="padding:7px;">
<label value="Aspirin" style="font-size:1.1em; font-weight:bold"/>
<grid>
<columns>
<column align="right" width="20%"/>
<column/>
</columns>
<rows>
<row>
<hlayout><label value="Medication" id="medication" style="color:red"/><label value="*" style="color:red"/></hlayout>
<hlayout width="100%">
<listbox mold="select" width="150px"
w:onSelect="this.$f('medicationCheck').setVisible(true),
this.$f('medication').setStyle('color:#000'),
this.$f('module3').setVisible(true),
this.$f('pulldown3').setSclass('pulldownSelected'),
this.$f('formularyDetail').setSclass('alert-detailsDisplayed'),
hide('more3'),
show('less3')">
<listitem label="81 EC Tab"/>
<listitem label="325 EC Tab"/>
</listbox>
<div style="padding-top:3px;">
<label id="medicationCheck" value="Yesss..." style="color:#63bf30; padding:3px" visible="false"/>
</div>
</hlayout>
</row>
<row>
Instructions
<listbox style="border:none;">
<listitem>
<listcell>
<vlayout>
<vlayout>
<label value="Hypertension"/>
<hlayout>
<button label="Select" id="select1" sclass="actionBtn"
w:onClick="this.$f('select1').setSclass('actionBtnSelected'), this.$f('textbox').setValue('1 tab daily')"/>
<div style="margin-top:5px">
<label value="1 tab daily" style="padding-left:4px; font-size:1.1em"/>
</div>
</hlayout>
</vlayout>
<vlayout>
<hlayout>
<label value="Headache," style=""/>
<label value="Pain" style="font-weight:bold"/>
</hlayout>
<hlayout>
<button label="Select" id="select2" sclass="actionBtn"
w:onClick="this.$f('select2').setSclass('actionBtnSelected'), this.$f('textbox').setValue('2 tabs every 4 hours as needed for pain')"/>
<div style="margin-top:5px">
<a label="2 tabs" style="color:#aaa"/>
<label value="every 4 hours as needed for pain" style="font-size:1.1em"/>
</div>
</hlayout>
<hlayout>
<button label="Select" id="select3" sclass="actionBtn"
w:onClick="this.$f('select3').setSclass('actionBtnSelected'), this.$f('textbox').setValue('2 tabs every 6 hours as needed for pain')"/>
<div style="margin-top:5px">
<a label="2 tabs" style="color:#aaa"/>
<label value="every 6 hours as needed for pain" style="font-size:1.1em"/>
</div>
</hlayout>
<textbox id="textbox" rows="2" width="400px"/>
</vlayout>
</vlayout>
</listcell>
</listitem>
</listbox>
</row>
<row>
<hlayout><label value="Indication" id="indication" style="color:#000"/></hlayout>
<hlayout>
<listbox mold="select" width="150px">
<listitem label="Pain" selected="true"/>
<listitem label="Sore tongue"/>
</listbox>
</hlayout>
</row>
<row>
Comment
<textbox rows="2" width="300px" style="margin-left:4px;"/>
</row>
</rows>
</grid>
<div style="height:30px; width:100%;">
<div style="float:left; padding-left:22%;">
<button label="Save" sclass="actionBtn" style="float:left"/>
<div style="padding-top:9px; padding-right:10px; float:right;">
<a label="Cancel" style="margin-left:5px;"/>
</div>
</div>
<div style="float:right;">
<div style="padding-top:9px; float:left;">
<label id="DCcaption" value="Discontinue a non-G3 order" style="color:#999; padding:3px;"/>
</div>
<button label="D/C" sclass="actionBtn" style="float:right"/>
</div>
</div>
</div>
</panelchildren>
</panel>
</columnchildren>
<!--ACTIVE ORDERS DIV-->
<columnchildren width="30%">
<panel>
<panelchildren>
<div sclass="bigDiv" height="540px" style="box-shadow:0 -2px 2px 1px #ddd inset">
<vlayout>
<hlayout>
<div style="padding-top:9px; padding-left:4px;">
<label value="Active Orders" style="font-size:12pt; font-family:times new roman;"/>
</div>
<button label="Orders Express" sclass="actionBtn" style="float:right"/>
</hlayout>
<div sclass="activeOrdersDiv">
<label value="Medications" style="font-family:times new roman; font-size:11pt;"/>
</div>
<vlayout style="padding:5px">
<label value="A Med"/>
<label value="B Med"/>
<label value="C Med"/>
<label value="D Med"/>
<label value="E Med"/>
<label value="F Med"/>
<label value="G Med"/>
<label value="H Med"/>
<label value="I Med"/>
<label value="Warfarin"/>
</vlayout>
<div sclass="activeOrdersDiv">
<label value="Allergies" style="font-family:times new roman; font-size:11pt;"/>
</div>
<vlayout style="padding:5px">
<label value="Aspirin Intolerance"/>
<label value="B Allergy"/>
</vlayout>
<div sclass="activeOrdersDiv">
<label value="Problems" style="font-family:times new roman; font-size:11pt;"/>
</div>
<vlayout style="padding:5px">
<label value="A Problem"/>
<label value="B Problem"/>
<label value="C Problem"/>
<label value="D Problem"/>
<label value="E Problem"/>
<label value="F Problem"/>
<label value="G Problem"/>
<label value="H Problem"/>
<label value="I Problem"/>
<label value="J Problem"/>
</vlayout>
</vlayout>
</div>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="250px">
<panel>
<panelchildren>
<div sclass="bigDiv" height="600px" style="box-shadow:0 -2px 2px 1px #ddd inset;">
<vlayout sclass="module" id="module3" visible="false" spacing="0px" style="margin-bottom:10px">
<div height="1em">
<div style="float:left; margin-top:-4px; margin-left:-2px;">
<image id="formularyClose" src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_delete.png" w:onClick="hide('module3')"/>
</div>
<div sclass="mainHeader">
<label value="Formulary for Aspirin" style="font-size:.8em"/>
</div>
</div>
<div style="clear:both"/>
<div id="pulldown3" sclass="pulldown">
<a label="show details" id="more3"
w:onClick="this.$f('pulldown3').setSclass('pulldownSelected'),
this.$f('formularyDetail').setSclass('alert-detailsDisplayed'),
hide('more3'),
show('less3')"/>
<a label="hide details" visible="false" id="less3" style="color:#777"
w:onClick="this.$f('pulldown3').setSclass('pulldown'),
this.$f('formularyDetail').setSclass('alert-details'),
hide('less3'),
show('more3')"/>
</div>
<div visible="true" sclass="alert">
<div sclass="alert-container">
<div>
<label value="" sclass="alert-title"/>
<vlayout id="formularyDetail" sclass="alert-details">
<a label="Blah"/>
<a label="Blah blah"/>
<a label="Blink blink"/>
<a label="Blah"/>
<a label="Blah blah"/>
<a label="Blink blink"/>
<a label="Blah"/>
<a label="Blah blah"/>
<a label="Blink blink"/>
<a label="Blah"/>
<a label="Blah blah"/>
<a label="Blink blink"/>
<a label="Blah"/>
<a label="Blah blah"/>
<a label="Blink blink"/>
</vlayout>
</div>
</div>
</div>
</vlayout>
<vlayout sclass="module" id="module1" spacing="0px">
<div height="1em">
<div sclass="mainHeader">
<label value="Alerts (1 of 3)" style="font-size:.8em"/>
</div>
<div class="arrow-container">
<a class="previous" id="previous1" label="previous" disabled="true"/>
<a class="next" id="next1" label="next"/>
</div>
</div>
<div style="clear:both"/>
<div id="pulldown1" sclass="pulldown">
<a label="show details" id="more1"
w:onClick="this.$f('pulldown1').setSclass('pulldownSelected'),
this.$f('alertDetailAspirin').setSclass('alert-detailsDisplayed'),
this.$f('alertDetailHydro').setSclass('alert-detailsDisplayed'),
this.$f('alertDetailWarfarinDDI1').setSclass('alert-detailsDisplayed'),
this.$f('alertDetailWarfarinDDI2').setSclass('alert-detailsDisplayed'),
hide('more1'),
show('less1')"/>
<a label="hide details" visible="false" id="less1"
w:onClick="this.$f('pulldown1').setSclass('pulldown'),
this.$f('alertDetailAspirin').setSclass('alert-details'),
this.$f('alertDetailHydro').setSclass('alert-details'),
this.$f('alertDetailWarfarinDDI1').setSclass('alert-details'),
this.$f('alertDetailWarfarinDDI2').setSclass('alert-details'),
hide('less1'),
show('more1')"/>
</div>
<div sclass="alert" id="aspirinAlert" visible="false">
<div sclass="alert-container">
<div>
<label value="Aspirin Intolerance" sclass="alert-title"/>
<vlayout style="padding:8px">
<label value="Risk of (unknown)" sclass="alert-warning"/>
<div style="margin-top:5px; color:#777;">
<label id="alertDetailAspirin" value="You ordered Aspirin and patient had ASPIRINS allergy documented by SIMPSON, HOMER"
sclass="alert-details"/>
</div>
</vlayout>
</div>
</div>
<div style="float:right; right:.2em;">
<image id="aspirinClose" src="http://www.famfamfam.com/lab/icons/silk/icons/cross.png" w:onClick="hide('aspirinAlert'), show('hydroAlert')"/>
</div>
</div>
<div sclass="alert" id="hydroAlert">
<div sclass="alert-container">
<div style="position:static">
<label value="Hydrocodone 7.5mg/Acetminophen 85mg Allergy" sclass="alert-title"/>
<vlayout style="margin-top:3px">
<label value="Risk of bleeding" sclass="alert-warning"/>
<label id="alertDetailHydro" value="Effect: The concurrent use of anticoagulants and salicylates may result
in increased INR values and increase the risk of bleeding.; Mode of Action: Multiple
processes are involved: 1) Salicylate doses greater than 3 gm daily decrease plasma
prothrombin levels. 2) Salicylates may also displace anticoagulants from plasma protein binding sites.
3) Salicylates impair platelet function, resulting in prolonged bleeding time. 4) Salicylates may cause
gastrointestinal bleeding due to irritation.; Clinical Significance: null"
sclass="alert-details"/>
</vlayout>
</div>
</div>
<div style="float:right; right:.2em;">
<image id="hydroClose" src="http://www.famfamfam.com/lab/icons/silk/icons/cross.png"
w:onClick="hide('hydroAlert'), show('DDIAlerts')"/>
</div>
</div>
<div visible="false" sclass="alert" id="DDIAlerts">
<div sclass="alert-container">
<div style="position:static;">
<label value="Warfarin vs Sertraline" sclass="alert-title"/>
<vlayout style="margin-top:3px">
<label value="Risk of stinky breath" sclass="alert-warning"/>
<label id="alertDetailWarfarinDDI1" value="Effect: Concurrent administration of the selective serotonin reuptake inhibitors
or serotonin-norepinephrine reuptake inhibitors may result in increased levels of and effects
from the anticoagulant.; Mode of Action: Some selective serotonin reuptake inhibitors and duloxetine
may inhibit the hepatic metabolism of some anticoagulants or may displace the anticoagulant from plasma
protein binding sites. In addition, serotonin release by platelets plays a role in hemostasis, which may
also increase the risk of bleeding.; Clinical Significance: null" sclass="alert-details"/>
</vlayout>
</div>
<div style="position:static; margin-top:5px; padding-top:4px; border-top:1px solid #bbb;">
<label value="Warfarin vs Acetaminophen" sclass="alert-title2"/>
<vlayout style="margin-top:3px;">
<label value="Risk of hives" sclass="alert-warning"/>
<label id="alertDetailWarfarinDDI2" value="Hives are fun--especially bee hives! When I was 12, I ate a bee hive as a bet.
I won the bet. I also don't fear death anymore." sclass="alert-details"/>
</vlayout>
</div>
<div style="position:static; margin-top:5px; padding-top:4px; border-top:1px solid #bbb;">
<label value="Warfarin vs the World" sclass="alert-title2"/>
</div>
<vlayout style="margin-top:3px;">
<label value="Risk of ...meh..." sclass="alert-warning"/>
</vlayout>
</div>
<div style="float:right; right:.2em;">
<image id="DDIClose" src="http://www.famfamfam.com/lab/icons/silk/icons/cross.png"
w:onClick="hide('module1')"/>
</div>
</div>
</vlayout>
<vlayout sclass="module" id="module2" spacing="0px" style="margin-top:10px">
<div height="1em">
<div style="float:left; margin-top:-4px; margin-left:-2px;">
<image id="suggestionsClose" src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_delete.png" w:onClick="hide('module2')"/>
</div>
<div sclass="mainHeader">
<label value="Suggestions (1)" style="font-size:.8em"/>
</div>
<div class="arrow-container">
<a class="previous" id="previous2" label="previous" disabled="true"/>
<a class="next" id="next2" label="next"/>
</div>
</div>
<div style="clear:both"/>
<div id="pulldown2" sclass="pulldown">
<a label="show details" id="more2"
w:onClick="this.$f('pulldown2').setSclass('pulldownSelected'),
this.$f('suggestionsCBCDetail').setSclass('alert-detailsDisplayed'),
hide('more2'),
show('less2')"/>
<a label="hide details" visible="false" id="less2" style="color:#777"
w:onClick="this.$f('pulldown2').setSclass('pulldown'),
this.$f('suggestionsCBCDetail').setSclass('alert-details'),
hide('less2'),
show('more2')"/>
</div>
<div visible="true" sclass="alert" id="aspirinAlert2">
<div sclass="alert-container">
<div>
<label value="Suggestions for CBC" sclass="alert-title"/>
<vlayout id="suggestionsCBCDetail" sclass="alert-details">
<a label="CBC handout"/>
<a label="Blah blah"/>
<a label="Blink blink"/>
</vlayout>
</div>
</div>
<div style="float:right; right:.2em;">
<image id="aspirinClose2" src="http://www.famfamfam.com/lab/icons/silk/icons/cross.png" w:onClick="hide('module2')"/>
</div>
</div>
</vlayout>
</div>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</vlayout>
<popup id="reznor" width="100px">
<html><![CDATA[
Reznor T
]]></html>
</popup>
<popup id="nanu" width="100px">
<html><![CDATA[
Nanu R
]]></html>
</popup>
</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");
}
}