3

如何设置 gwt 以使用我的自定义 css 进行化妆？这些链接根本没有帮助我： https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss?hl=cs http://code.google.com/p/google-web-toolkit -doc-1-5/wiki/GettingStartedStyle#Default_styles

  • 问题是我无法让 gwt 检测我在 lorum.gwt.xml 文件中声明的 css 文件，当我启动调试模式时，jetty 在启动时的日志输出中给出以下错误：

：

 00:00:00.811  [WARN] 404 - GET /lorum/stylesheet.css (127.0.0.1) 1418 bytes
          00:00:00.811  [INFO] Request headers
            00:00:00.811  [INFO] Host: 127.0.0.1:8888
            00:00:00.811  [INFO] Connection: keep-alive
            00:00:00.811  [INFO] User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/11.10 Chromium/18.0.1025.168 Chrome/18.0.1025.168 Safari/535.19
            00:00:00.811  [INFO] Accept: text/css,*/*;q=0.1
            00:00:00.811  [INFO] Referer: http://127.0.0.1:8888/Home.html?gwt.codesvr=127.0.0.1:9997
            00:00:00.812  [INFO] Accept-Encoding: gzip,deflate,sdch
            00:00:00.812  [INFO] Accept-Language: en-US,en;q=0.8
            00:00:00.812  [INFO] Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
            00:00:00.812  [INFO] Cookie: JSESSIONID=ywoku1zfjs0b
          00:00:00.812  [INFO] Response headers
            00:00:00.812  [INFO] Content-Type: text/html; charset=iso-8859-1
            00:00:00.812

它不会加载我的 CSS。

lorum.gwt.xml 来源：

l version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
    <!-- Inherit the core Web Toolkit stuff.                        -->
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
    <inherits name="com.google.gwt.resources.Resources" />
    <inherits name="com.company.lorum.gwt.client.stylesheet.css"/>
    <entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>

    <stylesheet src='stylesheet.css' />

    <servlet path="/AuthenticationImpl" class="com.company.lorum.gwt.server.implementations.AuthenticationServiceImpl" />
    <servlet path="/GeneralImpl" class="com.company.lorum.gwt.server.implementations.GeneralServiceImpl" />
    <servlet path="/ProjectImpl" class="com.company.lorum.gwt.server.implementations.ProjectServiceImpl" />
</module>
  • 我尝试在欢迎文件（Home.html）中继承我的css文件，它有效；但它不会将样式规则应用于我的小部件。而且我不喜欢这种方法，因为不同的浏览器对 css 语法的行为不同。如果你知道我是如何让它工作的，我会使用它。这是我的 Home.html 源

：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <title>lorum</title>
</head>
<body>
<script language="javascript" src="lorum/lorum.nocache.js"></script>
</body>
</html>

CSS（stylesheet.css）源（很简单，因为我只想测试它是否有效）：

.gwt-MenuBar {
color:green;
}
.gwt-Button {
font-size: 200%;
}

子问题：
我必须将我的 css 文件存储在哪里，以便我的 lorum.gwt.xml 文件使用以下语法检测和使用它：<stylesheet src='stylesheet.css' />

4

4 回答 4

9

这对我有用，我不会为我自己的答案投票，只有在其他人验证该解决方案也适用于他们的情况下。

实际上，只需2 个简单的步骤即可实现。

步骤 1.
将您的样式表 (css) 文件放在您的 webapp 文件夹中

步骤 2.
将以下行添加到您的 gwt.xml 文件：

<stylesheet src='/yourstylesheetname.css' />

注意：把这条线放在最后一个继承声明和你的入口点声明之间。

额外： 我的 gwt.xml 来源：

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
    <inherits name="com.google.gwt.resources.Resources" />

    <stylesheet src='/customsheet.css' />

    <entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>

    <servlet path="/AuthenticationImpl" class="com.company.lorum.gwt.server.implementations.AuthenticationServiceImpl" />
    <servlet path="/GeneralImpl" class="com.company.lorum.gwt.server.implementations.GeneralServiceImpl" />
    <servlet path="/ProjectImpl" class="com.company.lorum.gwt.server.implementations.ProjectServiceImpl" />
</module>

项目树

java     __ com __ company __ lorum __ gwt __ client __ **
                                           __ server __ **
                                           __ shared __ **
                                           __ Lorum.gwt.xml
resources__ **
webapp   __ WebFiles __ **
         __ WEB-INF  __ **
         __ Home.html
         __ mystylesheet.css
于 2012-07-18T13:17:09.430 回答
3

如果要将 css 引用放在 gwt.xml 文件中，则必须将文件添加到 public 文件夹中，然后您可以引用相对于编译文件位置的 css，因为它将从 js 文件中引用，这将使浏览器在文件旁边的已编译文件夹中查找。但是，您可以将它放在 webapp 文件夹中，这也会导致它被复制到目标并从 gwt.xml 中引用它。

将其放入 HTML 文件中也可以。但是，如果您要覆盖任何默认小部件样式，请将 css 链接放在 .nocache.js 文件之后，以便它覆盖其值

检查此以获取更多信息：

我在哪里放置 GWT 应用程序的静态文件？战争文件夹还是公用文件夹？

于 2012-07-18T09:43:56.620 回答
0

包含 CSS 文件有两种简单的方法。你可以在 HTML 中定义它，但是如果你想覆盖一个已经被使用的值，你必须在 CSS 属性的末尾使用 !important 标记。

或者您可以在 YourName.java 中定义它

public interface CellTabelResources extends CellTable.Resources {
    public interface CellTableStyle extends CellTable.Style {
    };

    @Source({ "style.css" })
    CellTableStyle cellTableStyle();
}

这使您的 style.css 最重要，因此它会覆盖所有其他样式。

于 2012-07-18T12:31:38.860 回答
0

以下解决方案对我有用：

  1. 将 YourCss.css 文件放到 YourApplication.html 所在的同一目录下

  2. 将以下行添加到<head>YourApplication.html 的块中：

    <link type="text/css" rel="stylesheet" href="YourCss.css">
于 2016-10-09T11:23:05.327 回答