HELP.. ADDING IMAGE TO PushButton.

85 views
Skip to first unread message

Joshua Carey

unread,
Jan 24, 2012, 10:50:32 AM1/24/12
to google-we...@googlegroups.com
Hi, 

I am new to GWT but been developing java for a few years.  I am trying to add a simple png ICON to a button and in GWT I guess PushButton is the only widget to use.  I am not concerned with changing the image when the button is pressed, etc.  I simply want a default image to always display on the button.  I have tried putting the image file in the same directory as the war file, but that didn't work.  I also tried putting it in subdirectories throughout the project paths with still no luck.  A coworker told me that images must be in WEB-INF or a subdirectory of WEB-INF.  I c created a directory under WEB-INF called "IMG":

WEB-INF/img/printer_image.png.  In my java code I used the following logic and it still doesn't work.  I really need some direction here and appreciate any help anyone can provide.  Thank you very much.

//Image printImage = new Image("/tomcateomconsole/webapps/pdficon_large.png");   "This image path is where the War is deployed and didn't work".

Image printImage = new Image("/WEB-INF/img/pdficon_large.png");   "This image path is under the WEB-INF and gets deployed with the war file but still doesn't work.

PushButton printButton = new PushButton(printImage);

Joshua

Thomas Broyer

unread,
Jan 24, 2012, 11:04:08 AM1/24/12
to google-we...@googlegroups.com
Try that: put the image in img/pdficon_large.png at the root of your WAR, then use 'new Image(GWT.getHostPageBaseURL() + "img/pdficon_large.png")' (provided your HTML host page is also at the root of your war, alongside the "img" folder).

See my reply on the issue tracker about why WEB-INF doesn't work.

vaibhav jain

unread,
Jan 24, 2012, 11:29:20 AM1/24/12
to google-we...@googlegroups.com
I m also using the same as told by Thomas,It works fine,

On Tue, Jan 24, 2012 at 9:34 PM, Thomas Broyer <t.br...@gmail.com> wrote:
Try that: put the image in img/pdficon_large.png at the root of your WAR, then use 'new Image(GWT.getHostPageBaseURL() + "img/pdficon_large.png")' (provided your HTML host page is also at the root of your war, alongside the "img" folder).

See my reply on the issue tracker about why WEB-INF doesn't work.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/dlkBDEGRX9wJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.



--
vaibhav jain.

Joshua Carey

unread,
Jan 24, 2012, 11:30:00 AM1/24/12
to google-we...@googlegroups.com
Hi Tom,

Thanks for your reply.  Where is the issue tracker?  I would definitely like to see why WEB-INF doesn't work.  But I am in the process of trying your suggestion now.  Here is my directory structure:
note I am using the <DIR> to let you know the name is a directory.  If I don't use <dir> then assume its just a file:

path:  /opt/streamserve/tomcateomconsole/webapps

under "Webapps"
------------------------------------
<dir> EOMConsole
EOMConsole.war

path: /opt/streamserve/tomcateomconsole/webapps/EOMConsole

under "EOMConsole"
------------------------------------
<dir> eomconsole (directory where the GWT subdirectory resides)
<dir> META-INF
<dir> WEB-INF
EOMConsole.CSS
EOMConsole.HTML

I have the images under the directory where the WAR resides but that didn't work before.  Should I create the img directory in the same directory as the war? ( path:  /opt/streamserve/tomcateomconsole/webapps ) or under the directory where the html file is? ( path: /opt/streamserve/tomcateomconsole/webapps/EOMConsole)

thanks for your help, this is definitely tricky.

Joshua


On Tue, Jan 24, 2012 at 10:04 AM, Thomas Broyer <t.br...@gmail.com> wrote:
Try that: put the image in img/pdficon_large.png at the root of your WAR, then use 'new Image(GWT.getHostPageBaseURL() + "img/pdficon_large.png")' (provided your HTML host page is also at the root of your war, alongside the "img" folder).

See my reply on the issue tracker about why WEB-INF doesn't work.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

vaibhav jain

unread,
Jan 24, 2012, 11:30:25 AM1/24/12
to google-we...@googlegroups.com
Hi,
    Is there any other way to put image on a button if we don't want to use push button.
Regards,
Vaibhav

On Tue, Jan 24, 2012 at 9:34 PM, Thomas Broyer <t.br...@gmail.com> wrote:
Try that: put the image in img/pdficon_large.png at the root of your WAR, then use 'new Image(GWT.getHostPageBaseURL() + "img/pdficon_large.png")' (provided your HTML host page is also at the root of your war, alongside the "img" folder).

See my reply on the issue tracker about why WEB-INF doesn't work.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/dlkBDEGRX9wJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.



--
vaibhav jain.

Thomas Broyer

unread,
Jan 24, 2012, 11:42:22 AM1/24/12
to google-we...@googlegroups.com


On Tuesday, January 24, 2012 5:30:00 PM UTC+1, Joshua Carey wrote:
Hi Tom,

Thanks for your reply.  Where is the issue tracker?  I would definitely like to see why WEB-INF doesn't work.  But I am in the process of trying your suggestion now.  Here is my directory structure:
note I am using the <DIR> to let you know the name is a directory.  If I don't use <dir> then assume its just a file:

path:  /opt/streamserve/tomcateomconsole/webapps

under "Webapps"
------------------------------------
<dir> EOMConsole
EOMConsole.war

