GWT UiBinder style primary name not working

Question

I'm trying to override a particular widget's style using UiBinder. What am I overlooking?

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

Note 1: This rule is being applied and works fine

Note 2: This other rules seem to be getting ignored (they don't take effect)

Note 3: The default naming for the widget is being reset, hence Note 1 works fine. The base class is set to GOGXR1SCFI instead of gwt-PushButton

Why aren't they other rules working? When I hover the widget, the class GOGXR1SCFI-up-hovering is indeed set to the widget, but no accompanying CSS.

Thanks for your help.

Update

Something I ran into that gave me a hard time for a while: when you use the @external keyword, you must place a semi-column at the end of the @external statement, as in:

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

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

possible duplicate of [How to declare dependent style names with UiBinder](http://stackoverflow.com/questions/2052994/how-to-declare-dependent-style-names-with-uibinder) — Hilbrand Bouwkamp, Dec 29 '12 at 18:03

score 4 · Accepted Answer · answered Jan 22 '13 at 02:40

One thing you could do is to create your CSS using ClientBundle, define all the different states there, then handle the various states manually. This way you don't need to define classes as @external, and GWT will optimize the CSS for you (shorten the names, only ship what gets used, etc.). This is especially beneficial for custom widgets and such.

score 2 · Answer 2 · answered Dec 28 '12 at 23:28

2

The easiest way to deal with this is to write @external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled at the top of your <style> section.

The original GWT widgets do not work well with CSS resources (like the one you have in your UiBinder). They depend on a primary style name that they append things like "up-hovering" to. This is terrible for CSS resources and UiBinders because when you type "up-hovering" it becomes things like SDLFJKS.

The button styles do NOT get obfuscated (so you can read "up-hovering"). Your UiBinder styles DO get obfuscated. You can never make them match as long as obfuscation is going on.

So, the @external keyword tells UiBinder and CssResource not to obfuscate certain styles. Now, when you use {style.btnVote-up-hovering}, that will actually come through to the final HTML, which is where these old-fashioned GWT styles will be applied.

answered Dec 28 '12 at 23:28

Riley Lark

20,660
15
80
128

Aside: I found it easier to ignore all of these styles altogether. No up-active-hover or anything. I created all of my own styles so that we could very precisely control what was happening - it was just easier. You can still do things like .btnVote:hover – Riley Lark Dec 28 '12 at 23:34
But a lot of widgets have state that GWT manages for you that would be wasteful to reproduce by hand - like btn disabled, pushed down, inactive tab, etc. – rodrigo-silveira Dec 29 '12 at 15:19
That's true. If you want to use those states, follow my advice in the answer. My comment was just a note about what I've found easiest. – Riley Lark Dec 29 '12 at 20:13

score 1 · Answer 3 · edited May 23 '17 at 12:18

1

I suspect you have CSS stylenames being obfuscated by GWT in your UIBinder. Reference - garbled css name when styling within UiBinder

Chose the approach you find easier to integrate in your proces. Cheers :)

edited May 23 '17 at 12:18

Community

1
1

answered Dec 28 '12 at 16:42

appbootup

9,537
3
33
65

GWT UiBinder style primary name not working

3 Answers3