29

我有一个包含 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>

我想控制此文本区域的背景颜色以实现可写和只读状态。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？

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

4

6 回答 6

20

At this moment (GWT 2.4) it is not supported, and it's not clear if/when it will be supported, see issue 4746 in the GWT issue tracker.

The workaround is to add @external, which disables obfuscation for those styles. In this case that would be:

@external textBoxStyle, textBoxStyle-readonly;
于 2011-10-05T15:35:42.870 回答
5

你为什么不试试这样

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-23T17:15:32.467 回答
5

如果您想对所有只读TextAreas 使用此样式，那么我建议.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 ;))。

于 2010-01-13T12:45:20.357 回答
3

现在试试这个我希望你能得到它。
使用该<ui:style>元素，您可以在需要的地方为您的 UI 定义 CSS
注意： <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-12T08:02:39.013 回答
1

您的 UIBinder 中没有错字吗？

你有：

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

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

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

但我想这个问题已经得到了真正的回答..

于 2011-11-11T20:31:45.600 回答
0

这是我通过汇总该线程中其他帖子的信息而发现的一些有价值的东西，尤其是...

如果您使用@external，您可以覆盖gwt 样式。问题是这种变化会在全球范围内应用！但是，可以在不影响小部件类型的每个实例的情况下扩展和覆盖选择属性。（这类似于使用 gwt 类名 + 后缀创建 css 类并使用 addStyleDependantName() 的编程样式方法。）

这是一个使用 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-09T14:40:40.023 回答