GWT, why CellTable doesn't show Image when running in Eclipse? - image

Question

I have the code:
ClickableTextCell imageCell = new ClickableTextCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
String imagePath = "contact.jpg";
//sb.appendEscaped(imagePath);
sb.appendHtmlConstant("<img width=\"20\" src=\"" + imagePath + "\">");
}
}
};
Column<List<String>,String> imageColumn = new Column<List<String>,String>(imageCell) {
#Override
public String getValue(List<String> object) {
return "";
}
};
imageColumn.setFieldUpdater(new FieldUpdater<List<String>, String>() {
#Override
public void update(int index, List<String> object, String value) {
//Window.alert("You clicked " + object.get(index));
}
});
table.addColumn(imageColumn, columnName);
But when running in Eclipse it doesn't show an image. The web server got this error:
Request headers
Host: 127.0.0.1:8888
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://127.0.0.1:8888/abc.html?gwt.codesvr=127.0.0.1:9997
Cookie: MYCOOKIE=htzjk7g2pva9; JSESSIONID=1xjqdxl3kuuxw; PRODUCTSERVICECOOKIE=1xjqdxl3kuuxw
Connection: keep-alive
Response headers
Set-Cookie: PRODUCTSERVICECOOKIE=1xjqdxl3kuuxw;Path=/
Content-Length: 1397
Content-Type: text/html; charset=iso-8859-1
[WARN] 404 - GET /contact.jpg (127.0.0.1) 1397 bytes
Request headers
Host: 127.0.0.1:8888
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Also, the second question is where to put the Image so that when we deploy our final web app we can manage the image easily. I'm actually confused with the folder structures in Eclipse.
In MyProject, I have:
war\myproject
war\WEB-INF
war\MyProjet.css
war\MyProjet.html
But in MyProject I also have folder src which contains all java file
src\myproject\client\ (in client folder I put "contact.jpg"
src\myproject\server
I am not sure if I put the contact.jpg in the correct folder. Also, when we deploy our webapp, will Eclipse migrate all the image file into this folder:-->
war\myproject

Answer 1

If you place you image files in rc\myproject\public\img\contact.jpg folder then GWT will copy the files into your war\gwtmodulename\img\contact.jpg folder during compilation and you would need to code using GWT.getModuleBaseURL()+"img\"+"contact.jpg" as that gives you the location of image w.r.t your http:\\domain\war\gwtmodulename .
If you place you image files in war\img folder then you would need to code using GWT.getHostPageBaseURL()+"img\"+"contact.jpg" as that gives you the location of your image w.r.t yout http:\\domain\war\ .

Answer 2

Either:
Put your image in a public path. Static resources (such as images) in public path are automatically copied in the compiler output directory. To reference them in client code, you have to make them relative to GWT.getModuleBaseURL().
or
Use an ImageResource within a ClientBundle and use either:
imageResource.getSafeUri().asString() chain, to obtain its resolved (safe) URI; or
AbstractImagePrototype.create(imageResource).getHTML() for the whole <img> snippet.
I've excluded the new Image(imageResource).getUrl() option as it is useless for your use case (no need for an Image widget).
Also if you want to decorate a cell using an icon, take a look at IconCellDecorator, maybe somehow useful.