ZKoss Canvas using KineticJS

Jales
161 1

Hi,

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.

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 :
http://books.zkoss.org/wiki/ZK%20Component%20Development%20Essentials

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 retag edit

5 Replies

MontyPan
435 3
http://xitop.blogspot.com...

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?

Jales
161 1

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 :
http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/

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.

SoundwaveTape
6

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);");
com.yourCompany.ui.kinetic.KineticServerPush.start(anyComponent);
</attribute>
</label>


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:

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


In your KineticFunctions, just have methods like:

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

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


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.

jumperchen
3909 2 8
http://jumperchen.blogspo...

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

punterf16
1

Good Acticle. If you wish to lear

[hide preview]