Vaadin Declarative UI with CSS

Question

So, about the problem. I use Vaadin 7.4.3. I want to use declarative UI but i haven't right way with CSS using.

For example, i have MainView.html file with mapping:

<!DOCTYPE html>
<html>
    <head>
        <meta name="package-mapping" content="auth:my.widget.package.web.main.auth" />
        <link href="./styles/common.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <v-vertical-layout size-full style-name="marginTop">
            <auth-login-panel :right/>
        </v-vertical-layout>
   </body>
</html>

Java mapping:

@Theme("valo")
@Widgetset("my.package.MyAppWidgetset")
public class MainView extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MainView.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
       DesignContext context =   Design.read(getClass().getResourceAsStream("MainView.html"), null);
       setContent(context.getRootComponent());
    }
}

Simple CSS (common.css) for test:

#marginTop {
    margin-top: 20px;
}

.marginTop {
   margin-top: 20px;
}

But... css not works. Any ideas?

Answer 1

You should not attach css stylesheets like this. You should put your CSS in a theme.

Good way is to create your custom theme as an extension of a existing Vaadin theme such as Valo or Reindeer and then add only your custom styles which you need to adjust your application. Book of vaadin has a great section dedicated to Creating and using themes and also How to create a theme in Eclipse . There is also a Vaadin Wiki Post regarding Creation of Sass Themes .

Also, Valo theme in particular can be greatly adjusted in very simple way by just changing value of some predefined variables which define colors, margins etc. You can find an example here .

$v-app-loading-text: "Dark & Flat Valo";

$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel: false;
$v-shadow: false;
$v-gradient: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border-radius: 0;
$v-border: 2px solid v-tone;
$v-overlay-shadow: 0 0 0 2px (v-tint 10);
$v-focus-style: $v-focus-color;
$v-font-family: "Lato", sans-serif;
$v-font-weight--header: 600;

@import "../valo/valo";

Vaadin Declarative UI with CSS

Question

1 answers

solution1
2 2015-04-16 12:27:33

Vaadin Declarative UI with CSS

Question

1 answers

solution1 2 2015-04-16 12:27:33

solution1
2 2015-04-16 12:27:33