Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
Another new ZK fiddle
2guest172.71.134.130218n5u0Apr 25, 2024 10:30:00 AMlinkAnother new ZK fiddle
1guest172.71.134.130218n5u0Apr 25, 2024 10:29:38 AMlinkBarcodescanner use in Modal Window
8guest162.158.95.20135ck08dApr 25, 2024 10:26:46 AMlinkBarcodescanner use in Modal Window
7guest162.158.95.20235ck08dApr 25, 2024 10:25:21 AMlinkBarcodescanner use in Modal Window
6guest162.158.95.20235ck08dApr 25, 2024 10:24:03 AMlinkBarcodescanner use in Modal Window
5guest162.158.95.20135ck08dApr 25, 2024 10:21:42 AMlinkBarcodescanner use in Modal Window
4guest162.158.95.20235ck08dApr 25, 2024 10:21:03 AMlinkBarcodescanner use in Modal Window
3guest162.158.95.20135ck08dApr 25, 2024 10:20:28 AMlinkBarcodescanner use in Modal Window
2guest162.158.95.20135ck08dApr 25, 2024 10:16:41 AMlinkBarcodescanner use in Modal Window
1guest172.70.251.13335ck08dApr 25, 2024 10:04:09 AMlinkAll About buttons
1guest108.162.215.12fgmb30Jan 13, 2021 1:32:09 PMlinkresources
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