在 Vaadin 应用程序中应用 Css 样式答案

【问题标题】：Apply Css styling in Vaadin application在 Vaadin 应用程序中应用 Css 样式
【发布时间】：2013-06-12 18:56:38
【问题描述】：

我正在尝试在Vaadin 7 应用程序中应用正常的Css fomating（我是 Vaadin 的新手），但我无法使其正常工作。特别是我想在GWT 中的表格上使用addStyleName() 方法：

Table table = new Table("Films");
table.addStyleName("test");

我的问题是我不知道将 .css 文件放在哪里以及如何“注入”它。我已按照Vaadin Book 和question 的第一个答案的说明进行操作，但在我的项目中它不起作用。 WebContent 下没有文件夹VAADIN。我创建了文件夹VAADIN/Themes/mytheme，并在其中创建了文件mytheme.css 和styles.css。我不确定是否需要自定义文件styles.css（可能问题来自于此）。文件mytheme.css 看起来像：

@import "../reindeer/styles.css";

.test{
    margin-left: 100px;
    margin-top: 100px;
    margin-right: 100px;
}

并且文件styles.css 是空的。在应用程序类中我使用注解：

@Theme("mytheme")
@SuppressWarnings("serial")
public class MyprojectUI extends UI {
...
}

但是它不起作用。不仅没有应用“测试”css 类，而且UI 的标准css 样式也丢失了（带有黑色字母的白页）。我也收到警告：

Requested resource [/VAADIN/themes/mytheme/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
Jun 12, 2013 8:44:44 PM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN

好的，它没有找到主题jar。出了什么问题，因为说明没有表明不同的东西。也许是

@import "../reindeer/styles.css";

更新：这与question 中的问题相同，但我不使用 maven。这种情况下应该怎么办？

【问题讨论】：

标签： css gwt resources vaadin

【解决方案1】：

我找到了解决方案。在我看来有点奇怪，但是当有人创建新主题时，该项目总是试图在主题文件夹中找到一个styles.css 文件。 styles.css 文件不应为空，但应导入 mytheme.css。最后的css文件是：

mytheme.css：

@import "../reindeer/legacy-styles.css";
@import "../reindeer/styles.css";

.test{
    margin-top: 10px;
    margin-left: 10px;
}

styles.css：

@import "mytheme.css";

legacy-styles.css 和 styles.css 文件包含在 vaadin.themes jar 中。

【讨论】：

mythemes.css 不应导入 "../reindeer/styles.css"

【解决方案2】：

创建文件夹 VAADIN/themes/mytheme 是对的。在那里创建一个名为 styles.css 的 css 文件并添加 @import "../reindeer/legacy-styles.css";

现在您不应收到“未找到请求的资源”异常。

在您的文件 VAADIN/themes/mytheme/styles.css 中，您可以覆盖或定义新的 css 类。

如果你想给表格添加一个样式名称，比如“myColor”，你必须在你的styles.css中定义它，如下所示：

.v-table-myColor { color: red; }

并将其添加到表中：table.addStyleName("myColor");

有关here 表的 CSS 样式规则的更多信息。

【讨论】：

使用 Vaadin 7 和纯 CSS 应该导入 "../reindeer/legacy-styles.css" 而不是 styles.css