web-dev-qa-db-ja.com

GWTスタイリングをオーバーライドする

現在GWTで再作成しているWebページの美しい純粋なHTMLモックアップがありました。 GWTアプリで同じCSSを使用しようとしていますが、うまく機能していません。 GWTスタイルは私のものを上書きしているようです。 GWTスタイルを完全に無効にできることはわかっていますが、追加するGWTコンポーネント（タブパネル、ボタンなど）のスタイルを設定したいと思います。 GWTスタイリングを無効にし、選択したコンポーネントに対してのみ有効にする方法はありますか？

cssgwt
28
KevMo

プロジェクトの_.css_ファイルにあるプロジェクトの_.gwt.xml_ファイルを継承することで、標準のcssルールをオーバーライドすることで問題を解決することができました。ユーザー定義の_.css_をこのように設定すると（通常の継承行の後）、標準のgwtスタイルシートで定義されている同じルールよりも1つのルールをカスケードする際の優先度が高くなります。それを適切に継承する方法を理解するのに数時間かかりました。最初は単に_<stylesheet src='WebTerminal.css' /&gt_と入力してみてください。 _.gwt.xml_ファイルにあり、_<link type="text/css" rel="stylesheet" href="WebTerminal.css">_ホストページに_.html_をコメントアウトしても、結果は得られませんでした。したがって、解決策は、次のように_.css_構成で_.gwt.xml_を設定するときに、相対パスを使用することです。

_<stylesheet src='../WebTerminal.css' />
_

相対パスの先頭にある_../_に注意してください。それがどのように機能するかを理解するには、Window.alert(GWT.getModuleBaseURL());メソッドの最初の行としてonModuleLoad()を追加します。実際には、ホストされているページのURLが_https://localhost:8080/myproject/resouces/webtermial/_のようになっているのに、_https://localhost:8080/myproject/resouces/WebTerminal.html_のようなものが表示されます。ここで、myproject/Resoucesは、_.css_ファイルを含むディレクトリであり、_.gwt.xml_のように_<stylesheet src='WebTerminal.css' />_に設定すると、コンパイラは_myproject/resouces/webtermial/WebTerminal.css_の検索を開始します。それを見つける。そのため、問題を解決するために_../_を追加することが唯一の方法である場合があります。

上記の言葉に加えて、最新のドキュメンタリーやグーグルグループで行われている議論を通して、この問題の説明を見つけることに成功しなかったことに言及したいだけです。 GWT自体には、チュートリアル内で徹底的な説明があったに違いない問題よりもはるかに複雑な問題があるため、理解するのがそれほど難しくないことを願っています。

23
vitrums

スタイルがオーバーライドされる理由は、gwtがプロジェクトをコンパイルするときに、独自のデフォルトのcssファイルが含まれるためです。 cssファイルのタイプは、使用しているデフォルトのスタイルのタイプによって異なります。

<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

上記のシナリオでは、clean.cssファイルが含まれます。このファイルには、テンプレートを完全にオフセットする次の一般的なスタイルが含まれています（marginパラメーターとbackgroundパラメーターは常にテンプレートを台無しにします）。

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

それらを削除し、他のすべてをそのままにしておくと（具体的には、「gwt」で始まるものをすべて残しておくと）、テンプレートは影響を受けません。

プロジェクトをコンパイルするたびにこれらの要素を削除する必要があることを忘れないでください。

お役に立てれば。

11
Vladimir

最も簡単な方法は、不要なスタイルを上書きすることです。たとえば、gwtでボタンのスタイルを設定したくない場合は、独自のcssファイルでgwt-Buttonクラスのスタイルを定義できます。

詳細情報 ここ 。

4
DLH

Clean.cssファイルを削除するために継承できる特別なリソースがあります。

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>

したがって、*。gwt.xmlファイルを見つけて検索します

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

そして、上の行に置き換えます。

3
Clay Lenhart

解決策は、実際にはgwt.xmlと同じディレクトリにpublic/cssフォルダを作成することです。

これらの2行をgwt.xmlに追加します。

<stylesheet src='css/project-name.css'/>

そして

<public path='public'/>

project-name.cssファイルをcssフォルダーに配置します。

これは、 GWTコンパイル と スーパー開発モード の両方で機能します。

2
Duncan Calvert

<！important>宣言を使用できます。それは最も簡単な選択の1つです

--- GWT ----

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 3px;
background: white;
}

---カスタムスタイル---

.gwt-PopupPanel {
padding: 0px !important;
}

---結果---

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 0px;
background: white;
}
2
Pavel

同様の状況に直面している他の人のために、stringo0が答えた答えを詳しく説明するために、私のスタイルを「GWT_APPNAME.css」に入れました。ここで、GWT_APPNAMEは、プロジェクトの作成時にGWTEclipseプラグインが生成するファイルの名前です。

このcssファイルは、ウェルカムページのhtmlと同じ名前でwarフォルダーのすぐ下にあります。 gwt-anchorスタイルをオーバーライドするためにこれを試しましたが、機能しました。

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}
1
Prashanth

デフォルトのGWTスタイルは次の方法で削除できます。

widget.setStyleName("");

または、独自のスタイルを指定します。

0
orad

Vitrusの答えは私にとってはうまくいきました、ありがとう！ただし、.cssファイルの変更は、ページを再読み込みするときにWebアプリに反映されませんでした。キャッシュの問題のようです。 Ctrl + F5で更新すると、これが解決します。詳細はこちら： http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok 。

0
Milo

背景画像を設定し、body要素に透明な背景を設定しようとすると、同様の問題が発生しました。要素に特定のスタイルを設定して、他のGWTスタイルを維持できるようにすることで問題を解決しました。

<body id="elementId">...</body>

#elementId {
   background: transparent;
}

それがあなたの特定の問題に役立つことを願っています。

0
drginm

これは簡単ですが、うまくいけば役立つ答えです。

私がしたことは、デフォルトのGWTスタイルから必要なスタイルをコピーしたことです。たとえば、標準スタイルを選択した場合、GWTはwar/WEB-INF/appengine-generated（これらの行のどこか）でstandard.cssを作成します-すべてのボタンスタイルをアプリのcssファイルにコピーしてから、構成ファイルは、標準のGWTスタイルを使用しないことを選択しました。

これは私たちのためにトリックをしました。

0
stringo0