Vaadin add-on and Sass - CSS theme compilation, classpath

Support
#1

Hi
I am trying to use a Vaadin Add-on (Gantt Chart) and have successfully included this component in my test project with some demo code. It shows some texts (list of year and month names…) instead of the full Gantt-chart due to some issue. Following is the feedback found at the add-on page for the same cause:

“First, make sure that your app inherits gantt addon in your .gwt.xml file.
Then also make sure that gantt theme is icluded correctly. If you use Valo theme, then just copy the samples in src/main/webapp/VAADIN/themes/demo folder and rename theme name ‘demo’ to correct one.
And don’t forget @Theme(“yourThemeName”) in your UI class”
“Looks like gantt’s theme files are not used. Have you compiled Sass to css? Vaadin Sass compiler should do that on the fly if development mode is enabled. But you can compile it also explicitly. See few options how to do it from here: Compiling Sass Themes | Themes | Framework | Vaadin 8 Docs
Gantt jar package needs to be also in Sass compiler’s classpath. Otherwise required gantt scss file(s) won’t be included in theme.”

My AppWidgetSet contains as follows:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.haulmont.cuba.web.toolkit.ui.WidgetSet"/>
    <!-- Uncomment for SuperDevMode -->
    <!--<add-linker name="xsiframe"/>-->
    <!--<set-configuration-property name="devModeRedirectEnabled" value="true" />-->
    <!--<set-property name="user.agent" value="safari" />-->
    <inherits name="org.tltv.gantt.WidgetSet"/>
</module>

Therefore, can you please help:

  1. Where is the Sass compiler’s classpath located in CUBA? (as I am CUBA is using halo / havana theme, is it similar ?)
  2. For any Vaadin Add-on, do I need to put the Jar file to somewhere or it will be downloaded automatically?

Thanks in advance for your help.

#2

Hi,
for now, we do not support automatic detection of Vaadin add-ons styles. We are planning to improve it in one of the next minor releases.

You can add theme files from the add-on manually. Follow these steps:

  1. Create theme-extension of the halo theme
  2. Open build.gradle file and add the dependency of the add-on to the themes() configuration:

configure(webModule) {
...
    dependencies {
    ...
        themes('org.tltv.gantt:gantt-addon:0.9.3') {
            exclude group: 'com.vaadin'
        }
  1. Open modules/web/themes/halo/halo-ext.scss file and add gantt imports and includes:

@import "../halo/halo";
@import "../VAADIN/addons/gantt/gantt";
@import "../VAADIN/addons/gantt/gantt-valo";

/* Define your theme modifications inside next mixin */
@mixin halo-ext {
  @include halo;

  @include gantt;
  @include gantt-valo;
}
  1. Build and run your application

I’ve attached sample application, so you can see it in action.

  1. SCSS classpath is built by themes() configuration of the web module
  2. All necessary jars will be downloaded automatically by gradle

gantt-demo.zip (22.3K)

2 Likes