3

我正在尝试使用 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}"/>
4

3 回答 3

4

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

于 2013-01-22T02:40:29.713 回答
2

处理这个问题的最简单方法是写@external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled在你的<style>部分的顶部。

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

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

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

于 2012-12-28T23:28:57.797 回答
1

我怀疑您的 UIBinder 中的 GWT 混淆了 CSS 样式名。参考 -在 UiBinder 中进行样式设置时出现乱码的 css 名称

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

于 2012-12-28T16:42:54.423 回答