如何使用UiBinder声明依赖样式名称

Question

我有一个包含TextArea的简单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>

我想控制此textarea的背景颜色,以便进行可写和只读状态.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进行模糊处理？

我知道我可以禁用整个样式名称的混淆.但我想在使用装饰器的同时保持混淆.

Answer 1

此时(GWT 2.4)它不受支持,并且不清楚是否/何时支持它,请参阅GWT问题跟踪器中的问题4746.

解决方法是添加@external,禁用这些样式的混淆.在这种情况下,将是:

@external textBoxStyle, textBoxStyle-readonly;

Answer 2

如果你想把这个样式用于你所有的只读,TextArea那么我建议你只修改.gwt-TextArea-readonly你的GWT主题CSS文件中的样式.
否则,我只能考虑在设置TextArea只读时以编程方式添加自定义样式.

PS:来自文档:

<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 chars ;)).

Answer 3

你为什么不尝试这样的

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>