Integrate ZK with dhtmlxGantt"
Line 148: | Line 148: | ||
== Loading data from server to dhtmlxGantt library == | == Loading data from server to dhtmlxGantt library == | ||
+ | Here we use MVC pattern to load data from server side as follows: | ||
+ | |||
+ | 1. Apply GanttComposer to window component. | ||
+ | <source lang="xml" start="4"> | ||
+ | <window title="Dhtml Gantt Integration" border="normal" vflex="1" apply="org.zkoss.sample.GanttComposer"> | ||
+ | <div id="gantt" w:use="zul.wgt.GanttDiv" /> | ||
+ | </window> | ||
+ | </source> | ||
+ | |||
+ | 2. | ||
+ | <source lang="java" high="15, 16, 17"> | ||
+ | public class GanttComposer extends SelectorComposer<Component> { | ||
+ | |||
+ | @Wire | ||
+ | private Div gantt; | ||
+ | |||
+ | private List<GanttTask> taskList; | ||
+ | private List<GanttLink> linkList; | ||
+ | private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"); | ||
+ | |||
+ | public void doAfterCompose(Component comp) throws Exception { | ||
+ | super.doAfterCompose(comp); | ||
+ | taskList = new ArrayList<GanttTask>(); | ||
+ | linkList = new ArrayList<GanttLink>(); | ||
+ | String[] ganttJSONString = initGanttTasks(); | ||
+ | Clients.response(new AuInvoke(gantt, "_init", | ||
+ | "{\"data\": [" + ganttJSONString[0] + "], " + | ||
+ | "\"collections\": {\"links\": [" + ganttJSONString[1] + "]}}")); | ||
+ | } | ||
+ | |||
+ | private String[] initGanttTasks() { | ||
+ | Calendar cal = Calendar.getInstance(); | ||
+ | |||
+ | cal.set(2013, 3, 1); | ||
+ | GanttTask parent = new GanttTask(1L, cal.getTime(), 5, "Project #1", 0.8, 20, null, true); | ||
+ | taskList.add(parent); | ||
+ | String taskJSONString = parent.toJSONString(); | ||
+ | // omitted other tasks | ||
+ | |||
+ | GanttLink link1 = new GanttLink(1L, parent, task1, 0); | ||
+ | linkList.add(link1); | ||
+ | String linkJSONString = link1.toJSONString(); | ||
+ | // omitted other links | ||
+ | |||
+ | return new String[]{taskJSONString, linkJSONString}; | ||
+ | } | ||
+ | } | ||
+ | </source> | ||
== Send dhtmlxGantt event back to server == | == Send dhtmlxGantt event back to server == |
Revision as of 04:50, 3 October 2014
Vincent Jian, Engineer, Potix Corporation
October 3, 2014
ZK 7.0.3, dhtmlxGantt v.3.0.0 Standard
Introduction
dhtmlxGantt is an open source JavaScript Gantt chart that helps you visualize a project schedule in a nice-looking chart. It can show the dependencies between tasks as lines and allows you to set up different relationships between tasks (finish-to-start, start-to-start, end-to-end). This smalltalk will introduce how to integrate dhtmlxGantt into ZK web application.
Prerequisites
Since dhtmlxGantt is a javascript library, here I will use the technical described in the following articles to integrated with ZK:
- Integrate 3rd Party Javascript Libraries In ZK
- Integrate 3rd Party Javascript Libraries In ZK Using Clientside Controller
It is suggested to read the above two articles to understand the life cycle of ZK client widget.
Step to integrate dhtmlxGantt
Create ZK Project and Prepare Necessary Libraries
1. Create a ZK project by maven, refer to our installation guide.
2. Download dhtmlxGantt library from its official site, here I download the version 3.0 standard edition (GNU GPL v2 license).
- Extract the zip file and put dhtmlxgantt.js and dhtmlxgantt.css files under the project's "webapp/gantt" folder.
Load the library source and setup basic component
To load the dhtmlxgantt library, we can use script xml processing instruction like <?link?> and <?script?> on the zul page. From dhtmlxgantt online document, a simple div element is enough to initialize Gantt chart. Therefore, we add a div component on the zul page.
<?link rel="stylesheet" type="text/css" href="/gantt/dhtmlxgantt.css"?>
<?script type="text/javascript" src="/gantt/dhtmlxgantt.js"?>
<zk>
<window title="Dhtml Gantt Integration" border="normal" vflex="1">
<div id="gantt" />
</window>
</zk>
- Line 1,2: Load dhtmlxgantt library
- Line 5: Add div component to generate Gantt Chart.
Prepare data for Gantt Chart
Normally, a Gantt Chart need gantt tasks and gantt dependency links, and from dhtmlxGantt's online document, we can see all the properties for gantt task and gantt link. Threrfore, we need to create two Java Objects as follows:
public class GanttTask implements JSONAware {
private long id;
private Date startDate;
private int duration;
private String description;
private double progress;
private int sortOrder;
private GanttTask parent;
private boolean open;
public String toJSONString() {
DateFormat dft = new SimpleDateFormat("dd-MM-yyyy");
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", id);
map.put("start_date", dft.format(startDate));
map.put("duration", duration);
map.put("text", description);
map.put("progress", progress);
map.put("sortorder", sortOrder);
map.put("parent", parent == null ? 0 : parent.getId());
map.put("open", open);
return JSONObject.toJSONString(map);
}
/* getter and setter omitted */
}
public class GanttLink implements JSONAware {
private long id;
private GanttTask source;
private GanttTask target;
private int type;
public String toJSONString() {
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", id);
map.put("source", source.getId());
map.put("target", target.getId());
map.put("type", type);
return JSONObject.toJSONString(map);
}
/* getter and setter omitted */
}
As dhtmlxGantt support load JSON format objects, here we implement JSONAware.
Wrap dhtmlxgantt library with ZK Client Widget
Before we load the real data, we will create a new widget that extends div widget and use bind_ life-cycle to register Gantt Event. And we add extra API such as "_init", "_attachGanttEvent" and "_detachGanttEvent" that are only used for Gantt Chart.
zk.afterLoad('zul.wgt', function() {
zul.wgt.GanttDiv = zk.$extends(zul.wgt.Div, {
bind_: function() {
this.$supers('bind_', arguments);
// attach gantt event
this._attachGanttEvent();
},
unbind_: function() {
this._detachGanttEvent();
this.$supers('unbind_', arguments);
},
_init: function(task) {
gantt.init(this.uuid); //let dhmltxGantt library know where to render Gantt Chart
gantt.parse(task); //parse task and render Gantt Chart
}
_attachGanttEvent: function() {
// attach Gantt Event here
},
_detachGanttEvent: function() {
// detach Gantt Event here
}
}
});
- Line 2: Create GanttDiv widget that extends Div widget.
- Line 6: Attach Gantt Event.
- Line 12: "_init" API that will be used for initializing Gantt chart from server side.
- Line 16, 19: Attach and detach Gantt Event for communication between client and server.
Then we apply this widget by client widget attribute "use" in zul page we created before as follows:
<zk xmlns:w="client">
<window title="Dhtml Gantt Integration" border="normal" vflex="1">
<div id="gantt" w:use="zul.wgt.GanttDiv" />
</window>
<zk>
- Line 3: Define the name space prefix "w" for client widget attribute.
- Line 5: Apply GanttDiv widget to the div component.
Loading data from server to dhtmlxGantt library
Here we use MVC pattern to load data from server side as follows:
1. Apply GanttComposer to window component.
<window title="Dhtml Gantt Integration" border="normal" vflex="1" apply="org.zkoss.sample.GanttComposer">
<div id="gantt" w:use="zul.wgt.GanttDiv" />
</window>
2.
public class GanttComposer extends SelectorComposer<Component> {
@Wire
private Div gantt;
private List<GanttTask> taskList;
private List<GanttLink> linkList;
private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
taskList = new ArrayList<GanttTask>();
linkList = new ArrayList<GanttLink>();
String[] ganttJSONString = initGanttTasks();
Clients.response(new AuInvoke(gantt, "_init",
"{\"data\": [" + ganttJSONString[0] + "], " +
"\"collections\": {\"links\": [" + ganttJSONString[1] + "]}}"));
}
private String[] initGanttTasks() {
Calendar cal = Calendar.getInstance();
cal.set(2013, 3, 1);
GanttTask parent = new GanttTask(1L, cal.getTime(), 5, "Project #1", 0.8, 20, null, true);
taskList.add(parent);
String taskJSONString = parent.toJSONString();
// omitted other tasks
GanttLink link1 = new GanttLink(1L, parent, task1, 0);
linkList.add(link1);
String linkJSONString = link1.toJSONString();
// omitted other links
return new String[]{taskJSONString, linkJSONString};
}
}
Send dhtmlxGantt event back to server
Conclusion
Download
Comments
Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |