Vaadin gantt chart is not readable - vaadin

Question

I want to use the vaadin gantt chart component and used some of the code examples for a test.
I can create the object but is not readable
public class PlanningView extends VerticalLayout implements View {
// declare parent GUI
private MainUI myUI;
// declare navigator
public Navigator navigator;
// declare menubar
public MenuGenerator menubar;
private TimeZone defaultTimeZone;
private Gantt gantt;
private NativeSelect reso;
private DateField start;
private DateField end;
private SimpleDateFormat dateFormat = new SimpleDateFormat("MMM dd HH:mm:ss zzz yyyy");
public PlanningView(Navigator navigator, MainUI myUI) {
this.myUI = myUI;
this.navigator = navigator;
menubar = new MenuGenerator(this);
VerticalLayout mainlayout = new VerticalLayout();
gantt = new Gantt();
gantt.setWidth(100, Unit.PERCENTAGE);
gantt.setHeight(500, 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);
mainlayout.addComponents(gantt);
addComponent(mainlayout);
}
#Override
public void enter(ViewChangeEvent arg0) {
// TODO Auto-generated method stub
Notification.show("Planning");
}
public void navigate(String page) {
navigator.navigateTo(page);
}
}
This is what it looks like:

Answer 1

I just had the same issue and after a while, I found the solution.
First, you have to add a addons.scss file to your theme
webapp/VAADIN/themes/mytheme/addons.scss:
/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */
/* Provided by gantt-addon-1.0.1.jar */
#import "../../../VAADIN/addons/gantt/gantt.scss";
/* Import and include this mixin into your project theme to include the addon themes */
#mixin addons {
#include gantt;
}
Afterward, modify your theme file:
webapp/VAADIN/themes/mytheme/mystyle.scss:
#import "addons.scss";
#import "../../../VAADIN/addons/gantt/gantt-valo.scss";
#include addons;
#include gantt-valo;
Additionally, your widget set needs to inherit from the one of the gantt addon:
<module>
<inherits name="org.tltv.gantt.WidgetSet" />
</module>
As you are using custom client side code, you have to add the client-compiler dependency to your build process:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiler</artifactId>
</dependency>
Be aware of the vaadin-maven.plugin, which must be told to compile the widget set:
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${com.vaadin_version}</version>
<configuration>
<extraJvmArgs>-Xmx1G -Xss1G</extraJvmArgs>
<webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets</webappDirectory>
<hostedWebapp>${basedir}/src/main/webapp/VAADIN/widgetsets</hostedWebapp>
<compileReport>true</compileReport>
<strict>true</strict>
</configuration>
<executions>
<execution>
<goals>
<goal>resources</goal>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>