Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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
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.
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
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.
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
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
{}
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
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.
Asked: 2012-10-23 20:19:03 +0800
Seen: 468 times
Last updated: Jan 08 '13