Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

Force validation of constraints before processing the form

1guest172.70.86.20348gri4Sep 30, 2022 1:27:45 PMlink

Another new ZK fiddle

4guest162.158.170.24559227Sep 30, 2022 3:05:37 AMlink

Another new ZK fiddle

3guest162.158.170.24559227Sep 30, 2022 3:01:03 AMlink

Another new ZK fiddle

2guest162.158.170.24559227Sep 30, 2022 2:55:21 AMlink

Another new ZK fiddle

1guest162.158.170.24559227Sep 30, 2022 2:48:58 AMlink

PDF Viewer in ZK using Iframe

3ImanolRP172.71.114.127314phf6Sep 29, 2022 11:28:24 PMlink

asdf

2ImanolRP172.71.114.127314phf6Sep 30, 2022 1:06:02 PMlink

dynamic html using EL

1guest172.68.253.2733i9oktSep 29, 2022 1:18:46 PMlink

Double spinner weird action

86guest172.70.218.1553f23keaSep 29, 2022 10:52:30 AMlink

Double spinner weird action

85guest172.71.198.1253f23keaSep 29, 2022 10:46:12 AMlink

Another new ZK fiddle

1guest172.71.166.293o3bec5Sep 22, 2022 10:13:41 PMlink

resources

index.zulzulcomponent name="stepbar" templateURI="pkg$.stepbar.zul"?> <zk> <style src="pkg$.stepbar.css"/> <div viewModel="@id('vm') @init('pkg$.HolidayOrderViewModel')" validationMessages="@id('vmsgs')"> <stepbar stepBarModel="@init(vm.stepBarModel)" gotoStepCommand="gotoStep"/> <div style="padding: 0 57px; margin-top: 16px;"> <label sclass="page-title" value="@load(vm.stepBarModel.current.label)"/> <div style="margin-top: 26px;" sclass="stepbar-content"> <apply templateURI="@load(vm.stepBarModel.current.uri)" step="@load(vm.stepBarModel.current)"/> </div> </div> <div style="padding: 0 57px; position: relative; margin-top: 32px;"> <if test="@load(!vm.stepBarModel.first and !vm.stepBarModel.last)"> <button zclass="stepbar-button" sclass="secondary" onClick="@command('back')" label="Back"/> </if> <if test="@load(!vm.stepBarModel.last)"> <button zclass="stepbar-button pull-right" sclass="primary" onClick="@command('next')" label="Next"/> </if> </div> <div style="clear: both;"/> </div> </zk>HolidayOrderViewModel.javajavaimport org.zkoss.bind.annotation.BindingParam; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.Init; import org.zkoss.bind.annotation.NotifyChange; import pkg$.Step; public class HolidayOrderViewModel { private StepBarModel stepBarModel; private boolean carAdded = false; @Init public void init() { stepBarModel = new StepBarModel(); addStep("Destination", "z-icon-globe", "destination.zul"); addStep("Accommodation", "z-icon-hotel", "accommodation.zul"); addStep("Personal Details", "z-icon-user", "personal-details.zul"); addStep("Payment", "z-icon-credit-card", "payment.zul"); addStep("Enjoy Holiday", "z-icon-smile-o", "finish.zul"); stepBarModel.getItems().addToSelection(stepBarModel.getItems().get(0)); } @Command public void gotoStep(@BindingParam("step") StepBarModel.Step step) { stepBarModel.navigateTo(step); } @Command public void next() { stepBarModel.next(); } @Command public void back() { stepBarModel.back(); } @Command @NotifyChange("carAdded") public void addCar() { addStep(2, "Rent Car", "z-icon-car", "rent-car.zul"); this.carAdded = true; } @Command @NotifyChange("carAdded") public void removeCar() { Step carStep = stepBarModel.getCurrent(); stepBarModel.next(); stepBarModel.getItems().remove(carStep); this.carAdded = false; } public StepBarModel getStepBarModel() { return stepBarModel; } public boolean isCarAdded() { return carAdded; } public void addStep(String label, String icon, String uri) { addStep(stepBarModel.getItems().size(), label, icon, uri); } public void addStep(int index, String label, String icon, String uri) { String stepsFolder = "/widgets/shadow_elements/step_bar/steps"; stepBarModel.getItems().add(index, stepBarModel.new Step(label, icon, stepsFolder + "/" + uri)); } }stepbar.zulzul<div sclass="stepbar"> <forEach items="@init(stepBarModel.items)" var="step"> <div sclass="@load(('step ' += step.status))" onClick="@command(step.done ? gotoStepCommand : null, step=step)"> <span sclass="@init(('step-icon ' += step.icon))"/> <label sclass="step-label" value="@init(step.label)"/> </div> </forEach> </div>destination.zulzul<zk> <image src="/widgets/shadow_elements/step_bar/steps/destination.png" tooltiptext="dummy content"/> <if test="@load(!vm.carAdded)"> <hlayout style="position: relative; margin-top: 12px" spacing="8px"> <div hflex="1" sclass="highlight"> <span sclass="z-icon-car"/> <label zclass=" " value="Do you need a car?"/> </div> <button zclass="stepbar-button" width="245px" sclass="outline" onClick="@command('addCar')" label="Yes, I need a Car!"/> </hlayout> </if> </zk> StepBarModel.javajavaimport org.zkoss.bind.BindUtils; import pkg$.Step; public class StepBarModel extends NavModel<Step> { @Override public void navigateTo(Step step) { //notify change all steps affected by random access navigation (steps between old and new index inclusive) int oldIndex = getItems().indexOf(getCurrent()); int newIndex = getItems().indexOf(step); super.navigateTo(step); getItems().subList(Math.min(newIndex, oldIndex), Math.max(newIndex, oldIndex) + 1) .forEach(affectedStep -> BindUtils.postNotifyChange(null, null, affectedStep, "*")); } public class Step { private String label; private String icon; private String uri; public Step(String label, String icon, String uri) { super(); this.label = label; this.icon = icon; this.uri = uri; } public String getStatus() { return isDone() ? "previous" : (getCurrent() == this ? "current" : "following"); } public boolean isDone() { return getItems().indexOf(this) < getItems().indexOf(getCurrent()); } public String getLabel() { return label; } public String getIcon() { return icon; } public String getUri() { return uri; } } }