How to handle image/gif type response on client side using GWT

Question

Hi all,

I have a question about how to handle image/gif type response on client side, any suggestion will be great. There is a service which responds for retrieving image (only one each time at the moment) from database. The code is something like,

    JDBC Connection
    Construct MYSQL query. 
    Execute query
    If has ResultSet, retrieve first one {
    //save image into Blob image, “img” is the only entity in the image table.
    image = rs.getBlob("img"); 
} 

    response.setContentType("image/gif");   //set response type
    InputStream in = image.getBinaryStream();   //output Blob image to InputStream
    int bufferSize = 1024;  //buffer size
    byte[] buffer = new byte[bufferSize];    //initial buffer
    int length =0;
    //read length data from inputstream and store into buffer   
    while ((length = in.read(buffer)) != -1) {
        out.write(buffer, 0, length);    //write into ServletOutputStream 
    }
    in.close();
    out.flush(); //write out

The code on client side

    ....
    imgform.setAction(GWT.getModuleBaseURL() + "serviceexample/ImgRetrieve"); 
    ....
    ClickListener {
        OnClick, then imgform.submit();
    }


    formHandler {

    onSubmit, form validation

    onSubmitComplete
        ??????? //handle response, and display image
            **Here is my question, i had tried 
            Image img = new Image(GWT.getHostPageBaseURL() +"serviceexample/ImgRetrieve");
            mg.setSize("300", "300");
            imgpanel.add(img);
            but i only got a non-displayed image with 300X300 size.**
    }

So, how should i handle the responde in this case?

Thanks,

Answer 1

Your question is very obscure... I see a combination of old school HTML forms/submit and GWT code.

A regular GWT application only needs to have an Image widget put somewhere in your UI that referes to the url of the image service you described.

How or when to show the image is up to you. But all you need to do to get the Image shown in you browser is to do

Image img = new Image( [url to image service] );
panel.add( img );

where panel is some panel that is already showing.

If you wish to wait for showing the image until the user clicks on some button then do this:

button.addClickHandler( new ClickHandler() {
  public void onClick( ClickEvent e ) {
    Image img = new Image( [url to image service] );
    panel.add( img );
  }
});

Answer 2

hi I am having a similar issue. I wonder if you ever found any solution! My app searches items stored in the db, and I m suppose to show all the item that contains keywords entered by user. This is really easy to do.

however I also have image of those items stored in db. I am trying really hard to figure out how to show the images on the browser with other information.

Your suggestions/comments will be greatly appreciated.