Question

I have 2 images that I want to swap between based on a button click

private Image widget1 = new Image("images/AU-wp5.jpg");
private Image widget2 = new Image("images/GB-wp1.jpg");
private boolean flag = false;

private void onClick()
{
    flag = !flag;
    if(flag)
    {                       
        RootPanel.get("stockList").add(widget1);
        RootPanel.get("stockList").remove(widget2);
    }
    else
    {           
        RootPanel.get("stockList").add(widget2);
        RootPanel.get("stockList").remove(widget1);
    }
}

Is this the correct way to swap between images? I have read about having one Image and changing it’s url but can’t get that way to work, only this way.

Answer 1

As SSR mentioned, you can do it via cell resource or you can opt for an easier and recommended approach using CSS.

Button button = new Button ( "Click me" );
private boolean flag = true;
button.addClickHandler ( new ClickHandler() 
{
     public void OnClick()
     {
             b.setStyleName( "my-button-clicked-" + flag );
             flag = !flag;
     }
}

Your CSS may look like this

.my-button-clicked-true{
 background : url ( // image path )
}

.my-button-clicked-false{
 background : url ( // image path )
}