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 :

ZK checkmark listbox

2MDuchemin108.162.215.121eqo704Jan 20, 2021 7:14:20 AMlink

ZK checkmark listbox

1MDuchemin108.162.215.121eqo704Jan 20, 2021 7:14:14 AMlink

ZK checkmark listbox

12MDuchemin108.162.215.123gunesaJan 20, 2021 7:14:12 AMlink

listbox item selection

1cor3000108.162.215.121002pcsJan 20, 2021 4:43:30 AMlink

ZK-4775

1Leon03172.69.34.14432itddtJan 20, 2021 3:45:28 AMlink

canvas fiddle

2guest141.101.104.2818h9bb5Jan 19, 2021 5:32:33 PMlink

canvas fiddle

1FENE162.158.111.4918h9bb5Jan 19, 2021 5:06:58 PMlink

Open tree

44guest162.158.22.1443svt4igJan 19, 2021 2:26:57 PMlink

ZK checkmark listbox

11MDuchemin172.69.34.1763gunesaJan 19, 2021 10:35:51 AMlink

ZK checkmark listbox

10MDuchemin172.69.34.1763gunesaJan 19, 2021 10:33:52 AMlink

All About buttons

1guest108.162.215.12fgmb30Jan 13, 2021 1:32:09 PMlink

resources

