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 AMlinkMedList Manager
133okspry134.68.31.2272mbh4b5Jan 23, 2013 2:42:54 PMlinkresources
index.zulzul<zk xmlns:w="client">
<style>
.z-menubar-hor {
background-image:none;
background-color:#f3f3ff;
border:1px solid #bbb;
}
.z-menu {
background-image:none;
background-color:#f3f3ff;
}
.z-menu-body-over .z-menu-inner-m, .z-menu-body-seld .z-menu-inner-m, .z-menu-item-body-over .z-menu-item-inner-m {
background-image:none;
background-color:#f3f3ff;
}
.z-menu-body-over .z-menu-inner-l, .z-menu-body-seld .z-menu-inner-l, .z-menu-item-body-over .z-menu-item-inner-l {
background-image:none;
background-color:#f3f3ff;
}
.z-menu-body-over .z-menu-inner-r, .z-menu-body-seld .z-menu-inner-r, .z-menu-item-body-over .z-menu-item-inner-r {
background-image:none;
background-color:#f3f3ff;
}
-btn-seld {
background-image:none;
background-color:#f3f3ff;
border:1px solid #bbb;
}
.z-menu-body .z-menu-inner-m div {
padding-left:3px;
}
div.z-grid {
background-image:none;
background-color:#fff;
border-bottom:1px solid #bbb;
}
div.z-grid-header th.z-column {
background-image:none;
background-color:#fff;
border-bottom:1px solid #bbb;
border-top:1px solid #bbb;
border-right:none;
border-left:none;
}
div.z-grid-header th.z-auxheader {
background-image:none;
background-color:#f4f4f4;
border-bottom:none;
border-top:none;
border-right:none;
border-left:none;
}
div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead,
div.z-grid-body, div.z-grid-footer, div.z-grid-header, div.z-grid-header tr, div.z-grid-footer, {
background-image:none;
background-color:#fff;
border-bottom:none;
border-top:none;
border-right:none;
border-left:none;
}
.z-rows, .z-row, .z-cell, div.z-row-cnt, div.z-row-cnt,
tr.z-row td.z-row-inner, div.z-row-cnt, td.z-row-inner,
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd {
background-image:none;
border:none;
background-color:#fff;
padding-top:4px;
}
.DC.z-button .z-button-tl, .DC.z-button .z-button-tr,
.DC.z-button .z-button-bl, .DC.z-button .z-button-br,
.DC.z-button .z-button-tm, .DC.z-button .z-button-bm,
.DC.z-button .z-button-cl, .DC.z-button .z-button-cr {
background-image:none;
}
.DC.z-button .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#777;
font-size:1.2em;
text-shadow:-1px 1px #ddd;
font-weight:bold;
font-family:helvetica;
}
.DC.z-button:hover .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#fff;
font-size:1.2em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;
}
.cart.z-button .z-button-tl, .cart.z-button .z-button-tr,
.cart.z-button .z-button-bl, .cart.z-button .z-button-br,
.cart.z-button .z-button-tm, .cart.z-button .z-button-bm,
.cart.z-button .z-button-cl, .cart.z-button .z-button-cr {
background-image:none;
}
.cart.z-button .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#777;
font-size:1.2em;
text-shadow:-1px 1px #ddd;
font-weight:bold;
font-family:helvetica;
}
.cart.z-button:hover .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#fff;
font-size:1.2em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;
}
.blue {
color:#465D66;
text-shadow:1px 1px 2px #fff;
border:1px solid #A7DEF2;
height:45px;
font-size:11pt;
background: rgb(224,243,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(224,243,250,1) 0%, rgba(189,229,249,1) 50%, rgba(168,223,244,1) 51%, rgba(198,231,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,243,250,1)), color-stop(50%,rgba(189,229,249,1)), color-stop(51%,rgba(168,223,244,1)), color-stop(100%,rgba(198,231,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(224,243,250,1) 0%,rgba(189,229,249,1) 50%,rgba(168,223,244,1) 51%,rgba(198,231,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(224,243,250,1) 0%,rgba(189,229,249,1) 50%,rgba(168,223,244,1) 51%,rgba(198,231,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(224,243,250,1) 0%,rgba(189,229,249,1) 50%,rgba(168,223,244,1) 51%,rgba(198,231,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(224,243,250,1) 0%,rgba(189,229,249,1) 50%,rgba(168,223,244,1) 51%,rgba(198,231,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#c6e7ff',GradientType=0 ); /* IE6-9 */
}
.red {
color:#FFF1EF;
text-shadow:-1px -1px 1px #E04D3A;
border:1px solid #B92D3D;
height:45px;
font-size:11pt;
background: rgb(255,92,84); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,92,84,1) 0%, rgba(221,2,2,1) 51%, rgba(214,2,2,1) 53%, rgba(234,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,92,84,1)), color-stop(51%,rgba(221,2,2,1)), color-stop(53%,rgba(214,2,2,1)), color-stop(100%,rgba(234,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,92,84,1) 0%,rgba(221,2,2,1) 51%,rgba(214,2,2,1) 53%,rgba(234,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,92,84,1) 0%,rgba(221,2,2,1) 51%,rgba(214,2,2,1) 53%,rgba(234,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,92,84,1) 0%,rgba(221,2,2,1) 51%,rgba(214,2,2,1) 53%,rgba(234,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,92,84,1) 0%,rgba(221,2,2,1) 51%,rgba(214,2,2,1) 53%,rgba(234,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c54', endColorstr='#ea0000',GradientType=0 ); /* IE6-9 */
}
.grey {
color:#555;
text-shadow:-1px -1px 1px #fff;
border:1px solid #d5d5d5;
height:45px;
font-size:11pt;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(234,234,234,1) 51%, rgba(244,246,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(234,234,234,1)), color-stop(100%,rgba(244,246,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(234,234,234,1) 51%,rgba(244,246,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(234,234,234,1) 51%,rgba(244,246,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(234,234,234,1) 51%,rgba(244,246,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(234,234,234,1) 51%,rgba(244,246,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f6ff',GradientType=0 ); /* IE6-9 */
}
.urge.z-button .z-button-tl, .urge.z-button .z-button-tr,
.urge.z-button .z-button-bl, .urge.z-button .z-button-br,
.urge.z-button .z-button-tm, .urge.z-button .z-button-bm,
.urge.z-button .z-button-cl, .urge.z-button .z-button-cr {
background-image:none;
}
.urge.z-button .z-button-cm {
background-image:none;
background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
border:1px solid #517700;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
padding-right:2px;
border-radius:8px;
color:#fff;
font-size:.8em;
text-shadow:-1px 1px #517700;
font-weight:normal;
font-family:helvetica;
}
.urge.z-button:hover .z-button-cm {
background-image:none;
background:#72aa00;
box-shadow:0 0 2px 0 #F0FF9B inset;
border:1px solid #517700;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
padding-right:2px;
border-radius:8px;
color:#fff;
font-size:.8em;
text-shadow:-1px 1px #517700;
font-weight:normal;
font-family:helvetica;
}
.medName {
font-weight:bold;
color:#666;
}
.comment {
height:33px;
padding:10px;
border:1px solid #bbb;
overflow-y:auto;
overflow-x:hidden;
box-shadow:0 0 3px 1px #ccc inset;
}
.sig {
color:#666;
}
.warning {
color:#E8770D;
padding:2px;
}
.cancel {
color: #295169;
font-weight:bold;
text-decoration:none;
padding-left:7px;
}
.cancel:hover {
color: #87C7ED;
font-weight:bold;
text-decoration:none;
padding-left:7px;
}
.cancelSelected {
color: #87C7ED;
font-weight:bold;
text-decoration:none;
padding-left:7px;
}
</style>
<borderlayout>
<north border="0">
<div>
<hlayout style="padding:5px">
<a label="MedList Manager" sclass="cancelSelected" style="font-size:1.2em"/>
<a label="Patient Questionnaire" sclass="cancel" style="font-size:1.2em"/>
</hlayout>
<hlayout>
<button label="Document a med" sclass="DC" style="margin-bottom:4px"/>
<button label="New Order" sclass="DC" style="margin-bottom:4px"/>
<div style="padding:8px;">
<a label="Print Patient Questionnaire" sclass="cancel"/>
<a label="Print Patient MedList" sclass="cancel"/>
</div>
</hlayout>
<menubar id="menubar">
<menu label="All Meds">
<menupopup>
<menuitem label="Poor Adherence"
onClick="alert(self.label)" />
<menuitem label="Recently changed"
onClick="alert(self.label)" />
<menuseparator />
<menu label="Other">
<menupopup>
<menuitem/>
</menupopup>
</menu>
</menupopup>
</menu>
<menu label="Any Indication">
<menupopup>
<menu label="Chronic">
<menupopup>
<menuitem label="Diabetes"/>
<menuitem label="Hypertension"/>
</menupopup>
</menu>
<menu label="Acute">
<menupopup>
<menuitem label="Strep Throat"/>
<menuitem label="Broken wrist"/>
</menupopup>
</menu>
</menupopup>
</menu>
<menu label="All Prescribers">
<menupopup>
<menuitem label="Bills, Julia" onClick="alert(self.label)" />
<menuitem label="Crank, Webster" onClick="alert(self.label)" />
</menupopup>
</menu>
<menu label="Tags">
<menupopup>
<menuitem label="textbox" />
</menupopup>
</menu>
<menu label="All Dates">
<menupopup>
<menu label="Start Date">
<menupopup>
<menuitem label="One month ago"/>
<menuitem label="Two months ago"/>
<menuitem label="One year ago"/>
</menupopup>
</menu>
<menu label="Last Filled">
<menupopup>
<menuitem label="One month ago"/>
<menuitem label="Two months ago"/>
<menuitem label="One year ago"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</div>
</north>
<center style="border:1px solid #bbb;">
<div height="100%" >
<grid height="100%" style="border:none; overflow-y:auto;">
<auxhead>
<auxheader colspan="6">
<button label="D/C" sclass="DC"/>
<button label="Renew" sclass="cart"/>
</auxheader>
</auxhead>
<columns>
<column id="check" width="6%">
<div style="background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d6d6d6)) !important;
border:1px solid #bbb;
margin-left:5px;
margin-top:5px;
margin-bottom:5px;
margin-right:0px;
border-radius:8px;
color:#fff;
font-size:1.1em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;">
<checkbox style="padding-left:5px;"/>
<image src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_arrow_down.png"/>
</div>
</column>
<column width="9%"/>
<column label="Medication" width="30%" style="color:#888; font-weight:bold; font-size:10pt;"/>
<column label="Patient Reports" width="15%" align="center" style="color:#888; font-weight:bold; font-size:10pt;"/>
<column label="Rx Records" width="15%" align="center" style="color:#888; font-weight:bold; font-size:10pt;"/>
<column label="Comments" width="25%" style="color:#888; font-weight:bold; font-size:10pt;"/>
</columns>
<rows style="line-height:20px;">
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout sclass="warning">
<hlayout>
<label value="Acetaminophen 85 mg Tab" sclass="medName" style="color:#E8770D;"/>
<image src="http://www.famfamfam.com/lab/icons/silk/icons/error.png"/>
<label value="Dose Changed" style="font-size:8pt;"/>
</hlayout>
<label sclass="sig" style="color:#E8770D;" value="Take 30MG daily until you die"/>
</vlayout>
<vlayout sclass="red">
<label value="Patient denies taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 60%"/>
<label value="Refills remaining: 2"/>
</vlayout>
<div sclass="comment">
<label value="Patient reports being a total weirdo. Interpret today's results with caution. -- Nurse Jackie"/>
</div>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout sclass="warning">
<label value="Ambenonium 10 mg Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="10 MG By Mouth 2 times weekly, #20 Tab(s) with 2 refills"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 87%"/>
<label value="Refills remaining: 1"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Amiodarone HCl 300 mg Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="400 mg PO daily, #20 Tab(s) with 2 refills"/>
</vlayout>
<vlayout sclass="red">
<label value="Patient denies taking"/>
<label value="6/7/2012"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 34%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="amLODIPine 2.5 mg Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="1 Tab(s) By Mouth Daily, #90 Tab(s) with 1 refill"/>
</vlayout>
<vlayout sclass="red">
<label value="Patient denies taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="grey">
<hlayout>
<label value="No Data Available" tooltip="why"/>
<image src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTGEl28b5TiWrSUtk7TEsTi4peFlS9kT51ML_y5aGgsmUwCoKMi5g"
style="padding-top:3px" tooltip="why"/>
</hlayout>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Aspergillus fumigatus extr Inj 1000000 MG/MIN" sclass="medName"/>
</hlayout>
<label sclass="sig" value="Buccal Tab, 1456 Gallon(s) By Mouth 5 times daily, #250 Bottle(s) with 5 refills"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 89%"/>
<label value="Refills remaining: 1"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Betaxolol 10 mg Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="9999 MG By Mouth Every 4 hours while awake for 90 Day(s), Test Additional instructions, #890 Tab(s) with 2 refills"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 76%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Esomeprazole 20 mg EC Cap" sclass="medName"/>
</hlayout>
<label sclass="sig" value="1 Cap(s) By Mouth Daily, #90 Cap(s) with 1 refill"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 70%"/>
<label value="Refills remaining: 3"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Folic Acid 5 mg/mL Inj" sclass="medName"/>
</hlayout>
<label sclass="sig" value="1 mg in first bag of IVF each day, #30 ML with 1 refill"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 97%"/>
<label value="Refills remaining: 0"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Furosemide 40 mg Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="1 Tab(s) By Mouth Daily, #90 Tab(s) with 1 refill"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 95%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout>
<label value="Lisinopril 10 mg Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="1 Tab(s) By Mouth Daily, #20 Tab(s) with 1 refill"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 83%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="urge" tooltip="whatsUrge"/>
<vlayout>
<hlayout sclass="warning">
<label value="Morphine Sulfate SR 30 %XR Tab" sclass="medName"/>
</hlayout>
<label sclass="sig" value="1 Tab(s) By Mouth Every 12 hours, do not chew or crush, #56 with no refills"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 88%"/>
<label value="Refills remaining: 0"/>
</vlayout>
</row>
</rows>
</grid>
</div>
</center>
<east width="250px">
<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 Metformin" 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('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('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="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>
<a label="Suggestions for Metformin" sclass="alert-title"/>
<vlayout id="suggestionsCBCDetail" sclass="alert-details">
<a label="BASIC METABOLIC ROUTINE"/>
<a label="CBC2 ROUTINE"/>
<a label="Vit B12 Ser Qn ROUTINE"/>
<a label="COMPREHENSIVE METABOLIC ROUTINE"/>
</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>
</east>
<south border="0" style="border-right:1px solid #bbb; border-bottom:1px solid #bbb; border-left:1px solid #bbb; background:#f4f4f4; box-shadow:0px 2px 7px 4px #bbb;">
<hlayout style="padding:5px;">
<button label="Save" sclass="cart"/>
<div style="padding-top:12px;">
<a label="Cancel" sclass="cancel"/>
</div>
</hlayout>
</south>
</borderlayout>
<popup id="why" width="300px">
<html>
This sometimes happens because patients never fill their prescriptions. Sometimes, data are lost on the way to or from pharmacies.
</html>
</popup>
<popup id="whatsUrge" width="300px">
<html>
Document that you encouraged your patient to take this medication as prescribed.
</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");
}
}