Processing...

Suggested case list:

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

identify firefox or not in server side

1TonyQ198.203.175.1751nv2qreDec 10, 2011 4:25:04 AMlink

ZK addThis integration

1TonyQ198.203.175.1751apl96jNov 5, 2011 4:12:50 AMlink

Latest 10 Fiddles :

Another new ZK fiddle

1guest202.88.250.8030tu528Dec 7, 2019 5:02:20 AMlink

Using timer to refresh a grid

377guest189.211.185.16225nk0uiDec 7, 2019 12:52:31 AMlink

biglistbox scroll override

1guest213.61.180.1903hha7jdDec 6, 2019 9:49:15 AMlink

biglistbox scroll override

15guest220.134.32.2421pq0c6pDec 6, 2019 8:42:33 AMlink

Another new ZK fiddle

14guest220.134.32.2421pq0c6pDec 6, 2019 8:41:57 AMlink

biglistbox override

13guest220.134.32.2421pq0c6pDec 6, 2019 8:41:15 AMlink

Another new ZK fiddle

12guest220.134.32.2421pq0c6pDec 6, 2019 8:40:53 AMlink

Another new ZK fiddle

11guest220.134.32.2421pq0c6pDec 6, 2019 8:39:38 AMlink

biglistbox override

10guest220.134.32.2421pq0c6pDec 6, 2019 8:33:13 AMlink

biglistbox override

9guest220.134.32.2421pq0c6pDec 6, 2019 8:32:56 AMlink

Another new ZK fiddle

1guest103.40.48.2423ccnfc1Dec 3, 2019 4:55:38 AMlink

resources

