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 :

frozen scroll

1guest172.69.33.373j82a06Mar 28, 2024 8:03:44 AMlink

Gmarker and forEach

1guest172.68.67.1362lpvk1hMar 28, 2024 7:29:50 AMlink

Gmaps

1guest172.68.67.1363dvghg5Mar 28, 2024 7:28:20 AMlink

grid demo

5guest172.71.158.2371grhhu3Mar 27, 2024 7:46:36 AMlink

grid demo

4guest172.71.158.2371grhhu3Mar 27, 2024 7:46:25 AMlink

grid demo

3guest172.71.154.181grhhu3Mar 27, 2024 7:44:16 AMlink

grid demo

2guest172.71.154.181grhhu3Mar 27, 2024 7:43:58 AMlink

grid demo

1guest172.71.154.191grhhu3Mar 27, 2024 7:42:54 AMlink

Scrollable Panel

13guest172.69.223.193ctlblaMar 27, 2024 5:31:21 AMlink

Scrollable Panel

12guest172.69.223.194ctlblaMar 27, 2024 5:30:56 AMlink

Form Binding TreeModel

39guest162.158.167.222kvmr8fOct 19, 2020 4:14:22 AMlink

resources

index.zulzul<zk> <window id="ruleModal" width="850px" height="500px" title="Rules" closable="true" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm')@init('pkg$.RuleModalVM',arg=arg)" validationMessages="@id('vmsgs')" > <tree vflex="1" model="@load(vm.treeModel)"> <template name="model" var="node"> <treeitem open="@load(true)" > <treerow> <treecell> <if test="@load(node.data.groupFlag)"> <combobox readonly="true" style="margin-left:10px;margin-right:10px;" model="@load(node.data.operatorList)" selectedItem="@bind(each.data.operator)" value="@load(node.data.operator)"> <template name="model"> <comboitem label="@load(each)" /> </template> </combobox> <image src="~./img/plus-button.png" onClick="@command('addRule',node=node)" /> <image src="~./img/folder_add.png" onClick="@command('addGroup',node=node)" /> </if> <if test="@load(!node.data.groupFlag)"> <combobox placeholder="Element" readonly="true" model="@load(node.data.elementList)" value="@load(node.data.element.name)" selectedItem="@bind(node.data.element)" style="margin-left:12px;margin-right:10px;" onSelect="@command('selectElement',node=node)"> <template name="model"> <comboitem image="@load(each.elementType.img)" label="@load(each.name)" /> </template> </combobox> <if test="@load(node.data.element ne null)"> <image src="@load(node.data.element.elementType.img)" /> <combobox style="margin-left:12px;margin-right:10px;" model="@load(node.data.operatorList)" value="@load(node.data.operator.name)" selectedItem="@load(node.data.operator)"> <template name="model"> <comboitem label="@load(each.name)" /> </template> </combobox> <choose> <when test="@load(node.data.elementToggle)"> <combobox placeholder="Select" readonly="true" model="@load(node.data.elementValueList)" value="@load(node.data.elementValue.name)" selectedItem="@bind(node.data.elementValue)"> <template name="model"> <comboitem label="@load(each.name)" /> </template> </combobox> </when> <when test="@load(!node.data.elementToggle)"> <choose> <when test="@load(node.data.element.elementType eq 'TEXTBOX')"> <textbox width="100px" value="@bind(node.data.stringValue)" /> </when> <when test="@load(node.data.element.elementType eq 'INTBOX' or node.data.element.elementType eq 'INTSPINNER')"> <intbox width="100px" value="@bind(node.data.intValue)" /> </when> <when test="@load(node.data.element.elementType eq 'DECIMALBOX' or node.data.element.elementType eq 'DECIMALSPINNER')"> <intbox width="100px" value="@bind(node.data.decimalValue)" /> </when> <!-- TODO Checkbox --> <!-- TODO Combobox --> <!-- TODO Radiobox --> <when test="@load(node.data.element.elementType eq 'DATEBOX')"> <combobox placeholder="Select" readonly="true" model="@load(node.data.dateUnitList)" value="@load(node.data.dateUnit.name)" selectedItem="@bind(node.data.dateUnit)"> <template name="model"> <comboitem label="@load(each.name)" /> </template> </combobox> <choose> <when test="@load(node.data.dateUnit eq 'FIXED')"> <datebox value="@bind(node.data.dateValue)" /> </when> <otherwise> <spinner readonly="true" value="@bind(node.data.units)" /> </otherwise> </choose> </when> </choose> </when> </choose> <choose> <when test="@load(!node.data.elementToggle)"> <image src="~./img/ui-combo-box.png" tooltiptext="Form Elements" onClick="@command('toggleElement',node=node)" /> </when> <when test="@load(node.data.elementToggle)"> <image src="@load(node.data.element.elementType.img)" tooltiptext="Value" onClick="@command('toggleElement',node=node)" /> </when> </choose> </if> </if> <if test="@load(!node.data.root)"> <image iconSclass="z-icon-minus" onClick="@command('removeRule',node=node)" /> </if> </treecell> </treerow> </treeitem> </template> </tree> <separator /> <grid> <columns> <column /> </columns> <rows> <row> <cell> <combobox /> </cell> </row> </rows> <foot> <footer align="right"> <toolbarbutton image="~./img/tick.png" onClick="@command('update')" label="Update" /> <toolbarbutton image="~./img/cross.png" label="Close" onClick="ruleModal.detach();" /> </footer> </foot> </grid> </window> </zk>RuleModalVM.javajava import java.util.ArrayList; import java.util.HashMap; import java.util.LinkedHashSet; import java.util.List; import java.util.Map; import org.zkoss.bind.BindUtils; import org.zkoss.bind.annotation.BindingParam; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.ContextParam; import org.zkoss.bind.annotation.ContextType; import org.zkoss.bind.annotation.Init; import org.zkoss.zk.ui.Component; import org.zkoss.zul.DefaultTreeModel; import org.zkoss.zul.DefaultTreeNode; import org.zkoss.zul.ListModelList; import org.zkoss.zul.TreeNode; public class RuleModalVM { private Rule rule; private DefaultTreeModel<Rule> treeModel; private List<Element> elementList; @SuppressWarnings("unchecked") @Init public void init(@BindingParam("arg") Map<String, Object> arg) { Rule rule = null; List<Element> elementList = null; if (arg != null) { if (arg.get("rule") != null) { rule = (Rule) arg.get("rule"); } if (arg.get("elementList") != null) { elementList = (List<Element>) arg.get("elementList"); } } this.setElementList(elementList); if (rule == null) { /* * New Rule */ this.setRule(new Rule()); this.getRule().setRoot(true); this.getRule().setGroupFlag(true); this.getRule().setOperator(Operator.ALL); this.getRule().setOperatorList(new ArrayList<Operator>()); this.getRule().getOperatorList().add(Operator.ALL); this.getRule().getOperatorList().add(Operator.ANY); this.getRule().setRuleSet(new LinkedHashSet<Rule>()); System.out.println(this.getRule()); } else { this.setRule(rule); } this.refreshTreeModel(); } private void refreshTreeModel() { Rule rootRule = new Rule(); rootRule.setRuleSet(new LinkedHashSet<Rule>()); rootRule.getRuleSet().add(this.getRule()); TreeNode<Rule> root = new DefaultTreeNode<Rule>(rootRule, this.buildTreeData(rootRule)); this.setTreeModel(new DefaultTreeModel<Rule>(root, true)); BindUtils.postNotifyChange(null, null, this, "treeModel"); } private List<TreeNode<Rule>> buildTreeData(Rule parent) { List<TreeNode<Rule>> nodeList = new ArrayList<TreeNode<Rule>>(); if (parent.getRuleSet() != null) { for (Rule rule : parent.getRuleSet()) { TreeNode<Rule> ruleNode = null; if(rule.getRuleSet() != null) { ruleNode = new DefaultTreeNode<Rule>(rule, this.buildTreeData(rule)); }else { rule.setElementList(this.getElementList()); if (rule.getElementValue() != null) { rule.setElementValueList(this.elementValueList(rule)); if(!rule.getElementValueList().contains(rule.getElementValue())) { rule.setElementValue(null); } } ruleNode = new DefaultTreeNode<Rule>(rule); } nodeList.add(ruleNode); } } return nodeList; } @Command public void addRule(@BindingParam("node") TreeNode<Rule> parentNode) { System.out.println(parentNode.getData()); Rule rule = new Rule(); rule.setRule(parentNode.getData()); rule.setElementList(this.getElementList()); rule.setGroupFlag(false); if (parentNode.getData().getRuleSet() == null) { parentNode.getData().setRuleSet(new LinkedHashSet<Rule>()); } parentNode.getData().getRuleSet().add(rule); TreeNode<Rule> node = new DefaultTreeNode<Rule>(rule); parentNode.getChildren().add(node); BindUtils.postNotifyChange(null, null, parentNode, "children"); } @Command public void addGroup(@BindingParam("node") TreeNode<Rule> parentNode) { Rule rule = new Rule(); rule.setRule(parentNode.getData()); rule.setGroupFlag(true); TreeNode<Rule> node = new DefaultTreeNode<Rule>(rule, new ArrayList<TreeNode<Rule>>()); parentNode.getChildren().add(node); if (parentNode.getData().getRuleSet() == null) { parentNode.getData().setRuleSet(new LinkedHashSet<Rule>()); } parentNode.getData().getRuleSet().add(rule); BindUtils.postNotifyChange(null, null, parentNode, "children"); } @Command public void removeRule(@BindingParam("node") TreeNode<Rule> node) { TreeNode<Rule> parent = node.getParent(); parent.getChildren().remove(node); System.out.println(node); System.out.println(node.getParent()); System.out.println(node.getData()); System.out.println(parent.getData()); System.out.println(parent.getData().getRuleSet()); parent.getData().getRuleSet().remove(node.getData()); BindUtils.postNotifyChange(null, null, parent, "children"); } @Command public void selectElement(@BindingParam("node") TreeNode<Rule> node) { node.getData().setElementValue(null); node.getData().setElementValueList(this.elementValueList(node.getData())); BindUtils.postNotifyChange(null, null, node, "*"); } private List<Element> elementValueList(Rule rule) { List<Element> elementValueList = new ArrayList<Element>(); for (Element element : this.getElementList()) { if (!element.equals(rule.getElement())) { if (element.getElementType().equals(rule.getElement().getElementType())) { elementValueList.add(element); } } } return elementValueList; } @Command public void toggleElement(@BindingParam("node") TreeNode<Rule> node) { if (node.getData().isElementToggle()) { node.getData().setElementToggle(false); } else { node.getData().setElementToggle(true); } BindUtils.postNotifyChange(null, null, node, "*"); } @Command public void update(@ContextParam(ContextType.VIEW) Component view) { // TODO Validation boolean update = true; if (update) { Map<String, Object> args = new HashMap<String, Object>(); args.put("rule", this.getTreeModel().getRoot().getData()); BindUtils.postGlobalCommand(null, null, "refreshRule", args); /* * Close Window */ view.detach(); } else { // TODO Error Message } } public DefaultTreeModel<Rule> getTreeModel() { return treeModel; } public void setTreeModel(DefaultTreeModel<Rule> treeModel) { this.treeModel = treeModel; } public Rule getRule() { return rule; } public void setRule(Rule rule) { this.rule = rule; } public List<Element> getElementList() { return elementList; } public void setElementList(List<Element> elementList) { this.elementList = elementList; } } Element.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.List; public class Element { private Element element; private List<Element> elementList; private Rule rule; private ElementType elementType; public Element getElement() { return element; } public void setElement(Element element) { this.element = element; } public ElementType getElementType() { return elementType; } public void setElementType(ElementType elementType) { this.elementType = elementType; } public List<Element> getElementList() { return elementList; } public void setElementList(List<Element> elementList) { this.elementList = elementList; } public Rule getRule() { return rule; } public void setRule(Rule rule) { this.rule = rule; } } Rule.javajava import java.math.BigDecimal; import java.util.ArrayList; import java.util.Arrays; import java.util.Date; import java.util.List; import java.util.Set; import 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 Rule { private Element element; private Rule rule; private Set<Rule> ruleSet; private RuleAction ruleAction; private Operator operator; private boolean root; private String stringValue; private Date dateValue; private Integer intValue; private BigDecimal decimalValue; private Boolean booleanValue; private Integer units; private DateUnit dateUnit; private boolean groupFlag; private boolean elementToggle; private Element elementValue; private List<Element> elementList; private List<Element> elementValueList; private List<Operator> operatorList; private List<DateUnit> dateUnitList; private List<RuleAction> ruleActionList; public Element getElement() { return element; } public void setElement(Element element) { this.element = element; } public Rule getRule() { return rule; } public void setRule(Rule rule) { this.rule = rule; } public Set<Rule> getRuleSet() { return ruleSet; } public void setRuleSet(Set<Rule> ruleSet) { this.ruleSet = ruleSet; } public RuleAction getRuleAction() { return ruleAction; } public void setRuleAction(RuleAction ruleAction) { this.ruleAction = ruleAction; } public Operator getOperator() { if (this.operator == null) { if (this.isGroupFlag()) { this.setOperator(Operator.ALL); } else { this.setOperator(Operator.EQ); } } return operator; } public void setOperator(Operator operator) { this.operator = operator; } public boolean isGroupFlag() { return groupFlag; } public void setGroupFlag(boolean groupFlag) { this.groupFlag = groupFlag; } public List<Operator> getOperatorList() { this.setOperatorList(new ArrayList<Operator>()); if (this.isGroupFlag()) { this.operatorList.add(Operator.ALL); this.operatorList.add(Operator.ANY); } else { this.operatorList.addAll(Operator.ruleSet); } return operatorList; } public void setOperatorList(List<Operator> operatorList) { this.operatorList = operatorList; } public List<Element> getElementList() { return elementList; } public void setElementList(List<Element> elementList) { this.elementList = elementList; } public List<DateUnit> getDateUnitList() { this.setDateUnitList(Arrays.asList(DateUnit.values())); return dateUnitList; } public void setDateUnitList(List<DateUnit> dateUnitList) { this.dateUnitList = dateUnitList; } public DateUnit getDateUnit() { if (this.dateUnit == null) { this.setDateUnit(DateUnit.FIXED); } return dateUnit; } public void setDateUnit(DateUnit dateUnit) { this.dateUnit = dateUnit; } public Integer getUnits() { if (this.units == null) { this.setUnits(1); } return units; } public void setUnits(Integer units) { this.units = units; } public String getStringValue() { return stringValue; } public void setStringValue(String stringValue) { this.stringValue = stringValue; } public Date getDateValue() { return dateValue; } public void setDateValue(Date dateValue) { this.dateValue = dateValue; } public Integer getIntValue() { return intValue; } public void setIntValue(Integer intValue) { this.intValue = intValue; } public BigDecimal getDecimalValue() { return decimalValue; } public void setDecimalValue(BigDecimal decimalValue) { this.decimalValue = decimalValue; } public Boolean getBooleanValue() { return booleanValue; } public void setBooleanValue(Boolean booleanValue) { this.booleanValue = booleanValue; } public Element getElementValue() { return elementValue; } public void setElementValue(Element elementValue) { this.elementValue = elementValue; } public boolean isElementToggle() { return elementToggle; } public void setElementToggle(boolean elementToggle) { this.elementToggle = elementToggle; } public List<Element> getElementValueList() { return elementValueList; } public void setElementValueList(List<Element> elementValueList) { this.elementValueList = elementValueList; } public boolean isRoot() { return root; } public void setRoot(boolean root) { this.root = root; } public List<RuleAction> getRuleActionList() { this.setRuleActionList(Arrays.asList(RuleAction.values())); return ruleActionList; } public void setRuleActionList(List<RuleAction> ruleActionList) { this.ruleActionList = ruleActionList; } } RuleAction.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 enum RuleAction { VISIBLE("Make Field Visible"), VISIBLE_REQUIRED("Make Field Visible and Required"), REQUIRED("Make Field Required"), ENABLED("Enable Field"), DISABLED("Disable Field"); private final String name; private RuleAction(String name) { this.name= name; } public String getName() { return name; } } Operator.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.EnumSet; public enum Operator{ ANY("ANY"), ALL("ALL"), EQ("EQUAL TO"), NE("NOT EQUAL TO"), GT("GREATER THAN"), GE("GREATER THAN OR EQUAL TO"), LT("LESS THAN"), LE("LESS THAN OR EQUAL TO"); private final String name; private Operator(String name) { this.name = name; } public String getName() { return name; } public static EnumSet<Operator> ruleSet = EnumSet.of(EQ, NE, GT, GE, LT, LE); } DateUnit.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 enum DateUnit { FIXED("Fixed Date"), DAYS("Days from Today"), WEEKS("Weeks from Today"), MONTHS("Months from Today"), YEARS("Years from Today"); private final String name; private DateUnit(String name) { this.name = name; } public String getName() { return name; } } ElementType.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.EnumSet; public enum ElementType { FORM("Form","~./img/application.png",false,false,false,false,null,null), PAGE("Page","~./img/page_white.png",false,false,false,false,"page","page, element"), TEXT("Text","~./img/ui-label.png",false,false,false,false,"element","element"), TEXTBOX("Text Box","~./img/ui-text-field.png",true,true,true,false,"element","element"), DATEBOX("Date Box","~./img/date.png",true,true,true,false,"element","element"), INTBOX("Int Box","~./img/ui-number-field.png",true,true,true,false,"element","element"), DECIMALBOX("Decimal Box","",true,true,true,false,"element","element"), CHECKBOX("Check Box","~./img/ui-check-box.png",false,true,true,true,"element","element"), RADIOBOX("Radio Box","~./img/ui-radio-button.png",false,true,true,true,"element","element"), COMBOBOX("Combo Box","~./img/ui-combo-box.png",true,true,true,true,"element","element"), INTSPINNER("Int Spinner","~./img/ui-spin.png",true,true,true,false,"element","element"), DECIMALSPINNER("Decimal Spinner","~./img/ui-spin.png",true,true,true,false,"element","element"); private final String name; private final String img; private final String draggable; private final String droppable; // Show Validation Tab in FormModal private final boolean validation; // Show Layout Tab in FormModal private final boolean layout; // Data Field private final boolean data; // Element Data Flag - Lookup or Value List private final boolean elementData; private ElementType(String name, String img, boolean validation, boolean layout, boolean data, boolean elementData, String draggable, String droppable) { this.name = name; this.img = img; this.validation = validation; this.layout = layout; this.data = data; this.elementData = elementData; this.draggable = draggable; this.droppable = droppable; } public String getName() { return name; } public String getImg() { return img; } public boolean isValidation() { return validation; } public boolean isLayout() { return layout; } public boolean isData() { return data; } public boolean isElementData() { return elementData; } public String getDraggable() { return draggable; } public String getDroppable() { return droppable; } public static EnumSet<ElementType> page = EnumSet.of(PAGE); public static EnumSet<ElementType> basic = EnumSet.of(TEXT,TEXTBOX,DATEBOX,INTBOX,DECIMALBOX,CHECKBOX,RADIOBOX,COMBOBOX,INTSPINNER,DECIMALSPINNER); }