vaadin 7 CSS loading is not complete

Hi all,

I need your technical expertise about this issue :
I am trying to migrate a Vaadin6 application (which works fine) into Vaadin7.

I replaced @import “…/reindeer/styles.css”;
by @import “…/reindeer/legacy-styles.css”; in my style.css, as stated in this web page :
https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
I verified this css is present in the jar : MyProject / ivy.xml / vaadin-themes-7.1.2.jar => VAADIN\themes\reindeer\legacy-styles.css => ok

But when i clean the eclipse cache then i launch my application, the display is very bad, and the debug mode gives the following message : “CSS loading is not complete”

So, it seems the display is bad because
the css file is not taken into account
.
Someone has an advice ?

Eric

Hi Eric,

  1. Create a project with:
    mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.3 -Dpackaging=war

…at the moment to the question Y: respond with N.
Repeat the work until it will be possible to enter the theme name of your application (trust me it is very important!)


xxx@yyy:~$ tree essai
essai
├── pom.xml
└── src
    └── main
        ├── java
        │   └── com
        │       └── onela
        │           ├── AppWidgetSet.gwt.xml
        │           └── MyVaadinUI.java
        └── webapp
            ├── META-INF
            │   ├── context.xml
            │   └── MANIFEST.MF
            └── VAADIN
                └── themes
                    └── mytheme
                        ├── addons.scss
                        ├── favicon.ico
                        ├── mytheme.scss
                        └── styles.scss
  1. if your theme is ‘mytheme’ look at mytheme.scss (you should use sass, not very difficult) to modify your styles.

  2. compile your theme click on the command ‘Run as’ and ‘Maven install’. This will transform your mytheme.scss in styles.css and your application ui will load this file for you.

  3. include the annotation @Theme(“mytheme”) above the ui class


@Theme("mytheme")
@SuppressWarnings("serial")
public class xxxUI extends UI

Do you use the @Theme annotation instead of the setTheme method?
Did you clear the Browser Cache before opening the Application in your Browser?

Hi Marius : you are right : i forgotten to clean my browser cache. I did it and
it works
: the display of my application is perfect => Thank you !

Hi Philippe : i do not know Maven, i used the Vaadin7 plugin into Eclipse for creating the project.
But i will study Maven next week, so i will try your example, thank you

Glad that it worked for you.

Maven is a dependency-management system similar to Ivy, which is included in the Vaadin Plug-in for Eclipse. If you want to use Maven there is the m2eclipse Plug-in for Eclipse.
What Philippe’s approach would do is create a new project after the application archetype (which may also be possible using Ivy but i’m not sure as i normally use maven). This new Project will use the new SASS styling instead of the “old” css styling.
More Information

I forgot to said that the creation of maven vaadin project is make by hand with a terminal. After I open eclipse and I import the Maven project.