GWT共享CSS樣式不起作用

我需要在幾個用戶界面活頁夾模板中使用相同的樣式，因此我按照https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Using_an_external_resource中所述完成了所有操作。GWT共享CSS樣式不起作用

所以我做了以下內容：

1.創建資源接口：

 
public interface Resources extends ClientBundle { 
    @Source("shared.css") 
    Style style(); 

    public interface Style extends CssResource { 
     String grayedOut(); 
    } 
}

2.創建shared.css文件在同一目錄下的資源類：

 
.grayedOut{ 
    background-color: red; 
}

3.增加with元素爲UI的Binder模板： <ui:with type="correct.package.Resources" field="res"/>

4.在UI活頁夾模板中添加了對樣式的引用：addStyleNames="{res.style.grayedOut}"

但是它不起作用。該視圖呈現爲與grayedOut樣式完全不同。

但是我觀察了兩兩件事：

在螢火/ Chrome瀏覽器開發工具，我可以看到，元素已分配對應我想添加一個風格樣式ofuscated名稱：class="GAWERH0MI gwt-TabLayoutPanelContent"（GAWERH0MI似乎對應到我的grayedOut類），但我無法找到它在「元素樣式」面板，這可能意味着這個類是空的（沒有正文）。（我做過實驗並將空類分配給元素，並在該工具中具有相同的效果）。
當我在.css中更改樣式名稱時，出現運行時錯誤，無法找到樣式grayedOut，這似乎意味着我的樣式類通常可以成功找到，但由於某種原因無法按預期工作。

來源

2012-07-06 Piotr Sobczyk

您可能忘記了在Resources.Style實例上調用ensureInjected()。

這是一個<ui:style>自動完成（因爲你沒有編碼的ClientBundle和CssResource接口，它們被UiBinder的爲您生成），但不適用於任何其他CssResource。

雖然您可以使用@UiField Resources res，但會注入<ui:with field="res">的值，因此在撥打createAndBindUi後立即致電res.style().ensureInjected()。
IMO，你最好將Resources實例注入你的視圖並使用@UiField(provided=true)，因此要麼確保ensureInjected()在實例注入視圖之前調用，要麼在每個視圖中選擇調用ensureInjected()。作爲https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Share_resource_instances

來源

2012-07-06 14:14:55

謝謝，托馬斯。但要撥打資源。style（）我需要一個'Resources'實例，並且它由UIBinder內部化（'您可以通過元素爲您的模板提供資源，但以它們爲您實例化爲代價）「。說。那麼何時/如何調用這種方法？另外可惜的是，在我連接的文檔中有一些看起來像完整的工作示例，但沒有提到調用'ensureInjected（）'，這對於此代碼的工作非常重要:(。很容易浪費大量的實時複製來自不工作的文檔的示例 – 2012-07-06 14:30:02

調用'ensureInjected'是一種痛苦，幸運的是，在CssResource的第二個實例上對'ensureInjected'的調用適用於相同類型的所有CssResources。在每個UiBinder的Java文件的頂部有一個快速的'static {GWT.create（）; css.ensureInjected（）;}''''''''' ensureInjected在''編輯的ClientBundles的所有CssResource子代中自動調用。 – 2012-07-06 14:42:34

@PiotrSobczyk：它在https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#CssResource_Overview中記錄 – 2012-07-06 14:47:12

UI部件的java文件：

@UiField 
Resources res; 
public YourWidget() { 
     initWidget(uiBinder.createAndBindUi(this));  
     res.style().ensureInjected(); 
    }

UI部件的XML文件：

<ui:with field='res' type="your path to Resource class" />

和

<g:Label addStyleNames="{res.style.grayedOut}" ui:field="icon"></g:Label>

來源

2012-09-26 13:33:15 venat0r888

GWT共享CSS樣式不起作用

回答

相關問題