Setting styles on different faces of a GWT CustomButton using UiBinder

Question

I'm trying to set style names on different faces of ToggleButton (i.e. upFace, downFace, ...). It looks like setting styleName on a face doesn't work. For example the following won't work:

<g:ToggleButton>
    <g:upFace styleName='{style.myToggleButton-up}' />
</g:ToggleButton>

But I noticed when setting the style name on ToggleButton itself...

<g:ToggleButton styleName='{style.myToggleButton}' />

... the generated HTML will look something like this:

<div class="GPAKHSCBGG GPAKHSCBGG-up" role="button" aria-pressed="false">...</div>

However, even if I have {style.myToggleButton-up} defined, it is not populated to GPAKHSCBGG-up. So I'm wondering how can I do this without having to mock the global .gwt-ToggleButton-up stylesheet. Please help.

score 1 · Answer 1 · answered Aug 05 '11 at 17:05

1

http://examples.roughian.com/index.htm#Widgets~ToggleButton

All GWT components have predefined CSS Class definitions, what you tried didn't override the definitions.

answered Aug 05 '11 at 17:05

napo

85
1
7

Well, it works only when defining the stylesheets in the global .css file (either by setting styleName or stylePrimaryName). But it doesn't seem to work when defining the styles in of .ui.xml file. I haven't found a solution for this yet and to me it looks like a GWT bug or feature lack. – orad Aug 05 '11 at 20:56

score 0 · Accepted Answer · answered Aug 06 '11 at 00:19

0

Solution:

Add @external myToggleButton, myToggleButton-up; to ui:binder file.

answered Aug 06 '11 at 00:19

orad

15,272
23
77
113

Setting styles on different faces of a GWT CustomButton using UiBinder

2 Answers2

Linked