path: /opt/streamserve/tomcateomconsole/webapps/EOMConsole

under "EOMConsole"
------------------------------------
<dir> eomconsole (directory where the GWT subdirectory resides)
<dir> META-INF
<dir> WEB-INF
EOMConsole.CSS
EOMConsole.HTML

I have the images under the directory where the WAR resides but that didn't work before.  Should I create the img directory in the same directory as the war? ( path:  /opt/streamserve/tomcateomconsole/webapps ) or under the directory where the html file is? ( path: /opt/streamserve/tomcateomconsole/webapps/EOMConsole)

thanks for your help, this is definitely tricky.

Tomcat expands the WARs, so when you copy EOMConsole.war in .../webapps and restart tomcat, it'll expand the WAR into .../webapps/EOMConsole and work from there (well, Tomcat also keeps things in its own "temp" and "work" folders, so make sure you clean them out before restarting Tomcat when deploying an update to your app).

So, put the image *within* your WAR (or alternatively, put the image within the .../webaps/EOMConsole folder), in the same directory as your HTML host page.

Thomas Broyer

unread,
Jan 24, 2012, 12:03:31 PM1/24/12
to google-we...@googlegroups.com
new Button("<img src='" + GWT.getHostPageBaseUrl() + "img/pdficon_large.png'>");

Joshua Carey

unread,
Jan 24, 2012, 1:28:58 PM1/24/12
to google-we...@googlegroups.com
I tried using the example you provided:

new Button("<img src='" + GWT.getHostPageBaseUrl() + "img/pdficon_large.png'>"); 

and it basically put the img src= tag above as text on the button.  I am going to try to create an image object first using the path above:  "GWT.getHostPageBaseURL() + "pdficon_large.png" first and then just use the image object in the creation of the PushButton instead of adding the "<img src=> tag you suggested.  I also put the image files in the same directory as the HTML file.  Wish me luck.....

Thanks,

Joshua

On Tue, Jan 24, 2012 at 11:03 AM, Thomas Broyer <t.br...@gmail.com> wrote:
new Button("<img src='" + GWT.getHostPageBaseUrl() + "img/pdficon_large.png'>");

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Joshua Carey

unread,
Jan 24, 2012, 1:43:28 PM1/24/12
to google-we...@googlegroups.com
Hi Thomas,

I finally got it to work.  You were correct in that once I put the images as part of the war file and "NOT" in the WEB-INF, it worked correctly.  Although our JAVA guy here is insisting WEB-INF is the place it needs to be.  I'm assuming it is a GWT thing that doesn't allow reading files from WEB-INF but in any event, I got it working so thank you very much.  Are we supposed to mark which people solved our problems and mark them complete on this site?  I am totally new to GWT and this help board.

Thanks again and I would love to read about the WEB-INF article you informed me about so I can set my Java person here straight.  We would still be working on the same problem right now if I listened to him.  :)  Thanks again for everything.

Joshua

On Tue, Jan 24, 2012 at 12:03 PM, Thomas Broyer <t.br...@gmail.com> wrote:
new Button("<img src='" + GWT.getHostPageBaseUrl() + "img/pdficon_large.png'>");

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Thomas Broyer

unread,
Jan 25, 2012, 4:13:32 AM1/25/12
to google-we...@googlegroups.com


On Tuesday, January 24, 2012 7:43:28 PM UTC+1, Joshua Carey wrote:
Hi Thomas,

I finally got it to work.  You were correct in that once I put the images as part of the war file and "NOT" in the WEB-INF, it worked correctly.  Although our JAVA guy here is insisting WEB-INF is the place it needs to be.  I'm assuming it is a GWT thing that doesn't allow reading files from WEB-INF

No, it's a Java thing. Point your "Java guy" to the servlet spec: http://jcp.org/en/jsr/detail?id=154
EXCERPT FROM SECTION SRV.9.5 (from “Java™ Servlet Specification Version 2.5 MR6”)
A special directory exists within the application hierarchy named “WEB-INF”.
This directory contains all things related to the application that aren’t in the
document root of the application. The WEB-INF node is not part of the public
document tree of the application. No file contained in the WEB-INF directory may
be served directly to a client by the container. However, the contents of the WEB-
INF directory are visible to servlet code using the getResource and getResource-
AsStream method calls on the ServletContext, and may be exposed using the
RequestDispatcher calls. Hence, if the Application Developer needs access, from
servlet code, to application specific configuration information that he does not
wish to be exposed directly to the Web client, he may place it under this directory.
Since requests are matched to resource mappings in a case-sensitive manner,
client requests for ‘/WEB-INF/foo’, ‘/WEb-iNf/foo’, for example, should not result
in contents of the Web application located under /WEB-INF being returned, nor
any form of directory listing thereof.
END OF EXCERPT

 
but in any event, I got it working so thank you very much.  Are we supposed to mark which people solved our problems and mark them complete on this site?  I am totally new to GWT and this help board.

Google Groups is hardly more than a mailing list, with a Web interface, so no, you don't mark as "solved" or things like that.

HARISH SAHARAN

unread,
Jan 26, 2012, 11:39:32 PM1/26/12
to Google Web Toolkit
First put your image to war/images folder and then direct access it
from ur code like this
HTML html = new HTML(new Image("images//Image_Name.png").toString());
Button button = new Button(h.toString());

now u can do ur work
Reply all
Reply to author
Forward
0 new messages