ZKoss Canvas using KineticJS

asked 2012-05-25 08:41:29 +0800

Jales gravatar image Jales
161 1


I'm aware of ZKoss Canvas, or Canvas4Z project, and using it for current project.

But, this library lacks of certain interactivity, which we need.

So, I search for another Javascript library that is able to interact smoothly with Canvas,

and I stumbled upon KineticJS, and we think that KineticJS is a great Javascript HTML5 Canvas library.

( http://www.kineticjs.com/ )

Does ZKoss developer team has considered using this library in ZKoss?
I don't know if Canvas4Z is an actual component of ZKoss or is an external project.

Is there anyone already porting KineticJS to ZKoss? If not, we might want to try to port it to ZKoss.

We have found this documentation to develop component in ZKoss :

Can we use this documentation to port KineticJS to ZKoss?
What "other things" we need to consider/know before porting this library to ZKoss?

Thanks. :)

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2012-05-25 09:51:14 +0800

MontyPan gravatar image MontyPan
435 3

The architecture of ZK component is complex, and the document simplify many details.
Client Side Programming is another approach, maybe easier (maybe)

BTW, would you like to talk about which parts of ZKoss Canvas or Canvas4Z didn't meet your requirements?

link publish delete flag offensive edit

answered 2012-05-29 08:26:33 +0800

Jales gravatar image Jales
161 1

updated 2012-05-29 08:29:03 +0800

Yes, we have considered the client side programming too. We currently don't have a very good Javascript expert. We do understand Javascript, but not really good. So, that's why we think it would be best to just port it to ZKoss, because the documentation shows it is quite simple. And, it's just we want to contribute to ZK by porting this great library to ZKoss.

One of our requirement is to be able to interact easily with the graphic component of a strategy map (example : http://www.balancedscorecards.com/wp-content/uploads/2010/11/Strategy_map.jpg)

The interactivity needed is such as :
a. Easily positioning the strategic objective (the elipse component). This means we must be able to easily select and then drag them across the canvas. We happen to stumbled upon this tutorial ( http://books.zkoss.org/wiki/Small_Talks/2012/February/How_To_Use_Canvas4Z_Part2 ) that shows how to select it and move the graphic component. But, this is not as good as we hoped. We want it to be just like this :
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-shapes-with-kineticjs/ .
b. Easily connect two strategic objective (the elipse component) but the line must be flexible enough to be shaped as curve (look at those connecting lines in the strategic map example above). We have been able to connect it using and arrow line, but the line is rigid, and it cannot be shaped as curve easily. We want it to look like this :

Those are just two I could think of right now. If we succeeded in porting the KineticJS library to ZKoss, we will have more requirements since it will open more interactivity possibilities. That's why we want to port this library to ZKoss.

link publish delete flag offensive edit

answered 2012-08-29 02:51:41 +0800

SoundwaveTape gravatar image SoundwaveTape

I love KineticJS as well and needed to use it in a ZK environment (with ServerPush). KineticJS is continuously updated. Porting the library would be a very hard thing, but maintaining the port would be just as costly. I thought a great approach is to keep it a JS library and write my own JS wrapper library on top of it (customizing grouping and other functions). The server would do as much as it can and send JSON updates to the KineticJS wrapper.

Declare in ZUL:

<?script type="text/javascript" src="/js/kinetic-v4.0.1.min.js"?>
<?script type="text/javascript" src="/js/yourKineticWrapper.js?productionNumber12345"?>

For some reason, I have to initialize my canvas and start my server push in this fashion. Inline in ZUL.
<label visible="false">
      <attribute name="onCreate">
      		Clients.evalJavaScript("initCanvas(\"kineticCanvas\", 800, 800);");

For some reason, it does NOT work if I try to use a static Java call to do a Clients.evalJavaScript() or even if I do an onCreate=''.

	<label visible="false" onCreate="com.yourCompany.ui.kinetic.KineticFunctions.initCanvas(800, 800)"/> // does not work
	<label visible="false" onCreate='Clients.evalJavaScript("initCanvas(\"kineticCanvas\", 800, 800)");'/> // does not work

At the same time while server push is attached, I cannot call more Clients.evalJavaScript() inline ZUL. For some reason (which I'm happy to do), I need to call static server Java methods. (This is only necessary when ServerPush has been activated.) Funny that I have to do init inline and then updates like:

	<button label="100%" onClick="com.yourCompany.ui.kinetic.KineticFunctions.setScale(1.0)"/>
	<button label="50%" onClick="com.yourCompany.ui.kinetic.KineticFunctions.setScale(0.5)"/>

For KineticJS, you need a div for a canvas:

			<div id="kineticCanvas"></div>

In your KineticFunctions, just have methods like:

    public static void setScale(double scale) {
	Clients.evalJavaScript("setScale(" + scale + ");");

// Based on ZK's CometServerPush:
                    try {
			Clients.evalJavaScript("jsonUpdate('" + yourJson.toString() + "');");
                    } finally {

I could have saved at least seven days knowing the above. This should apply to any JavaScript library that is trying to be adapted with dynamic server updates plus client interaction with ZK. Sorry that I couldn't post the full source.

link publish delete flag offensive edit

answered 2013-12-03 03:04:00 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Maybe it is late but you may consider this project ZK Graphics Component

link publish delete flag offensive edit

answered 2014-02-25 13:29:56 +0800

punterf16 gravatar image punterf16

Good Acticle. If you wish to lear

link publish delete flag offensive edit

answered 2017-11-09 10:49:09 +0800

Easton6 gravatar image Easton6

Client Side Programming is another approach

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




Asked: 2012-05-25 08:41:29 +0800

Seen: 750 times

Last updated: Nov 09 '17

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