Integrating Bryntum charts in Vaadin framework.

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.

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.