One of the important questions to me: Can I embed d3.js in my ZK zul pages and talk to the visualization ? Embedding is fairly simple, using the html tag you can embed any native html content and scripts. There is certainly a limitation to scripts, as the final rendered html page will contain both the zk javascript and our script, hoping there is no interference. As sample it is not possible to mix ZK with ExtJS, but JQuery is not a problem.
Task 1: Most simple zk application (Draw circle)
- Create a new ZK web application.
- Add the d3.js to the Web Pages folder
d3.js
- Take the d3.js sample from the previous tutorial and place it inside the index.zul page
<?xml version="1.0" encoding="UTF-8"?> <zk xmlns="http://www.zkoss.org/2005/zul"> <window title="D3 Demo"> <html> <![CDATA[ <script type="text/javascript" src="d3.js"></script> <div id="viz"></div> <script type="text/javascript"> var sampleSVG = d3.select("#viz") .append("svg:svg") .attr("width", 400) .attr("height", 400); sampleSVG.append("svg:circle") .style("stroke", "black") .style("fill", "grey") .attr("r", 40) .attr("cx", 100) .attr("cy", 100) .on("mouseover", function(){d3.select(this).style("fill", "darkgrey");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}) </script> ]]> </html> </window> </zk> - Run the application
zul page with embedded d3.js
Task 2: Controller talks to d3.js elements, zk button element controls the circle from controller
- Modify the index.zul file
add controller reference, a zk button and a function in our d3.js script
index.zul
<?xml version="1.0" encoding="UTF-8"?> <zk xmlns="http://www.zkoss.org/2005/zul"> <window title="D3 Demo" id="d3" apply="controller.indexController"> <html> <![CDATA[ <script type="text/javascript" src="d3.js"></script> <div id="viz"></div> <script type="text/javascript"> var sampleSVG = d3.select("#viz") .append("svg:svg") .attr("width", 400) .attr("height", 200); var myCircle = sampleSVG.append("svg:circle") .style("stroke", "black") .style("fill", "grey") .attr("r", 40) .attr("cx", 100) .attr("cy", 100) .on("mouseover", function(){d3.select(this).style("fill", "darkgrey");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}) function animate() { myCircle.transition() .duration(1000) .attr("r", 10) .transition() .delay(1000) .attr("r", 80); }; </script> ]]> </html> <button id="btnExec" label="Action !" /> </window> </zk> - Add the controller
package controller; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.ForwardEvent; import org.zkoss.zk.ui.util.Clients; import org.zkoss.zk.ui.util.GenericForwardComposer; public class indexController extends GenericForwardComposer { @Override public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); } public void onClick$btnExec(Event evt) throws InterruptedException { Clients.evalJavaScript("animate();"); } } - Run the application and press the button
Running web application
I will continue with the d3.js exploration and later return to another sample to feed data into a barchart from a controller. Stay tuned.
Nice Explanation. Thanks Sven
best
TerryTornado