uibindergwt2

How to dynamically change the image specified in UI markup?

For UI markup, I use UIBinder. In a specific area, I want to place the logo and then dynamically change it:

<ui:UiBinder 
    xmlns:ui='urn:ui:com.google.gwt.uibinder' 
    xmlns:g='urn:import:com.google.gwt.user.client.ui' >
<ui:with 
    field='res' 
    type='com.myproject.client.resources.Resources' />

<g:Image resource='{res.offline}'/>

ClientBundle:

public interface Resources extends ClientBundle {    
    @Source("offline.png")  
    public ImageResource offline();

    @Source("online.png")  
    public ImageResource online();

    // ... and so on 
}

When a user starts a session, his logo changes.

How to change the image that declared in the UI markup?

Solution

  • The solution may be as follows.

    Add the UI:field attribute in the markup:

    <g:Image url='{res.user1.getURL}' ui:field="imageUser1" />

    Then, change the attribute value by this way:

    @UiField Image imageUser1;
imageUser1.setVisible(true/ false);

    It is also possible dynamically change the image URL -

    user1.setUrl(offlineImg.getUrl());

    See also: