tags:

views:

739

answers:

2

Hello :-)

I am having trouble getting images to display when using ImageBundle. I have followed the GWT tutorial as a guide however my images don't display.

I can view the images (from within Eclipse) in my browser fine - so they are definitely there. I am clearly doing something wrong when using the ImageBundle but I'm at a loss to understand what it is I am doing wrong.

The logo.jpg image should simply display itself.

The ajaxLoader.gif should display itself first (in order to cover the RPC which gets the facebook user profile data) and then it would be replaced by the image at the pic_square url.

When I look at the GWT generated html, I find that where the logo.jpg image should be, there is a gif image [http://sandpit1965.appspot.com/sandpit/clear.cache.gif%5D but I don't understand where this is coming from.

Any help would be appreciated - source code below.

Darren

Image Package Structure

org.redboffin.sandpit.client.icons  
                           |___ SandpitImageBundle.java
                           |___ ajaxLoader.gif  
                           |___ logo.jpeg

Relevent Classes

package org.redboffin.sandpit.client.facebook;

import org.redboffin.sandpit.client.icons.SandpitImageBundle;

import com.google.gwt.core.client.GWT;  
import com.google.gwt.event.dom.client.ErrorEvent;  
import com.google.gwt.event.dom.client.ErrorHandler;  
import com.google.gwt.user.client.Window;  
import com.google.gwt.user.client.rpc.AsyncCallback;  
import com.google.gwt.user.client.ui.AbstractImagePrototype;  
import com.google.gwt.user.client.ui.Button;  
import com.google.gwt.user.client.ui.Composite;  
import com.google.gwt.user.client.ui.DockPanel;  
import com.google.gwt.user.client.ui.HTML;  
import com.google.gwt.user.client.ui.Image;  
import com.google.gwt.user.client.ui.VerticalPanel;  
import com.google.gwt.xml.client.Document;  
import com.google.gwt.xml.client.Element;  
import com.google.gwt.xml.client.XMLParser;  

public class ProfileWidget extends Composite implements RBWidget {

    // Data  
    private String firstName = null;  
    private String lastName = null;  
    private String picSquareUrl = null;  

    // Elements  
    private Image picSquare = new Image();  
    private Image logo = new Image();  
    private Button logoutButton = new Button("Logout");  
    private DockPanel panel = new DockPanel();  
    private HTML html = new HTML("Welcome to Sandpit.");  

    /**  
     * Create a remote service proxy to talk to the server-side User Data  
     * service.  
     */  
    private final UserDataServiceAsync userDataService = GWT.create(UserDataService.class);  

    public ProfileWidget() {  

        this.rpcWidget = new RPCWidget(this);  

        this.initProfileImage();  
        this.initLogoImage();  

        panel.add(picSquare, DockPanel.WEST);  
        panel.add(html, DockPanel.CENTER);  

        VerticalPanel verticalPanel = new VerticalPanel();  
        verticalPanel.add(logo);  
        verticalPanel.add(logoutButton);  

        panel.add(verticalPanel, DockPanel.EAST);  

        panel.add(rpcWidget, DockPanel.SOUTH);  

        initWidget(panel);  

    }  

    private void initProfileImage() {  

        // Display ajaxLoader.gif  
        SandpitImageBundle sib = GWT.create(SandpitImageBundle.class);  
        AbstractImagePrototype aip = sib.ajaxLoader();  
        sib.applyTo(this.picSquare);  

    }  

    private void initLogoImage() {  

        // Display logo.jpg  
        SandpitImageBundle sib = GWT.create(SandpitImageBundle.class);  
        AbstractImagePrototype aip = sib.logo();  
        aip.applyTo(this.logo);  

    }  

    // Other methods omitted...  

}  

package org.redboffin.sandpit.client.icons;  

import com.google.gwt.user.client.ui.AbstractImagePrototype;  
import com.google.gwt.user.client.ui.ImageBundle;  

public interface SandpitImageBundle extends ImageBundle {  

    /**  
     * Would match the file 'logo.jpg', 'logo.gif', or 'logo.png' located in the  
     * same package as this type.  
     */  
    public AbstractImagePrototype logo();  

    /**  
     * Would match the file 'ajaxLoader.jpg', 'ajaxLoader.gif', or 'ajaxLoader.png' located in the
     * same package as this type.  
     */  
    public AbstractImagePrototype ajaxLoader();  

}
A: 

I don't understand why but this now works and I haven't changed anything.

Darren
A: 

The image won't be displayed until you "compile" your project and place your generated "war" in your servers public folder. You were simply making a request to a non existing file.

Javier Lecuona