GWT UiBinder 样式主名称不起作用答案

【问题标题】：GWT UiBinder style primary name not workingGWT UiBinder 样式主名称不起作用
【发布时间】：2012-12-28 14:04:43
【问题描述】：

我正在尝试使用 UiBinder 覆盖特定小部件的样式。我忽略了什么？

<ui:style>
  /*************
   * Note #1
   *************/
  .btnVote {
     display: inline-block;
     width: 50px;
     height: 50px;
     background: #fff;
     margin: 5px;
     text-align: center;
     outline: none;
     cursor: pointer;
  }

  /*************
   * Note #2
   *************/
  .btnVote-up-hovering, .btnVote-down-hovering {
     background: #ddd;
  }

  .btnVote-up-disabled, .btnVote-down-disabled {
     border-shadow: inset 0 1px 3px #aaa;
  }

  .lblName {
     line-height: 50px;
     font-size: 40px;
     padding: 5px 10px;
  }

  .clear {
     clear: both;
     overflow: auto;
  }

  .floatLeft {
     float: left;
  }
</ui:style>

<g:HTMLPanel styleName="{style.clear}">

    <g:FlowPanel styleName="{style.floatLeft}">

       /*************
        * Note #3
        *************/
        <g:PushButton ui:field="btnVoteUp" stylePrimaryName="{style.btnVote}">
            (+)
        </g:PushButton>

        <g:PushButton ui:field="btnVoteDown" stylePrimaryName="{style.btnVote}">
            (-)
        </g:PushButton>
    </g:FlowPanel>

    <g:FlowPanel styleName="{style.floatLeft}">

        <g:Label ui:field="lblName" stylePrimaryName="{style.lblName}"/>
    </g:FlowPanel>
</g:HTMLPanel>

注意 1：这条规则正在被应用并且工作正常

注意 2：其他规则似乎被忽略（它们不生效）

注 3：小部件的默认命名正在被重置，因此注 1 可以正常工作。基类设置为 GOGXR1SCFI 而不是 gwt-PushButton

为什么其他规则不起作用？当我将小部件悬停时，类 GOGXR1SCFI-up-hovering 确实设置为小部件，但没有附带的 CSS。

感谢您的帮助。

更新

我遇到了一段时间让我很难受的事情：当您使用 @external 关键字时，您必须在 @external 语句的末尾放置一个半列，如：

<ui:style>
@external .btnVote;
.btnVote {
   ...
}
</ui:style>

<g:FlowPanel styleName="{style.btnVote}"/>

【问题讨论】：

How to declare dependent style names with UiBinder的可能重复

标签： css gwt uibinder

【解决方案1】：

您可以做的一件事是使用 ClientBundle 创建 CSS，在那里定义所有不同的状态，然后手动处理各种状态。这样您就不需要将类定义为@external，GWT 会为您优化 CSS（缩短名称，仅发布使用的内容等）。这对于自定义小部件等特别有用。

【讨论】：

【解决方案2】：

解决此问题的最简单方法是在 <style> 部分的顶部写 @external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled。

原始的 GWT 小部件不能很好地与 CSS 资源（如 UiBinder 中的那个）一起使用。它们依赖于一个主要的样式名称，它们附加了诸如“悬停”之类的东西。这对于 CSS 资源和 UiBinders 来说是很糟糕的，因为当你键入“up-hovering”时，它会变成 SDLFJKS 之类的东西。

按钮样式不会被混淆（因此您可以阅读“悬停”）。你的 UiBinder 样式确实会被混淆。只要继续进行混淆，您就永远无法使它们匹配。

所以，@external 关键字告诉 UiBinder 和 CssResource 不要混淆某些样式。现在，当您使用 {style.btnVote-up-hovering} 时，它实际上会传递到最终的 HTML，也就是应用这些老式 GWT 样式的地方。

【讨论】：

旁白：我发现完全忽略所有这些样式更容易。没有向上主动悬停或任何东西。我创造了我自己的所有风格，这样我们就可以非常精确地控制正在发生的事情——这更容易。您仍然可以执行 .btnVote:hover 之类的操作
但是很多小部件都有 GWT 为您管理的状态，手动复制会很浪费 - 例如 btn 禁用、下推、非活动选项卡等。
确实如此。如果您想使用这些状态，请按照我在答案中的建议。我的评论只是对我发现的最简单的内容的说明。

【解决方案3】：

我怀疑您的 UIBinder 中的 GWT 混淆了 CSS 样式名。参考——garbled css name when styling within UiBinder

选择您认为更容易集成到您的流程中的方法。干杯:)

【讨论】：