Integrate ZK with dhtmlxGantt"

From Documentation
Line 26: Line 26:
  
 
= Step to integrate dhtmlxGantt =
 
= Step to integrate dhtmlxGantt =
 +
 +
== Create ZK Project and Prepare Necessary Libraries ==
 +
1. Create a ZK project by maven, refer to our [[ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_Maven | installation guide]].
 +
 +
2. Download dhtmlxGantt library from [http://dhtmlx.com/docs/products/dhtmlxGantt/ 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 [http://docs.dhtmlx.com/gantt/desktop__how_to_start.html#step3initializedhtmlxgantt online document], a simple div element is enough to initialize Gantt chart. Therefore, we add a div component on the zul page.
 +
<source lang="xml" high="1,2,5">
 +
<?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>
 +
</source>
 +
* Line 1,2: Load dhtmlxgantt library
 +
* Line 5: Add '''div''' component to generate Gantt Chart.
 +
 +
== Prepare data for Gantt Chart ==
 +
 +
 +
== Wrap dhtmlxgantt library with ZK Client Widget ==
 +
 +
 +
== Loading data from server to dhtmlxGantt library ==
 +
 +
 +
== Send dhtmlxGantt event back to server ==
  
 
= Conclusion =
 
= Conclusion =

Revision as of 07:12, 2 October 2014




WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!

DocumentationSmall Talks2014OctoberIntegrate ZK with dhtmlxGantt
Integrate ZK with dhtmlxGantt

Author
Vincent Jian, Engineer, Potix Corporation
Date
October 3, 2014
Version
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:

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

Wrap dhtmlxgantt library with ZK Client Widget

Loading data from server to dhtmlxGantt library

Send dhtmlxGantt event back to server

Conclusion

Download

Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.