index.zulzul <?link rel="stylesheet" type="text/css" href="/style.css"?> <window apply="org.zkoss.essentials.chapter4.mvc.TodoListController" border="normal" hflex="1" vflex="1" contentStyle="overflow:auto"> <caption src="/imgs/todo.png" sclass="fn-caption" label="Todo List (MVC)"/> <borderlayout> <center autoscroll="true" border="none"> <vlayout hflex="1" vflex="1"> <hbox align="center" hflex="1" sclass="todo-box"> <textbox id="todoSubject" hflex="1" placeholder="What needs to be done?" /> <button id="addTodo" image="/imgs/plus.png" width="36px"/> </hbox> <listbox id="todoListbox" vflex="1"> <listhead> <listheader width="30px" /> <listheader/> <listheader hflex="min"/> </listhead> <template name="model"> <listitem sclass="${each.complete?'complete-todo':''}" value="${each}"> <listcell> <checkbox forward="onCheck=todoListbox.onTodoCheck" checked="${each.complete}"/> </listcell> <listcell> <label value="${each.subject}"/> </listcell> <listcell> <button forward="onClick=todoListbox.onTodoDelete" image="/imgs/cross.png" width="36px"/> </listcell> </listitem> </template> </listbox> </vlayout> </center> <east id="selectedTodoBlock" visible="false" width="300px" border="none" collapsible="false" splittable="true" minsize="300" autoscroll="true"> <vlayout > <hbox align="center" hflex="1"> <checkbox id="selectedTodoCheck"/> <textbox id="selectedTodoSubject" hflex="1" /> </hbox> <grid hflex="1"> <columns> <column align="right" hflex="min"/> <column/> </columns> <rows> <row> <cell sclass="row-title">Priority :</cell> <cell> <radiogroup id="selectedTodoPriority"> <template name="model"> <radio label="${each.label}"/> </template> </radiogroup> </cell> </row> <row> <cell sclass="row-title">Date :</cell> <cell><datebox id="selectedTodoDate" width="200px"/></cell> </row> <row> <cell sclass="row-title">Description :</cell> <cell> <textbox id="selectedTodoDescription" multiline="true" hflex="1" height="200px" /> </cell> </row> </rows> </grid> <hlayout> <button id="updateSelectedTodo" label="Update"/> <button id="reloadSelectedTodo" label="Reload"/> </hlayout> </vlayout> </east> </borderlayout> </window> TodoListController.javajava import java.util.List; import org.zkoss.essentials.chapter4.TodoListServiceImpl; import org.zkoss.essentials.entity.Priority; import org.zkoss.essentials.entity.Todo; import org.zkoss.essentials.services.TodoListService; import org.zkoss.lang.Strings; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.ForwardEvent; import org.zkoss.zk.ui.select.SelectorComposer; import org.zkoss.zk.ui.select.annotation.Listen; import org.zkoss.zk.ui.select.annotation.Wire; import org.zkoss.zk.ui.util.Clients; import org.zkoss.zul.Button; import org.zkoss.zul.Checkbox; import org.zkoss.zul.Datebox; import org.zkoss.zul.ListModelList; import org.zkoss.zul.Listbox; import org.zkoss.zul.Listitem; import org.zkoss.zul.Radiogroup; import org.zkoss.zul.Textbox; public class TodoListController extends SelectorComposer<Component>{ private static final long serialVersionUID = 1L; //wire components @Wire Textbox todoSubject; @Wire Button addTodo; @Wire Listbox todoListbox; @Wire Component selectedTodoBlock; @Wire Checkbox selectedTodoCheck; @Wire Textbox selectedTodoSubject; @Wire Radiogroup selectedTodoPriority; @Wire Datebox selectedTodoDate; @Wire Textbox selectedTodoDescription; @Wire Button updateSelectedTodo; //services TodoListService todoListService = new TodoListServiceImpl(); //data for the view ListModelList<Todo> todoListModel; ListModelList<Priority> priorityListModel; Todo selectedTodo; @Override public void doAfterCompose(Component comp) throws Exception{ super.doAfterCompose(comp); //get data from service and wrap it to list-model for the view List<Todo> todoList = todoListService.getTodoList(); todoListModel = new ListModelList<Todo>(todoList); todoListbox.setModel(todoListModel); priorityListModel = new ListModelList<Priority>(Priority.values()); selectedTodoPriority.setModel(priorityListModel); } //when user clicks on the button or enters on the textbox @Listen("onClick = #addTodo; onOK = #todoSubject") public void doTodoAdd(){ //get user input from view String subject = todoSubject.getValue(); if(Strings.isBlank(subject)){ Clients.showNotification("Nothing to do ?",todoSubject); }else{ //save data selectedTodo = todoListService.saveTodo(new Todo(subject)); //update the model of listbox todoListModel.add(selectedTodo); //set the new selection todoListModel.addToSelection(selectedTodo); //refresh detail view refreshDetailView(); //reset value for fast typing. todoSubject.setValue(""); } } //when user checks on the checkbox of each todo on the list @Listen("onTodoCheck = #todoListbox") public void doTodoCheck(ForwardEvent evt){ //get data from event Checkbox cbox = (Checkbox)evt.getOrigin().getTarget(); Listitem litem = (Listitem)cbox.getParent().getParent(); boolean checked = cbox.isChecked(); Todo todo = (Todo)litem.getValue(); todo.setComplete(checked); //save data todo = todoListService.updateTodo(todo); if(todo.equals(selectedTodo)){ selectedTodo = todo; //refresh detail view refreshDetailView(); } //update listitem style ((Listitem)cbox.getParent().getParent()).setSclass(checked?"complete-todo":""); } //when user clicks the delete button of each todo on the list @Listen("onTodoDelete = #todoListbox") public void doTodoDelete(ForwardEvent evt){ Button btn = (Button)evt.getOrigin().getTarget(); Listitem litem = (Listitem)btn.getParent().getParent(); Todo todo = (Todo)litem.getValue(); //delete data todoListService.deleteTodo(todo); //update the model of listbox todoListModel.remove(todo); if(todo.equals(selectedTodo)){ //refresh selected todo view selectedTodo = null; refreshDetailView(); } } //when user selects a todo of the listbox @Listen("onSelect = #todoListbox") public void doTodoSelect() { if(todoListModel.isSelectionEmpty()){ //just in case for the no selection selectedTodo = null; }else{ selectedTodo = todoListModel.getSelection().iterator().next(); } refreshDetailView(); } private void refreshDetailView() { //refresh the detail view of selected todo if(selectedTodo==null){ //clean selectedTodoBlock.setVisible(false); selectedTodoCheck.setChecked(false); selectedTodoSubject.setValue(null); selectedTodoDate.setValue(null); selectedTodoDescription.setValue(null); updateSelectedTodo.setDisabled(true); priorityListModel.clearSelection(); }else{ selectedTodoBlock.setVisible(true); selectedTodoCheck.setChecked(selectedTodo.isComplete()); selectedTodoSubject.setValue(selectedTodo.getSubject()); selectedTodoDate.setValue(selectedTodo.getDate()); selectedTodoDescription.setValue(selectedTodo.getDescription()); updateSelectedTodo.setDisabled(false); priorityListModel.addToSelection(selectedTodo.getPriority()); } } //when user clicks the update button @Listen("onClick = #updateSelectedTodo") public void doUpdateClick(){ if(Strings.isBlank(selectedTodoSubject.getValue())){ Clients.showNotification("Nothing to do ?",selectedTodoSubject); return; } selectedTodo.setComplete(selectedTodoCheck.isChecked()); selectedTodo.setSubject(selectedTodoSubject.getValue()); selectedTodo.setDate(selectedTodoDate.getValue()); selectedTodo.setDescription(selectedTodoDescription.getValue()); selectedTodo.setPriority(priorityListModel.getSelection().iterator().next()); //save data and get updated Todo object selectedTodo = todoListService.updateTodo(selectedTodo); //replace original Todo object in listmodel with updated one todoListModel.set(todoListModel.indexOf(selectedTodo), selectedTodo); //show message for user Clients.showNotification("Todo saved"); } //when user clicks the update button @Listen("onClick = #reloadSelectedTodo") public void doReloadClick(){ refreshDetailView(); } }TodoListServiceImpl.javajava import java.util.ArrayList; import java.util.Calendar; import java.util.Date; import java.util.List; import org.zkoss.essentials.entity.Priority; import org.zkoss.essentials.entity.Todo; import org.zkoss.essentials.services.TodoListService; public class TodoListServiceImpl implements TodoListService { static int todoId = 0; static List<Todo> todoList = new ArrayList<Todo>(); static{ todoList.add(new Todo(todoId++,"Buy some milk",Priority.LOW,null,null)); todoList.add(new Todo(todoId++,"Dennis' birthday gift",Priority.MEDIUM,dayAfter(10),null)); todoList.add(new Todo(todoId++,"Pay credit-card bill",Priority.HIGH,dayAfter(5),"$1,000")); } private static Date dayAfter(int d){ Calendar c = Calendar.getInstance(); c.add(Calendar.DATE, d); return c.getTime(); } /** synchronized is just because we use static userList in this demo to prevent concurrent access **/ public synchronized List<Todo>getTodoList() { List<Todo> list = new ArrayList<Todo>(); for(Todo todo:todoList){ list.add(Todo.clone(todo)); } return list; } /** synchronized is just because we use static userList in this demo to prevent concurrent access **/ public synchronized Todo getTodo(Integer id){ int size = todoList.size(); for(int i=0;i<size;i++){ Todo t = todoList.get(i); if(t.getId().equals(id)){ return Todo.clone(t); } } return null; } /** synchronized is just because we use static userList in this demo to prevent concurrent access **/ public synchronized Todo saveTodo(Todo todo){ todo = Todo.clone(todo); todo.setId(todoId++); todoList.add(todo); return todo; } /** synchronized is just because we use static userList in this demo to prevent concurrent access **/ public synchronized Todo updateTodo(Todo todo){ if(todo.getId()==null){ throw new IllegalArgumentException("cann't save a null-id todo, save it first"); }else{ todo = Todo.clone(todo); int size = todoList.size(); for(int i=0;i<size;i++){ Todo t = todoList.get(i); if(t.getId().equals(todo.getId())){ todoList.set(i, todo); return todo; } } throw new RuntimeException("Todo not found "+todo.getId()); } } /** synchronized is just because we use static userList in this demo to prevent concurrent access **/ public synchronized void deleteTodo(Todo todo){ if(todo.getId()!=null){ int size = todoList.size(); for(int i=0;i<size;i++){ Todo t = todoList.get(i); if(t.getId().equals(todo.getId())){ todoList.remove(i); return; } } } } } style.csscss.banner { background-color:#102d35; color: white; padding: 5px 10px; } .banner-head{ font-size: 2.4em; } .banner .logout{ text-decoration: underline; cursor: pointer; } .footer { background-color:#102d35; color: white; padding-top: 5px; } .footer a,.footer a:VISITED { color: white; } .sidebar a,.sidebar a:VISITED { color: black; text-decoration: none; } .sidebar-fn{ cursor: pointer; } .head1{ font-size: large; } .head2{ font-size: medium; } .row-title .z-label{ font-weight: bold; color:#636363; } .fn-caption .z-caption-l{ font-weight: bold; font-size: medium; color: #636363; } .complete-todo .z-label{ text-decoration: line-through; } .warn{ color:red; } .demo-main a,.demo-main a:VISITED{ color:#636363; text-decoration: underline; font-size: smaller; } .todo-box { padding-right:4px; }