CODEWITHSUNDEEP
cssvaadindeclarative
Andrew Sikorsky
Andrew Sikorsky

Reputation: 55

Vaadin Declarative UI with CSS

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?

Upvotes: 1

Views: 879

Answers (1)

Vojtech Ruzicka
Vojtech Ruzicka

Reputation: 17085

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

Upvotes: 2

Related Questions