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は正常に機能します。基本クラスは、 gwt - PushButtonではなくGOGXR1SCFIに設定されています

他のルールが機能しないのはなぜですか？ウィジェットにカーソルを合わせると、クラスGOGXR1SCFI-up-hoveringが実際にウィジェットに設定されますが、付随するCSSはありません。

ご協力いただきありがとうございます。

アップデート

私が遭遇した何かが私にしばらく苦労しました：@externalキーワードを使用するときは、次のように、@externalステートメントの最後に半列を配置する必要があります。

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

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

3 に答える 3

4

できることの 1 つは、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にあるものなど）ではうまく機能しません。それらは、「アップホバリング」などを追加するプライマリスタイル名に依存します。「上向き」と入力するとSDLFJKSのようになるため、これはCSSリソースとUiBindersにとってひどいものです。

ボタンのスタイルがわかりにくくなることはありません（「上ホバリング」と読むことができます）。あなたのUiBinderスタイルは曖昧になります。難読化が行われている限り、それらを一致させることはできません。

したがって、この@externalキーワードは、UiBinderとCssResourceに特定のスタイルを難読化しないように指示します。さて、を使用する{style.btnVote-up-hovering}と、実際には最終的なHTMLに到達します。ここで、これらの昔ながらのGWTスタイルが適用されます。

于 2012-12-28T23:28:57.797 に答える
1

UIBinder で CSS スタイル名が GWT によって難読化されていると思われます。参考 - UiBinder内でスタイリングするとcss名が文字化けする

プロセスに統合しやすいアプローチを選択してください。乾杯 ：）

于 2012-12-28T16:42:54.423 に答える