0

its posible implement jquery components in zk?

asked 2011-07-14 12:15:57 +0800

zippy gravatar image zippy
504 1 2

Hi, it posible implement jquery components in zk?? Not efects , this is a speedometer:
I tried with native html and change on the fly the scripts but dont worked (i unknown is it possible)
http://jacob-king.com/demo/speedometer

Thanks

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2011-07-14 17:17:58 +0800

twiegand gravatar image twiegand
1807 3

updated 2011-07-14 17:20:09 +0800

Zippy,

Here is how I got it to work:

<zk>
	<script src="/jq/scripts/jquery.speedometer.js" />
	<script src="/jq/scripts/excanvas.js" />
	
	<script type="text/javascript">
		function initSpeedo(compId){
			compId = '#' + compId;
			jQuery(compId).speedometer();
		}

		function changeSpeedo(compId, inputPercent){
			compId = '#' + compId;
			jQuery(compId).speedometer({ percentage: $('.speedometer').val() || inputPercent });
		}
	</script>
	<window>
		<separator height="25px"/>
		<div id="speedo">
			<attribute name="onCreate">
				String initCommand = "initSpeedo('" + speedo.getUuid() + "')";
				Clients.evalJavaScript(initCommand);
			</attribute>
		</div>
		<intbox width="25px" id="val" onCreate="self.setValue(0)" style="text-align: center;" constraint="no negative">
			<attribute name="onChange">
				if(self.getValue() > 100) {
					self.setValue(100);
				}
			</attribute>		
		</intbox>
		<button label="Update">
			<attribute name="onClick">
				String changeCommand = "changeSpeedo('" + speedo.getUuid() + "', '" + val.getValue() + "')";
				Clients.evalJavaScript(changeCommand);
			</attribute>
		</button>		
	</window>
</zk>

Make sure you take note in the JavaScript where it looks for the file "background.jpg" in order to render correctly...

Hope that helps,

Todd

link publish delete flag offensive edit

answered 2011-07-15 17:50:49 +0800

zippy gravatar image zippy
504 1 2

Thanks a lot!!! works great
Thank you

link publish delete flag offensive edit

answered 2011-07-18 15:06:55 +0800

zippy gravatar image zippy
504 1 2

:O , i have issue
I changed <attribute name="onClick"> for onCreate and the code fail ...

Its a bug?? wrong call?

<button label="Update">
			<attribute name="onCreate">
				String changeCommand = "changeSpeedo('" + speedo.getUuid() + "', '" + val.getValue() + "')";
				Clients.evalJavaScript(changeCommand);
			</attribute>
		</button>	

link publish delete flag offensive edit

answered 2011-07-18 15:41:50 +0800

twiegand gravatar image twiegand
1807 3

Zippy,

What are you trying to achieve?  You wouldn't want to use the onCreate command for updates because that event only gets executed once (which is why I used it on the initialization code).

There are two main parts to my example - the first is the initialization which gets jQuery to render the speedo.  The next is catching the onClick event in ZK which then updates the speedo via jQuery.

Let me know what you are trying to do and I'll do my best to help.

Todd

link publish delete flag offensive edit

answered 2011-07-19 12:01:59 +0800

zippy gravatar image zippy
504 1 2

<div id="speedo">
			<attribute name="onCreate">
				String initCommand = "initSpeedo('" + speedo.getUuid() + "')";
				Clients.evalJavaScript(initCommand);
			</attribute>
		</div>


this code does`t work so the gauge not initialize :P

link publish delete flag offensive edit

answered 2011-07-19 12:33:18 +0800

twiegand gravatar image twiegand
1807 3

Hmmm, that is the exact code that works fine for me.

When you say it doesn't initialize, do you mean that it doesn't show the speedo at all?  If that is the case, I suspect the issue is where the background.jpg file is in your project.

You might also verify that the path to your JavaScript libraries are correct.

Todd

link publish delete flag offensive edit

answered 2011-07-20 10:37:07 +0800

zippy gravatar image zippy
504 1 2

My mistake, in the test proyect i have zk 5.0 i upgraded to 5.0.7 and works fine

Thanks a lot :D

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: 2011-07-14 12:15:57 +0800

Seen: 760 times

Last updated: Jul 20 '11

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