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 :

combobox long comboitem

4guest108.162.221.13617ljsinJun 13, 2024 7:41:58 AMlink

search box

1guest162.158.178.591td9gqbJun 13, 2024 1:56:31 AMlink

Messagebox progress bar

1guest162.158.129.1862331bsuJun 11, 2024 10:12:09 PMlink

Vflex

39guest172.70.134.752vd369jJun 11, 2024 8:55:42 PMlink

Vflex

38guest172.70.34.882vd369jJun 11, 2024 8:54:26 PMlink

Vflex

37guest172.70.34.882vd369jJun 11, 2024 8:54:21 PMlink

Vflex

36guest172.70.34.882vd369jJun 11, 2024 8:54:21 PMlink

Vflex

35guest172.70.34.882vd369jJun 11, 2024 8:54:20 PMlink

flex broken zk 10

1guest172.69.135.201uue6c5Jun 11, 2024 4:46:35 PMlink

Another new ZK fiddle

6guest172.69.192.2103tip2nmJun 10, 2024 11:24:07 AMlink

Another new ZK fiddle

6guest172.69.192.2103tip2nmJun 10, 2024 11:24:07 AMlink

resources

index.zulzul<zk>     <div apply="pkg$.demo.app.zk_calendar.CalendarController">         <hlayout valign="middle">             <button id="today" label="Today" />             <button id="prev" iconSclass="z-icon-arrow-left"/>             <button id="next" iconSclass="z-icon-arrow-right"/>             <separator width="50px" />             <button id="pageDay" label="Day" width="60px" />             <button id="pageWeek" label="Week" width="60px"/>             <button id="pageMonth" label="Month" width="60px"/>             <separator width="50px"/>             Filter :             <textbox id="filter"/>             <button id="applyFilter" label="Apply"/>             <button id="resetFilter" label="Reset"/>         </hlayout>         <separator bar="true" height="20px"/>         <calendars id="calendars" firstDayOfWeek="Sunday" height="600px" timeZone="Main=GMT+0" mold="month"/>     </div>       <!-- Create/Update Event Popup -->     <include src="calendar_editor.zul" /> </zk>CalendarController.javajavapackage demo.app.zk_calendar;   import java.util.Calendar; import java.util.TimeZone;   import org.zkoss.calendar.CalendarWebAppInit; import org.zkoss.calendar.Calendars; import org.zkoss.calendar.event.CalendarsEvent; import org.zkoss.web.fn.ServletFns; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; 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.sys.PageCtrl; import org.zkoss.zkmax.ui.select.annotation.Subscribe; import org.zkoss.zul.Style; import org.zkoss.zul.Textbox; import org.zkoss.zul.theme.Themes;   import javax.servlet.ServletException;     public class CalendarController extends SelectorComposer<Component> {       private static final long serialVersionUID = 1L;       @Wire     private Calendars calendars;     @Wire     private Textbox filter;           private DemoCalendarModel calendarModel;           //the in editing calendar ui event     private CalendarsEvent calendarsEvent = null;       @Override     public void doAfterCompose(Component comp) throws Exception {         overrideCalendarTheme(comp);           super.doAfterCompose(comp);         calendarModel = new DemoCalendarModel(new DemoCalendarData().getCalendarEvents());         calendars.setModel(this.calendarModel);     }       /**      * TODO: remove workaround once https://tracker.zkoss.org/browse/ZK-4771 is available and zk-calendar supports it      */     private void overrideCalendarTheme(Component comp) throws ServletException {         String uri = CalendarWebAppInit.getCalendarThemeURI(Themes.getCurrentTheme());         new Style(uri).setPage(comp.getPage());     }       //control the calendar position     @Listen("onClick = #today")     public void gotoToday(){         TimeZone timeZone = calendars.getDefaultTimeZone();         calendars.setCurrentDate(Calendar.getInstance(timeZone).getTime());     }     @Listen("onClick = #next")     public void gotoNext(){         calendars.nextPage();     }     @Listen("onClick = #prev")     public void gotoPrev(){         calendars.previousPage();     }           //control page display     @Listen("onClick = #pageDay")     public void changeToDay(){         calendars.setMold("default");         calendars.setDays(1);     }     @Listen("onClick = #pageWeek")     public void changeToWeek(){         calendars.setMold("default");         calendars.setDays(7);     }     @Listen("onClick = #pageMonth")     public void changeToYear(){         calendars.setMold("month");     }           //control the filter     @Listen("onClick = #applyFilter")     public void applyFilter(){         calendarModel.setFilterText(filter.getValue());         calendars.setModel(calendarModel);     }     @Listen("onClick = #resetFilter")     public void resetFilter(){         filter.setText("");         calendarModel.setFilterText("");         calendars.setModel(calendarModel);     }       //listen to the calendar-create and edit of a event data     @Listen(CalendarsEvent.ON_ITEM_CREATE + " = #calendars; " +             CalendarsEvent.ON_ITEM_EDIT + "  = #calendars")     public void createEvent(CalendarsEvent event) {         calendarsEvent = event;                   //to display a shadow when editing         calendarsEvent.stopClearGhost();                   DemoCalendarEvent data = (DemoCalendarEvent)event.getCalendarItem();                   if(data == null) {             data = new DemoCalendarEvent();             data.setHeaderColor("#3366ff");             data.setContentColor("#6699ff");             data.setBeginDate(event.getBeginDate());             data.setEndDate(event.getEndDate());         } else {             data = (DemoCalendarEvent) event.getCalendarItem();         }         //notify the editor         QueueUtil.lookupQueue().publish(                 new QueueMessage(QueueMessage.Type.EDIT,data));     }           //listen to the calendar-update of event data, usually send when user drag the event data     @Listen(CalendarsEvent.ON_ITEM_UPDATE + " = #calendars")     public void updateEvent(CalendarsEvent event) {         DemoCalendarEvent data = (DemoCalendarEvent) event.getCalendarItem();         data.setBeginDate(event.getBeginDate());         data.setEndDate(event.getEndDate());         calendarModel.update(data);     }           //listen to queue message from other controller     @Subscribe(value = QueueUtil.QUEUE_NAME)     public void handleQueueMessage(Event event) {         if(!(event instanceof QueueMessage)) {             return;         }         QueueMessage message = (QueueMessage)event;         switch(message.getType()){         case DELETE:             calendarModel.remove((DemoCalendarEvent)message.getData());             //clear the shadow of the event after editing             calendarsEvent.clearGhost();             calendarsEvent = null;             break;         case OK:             if (calendarModel.indexOf((DemoCalendarEvent)message.getData()) >= 0) {                 calendarModel.update((DemoCalendarEvent)message.getData());             } else {                 calendarModel.add((DemoCalendarEvent)message.getData());             }         case CANCEL:             //clear the shadow of the event after editing             calendarsEvent.clearGhost();             calendarsEvent = null;             break;         }     }   }calendar_editor.zul.zulzul<div viewModel="@id('vm') @init('pkg$.demo.app.zk_calendar.CalendarEditorViewModel')" validationMessages="@id('vmsgs')">     <window title="Create Calendar Event" border="normal" width="400px"         form="@id('fx') @load(vm.calendarEvent) @save(vm.calendarEvent, before='ok') @validator(vm.dateValidator)"         allDay="@ref(vm.isAllDay(fx.beginDate,fx.endDate))"         mode="popup" visible="@load(vm.visible)" position="center,center" >         <vlayout hflex="1">             <hlayout valign="middle">                 Lock this event : <checkbox checked="@bind(fx.locked)" />                 All Day: <checkbox checked="@load(allDay)" disabled="true" />             </hlayout>             <grid hflex='1'>                 <columns>                     <column width="100px" align="right" />                     <column />                 </columns>                 <rows>                     <row>                         BeginDate:                         <div>                             <datebox hflex="1" locale="en" timeZone="GMT+0"                                 format="@load(allDay ? 'long' : 'long+medium')"                                 value="@bind(fx.beginDate)" errorMessage="@load(vmsgs.beginDate)" />                         </div>                     </row>                     <row>                         EndDate:                         <div>                             <datebox hflex="1" locale="en" timeZone="GMT+0"                                 format="@load(allDay ? 'long' : 'long+medium')"                                 value="@bind(fx.endDate)" errorMessage="@load(vmsgs.endDate)"/>                         </div>                     </row>                     <row>                         Color:                         <hlayout valign="middle">                             Border <colorbox value="@bind(fx.headerColor)" />                             Content <colorbox value="@bind(fx.contentColor)" />                         </hlayout>                               </row>                     <row>                         Title:                         <textbox multiline="true" rows="3" width="97%"                             value="@bind(fx.content)" />                     </row>                     <row>                         <cell colspan="2" style="text-align:center;">                             <hlayout>                                 <button label="OK" onClick="@command('ok')" width="80px" />                                 <button label="Cancel" onClick="@command('cancel')" width="80px" />                                 <button label="Delete" onClick="@command('delete')" width="80px" />                             </hlayout>                         </cell>                     </row>                 </rows>             </grid>         </vlayout>     </window> </div>QueueMessage.javajava import org.zkoss.zk.ui.event.Event;   public class QueueMessage extends Event {     private static final long serialVersionUID = 1L;       static public enum Type {         EDIT, OK, DELETE, CANCEL;     }           private Type type;     private Object data;           public QueueMessage(Type type) {         super("onCalendarMessage");         this.type = type;     }     public QueueMessage(Type type, Object data) {         this(type);         this.data = data;     }       public Type getType() {         return type;     }       public Object getData() {         return data;     } } CalendarEditorViewModel.javajava   import java.util.Date; import java.util.Map;   import org.zkoss.bind.BindUtils; import org.zkoss.bind.Property; import org.zkoss.bind.ValidationContext; import org.zkoss.bind.Validator; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.Init; import org.zkoss.bind.annotation.NotifyChange; import org.zkoss.bind.validator.AbstractValidator; import org.zkoss.zk.ui.event.EventListener;   public class CalendarEditorViewModel {           private DemoCalendarEvent calendarEventData = new DemoCalendarEvent();           private boolean visible = false;       public DemoCalendarEvent getCalendarEvent() {         return calendarEventData;     }       public boolean isVisible() {         return visible;     }       public void setVisible(boolean visible) {         this.visible = visible;     }       @Init     public void init() {         //subscribe a queue, listen to other controller         QueueUtil.lookupQueue().subscribe(new QueueListener());     }       private void startEditing(DemoCalendarEvent calendarEventData) {         this.calendarEventData = calendarEventData;         visible = true;                   //reload entire view-model data when going to edit         BindUtils.postNotifyChange(null, null, this, "*");     }             public boolean isAllDay(Date beginDate,Date endDate) {         int M_IN_DAY = 1000 * 60 * 60 * 24;         boolean allDay = false;                   if(beginDate != null && endDate != null) {             long between = endDate.getTime() - beginDate.getTime();             allDay = between > M_IN_DAY;         }         return allDay;     }           public Validator getDateValidator(){         return new AbstractValidator(){             @Override             public void validate(ValidationContext ctx) {                 Map<String,Property> formData = ctx.getProperties(ctx.getProperty().getValue());                 Date beginDate = (Date)formData.get("beginDate").getValue();                 Date endDate = (Date)formData.get("endDate").getValue();                 if(beginDate==null){                     addInvalidMessage(ctx, "beginDate","Begin date is empty");                 }                 if(endDate==null){                     addInvalidMessage(ctx, "endDate","End date is empty");                 }                 if(beginDate!=null && endDate!=null && beginDate.compareTo(endDate) >= 0){                     addInvalidMessage(ctx, "endDate","End date is before begin date");                 }             }         };     }       @Command     @NotifyChange("visible")     public void cancel() {         QueueMessage message = new QueueMessage(QueueMessage.Type.CANCEL);         QueueUtil.lookupQueue().publish(message);         this.visible = false;     }       @Command     @NotifyChange("visible")     public void delete() {         QueueMessage message = new QueueMessage(QueueMessage.Type.DELETE, calendarEventData);         QueueUtil.lookupQueue().publish(message);         this.visible = false;     }       @Command     @NotifyChange("visible")     public void ok() {         QueueMessage message = new QueueMessage(QueueMessage.Type.OK, calendarEventData);         QueueUtil.lookupQueue().publish(message);         this.visible = false;     }       private class QueueListener implements EventListener<QueueMessage> {         @Override         public void onEvent(QueueMessage message)                 throws Exception {             if (QueueMessage.Type.EDIT.equals(message.getType())){                 CalendarEditorViewModel.this.startEditing((DemoCalendarEvent)message.getData());             }         }     } }DemoCalendarData.javajavaimport java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.LinkedList; import java.util.List;   import org.zkoss.calendar.api.CalendarItem;     public class DemoCalendarData {       private List<CalendarItem> calendarEvents = new LinkedList<>();     private final SimpleDateFormat DATA_FORMAT = new SimpleDateFormat("yyyy/MM/dd HH:mm");     private Calendar cal = Calendar.getInstance();       public DemoCalendarData() {         init();     }       private void init() {         int mod = cal.get(Calendar.MONTH) + 1;         int year = cal.get(Calendar.YEAR);         String date2 = mod > 9 ? year + "/" + mod + "" : year + "/" + "0" + mod;         String date1 = --mod > 9 ? year + "/" + mod + "" : year + "/" + "0" + mod;         ++mod;         String date3 = ++mod > 9 ? year + "/" + mod + "" : year + "/" + "0" + mod;         // Red Events         calendarEvents.add(new DemoCalendarEvent(getDate(date1 + "/28 00:00"), getDate(date1 + "/29 00:00"), "#A32929", "#D96666", "ZK Jet Released"));         calendarEvents.add(new DemoCalendarEvent(getDate(date1 + "/04 02:00"), getDate(date1 + "/05 03:00"), "#A32929", "#D96666", "Experience ZK SpreadSheet Live Demo!"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/21 05:00"), getDate(date2 + "/21 07:00"), "#A32929", "#D96666", "New Features of ZK Spreadsheet"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/08 00:00"), getDate(date2 + "/09 00:00"), "#A32929", "#D96666", "ZK Spreadsheet Released"));         // Blue Events         calendarEvents.add(new DemoCalendarEvent(getDate(date1 + "/29 03:00"), getDate(date2 + "/02 06:00"), "#3467CE", "#668CD9", "ZK Released"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/02 10:00"), getDate(date2 + "/02 12:30"), "#3467CE", "#668CD9", "New Feature of ZK "));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/17 14:00"), getDate(date2 + "/18 16:00"), "#3467CE", "#668CD9", "Case Study - Mecatena"));         calendarEvents.add(new DemoCalendarEvent(getDate(date3 + "/01 14:30"), getDate(date3 + "/01 17:30"), "#3467CE", "#668CD9", "ZK Unit Testing Project - zunit"));         // Purple Events         calendarEvents.add(new DemoCalendarEvent(getDate(date1 + "/29 08:00"), getDate(date2 + "/03 12:00"), "#7A367A", "#B373B3", "ZK Studio released"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/07 08:00"), getDate(date2 + "/07 12:00"), "#7A367A", "#B373B3", "Tutorial : Reading from the DB with Netbeans and ZK"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/13 11:00"), getDate(date2 + "/13 14:30"), "#7A367A", "#B373B3", "Small talk - ZK Charts"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/16 14:00"), getDate(date2 + "/18 16:00"), "#7A367A", "#B373B3", "Style Guide for ZK released !"));         calendarEvents.add(new DemoCalendarEvent(getDate(date3 + "/02 12:00"), getDate(date3 + "/02 17:00"), "#7A367A", "#B373B3", "Small talk -- Simple Database Access From ZK"));         // Khaki Events         calendarEvents.add(new DemoCalendarEvent(getDate(date1 + "/03 00:00"), getDate(date1 + "/04 00:00"), "#88880E", "#BFBF4D", "ZK UK User Group"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/13 05:00"), getDate(date2 + "/13 07:00"), "#88880E", "#BFBF4D", "How to Test ZK Application with Selenium"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/24 19:30"), getDate(date2 + "/24 20:00"), "#88880E", "#BFBF4D", "ZK Alfresco Talk"));         calendarEvents.add(new DemoCalendarEvent(getDate(date3 + "/03 00:00"), getDate(date3 + "/04 00:00"), "#88880E", "#BFBF4D", "ZK selected as SourceForge.net Project of the Month"));         // Green Events         calendarEvents.add(new DemoCalendarEvent(getDate(date1 + "/28 10:00"), getDate(date1 + "/28 12:30"), "#0D7813", "#4CB052", "ZK Mobile Released"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/03 00:00"), getDate(date2 + "/03 05:30"), "#0D7813", "#4CB052", "ZK Gmaps released"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/05 20:30"), getDate(date2 + "/06 00:00"), "#0D7813", "#4CB052", "Refresh with Five New ZK Themes!"));         calendarEvents.add(new DemoCalendarEvent(getDate(date2 + "/23 00:00"), getDate(date2 + "/25 16:30"), "#0D7813", "#4CB052", "ZK Roadmap Announced"));         calendarEvents.add(new DemoCalendarEvent(getDate(date3 + "/01 08:30"), getDate(date3 + "/01 19:30"), "#0D7813", "#4CB052", "Build Database CRUD Application in 6 Steps"));     }       private Date getDate(String dateText) {         try {             return DATA_FORMAT.parse(dateText);         } catch (ParseException e) {             e.printStackTrace();         }         return null;     }       public List<CalendarItem> getCalendarEvents() {         return calendarEvents;     } }DemoCalendarEvent.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 org.zkoss.bind.annotation.*; import java.util.Date; import org.zkoss.bind.annotation.Immutable; import org.zkoss.calendar.impl.SimpleCalendarEvent;   public class DemoCalendarEvent extends SimpleCalendarEvent {     private static final long serialVersionUID = 1L;       public DemoCalendarEvent(Date beginDate, Date endDate, String headerColor, String contentColor, String content) {         setHeaderColor(headerColor);         setContentColor(contentColor);         setContent(content);         setBeginDate(beginDate);         setEndDate(endDate);     }       public DemoCalendarEvent(Date beginDate, Date endDate, String headerColor, String contentColor, String content,             String title) {         setHeaderColor(headerColor);         setContentColor(contentColor);         setContent(content);         setTitle(title);         setBeginDate(beginDate);         setEndDate(endDate);     }       public DemoCalendarEvent(Date beginDate, Date endDate, String headerColor, String contentColor, String content,             String title, boolean locked) {         setHeaderColor(headerColor);         setContentColor(contentColor);         setContent(content);         setTitle(title);         setBeginDate(beginDate);         setEndDate(endDate);         setLocked(locked);     }           public DemoCalendarEvent() {         setHeaderColor("#FFFFFF");         setContentColor("#000000");     }           @Override     @Immutable     public Date getBeginDate() {         return super.getBeginDate();     }       @Override     @Immutable     public Date getEndDate() {         return super.getEndDate();     } }DemoCalendarModel.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.Date; import java.util.Iterator; import java.util.LinkedList; import java.util.List; import org.zkoss.calendar.api.CalendarItem; import org.zkoss.calendar.api.RenderContext; import org.zkoss.calendar.impl.SimpleCalendarModel;   public class DemoCalendarModel extends SimpleCalendarModel {     private static final long serialVersionUID = 1L;           private String filterText = "";       public DemoCalendarModel(List<CalendarItem> calendarEvents) {         super(calendarEvents);     }       public void setFilterText(String filterText) {         this.filterText = filterText;     }       @Override     public List<CalendarItem> get(Date beginDate, Date endDate, RenderContext rc) {         List<CalendarItem> list = new LinkedList<CalendarItem>();         long begin = beginDate.getTime();         long end = endDate.getTime();                           for (Iterator<?> itr = _list.iterator(); itr.hasNext();) {             Object obj = itr.next();             CalendarItem ce = obj instanceof CalendarItem ? (CalendarItem)obj : null;                           if(ce == null) break;                           long b = ce.getBeginDate().getTime();             long e = ce.getEndDate().getTime();             if (e >= begin && b < end && ce.getContent().toLowerCase().contains(filterText.toLowerCase()))                 list.add(ce);         }         return list;     }   }