Ext Gantt is a very interactive Gantt chart built on the fantastic Ext JS framework and Vaadin is java based framework for rich and interactive UI development.
Ext framework is build on top of java-scrip. So for Vaadin and Ext framework integration you will need to create Vaadin java-script component.
Ext framework is build on top of java-scrip. So for Vaadin and Ext framework integration you will need to create Vaadin java-script component.
First a server-side component is required which extend AbstractJavaScriptComponent. The class should also have a @JavaScript annotation that defines the required Ext libraries (For more details check Integrating Java Script Component )
package com.ext
@JavaScript({"vaadin://js/ext-all.js", "vaadin://js/gnt-all.js", "vaadin://js/gantt.js"})
@StyleSheet({ "vaadin://themes/justransform/ext-all.css", "vaadin://themes/justransform/sch-gantt-all.css"})
public class GanttChartComponent extends AbstractJavaScriptComponent {//Required API's}
In above source code ext-all.js is minified version of ext framework, gnt-all.js is the bryntum gantt chart library, ganttt.js is the connector script which creates gantt chaart.
Second step is to have shared state class that extend JavaScriptComponentStat. This shared state class can be used to communicate data or any changes to client side javascript.
public class GanttChartState extends JavaScriptComponentState {
public String divId;
//Other required data which should be part of state
}
In above code please note the important element divId which will be used by javascript.In next step we will get in to more details.
Last step is client-side JavaScript connector (gantt.js). The connector javascript should define a global initializer function named based on the fully qualified name of the server-side Component class . In this example the server-side Component is com.ext.GanttChartComponent so the function name should be com_ext_GanttChartComponent
com_ext_GanttChartComponent = function() {
Ext.require('Gnt.panel.Gantt');
//Get domId from state
var domId = this.getState().divId;
// Create and div using domId
var ganttElement = document.createElement('div');
ganttElement.setAttribute('id', domId);
e.appendChild(ganttElement);
//Create bryntum charts
var ganttPanel = Ext .create( 'Gnt.panel.Gantt', {
height : 400,
width : 1000,
viewPreset : 'weekAndDayLetter',
startDate : startDt,
endDate : endDate...}
//Listen for state changes
this.onStateChange = function() {
..}
//Render chart
ganttPanel.render(domId);
Important point to note here is the divId which was passed using shared state is used to create an div element and gantt charts are render inside this div. This will attach the gantt chart element to Vaadin component and get renders on the UI.
Also onStateChange function can be used to handle data changes and update the task and dependency store as required.
Very nice post indeed.
ReplyDeleteThanks a lot for sharing!
ReplyDelete/Mats
Hi. Thanks for this post.
ReplyDeleteQuestion if you do not mind: who sets the value of divId?
Also, what is that "e" in e.appendChild? Is it e=this.getElement()?
Krosh,
ReplyDeleteFor our usecase we populated the "divId" with the string which we want to uniquely identify and pushed that to client side using vaadin shared state.
Yes e is "this.getElement().
Hi Sonal, are you available to chat about doing a blog post for me?
ReplyDelete