3

カスタム CSS をメイクアップに使用するように gwt を設定するにはどうすればよいですか? これらのリンクはまったく役に立ちませんでした: 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

  • 問題は、lorum.gwt.xml ファイルで宣言した css ファイルを gwt で検出できないことです。デバッグ モードを開始すると、起動時に 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%;
}

サブ質問:
lorum.gwt.xml ファイルが次の構文を使用してそれを検出して使用するには、css ファイルをどこに保存する必要がありますか?<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 アプリの静的ファイルはどこに置くのですか? war フォルダまたは public フォルダ?

于 2012-07-18T09:43:56.620 に答える
0

CSS ファイルをインクルードするには、2 つの簡単な方法があります。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 に答える