在GWT UiBinder風格中訪問CSS常量

使用GWT 2.1，我試圖創建一個包含許多常量和常見樣式的CSS文件。我想使用的用戶界面：風格標籤將其包括在UiBinder的模板：在GWT UiBinder風格中訪問CSS常量

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

    <ui:style field="css" src="constants.css" /> 
</ui:UiBinder>

我可以很容易地利用樣式元素：

<g:FlowPanel styleName="{css.panel}">...</g:FlowPanel>

但試圖使用常量在另一個風格塊失敗：

<ui:Style> 
    .templateSpecificStyle { 
     background-color: {css.royalBlue}; 
     padding: 1em; 
    } 
</ui:Style>

奇怪，我沒有收到編譯錯誤。混淆的CSS類被創建;但是，內容是空的。有沒有辦法在另一個Style塊中訪問這些CSS常量？是否有可能使用較早的ResourceBundle/CssResource模式？

來源

2010-11-12 schrierc

重新閱讀https://stackoverflow.com/questions/3533211/need-app-wide-css-constants-in-gwt/4143017#4143017我看到常數工作後，如果你的風格塊中添加模板特定的樣式：

<ui:Style src="constants.css"> 
    .templateSpecificStyle { 
     background-color: royalBlue; 
     padding: 1em; 
    } 
</ui:Style>

這對我的需求是完美的。

來源

2010-11-12 22:54:15 schrierc

這也適用於gss（在GWT 2.7.0）。真棒。 – 2015-06-10 21:18:24

在某些類中定義這些常量可能最符合您的興趣，然後使用運行時替換將此常量包含在您打算使用的每個CSS資源中。

CSSConstants.java

package com.foo.client; 
public final class CSSConstants { 
    public static final String ROYAL_BLUE = "#4169E1"; 
}

在UiBinder的模板

<ui:style> 
    @eval royalBlue com.foo.client.ROYAL_BLUE 
    .templateSpecificStyle { 
    background-color: royalBlue 
    } 
</ui:style>

需要注意的是該技術的連名稱是「運行時替換」樣式塊，GWT編譯器將取代royalBlue與字符串文字，因爲royalBlue的值可以在編譯時評估。

更多很酷的東西，你可以在CSS資源做，看看http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource

來源

2010-11-12 22:23:58 Wesley

對於@eval我希望在每個UiBinder模板中引用的每個常量，它似乎真的很冗長，並且有點難看。 constants.css還包含一些有用的樣式。我真的希望有一個更清潔的方式。是一個非常好的功能，因爲它會自動生成接口。 – schrierc 2010-11-12 22:32:56

我同意 - 很多GWT的東西有時可能會變得非常冗長。另一種方法是擴展'CssResource'接口，以便可以用這種方式公開常量。這樣可以避免創建'CSSConstants.java'。不過，你仍然需要'@ eval'來獲得他們需要的樣式。 – Wesley 2010-11-12 23:33:37

在GWT UiBinder風格中訪問CSS常量

回答

相關問題