CODEWITHSUNDEEP
gwtstyling
user3691228
user3691228

Reputation: 65

How to change images in a Tab in TabLayoutPanel?

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

Upvotes: 0

Views: 194

Answers (1)

Gilberto Torrezan
Gilberto Torrezan

Reputation: 5277

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");
    }
});

Upvotes: 1

Related Questions