我如何用UiBinder的

申報依賴式的名字有一個包含文本區域的簡單部件UiBinder的：我如何用UiBinder的

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <g:TextArea visibleLines="3" /> 
</ui:UiBinder>

我想控制這個文本區域爲可寫的背景顏色和只讀狀態。 GWT使用「-readonly」樣式名稱裝飾器來實現這一點。所以，我試試這個：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <ui:style> 
     .textBoxStyle { 
      background-color:yellow; 
     } 
     .textBoxStyle-readonly { 
      background-color:lightgray; 
     } 
    </ui:style> 

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" /> 
</ui:UiBinder>

顯然，這將無法工作，因爲樣式名稱混淆爲導致這樣的事情CssResources：

.G1x26wpeN { 
    background-color:yellow 
} 
.G1x26wpeO { 
    background-color: lightgray; 
}

爲可寫textarea的結果HTML看起來是這樣的：

<textarea tabindex="0" class="G1x26wpeN" rows="3"/>

只讀textarea的看起來是這樣的：

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>

我該如何聲明樣式，以便GWT將混淆主要部分而不是「-readonly」decdorator？

我知道我可以禁用整個樣式名稱的模糊處理。但我想在使用裝飾器時保持混淆。

來源

2010-01-12 Eduard Wirch

如果你想使用這種風格的所有隻讀TextArea s，那麼我建議只修改GWT主題CSS文件.gwt-TextArea-readonly風格。
否則，我只能想到在您設置TextArea只讀時以編程方式添加自定義樣式。

PS：從docs：

<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page.

我建議使用這個（與「空」或「X」或其他未使用的前綴）爲更短的類名 - 因爲在默認設置你沒有獲得這很多通過混淆（textBoxStyle - 12chars，G1x26wpeN - 9chars，X0 - 2字符;））。

來源

2010-01-13 12:45:20

不幸的是，它是一個css變化與一個特定文本區域元素相關。 – 2010-01-13 16:51:51

你爲什麼不嘗試某事像這樣

public class MyFoo extends Widget { 
    interface MyStyle extends CssResource { 
    String normal(); 
    String readonly(); 
    } 

    @UiField MyStyle style; 

    /* ... */ 

    void setEnabled(boolean enabled) { 
    getElement().addStyle(enabled ? style.normal() : style.readonly()); 
    getElement().removeStyle(enabled ? style.readonly() : style.normal()); 
    } 
}

這將允許你改變風格，如果一個文本框是「正常」或只讀...

和關閉過程中，UiBinder的你應該有某事像

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> 

    <ui:style type='com.my.app.MyFoo.MyStyle'> 
    .redBox { background-color:pink; border: 1px solid red; } 
    .normal { color:black; } 
    .readonly { color:gray; } 
    </ui:style> 

    <div class='{style.redBox} {style.normal}'>I'm a red box widget.</div> 

</ui:UiBinder>

來源

2010-04-23 17:15:32 markovuksanovic

此時（GWT 2.4），它是不支持，而且目前還不清楚是否/何時會得到支持，看到issue 4746在GWT問題跟蹤。

解決方法是添加@external，它禁用這些樣式的混淆。在這種情況下，這將是：

@external textBoxStyle, textBoxStyle-readonly;

來源

2011-10-05 15:35:42

立即試用這一次我希望你能得到它。
隨着<ui:style>元素，你可以定義CSS爲你的UI權在你需要它
注：<ui:style>元素必須是根元素的直接子

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
     xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
     <g:TextArea visibleLines="3" /> 
    </ui:UiBinder> 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <ui:style field='MyStyle'> 
     .textBoxStyle { 
      background-color:yellow; 
     } 
     .textBoxStyle-readonly { 
      background-color:lightgray; 
     } 
    </ui:style> 

    <g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" /> 
</ui:UiBinder>

來源

2011-10-12 08:02:39 Pyadav

是不是有一個錯字在你的UIBinder？

您有：

<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />

..但我認爲你需要使用「stylePrimaryName」，即。

<g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />

但我想這個問題已經有了答案真的已經..

來源

2011-11-11 20:31:45 HaveAGuess

下面是一些有價值的東西我的放在一起從其他職位信息在這個線程尤其是想通了......

如果使用@external，你可以覆蓋gwt樣式。問題是，這種變化得到全球應用！但是，可以延長&覆蓋選擇屬性，而不影響小部件類型的每個實例。（這與使用gwt類名+後綴並使用addStyleDependantName（）創建css類的程序化樣式方法相似。）

這是使用UIBinder + CssResource擴展gwt樣式的示例。我遺漏了CssResource部分，但你會明白...

在你的xxxx.ui.xml文件中，暴露gwt樣式，但不要搞亂它！

<ui:style> 
    @external .gwt-Button; .gwt-Button {} 
</ui:style>

然後，通過在styleName屬性中指定2個（或更多）樣式來設置它的樣式。即gwt樣式以及您的資源中的一個（或多個）。

<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" />

這裏的CSS類：

.submitButtonStyle{ 
    margin: 3px 5px 5px 0px; 
}

在這種情況下，我定義是在標準方法（經由模塊繼承容易地改變）風格的一個按鈕，但與特定的餘量，將保持固定。這並沒有混淆全局風格，它不需要手動定義所有的屬性，並允許隨意使用clean.css，dark.css等替換全局樣式。

來源

2013-08-09 14:40:40 user2661223

我如何用UiBinder的

回答

相關問題