Vaadin声明性用户界面与CSS

所以，关于这个问题。我使用Vaadin 7.4.3。我想使用声明式用户界面，但我没有正确的方式使用CSS。Vaadin声明性用户界面与CSS

例如，我有映射MainView.html文件：

<!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映射：

@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()); 
    } 
}

简单的CSS（common.css），用于测试：

#marginTop { 
    margin-top: 20px; 
} 

.marginTop { 
    margin-top: 20px; 
}

但是... CSS不起作用。任何想法？

来源

2015-04-16 Andrew Sikorsky

请问您能更具体些什么“不成功”是什么意思？是实际加载的CSS（见你的萤火虫，...）。接下来检查，如果该类甚至应用于生成的HTML，并且没有其他样式覆盖它。 – cfrick

你不应该像这样附加CSS样式表。你应该把你的CSS放在主题中。

好方法是将您的自定义主题创建为现有Vaadin主题的扩展，如Valo或驯鹿，然后仅添加您需要调整应用程序的自定义样式。 vaadin的书有一个伟大的部分致力于Creating and using themes和How to create a theme in Eclipse。还有一个关于Creation of Sass Themes的Vaadin Wiki Post。

另外，Valo主题尤其可以非常简单的方式进行很大调整，只需更改一些预定义变量的值，即定义颜色，边距等。您可以找到一个示例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";

来源

2015-04-16 12:27:33

Vaadin声明性用户界面与CSS

回答

相关问题