Setting styles on different faces of a GWT CustomB

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.

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

Answer 2

Solution:

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