Vaadin 瓦丁甘特图不可读

我想使用vaadin甘特图组件，并使用一些代码示例进行测试。 我可以创建对象，但不可读

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);
    }
}

这就是它看起来的样子：

---

我也遇到了同样的问题，过了一会儿，我找到了解决办法

首先，您必须在主题中添加一个

addons.scss

文件

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;
}

之后，修改主题文件：

webapp/VAADIN/themes/myteme/mystyle.scss：

@import "addons.scss";
@import "../../../VAADIN/addons/gantt/gantt-valo.scss";
@include addons;
@include gantt-valo;    

此外，您的小部件集需要从gantt加载项之一继承：

<module>
    <inherits name="org.tltv.gantt.WidgetSet" />
</module>

在使用自定义客户端代码时，必须将客户端编译器依赖项添加到生成过程中：

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client-compiler</artifactId>
</dependency>

com.vaadin
vaadin客户端编译器

注意vaadin-maven.plugin，必须告诉它编译小部件集：

<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>

com.vaadin
vaadin maven插件
${com.vaadin_version}
-Xmx1G-Xss1G
${basedir}/src/main/webapp/VAADIN/widgetsets
${basedir}/src/main/webapp/VAADIN/widgetsets
真的
真的
资源
更新主题
更新WidgeSet
编译

我也对探索Vaadin甘特图感兴趣，您的问题解决了吗？