0

I am trying to set a new background color for my buttons in Vaadin. But my UI does not seem to load mytheme since the components loose their look and looks like plain html without styling.

@Title("My cooool Vaadin project")
@Theme("mytheme")
public class MainUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Panel panel = new Panel();

        FormLayout formLayout = new FormLayout();
        Button button = new Button("Press me!!!");
        button.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                System.out.println("BUTTON CLICKED!!!");
            }
        });
        formLayout.addComponent(button);
        panel.setContent(formLayout);

        Window window = new Window();
        window.setContent(panel);
        window.setWindowMode(WindowMode.MAXIMIZED);
        this.addWindow(window);
    }

    @WebServlet(urlPatterns = "/*", name = "MainUI", asyncSupported = true)
    @VaadinServletConfiguration(ui = MainUI.class, productionMode = false)
    public static class UIServlet extends VaadinServlet {
    }
}

I have this file structure as it is on this image: https://i.stack.imgur.com/AWeSz.png

mytheme.scss:

@import "../valo/valo.scss";

@mixin mytheme {
   @include valo;

   /* An actual theme rule */
   .v-button {
     color: blue;
     background: aquamarine;
   }
}

styles.scss:

@import "addons.scss";  /* I also have the addons.scss file*/
@import "mytheme.scss";


.mytheme {
  @include addons;
  @include mytheme;
}

In my pom.xml I have both the vaadin-client-compiled and vaadin-client-compiler, both the latest version (7.4.3). And of course vaadin-themes and all the other vaadin dependencies.

EDIT

09:07:36,726 INFO  [org.wildfly.extension.undertow] (MSC service thread 1-4) JBAS017534: Registered web context: /vaadinproject
09:07:36,844 INFO  [org.jboss.as.server] (DeploymentScanner-threads - 2) JBAS018559: Deployed "vaadinproject.war" (runtime-name : "vaadinproject.war")
09:07:37,618 INFO  [com.vaadin.server.VaadinServlet] (default task-31) Request for /VAADIN/themes/mytheme/styles.css not handled by sass compiler while in production mode
09:07:41,538 WARNING [com.vaadin.server.communication.UidlRequestHandler] (default task-2) Invalid security key received from 127.0.0.1
09:07:41,708 INFO  [com.vaadin.server.VaadinServlet] (default task-6) Request for /VAADIN/themes/mytheme/styles.css not handled by sass compiler while in production mode
number_43
  • 29
  • 1
  • 5
  • if you run in production mode, you have to compile the sass file beforehand. log message in your server log would tell you so. are there any errors in your server log? any infos from your browsers devtools (firebug, ...)? – cfrick Jun 09 '15 at 07:15
  • Oh, how can I compile it? Can I compile it using Maven? Look at my edit above. If they are beeing compiled in development mode, can I then switch to production mode and they will still be compiled? – number_43 Jun 09 '15 at 07:31
  • i don't use maven myself. depending on your setup there might be a taks "mvn vaadin:compile-theme" (see https://vaadin.com/maven). and no, they most likely will only be compiled at runtime. you would have to build them. but i'd expect that be done once you roll your war/jar in your project. – cfrick Jun 09 '15 at 07:51
  • Check this for Maven based compilation on build: http://stackoverflow.com/questions/16561633/vaadin-cannot-find-themes-when-in-productionmode – eeq Jun 10 '15 at 10:35

1 Answers1

0

I see that you have not enabled productionMode, i.e., productionMode = false and your theme is not compiling, I guess.

Please clean the mvn project using following command:

mvn eclipse:clean and rebuild your project.

See here for more info: https://maven.apache.org/plugins/maven-eclipse-plugin/clean-mojo.html

UnP
  • 108
  • 14