index.zulzul Tags People Badges Help gil0109 | karma: 1Sign outZK Forum logo Products Demos Downloads Why ZK Community Documentation Support ALLUNANSWEREDFOLLOWED search or ask your question 0 Button will show Color Change but no Click Callback zk asked Oct 23 '12 ansancle gravatar image ansancle 317 ● 8 We are running into an issue where you can click on a button (mostly on the Ipad) and sometimes you will get the button to highlight with the blue selection color (we are using mold="trendy" for the buttons) but the buttons onClick callback is not made. I have the following in my CSS as recommended for tablet use : * { cursor:pointer; } Does anyone have any ideas why this is happening? Our customer is getting very irritated with us since he can get the button to change color on a press like it's clicked but nothing happens since we didn't get the callback. Thanks! Andy flag offensive 19 Replies Sort by » oldestnewest « previous12 answered Jan 1 '13 MontyPan gravatar image MontyPan 435 ● 3 http://xitop.blogspot.com... Hi Andy, A short answer: Yes, it's possible. But... You must listen "touchstart" event, not traditional "click" event. The "touchstart" can be triggered for every click no matter how fast the end user touch the screen. ZK wan't to keep code the same on both desktop and tablet, so keep the "onClick" interface and still listen "click" event. In other words, you must write ZK client side code to satisfied this feature. Reference: ZK Client-side Reference, Touch Test BTW, I am Monty, not Monti... 囧rz Regards, Monty Pan link publish delete flag offensive edit answered Jan 2 '13 ansancle gravatar image ansancle 317 ● 8 Monty, sorry about the name goof! Thanks so much for this pointer, I will look into it. If I come up with something that seems good I will post here for others. thanks again!! link publish delete flag offensive edit answered Jan 2 '13 ansancle gravatar image ansancle 317 ● 8 updated Jan 2 '13 Monty, I tried the following which looks like it should work -but it makes the page fail to load due to a JS error : <button id="_newTestButton" label="onTouch Test Button" xmlns:w="http://www.zkoss.org/2005/zk/client" w:ontouchstart="this.onClick()"></button> The Error is shown below, of course if I use w:onClick="this.setLabel('FOO')" that works fine. TypeError: this.onClick is not a function this.onClick() I also tried this which still caused an error : <script type="text/javascript" defer="true"> var msgWidget = zk.Widget.$(jq('$_newTestButton')); msgWidget.addEventListener('touchstart', function(event) { alert(event.touches.length); }, false); </script> The error is : TypeError: msgWidget.addEventListener is not a function I also tried the following but this didn't work : <button id="_basicTestButton" label="Basic Test Button" width="${headerButtonWidth}" height="${headerButtonHeight}" > </button> <script defer="true"> this.$f()._basicTestButton.listen({ontouchstart: function () {alert('touched')}}); </script> And this didn't work either in my GenericForwardComposer ; @Override public void doAfterCompose(Component comp) throws Exception { // TODO Auto-generated method stub super.doAfterCompose(comp); _newTestButton.setWidgetListener("ontouchstart", "alert('touched')"); } Sorry to keep bothering you on this - I feel like I am so close to the solution but am missing the final piece. link publish delete flag offensive edit answered Jan 2 '13 MontyPan gravatar image MontyPan 435 ● 3 http://xitop.blogspot.com... Hi Andy...... :'( I beg that don't ask more detail, because (in my personal opinion) ZK client side architecture is fxxking terrible nightmare. (Just my personal opinion :X ) In short words, the HTML event can't use directly in ZK client side code (in most case), so there is no "onTouchStart" ZK listener, you must listen it on DOM level, so use jq() to bind event and listener, you can't use doClick_ directly because that ZK method block something ... blahblah... I even don't know what I say..... (flee) Anyway, here we are: <button id="_basicTestButton" label="Test Button" xmlns:w="http://www.zkoss.org/2005/zk/client"> <attribute w:name="doTouch_"> function (evt) { console.log("aaa"); } </attribute> </button> <script defer="true"> var fooBtn = this.$f()._basicTestButton; jq(fooBtn.$n()).bind("touchstart", fooBtn.proxy(fooBtn.doTouch_)); </script> This is just a simple, quick example, could/must be refactory. BUT It works on my iPad (with Firebug plugin) as expect. Good luck pal... have a nice dream... (flee) Regards, Monty Pan link publish delete flag offensive edit answered Jan 3 '13 ansancle gravatar image ansancle 317 ● 8 Monty, thanks, I'll try and take it from here and not bug you anymore! I have found a reasonable workaround for buttons that are statically defined in my application that uses mouseDown/mouseUp and zAu.send - I will post later. thanks again for you help - you opened up several new doors for fixing this I would not have been able to figure out. link publish delete flag offensive edit answered Jan 6 '13 MontyPan gravatar image MontyPan 435 ● 3 http://xitop.blogspot.com... Hi Andy, I am glad of my reply can help you and also look forward to your solution(s). (Maybe the actual problem is... There are too many "doors" in ZK... :'( ) Regards, Monty Pan link publish delete flag offensive edit answered Jan 7 '13 ansancle gravatar image ansancle 317 ● 8 Couple items - first we found the following which seems to point to part of our problem - apparently there is a 300ms delay on clicks on tablet devices. This link talks about fast clicks and is a library for getting around this delay - I have not tested it as I am using a different solution : https://github.com/ftlabs/fastclick If the above works that would be cleaner and easier than what I ended up doing. In a nutshell what I did is to capture the onMouseDown event for the buttons and then call a javascript function - say handleMyButtonClick for example. Inside the javascript function I use the zAu.send to make the call to my java code (which is a sublcass of GenericForwardComposer). <zk> <script type="text/javascript" > function handleMyButtonClick(attributeName,id) { var dataArray = new Array(); dataArray[0] = attributeName; dataArray[1] = id; var windowWidget = zk.Widget.$('$_dhWindow'); zAu.send(new zk.Event(windowWidget, 'onMyButtonClicked',dataArray)); } </script> <window id="_dhWindow" xmlns:w="http://www.zkoss.org/2005/zk/client" apply="com.dh.ui.ipad.view.video.DHzVideoHomeView" > <!-- NOTE THAT THE ID FOR THE WINDOW MATCHES THE ON IN THE JS FUNCTION CALL !! --> .... <button id="blah" w:onMouseDown="handleMyButtonClick('foo',23329);"/> </window> </zk> Here is the Java Code public void onMyButtonClicked(Event event) throws Exception { Object[] array = (Object[])event.getData(); // you can then extract the parameters you loaded in the javascript function out of the array and do what you need to do // This basically gets around the onClick$blah(Event event) which was too slow and inconsistent } This works every time no matter how fast you click - as fast as I can move my fingers on the Ipad I get my callbacks, I have not been able to make it miss once. Ideally I would love to have the standard onClick work this way but until then this is a useable workaround that isn't hard at all to implement. It required no changes to my functional code -- only where I get the callbacks. Anyways - not ideal but at least it works. I also took over the setting of the button click colors via css so I set the button to the click color, not ZK. This eliminated false highlighting indicators with no callback. The following CSS will stop ZK from making a button highlighted when clicked, and then all you need to do is manually set the Sclass to "dhButtonClcked" to get it ot show the highlight color, setting it back to ".dhButton" will remove the highlight .z-button:focus { outline: none !important; } .z-button-focus .z-button-tl, .z-button-focus .z-button-cl { background-position: 0 0; font-size: 0px; } .z-button-over .z-button-cl{ background-position: 0 0; } .z-button-clk .z-button-cl { background-position: 0 0; } .z-button-focus .z-button-cr { background-position: -4px 0; } .z-button-clk .z-button-cr { background-position: -4px 0; } .z-button-focus .z-button-cr { background-position: -4px 0; } .z-button-over .z-button-cr { background-position: -4px 0; } .z-button-focus .z-button-tl { background-position: 0 0; } .z-button-clk .z-button-tl { background-position: 0 0; } .z-button-focus .z-button-tl { background-position: 0 0; } .z-button-clk .z-button-br { background-position: -4px -4px; } .z-button-focus .z-button-br { background-position: -4px -4px; } .z-button-focus .z-button-tr { background-position: -4px 0; } .z-button-clk .z-button-tr { background-position: -4px 0; } .z-button-focus .z-button-tr { background-position: -4px 0; } .z-button-focus .z-button-bl { background-position: 0 -4px; } .z-button-over .z-button-bl { background-position: 0 -4px; } .z-button-clk .z-button-bl { background-position: 0 -4px; } .z-button-focus .z-button-cm { background-position: 0 0; } .z-button-over .z-button-cm { background-position: 0 0; } .z-button-clk .z-button-cm { background-position: 0 0; padding: 0 0 0 0; } .z-button .z-button-tm { background-repeat: repeat-x; background-position: 0 0; } .z-button .z-button-bm { height: 4px; background-repeat: repeat-x; background-position: 0 -4px; } .z-button-focus .z-button-tm { background-position: 0 0; } .z-button-focus .z-button-bm { background-position: 0 -4px; } .z-button-over .z-button-tm { background-position: 0 0; } .z-button-over .z-button-bm { background-position: 0 -4px; } .z-button-clk .z-button-tm{ background-position: 0 0; } .z-button-clk .z-button-bm { background-position: 0 -4px; } .dhButtonClicked .z-button-tl, .dhButtonClicked .z-button-cl { background-position: -24px 0; } .dhButtonClicked .z-button-tr, .dhButtonClicked .z-button-cr { background-position: -28px 0; } .dhButtonClicked .z-button-bl { background-position: -24px -4px; } .dhButtonClicked .z-button-br { background-position: -28px -4px; } .dhButtonClicked .z-button-tm { background-position: 0 -24px; } .dhButtonClicked .z-button-bm { background-position: 0 -28px; } .dhButtonClicked .z-button-cm { background-position: 0 -1500px; padding: 0 6px 0 8px; } .dhButton .z-button {} link publish delete flag offensive edit answered Jan 7 '13 MontyPan gravatar image MontyPan 435 ● 3 http://xitop.blogspot.com... Hi Andy, Thanks for your sharing. I am sorry that I forgot the onMouseDown... Orz BTW, if you think ZK should provide native "fast click feature", please create a issue on ZK Tracker Regards, Monty Pan link publish delete flag offensive edit answered Jan 8 '13 ansancle gravatar image ansancle 317 ● 8 I will do that - thanks again for all your help. This was a MAJOR problem and our customer was really not happy about it. Without your input I would not have ended up with the solution. I will post a request to the feature tracker. link publish delete flag offensive edit « previous12 Your reply Please try to give a substantial answer. Please don't forget to vote. answer must be > 10 characters [hide preview] Post Your Answer Question tools Follow 1 follower email the updates RSS Stats Asked: Oct 23 '12 Seen: 450 times Last updated: Jan 08 '13 Related questions Using controller Error: Replicated language: xul/html php Window Overlapped Echo/Casabac [closed] OnClick on label Problem with Checkbox [closed] Look of a control [closed] Documentation? Combo Box About Us | Faq | Help | Contact Us Copyright Potix Corporation 2015. Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license. Support Options Email Support Training Consulting Outsourcing Learn More