代码之家 › 专栏 › 技术社区 › Eduard Wirch

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

gwt2 uibinder obfuscation gwt css

Eduard Wirch · 技术社区 · 16 年前

<!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;
}

可写文本区域的结果HTML如下所示:

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

只读文本区域如下所示:

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

如何声明样式以便GWT混淆主要部分而不是“-readonly”decdorator?

6 回复 | 直到 16 年前

Hilbrand Bouwkamp 14 年前

目前(GWT 2.4)不支持它,也不清楚是否/何时支持它,请参阅 issue 4746 在GWT问题跟踪器中。

解决方法是添加 @external ,这将禁用这些样式的模糊处理。在这种情况下,这将是:

@external textBoxStyle, textBoxStyle-readonly;

Igor Klimer 16 年前

TextArea 那么我建议只修改 .gwt-TextArea-readonly 在GWT主题CSS文件中创建样式。
否则,我只能在设置 文本域 只读。

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.

我建议对更短的类名使用这个(带有“empty”或“X”或其他未使用的前缀),因为在默认设置下,通过混淆(textBoxStyle-12chars,G1x26wpeN-9chars,X0-2 chars;)不会获得太多。

Raidok 14 年前

你为什么不试试这样的东西

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());
  }
}

如果文本框为“普通”或只读,这将允许您更改样式。。。

<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>

Pyadav 14 年前

和 <ui:style> 元素,您可以在需要的地方为UI定义CSS
注: <用户界面:风格>

    <!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>

HaveAGuess 14 年前

你的活页夹上没有打字错误吗?

你有:

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

.. 但我认为你需要使用“stylePrimaryName”,即。

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

但是我想这个问题已经得到了回答。。

user2661223 13 年前

这里有一些很有价值的东西,我把其他帖子的信息放在一起,特别是。。。

如果使用@external,则可以覆盖gwt样式。问题是,这一变化在全球范围内得到应用!然而,扩展&覆盖select属性,而不影响小部件类型的每个实例。(这类似于使用gwt类名+后缀并使用AddStyleDependentName()创建css类的编程样式方法。)

在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}" />

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

在本例中,我定义了一个按钮,该按钮采用标准方法(通过模块继承很容易更改),但具有固定的特定边距。这不会弄乱全局样式,它不需要手动定义所有属性,并且允许随意使用clean.css、dark.css等交换全局样式。