Vaadin add-on gantt chart

I want to experiment use of vaadin gantt chart with Tree-table.

I understand from the documentation that i have to take few steps e.g. following codes, unwrap etc…


Add the add-on dependency to the web module in the project’s build.gradle. For example:
configure(webModule) {
  ...
  dependencies {
      ...
      compile("org.vaadin.addons:some-addon:1.2.3")
  }
Include the add-on widget set to the AppWidgetSet.gwt.xml file, created in Step 1:
<module>
    ...
    <inherits name="org.vaadin.someaddon.widgetset.SomeAddonWidgetset" />

how do we get the above parameter for any other add-on e.g.


https://vaadin.com/directory#!addon/gantt
1 Like

Methods implemented in the “Integrating a Vaadin Component into the Generic UI” example are wrappers for the Vaadin component methods. You have to wrap all methods that you are going to use from your application code.
But before you start doing this, maybe you don’t need a GUI integration? I mean that if you are going to use a Gantt chart at only one or two screens, you can use a Vaadin component directly like in the [url=]https://doc.cuba-platform.com/manual-6.1/vaadin_addon_sample.html[/url] example.
GUI integration is necessary when you want to be able to declare your component in the screen xml descriptor like this ….
So if the Gantt chart will be placed on a single screen only, I would recommend you using a native vaadin component in you screen controller code without GUI integration.

We have improved the documentation for version 6.1 in the part of creating custom components. Please look at this section: Using a Third-party Vaadin Component - CUBA Platform. Developer’s Manual

Thank you. I am now experimenting vaadin-addon “gantt for vaadin 7+”

i have created the component successfully using the Maven dependency, widgetset etc. Now trying to deal with the interface in the gui module. Noticed that in Stepper example, some methods are implemented. My question is, what is these methods coming from or referenced to? Is it related to the addon’s methods? Thanks for giving some insights.

Hi
Yes, you are right, I do only need basic integration, not the GUI integration. I have successfully added the vaadin Gantt add-on and I can see it in my project and use it. Now, I am a bit stuck on how I can initiate it in init method to show it in a layout. I have done the following to initiate in controller. I see nothing, may be i am missing something to visualize it!


@Override
    public void init(Map<String, Object> params) {
        createGantt();

        Component box = componentsFactory.createComponent(VBoxLayout.class);
        Layout layout = (Layout) WebComponentsHelper.unwrap(box);
        layout.addComponent(gantt);
        gantt.setSizeFull();
        layout.setSizeFull();
    }

createGantt() method:



    private void createGantt(){
        gantt = new Gantt();
        gantt.setWidth(100, Sizeable.Unit.PERCENTAGE);
        gantt.setHeight(500, Sizeable.Unit.PIXELS);
        gantt.setResizableSteps(true);
        gantt.setMovableSteps(true);

        Calendar cal = Calendar.getInstance();
        cal.setTime(new Date());
        gantt.setStartDate(cal.getTime());
        cal.add(Calendar.YEAR, 1);
        gantt.setEndDate(cal.getTime());

        cal.setTime(new Date());
        Step step1 = new Step("First step");
        step1.setStartDate(cal.getTime().getTime());
        cal.add(Calendar.MONTH, 2);
        step1.setEndDate(cal.getTime().getTime());

        gantt.addStep(step1);


        gantt.addClickListener(new Gantt.ClickListener() {

            @Override
            public void onGanttClick(Gantt.ClickEvent event) {
                Notification.show("Clicked" + event.getStep().getCaption());
            }
        });

        gantt.addMoveListener(new Gantt.MoveListener() {

            @Override
            public void onGanttMove(MoveEvent event) {
                Notification.show("Moved " + event.getStep().getCaption());
            }
        });

        gantt.addResizeListener(new Gantt.ResizeListener() {

            @Override
            public void onGanttResize(ResizeEvent event) {
                Notification.show("Resized " + event.getStep().getCaption());
            }
        });


    }

As I see, you’ve created a ‘box’ container and added a ‘gantt’ to it, but you haven’t add a’box’ container to the screen. Instead of creating the ‘box’ in the code try to define it in the screen xml and then inject it in your screen controller.


<vbox id="box"/>

@Inject
private BoxLayout box;

See the example when a new component is used outside of the FieldGroup here: [url=]https://doc.cuba-platform.com/manual-6.1/vaadin_addon_sample.html[/url]

It’s progressing. Now I can see some info displayed but incomplete! Please see the attached picture,

I’m not sure if it is the code for Gantt or CUBA config causing this. I have used the code given at the Gantt add-on site.


public class Projectdisplay extends AbstractWindow {

    @Inject
    private Gantt gantt;

    @Inject
    Step step;

    @Inject
    private VBoxLayout vBox;

    @Inject
    private Datasource<ProjectTask> projectTaskDs;

    @Inject
    private FieldGroup fieldGroup;

    @Inject
    private ComponentsFactory componentsFactory;

    @Inject
    private BoxLayout box;

    private TimeZone defaultTimeZone;

    private SimpleDateFormat dateFormat = new SimpleDateFormat(
            "MMM dd HH:mm:ss zzz yyyy");

    @Override
    public void init(Map<String, Object> params) {
        createGantt();

        // Component box = componentsFactory.createComponent(VBoxLayout.class);
        Layout layout = (Layout) WebComponentsHelper.unwrap(box);
        layout.addComponent(gantt);
        gantt.setSizeFull();
        //layout.setSizeFull();




    }


    private void createGantt(){
        gantt = new Gantt();
        gantt.setWidth(100, Sizeable.Unit.PERCENTAGE);
        gantt.setHeight(500, Sizeable.Unit.PIXELS);
        gantt.setResizableSteps(true);
        gantt.setMovableSteps(true);

        Calendar cal = Calendar.getInstance();
        cal.setTime(new Date());
        gantt.setStartDate(cal.getTime());
        cal.add(Calendar.YEAR, 1);
        gantt.setEndDate(cal.getTime());

        cal.setTime(new Date());
        Step step1 = new Step("First step");
        step1.setStartDate(cal.getTime().getTime());
        cal.add(Calendar.MONTH, 2);
        step1.setEndDate(cal.getTime().getTime());

        gantt.addStep(step1);


        gantt.addClickListener(new Gantt.ClickListener() {

            @Override
            public void onGanttClick(Gantt.ClickEvent event) {
                Notification.show("Clicked" + event.getStep().getCaption());
            }
        });

        gantt.addMoveListener(new Gantt.MoveListener() {

            @Override
            public void onGanttMove(MoveEvent event) {
                Notification.show("Moved " + event.getStep().getCaption());
            }
        });

        gantt.addResizeListener(new Gantt.ResizeListener() {

            @Override
            public void onGanttResize(ResizeEvent event) {
                Notification.show("Resized " + event.getStep().getCaption());
            }
        });


    }

Snip20160428_2

Unfortunately, the Gantt chart add-on is not supported by the out-the-box version of the CUBA Platform; consequently it will require extra time of dedicated support to investigate the subject. You can find more information here ([url=https://www.cuba-platform.com/consulting-and-development]High productivity application development platform) and contact us via e-mail (info@cuba-platform.com) or contact form ([url=https://www.cuba-platform.com/contacts]High productivity application development platform) to proceed further.

Hi Mortoza

Have you managed to integrate with vaadin gantt chart? or any gantt chart other than amcharts?

Kind regards
George

Hi George
I didn’t try it further for the Vaadin component. I am using AmChart Gantt chart for the time being until finding a better alternative as CUBA component.

Mortoza