ZK and d3.js

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.

Advertisements

One thought on “ZK and d3.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s