How to change images in a Tab in TabLayoutPanel? - gwt

Question

At the moment I have a TabLayoutPanel where there is an image URL in the tags of my UiBinder for the Panel. Is there a way for an image to be swapped out once a tab is selected, using UiBinder? If not, how would I go about doing that in CSS? Is this at all possible?
Thanks.
<g:TabLayoutPanel ui:field="homePanel" barUnit='PX' barHeight='100'>
<g:tab>
<g:header>
<img src = "images/sprites_01.png"></img>
</g:header>
<g:Label>Hello, world!</g:Label>
</g:tab>
<!-- First Tab -->
<g:tab>
<g:header>
<img src = "images/sprites_02_notselected.png"></img>
</g:header>
<my:FirstTabWidget ui:field="TabWidgetOne"> </my:FirstTabWidget>
</g:tab>
etc...

Answer 1

In your .ui.xml file, put a ui:field property in your img elements:
<g:HTMLPanel>
<g:TabLayoutPanel ui:field="homePanel" barUnit='PX' barHeight='100'>
<g:tab>
<g:header>
<img ui:field="tab1Img" src = "images/sprites_01.png"></img>
</g:header>
<g:HTML>My first tab</g:HTML>
</g:tab>
<g:tab>
<g:header>
<img ui:field="tab2Img" src = "images/sprites_02_notselected.png"></img>
</g:header>
<g:HTML>My second tab</g:HTML>
</g:tab>
</g:TabLayoutPanel>
</g:HTMLPanel>
and in your code, access those elements:
#UiField ImageElement tab1Img;
#UiField ImageElement tab2Img;
Add a SelectionHandler in your TabLayoutPanel, and swap the image src attributes as desired:
homePanel.addSelectionHandler(new SelectionHandler<Integer>(){
public void onSelection(SelectionEvent<Integer> evt){
//change the img source here:
tab1Img.setSrc("myOtherImage1.png");
tab2Img.setSrc("myOtherImage2.png");
}
});