如何跨GWT窗口小部件共享樣式表類型

我試圖創建一個複合窗口小部件，它將顯示子窗口小部件的「列表」，但我在使用此設置時會遇到一些問題。已經構建了一個簡單的演示，試圖找出解決方案。試圖用代碼如何跨GWT窗口小部件共享樣式表類型

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>

現在指定這樣

<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 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規則從不施加到上述兩個div元素。任何想法爲什麼這會失敗？或者當樣式包含不同css類之間的依賴關係規則時，在小部件之間共享.css樣式表的更好方式？

來源

2010-02-20 Jannick

這對我來說不是什麼錯 - 你的代碼至少接近正確（我一直在使用styleName=<whatever>而不是stylePrimaryName=<whatever>，所以這是你可能研究的一件事）。

調試這種問題的方法是使用Firebug來查看（1）哪些類名已應用於DOM元素，以及（2）哪些CSS規則在這些樣式的基礎上生效。

如果你把@external parentStyle, childStyle;放在CSS文件的開頭，那麼GWT不會混淆樣式名稱，並且你可以在Firebug中告訴已經應用了什麼名字。

一對夫婦更建議：

使用DevMode看看，看看它是否顯示任何錯誤（他們會在紅色文本）當您加載網頁 - 滾動到DevMode的窗口的左上角的底部窗格。
你可以用一個簡單的例子來試試這個，只用一個Composite類而不是兩個。

來源

2010-02-20 17:30:51 aem

感謝@external提示。調試所有這些混淆名稱的過程中真的遇到了麻煩。已在此處發佈我的解決方案。你知道是否有一個更優雅的方式，我想要存檔？ – Jannick 2010-02-20 18:00:58

啊，是的，我忘記了你在答案中描述的ensureInjected。這是讓共享樣式表正常工作的正確方法;如果你不這樣做，我認爲症狀是應用了CSS類，但沒有規則與它們相關聯。 Igor Kilmer的下面的評論是正確的 - 只有在跨越多個UiBinder小部件的風格時才使用共享樣式表。例如，我使用它們在相關但不同的UI元素中獲得了相似的外觀。 – aem 2010-02-21 19:22:48

發現，你需要注入以這種方式使用的樣式

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-20 17:58:50 Jannick

我認爲您誤解了CSS + UiBinder的一個核心概念 - 您在本地定義的CSS樣式（在UiBinder XML模板中）是* local * - 也就是說，您的'CssParent'和'CssChild'小部件可以具有相同的樣式名稱（不同規則或不同） - 沒有全局CSS命名空間，所有樣式名稱都會被混淆，以免它們發生衝突。因此，在大多數情況下，您並不需要像'.parentStyle .childStyle'這樣編寫選擇器，因爲您只能在本地應用該樣式。我只將全局CSS文件用於真正的全局樣式，如文本框中的錯誤等。 – 2010-02-20 18:15:43

好點。在這種情況下，CSS和base-html來自設計師。猜猜我必須用這種方法讓他們上車。 :) – Jannick 2010-02-20 19:02:24

如何跨GWT窗口小部件共享樣式表類型

回答

相關問題