Using both image and styling on GWT CustomButton

[Omid Rad]

I'm trying to get a ToggleButton to work with a transparent PNG image
which gets background color by CSS styles. It looks like a
CustomButton can get only one of image or style but not both of them.
I tried the followings to no avail:

<g:ToggleButton title="first try">
<g:upFace image='{images.imageWithTransparentBackground}'
styleName='{style.blueBackground}' />
<g:downFace image='{images.imageWithTransparentBackground}'
styleName='{style.redBackground}' />
</g:ToggleButton>

<g:ToggleButton title="second try">
<g:upFace image='{images.imageWithTransparentBackground}'>
<div class='{style.blueBackground}'></div>
</g:upFace>
<g:downFace image='{images.imageWithTransparentBackground}'>
<div class='{style.REDBackground}'></div>
</g:downFace>
</g:ToggleButton>

I don't want to use the global CSS space (i.e .gwt-ToggleButton-up
and .gwt-ToggleButton-down), and I don't want to set the background
image as background-image CSS since I will have many buttons. Any
ideas how to get this working?

[Omid Rad]

More details on my 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, like
this:

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


Thanks,
Omid

[Jeff Larsen]

add 

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

[Omid Rad]

Worked great! Thanks!

If this is documented anywhere will you please give a link so that I
understand what it does exactly.

Thanks.

[Jeff Larsen]

http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html