ZK Charts + Export

answered 2016-03-18 02:08:57 +0800

cor3000
6280 ● 2 ● 7

updated 2016-03-18 02:16:02 +0800

The default menuitems are automatically added at client side. They don't initially exist on the server side. They have to be recreated manually if the default menu items need to be preserved:

zul file:

<zk>
    <div apply="zk.support.ChartsComposer">
        <charts id="mychart" type="pie"/>
    </div>
</zk>

composer replacing the menu:

package zk.support;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Exporting;
import org.zkoss.chart.ExportingButton;
import org.zkoss.chart.MenuItem;
import org.zkoss.chart.util.AnyVal;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.Clients;

public class ChartsComposer extends SelectorComposer<Component> {
    private static final String ON_MY_CUSTOM_ITEM = "onMyCustomItem";

    private static final long serialVersionUID = 1L;

    @Wire("#mychart")
    private Charts mychart;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        Exporting exporting = mychart.getExporting();
        ExportingButton buttons = exporting.getButtons();
        List<MenuItem> menuItems = new ArrayList<>();

        //optional rebuild the default menu items, otherwise they are replaced
        menuItems.add(defaultMenuItem("printChart", "this.print();"));
        menuItems.add(separator());
        menuItems.add(defaultMenuItem("downloadPNG", "this.exportChart();"));
        menuItems.add(defaultMenuItem("downloadJPEG", 
                        "this.exportChart({type: \"image/jpeg\"});"));
        menuItems.add(defaultMenuItem("downloadPDF", 
                        "this.exportChart({type: \"application/pdf\"});"));
        menuItems.add(defaultMenuItem("downloadSVG", 
                        "this.exportChart({type: \"image/svg+xml\"});"));
        menuItems.add(separator());
        //add custom menu items (possible at any position in the list)
        menuItems.add(customMenuItem("My Custom Item (at Client)", 
                        "alert('custem menu item clicked, handled in browser')"));
        menuItems.add(customMenuItem("My Custom Item (to Server)",
                        fireServerEventScript(ON_MY_CUSTOM_ITEM)));
        buttons.setMenuItems(menuItems);
    }

    private String fireServerEventScript(String eventName) {
        return  "var chartsWidget = zk(evt.target).$(); " +
                "chartsWidget.fire('" + eventName + "', null, {toServer: true});";
    }

    @Listen(ON_MY_CUSTOM_ITEM + " = #mychart")
    public void handleMyCustomItem() {
        Clients.showNotification("custem menu item clicked, handled on server");
    }

    private MenuItem customMenuItem(String text, String onclickJS) {
        MenuItem menuItem = new MenuItem();
        menuItem.setText(text);
        menuItem.setOnclick(new JavaScriptValue("function(evt) {" + onclickJS + "}"));
        return menuItem;
    }

    private MenuItem defaultMenuItem(String textKey, String onclickJS) {
        MenuItem menuItem = new MenuItem();
        menuItem.addExtraAttr("textKey", new AnyVal<String>(textKey));
        menuItem.setOnclick(new JavaScriptValue("function(evt) {" + onclickJS + "}"));
        return menuItem;
    }

    private MenuItem separator() {
        MenuItem menuItem = new MenuItem();
        menuItem.addExtraAttr("separator", new AnyVal<Boolean>(true));
        return menuItem;
    }
}

As you can see I created a few helper methods to make this easier. I hope this helps.