3

子ウィジェットの「リスト」を表示する複合ウィジェットを作成しようとしていますが、この設定で css を機能させるのに問題があります。解決策を見つけ出すために、簡単なデモを作成しました。このように親ウィジェットを指定しようとしました

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
   xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

 <g:FlowPanel ui:field="childPanel" stylePrimaryName='{res.style.parentStyle}'>

 </g:FlowPanel>

</ui:UiBinder>

コード付き

public class CssParent extends Composite{

interface MyUiBinder extends UiBinder<Widget, CssParent> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

@UiField FlowPanel childPanel;

   public CssParent() {
      initWidget(uiBinder.createAndBindUi(this));

       CssChild child = new CssChild();
      childPanel.add(child);
   }  
}

子ウィジェットは単に次のように指定されます

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
   xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

    <g:HTMLPanel stylePrimaryName='{res.style.childStyle}'>
       Howdy folks
    </g:HTMLPanel>

  </ui:UiBinder>

ご覧のとおり、どちらもリソース バンドルを参照しています。

public interface Resources extends ClientBundle {

@Source("CssDemo.css")
Style style();

  public interface Style extends CssResource{
     String parentStyle();
     String childStyle();
  }
}

これも CssDemo.css: .parentStyle{ background-color: gray; を参照しています。}

.parentStyle .childStyle{
    background-color: yellow;
}

しかし、何らかの理由で、これらの css ルールが上記の 2 つの div 要素に適用されることはありません。これが失敗する理由について何か考えはありますか? または、スタイルに異なる css クラス間の依存関係ルールが含まれている場合、ウィジェット間で .css スタイル シートを共有するより良い方法はありますか?

4

2 に答える 2

2

この方法で使用されるスタイルを挿入する必要があることがわかりました

 static{
     Resources.INSTANCE.style().ensureInjected();
 }

（このシングルトンっぽいインスタンスフィールドをバンドルに追加しました）

public interface Resources extends ClientBundle {

    public static final Resources INSTANCE =  GWT.create(Resources.class);

    @Source("Resources.css")
    Style style();

今は動作しますが、この方法（ "{res.style.someClass}"）+CssResourceインターフェイスで定義する必要のあるすべてのメソッドを実行する必要はありません。

共有のui：style宣言（おそらくcssファイルに基づく）を実行して、通常の内部スタイルブロックのように使用できれば便利です。

于 2010-02-20T17:58:50.237 に答える
1

何が間違っているのかは私には明らかではありません-あなたのコードは少なくとも正しいに近いです(私はstyleName=<whatever>代わりにを使用しているstylePrimaryName=<whatever>ので、それはあなたが調べるかもしれないことの1つです)。

このような問題をデバッグする方法は、Firebug を使用して、(1) DOM 要素に適用されたクラス名と、(2) それらのスタイルに基づいて有効になる CSS ルールを確認することです。

CSS ファイルの先頭に置く@external parentStyle, childStyle;と、GWT はスタイル名を難読化せず、適用された名前を Firebug で知ることができます。

さらにいくつかの提案：

  1. DevModeを使用して、ページをロードしたときにエラー (赤いテキストで表示されます) が表示されるかどうかを確認します。DevMode ウィンドウの上部ペインの下部までスクロールします。
  2. 2 つではなく 1 つの Composite クラスを使用して、より単純な例でこれを試すことができます。
于 2010-02-20T17:30:51.150 に答える