Question

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

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

我的问题是我不知道在哪里放置.css文件以及如何＆＃34;注入＆＃34;它。我已按照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 {
...
}

然而它不起作用。不仅是＆＃34;测试＆＃34;未应用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。在这个场合应该做些什么？

Answer 1

你是正确的创建文件夹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样式规则的详细信息。

Answer 2

我找到了解决方案。在我看来有点奇怪，但当有人创建一个新的主题时，项目总是尝试在Theme文件夹中找到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中。

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

2 个答案: