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,
First, on tablet, the ZK's Button component does not support "os" and "trendy" mold, it will use default mold.
Second, on tablet, the html element(besides button) must add this style such that tablet browser can trigger "onClick" property.
.foo {
cursor: pointer
}
Please ensure your ZK's version is 6.5EE and read this smalltalk: Tablet Programming Tips.
You can also test this zksandbox on your iPad.
Regards,
Monty Pan
Thanks for the response, what's interesting is I know the documentation says the the Ipad doesn't support trendy but it absolutely does make the buttons change from round to the same style and shape as the desktop. So it seems it is supporting that mold, strange.
I already had the following in css which should have covered the button :
* {
cursor:pointer;
}But I added the following to be sure :
.z-button {
cursor:pointer;
}
We will see if this helps, 90% of the time it works fine, but 10% of the time you will get the color change indicating a press without the callback. I also have a javascript call setup for the buttons which makes an audio click - you will get the button color without the click as well.
<button id="_audioHomeButton" label="Audio" orient="vertical" w:onClick="${javascriptOnClick}"/>Hi Andy,
* Yes, the "trendy" mold setting will be ignored on tablet, but still work on desktop browser.
* Can you provide a complete sample code include css and javascript? Because I don't know what is "w:" (xmlns:w="client" ?) and "${javascriptOnClick}"
* On the other hand, I test this code (yes, complete code without set button's style) on iPad five times (every test click two buttons more than five times), it work correctly.
<zk xmlns:w="client">
<button w:onClick='alert("foo")'>foo</button>
<button w:onClick='alert("foo2")'>foo2</button>
</zk>Regards,
Monty Pan
Unfortunately it's hard to include all the code since there are included JS libraries for playing the audio sound (swf player). The w:onClick="${javascriptOnClick}" is actually calling the following : "playClickSound();" which in turn is calling a function that calls the swf javascript to play a wav file of a button click.
Also, I have a background image set on the button, I grab the path of the image from the sclass I want and then set that into the image. So all the buttons are using a background image that is 56x56 on a button that is 140px wide by 80px high. General if you hit the the image you get a click, how you press makes a major difference as well it seems.
The speed of the clicks makes a difference as well I think since we have lots of things that are happening on each click, but it doesn't make sense that the javascript sound would happen every time at least since that is all on the client.
It would make sense to me if the first click always worked and maybe the second failed since you clicked too fast, but the first doesn't click sometimes as well.
I have include the zul and java from our home page which has the least going on - I removed many items that were really not related (changed the names to protect the innocent ;)
Here is that code :
soundManager.setup(
{
url: 'http://' + window.location.host + '/dhuiipad/scripts/swf/',
debugMode: true,
flashversion : 9,
useHighPerformance:true,
onready: function()
{
var mySound = soundManager.createSound(
{
id: 'clickSound',
autoLoad:true,
url: 'http://' + window.location.host + '/dhuiipad/scripts/click.wav'
}
);
},
ontimeout: function()
{
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
alert("Sound Manager Timeout - make sure Flash is installed and enabled.");
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
function playClickSound()
{
soundManager.play('clickSound');
}
Our buttons are large, make them 140px wide by 80px high - then click on the edges, normally if you hit the middle you get the click, the edges are where it happens. I find it's still about 10% of the time I don't get a callback or button click out of the javascript.
<zk xmlns:h="http://www.w3.org/1999/xhtml" xmlns:zk="http://www.zkoss.org/2005/zk">
<?page title="Welcome"?>
<script src="/scripts/DHjFullScreenWithTwoButtons.js"></script>
<script src="/scripts/soundmanager2.js"></script>
<script src="/scripts/DHjPlaySound.js"></script>
<zscript>
import com.dh.ui.common.util.DHzZKUtilities;
import com.dh.ui.common.util.DHnUILiterals;
import com.dh.ui.common.session.DHnSessionArguments;
String styleSheet = DHzZKUtilities.getStyleSheetForBrowser();
String gridColor = DHnUILiterals.defaultIpadTopBarColor;
String javascriptOnClick = DHnUILiterals.onClickJavaScriptCall;
Executions.getCurrent().getSession().setAttribute(DHnSessionArguments.pageName.toString(),"DHzHomeWindow.zul");
Executions.getCurrent().getSession().setAttribute(DHnSessionArguments.pageAccessTime.toString(),new Date());
String headerButtonWidth = DHnUILiterals.headerButtonWidth;
String headerButtonHeight = DHnUILiterals.headerButtonHeight;
</zscript>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") == -1)
{
if (userAgent.indexOf("Chrome") == -1)
{
if (userAgent.indexOf("AppleWebKit") == -1)
{
alert("You are using an unsupported browser : \n" + navigator.appName + "\nPlease use Chrome or Firefox on the desktop and the OneView App when on the Ipad.");
}
}
}
function setDeviceName(deviceName)
{
var windowWidget = zk.Widget.$('$_window');
zAu.send(new zk.Event(windowWidget, 'onCleanup',deviceName));
}
</script>
<dhIpadWindow id="_homeWindow" border="normal" apply="com.dh.ui.ipad.view.DHzHomeView" height="100%" width="100%" xmlns:w="http://www.zkoss.org/2005/zk/client">
<style src="${styleSheet}"/>
<image id="_recordingUrlImage" sclass="dhRecordingUrlsImage" visible="false"/>
<vbox width="100%" align="center" style="background:${gridColor};border:none">
<dhLabel value="XXXXXXX" sclass="dhHomePageTitle"/>
<dhLabel value="XXXXXXX" sclass="dhHomePageTitle"/>
</vbox>
<separator bar="true"/>
<separator bar="false" spacing="10px"/>
<columnlayout>
<columnchildren width="50%">
<panel>
<panelchildren>
<vbox width="100%" align="center">
<dhLabel value="XXXXXX" sclass="dhSubTitle"/>
<dhUserGrid id="_userGrid" width="300px">
<columns>
<column/>
</columns>
</dhUserGrid>
</vbox>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="50%">
<panel>
<panelchildren>
<vbox width="100%" align="center">
<label value="XXXXXXX" sclass="dhSubTitle"/>
</vbox>
<columnlayout>
<columnchildren width="50%" >
<panel >
<panelchildren>
<grid width="100%">
<columns>
<column width="100%"/>
</columns>
<rows>
<row>
<vbox width="100%" align="center">
<button id="_aaaaaHomeButton" label="XXXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" w:onClick="${javascriptOnClick}"/>
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_bbbbbbHomeButton" disabled="true" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}"/>
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_cccccccHomeButton" disabled="true" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" />
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_dddddHomeButton" disabled="true" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" />
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_tempHomeButton" disabled="true" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" />
</vbox>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</columnchildren> <columnchildren width="50%">
<panel>
<panelchildren>
<grid width="100%">
<columns>
<column width="100%"/>
</columns>
<rows>
<row>
<vbox width="100%" align="center">
<button id="_eeeeeHomeButton" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" w:onClick="${javascriptOnClick}"/>
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_ffffffHomeButton" disabled="true" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" />
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_ggggggHomeButton" disabled="true" label="XXXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}"/>
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_hhhhhhHomeButton" disabled="true" label="XXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" />
</vbox>
</row>
<row>
<vbox width="100%" align="center">
<button id="_iiiiiHomeButton" label="XXXXX" orient="vertical" width="${headerButtonWidth}" height="${headerButtonHeight}" w:onClick="${javascriptOnClick}"/>
</vbox>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
</dhIpadWindow>
</zk>
package com.dh.ui.ipad.view;
import java.io.File;
import org.apache.log4j.Logger;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Desktop;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.Session;
import org.zkoss.zk.ui.WebApp;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.Audio;
import org.zkoss.zul.Button;
import org.zkoss.zul.Grid;
import org.zkoss.zul.Image;
import org.zkoss.zul.Label;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Vbox;
import org.zkoss.zul.Window;
import com.dh.core.install.user.DHeUser;
import com.dh.ui.common.components.DHzGenericForwardComposer;
import com.dh.ui.common.css.DHzCssStyleToImageMapper;
import com.dh.ui.common.session.DHnSessionArguments;
import com.dh.ui.common.user.DHzUserUtil;
import com.dh.ui.common.util.DHnPageArguments;
import com.dh.ui.common.util.DHnUILiterals;
import com.dh.ui.common.util.DHzCookieUtil;
import com.dh.ui.common.util.DHzZKUtilities;
import com.dh.ui.ipad.components.user.DHzUserGrid;
public class DHzHomeView extends DHzGenericForwardComposer
{
private static final long serialVersionUID = 1L;
private static final Logger _logger = Logger.getLogger(DHzHomeView.class);
private DHzUserGrid _userGrid;
private Button _aaaaaHomeButton;
/**
* Method : doAfterCompose
*
* @see org.zkoss.zk.ui.util.DHzGenericForwardComposer#doAfterCompose(org.zkoss.zk.ui.Component)
*
* @param comp
* @throws Exception
*/
@Override
public void doAfterCompose(Component comp) throws Exception
{
//... SetupCode here that I removed
setButtonImages();
}
/**
*
* Method : setButtonImages
*
*/
private void setButtonImages() throws Exception
{
DHzCssStyleToImageMapper mapper = DHzCssStyleToImageMapper.getInstance();
String aImagePath = mapper.getImagePathFromSclass("dhAaaaaHomeIcon");
// rest of code removed - I grab the image path from the sclass and then set the
// button background using that image path.
_aaaaaHomeButton.setImage(audioImagePath);
}
/**
*
* @param event
*/
public void onClick$_aaaaaHomeButton(Event event)
{
// Do Stuff - Code Removed....
}
}
Hi Andy,
Let's devide and conquer your problem.
The situation is:
1. There is a button set "width", "height", "image" attributes like this:
<button w:onClick='${something}' width="140px" height="80px" image="foo.png" label="foo" ></button>Based on this situation l wrote this code:
<zk xmlns:w="client">
<zscript>
String something = "alert(\"click trigger\")";
</zscript>
<button w:onClick='${something}' width="140px" height="80px" image="foo.png" label="foo" ></button>
</zk>In my environment (ZK 6.5 EE, iPad), it will always show the alert message which indicates that onClick is triggered.
Based on this result (suppose it can be reproduced in your environment):
1. ZK component works fine.
2. The problem occurs after ZK trigger "onClick", that means this issue happens in the JS you write / import.
Here's my suggestion:
1. Open the Chrome Developer Tool, check if any js error exists.
2. Modify the code like this
String javascriptOnClick = "alert(\"click trigger\");" + DHnUILiterals.onClickJavaScriptCall;
ensure the click has been triggered already.
Regards,
Monty Pan
Monty,
thanks so much for your help, I really appreciate it. I have checked the console and there aren't any errors. It is just very strange, I can get the button to highlight blue - but no call to JS or callback - happened a bunch again yesterday.
I have been using ZK for a long time and am pretty familiar with the usual suspects for figuring this stuff out. I have been really under the gun developing for our project, but when I get minute I will start iterating a simple application as you describe and see where the issue appears. Your thoughts on JS screwing it up make sense to me, that would interrupt ZK. I will look into that angle further when I get a chance,
Thanks again!!
Andy
Monty,
I created the following very simple page and if you click quickly you can get the blue highlight color without ever activating the alert window, I am using PE not EE.
I'm getting beat on about this again since our customer is getting p#ssed.
I am wondering what is coloring the button blue in the client and why that can get called but not the javascript callback, I would think they would be in the same place.
<zk>
<zscript>
String javascriptOnClickJustAlert = "alert(\"click trigger\");";
</zscript>
<button height="150px" width="170px" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="${javascriptOnClickJustAlert}" label="Click For Popup"></button>
</zk>
Hi Andy,
Sorry I can't reproduce your situation. Whatever how quickly I click, after first click it will show alert message and block screen.
I didn't see the blue highlight color, too... Maybe your environment is iPad?
Ok, let's restart again.
I write this pure html example to approach the situation:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<style type="text/css">
.z-button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: normal;
padding: 5px 15px;
margin: 1px 1px 0 0;
line-height: 20px;
border: 1px solid #A6A6A6;
-webkit-border-radius: 3px;
border-radius: 3px;;
background: linear-gradient(to bottom, #FEFEFE 0%, #EEEEEE 100%); /* W3C */
background: -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%); /* Chrome10+,Safari5.1+ */
text-shadow: 0 1px #FFFFFF;;
color: black;
}
.z-button:hover {
border-color: #0CBCFF;
-webkit-box-shadow: inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF;
box-shadow: inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF;;
}
.z-button:focus {
border-color: #0CBCFF;
-webkit-box-shadow: inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF;
box-shadow: inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF;;
}
.z-button:active {
border-color: #0CBCFF;
-webkit-box-shadow: inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF;
box-shadow: inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF;;
}
</style>
</head>
<body>
<button onclick="console.log('foo')" class="z-button" style="width:150px;height:150px">XX00</button>
</body>
</html>At iPad (with Firebug plugin), when you click twice quickly, it will not occur any click event.
Hence, I consider it is native browser design issue, ZK can't help anymore :'(
Regards,
Monty Pan
Monti,
check this out, the google online calculator on the Ipad NEVER misses a click no matter how fast I go. The plain HTML button code above I can make miss repeatedly just as you did. I think that this is an embedded piece of code written in ssomething else but not sure which would explain it.
http://www.google.com/search?client=ubuntu&channel=fs&q=calculator&ie=utf-8&oe=utf-8
Since you guys know javascript/html WAY better than I do, can you think of why this may be? What are they doing that may be a bit different? Could styling be getting in the way? Or am I right that it's a different language embedded?
Any and all help greatly appreciated, our customer is losing his mind due to lost clicks.
Asked: 2012-10-23 20:19:03 +0800
Seen: 468 times
Last updated: Jan 08 '13