0

Add javascript Call To Component in Java Code

asked 2012-04-13 13:27:53 +0800

ansancle gravatar image ansancle
317 9

I have a simple javascript function defined in my .zul file :

<script type="text/javascript">
 var doBeep  = false;

function setBeep(beepVar)
{
   doBeep = beepVar;
}
</script>

When I added the following directly into the .zul - it works fine :

<image id="_audioHome" sclass="dhAudioHomeIcon" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onMouseDown="setBeep(true)"/>

What I need to do, is inside my java class, dynamically add that call - it can't be hardcoded into the zul since the components that need to make the call are created programatically.

I tried the following but that doesn't work - I get scripting errors and it didn't seem to execute the onMouseDown either.

	private void addZscript()
	{		
		ZScript zscript = new ZScript("javascript","setBeep(true);");
		EventHandler handler = new EventHandler(zscript);
		_audioHome.addEventHandler("onMouseDown", handler);		
	}

Does anyone know how to do this?

I would need to add the

onMouseDown="setBeep(true)"
call to numerous images and buttons that are created on the fly from information in the database.
Thanks
Andy

delete flag offensive retag edit

5 Replies

Sort by ┬╗ oldest newest

answered 2012-04-13 22:17:06 +0800

twiegand gravatar image twiegand
1807 3

updated 2012-04-13 22:27:28 +0800

Andy,

I don't believe onMouseDown is a regular event that ZK supports at this point.

If you can live with the onClick event instead, then I have a couple of alternatives you might think about.  Consider the following zul (which is pointing to a controller in the MVC fasion):

<zk>	
	<script type="text/javascript">
		var doBeep  = false;

		function setBeep(beepVar){
			doBeep = beepVar;
		}
	</script>
	<window id="main" apply="MyController">
	
	</window>
</zk>

The first controller alternative uses Server-side events that call Javascript:

import org.zkoss.zk.ui.util.GenericForwardComposer;
	
public class MyController extends GenericForwardComposer {

	Window main;
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		
		addImage();
		addImage();
		addImage();
	}
	
	public void addImage(){
		Image img = new Image();
		img.setSrc("http://www.zkoss.org/forum/images/home.png");
		main.appendChild(img);
		
		Separator separator = new Separator();
		separator.setHeight("20px");
		main.appendChild(separator);
		
		img.addEventListener("onClick", new EventListener() {			
			public void onEvent(Event event) throws Exception {
				Clients.evalJavaScript("setBeep(true)");
			}
		});
	}
}

The other controller alternative uses a jQuery selector to bind an onClick event to all the images.

import org.zkoss.zk.ui.util.GenericForwardComposer;
	
public class MyController extends GenericForwardComposer {

	Window main;
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);

		addImage();
		addImage();
		addImage();
		
		Clients.evalJavaScript("jq(\"@image\").click(function(){setBeep(true);})");
	}
	
	public void addImage(){
		Image img = new Image();
		img.setSrc("http://www.zkoss.org/forum/images/home.png");
		main.appendChild(img);
		
		Separator separator = new Separator();
		separator.setHeight("20px");
		main.appendChild(separator);
	}
}

Maybe that will help.

Regards,

Todd

link publish delete flag offensive edit

answered 2012-04-16 01:26:16 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

Hi,
Another solution is add a client (widget ) listener, please refer to http://books.zkoss.org/wiki/ZK_Client-side_Reference/General_Control/Event_Listening#Declare_a_Client-side_Listener_in_ZUML

In composer you can call

image.setWidgetListener("onClick", "setBeep(true);");

link publish delete flag offensive edit

answered 2012-04-16 12:04:00 +0800

ansancle gravatar image ansancle
317 9

Thanks so much for the replies. I will try them but I need to use "onMouseDown".

The reason for this is that I am calling my webpage from an IOS App, I intercept the user tap on the webpage (on an ipad), and then in the ios callback I send a javascript call over to my webpage to ask for a variables value (doBeep). If it's true I make a "click" sound, if it's false I don't.

If I try and use onClick in my zk code, it happens after the app has already called over asking for the javascript variable - which is too late.
If I use onMouseDown in my zk code, it does get executed first, so the variable is set properly when my IOS app calls over and asks.

Thanks!

link publish delete flag offensive edit

answered 2012-05-31 12:51:50 +0800

ansancle gravatar image ansancle
317 9

I tried

Clients.evalJavaScript("jq(\"@image\").mousedown(function(){setBeep(true);})");

but this still gets called after my app checks the value of the variable

link publish delete flag offensive edit

answered 2012-05-31 13:08:53 +0800

ansancle gravatar image ansancle
317 9

I finally got it to work, I used the following code in my java to add the onMouseDown event to the images I wanted even when dynamically created :

image.setWidgetListener("onMouseDown", "setBeep(true);");

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-04-13 13:27:53 +0800

Seen: 1,015 times

Last updated: May 31 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More