2

I'm trying to create a GWT button that includes both an image and text like this:

Drawing of desired button

I can create and set the button image like this: 

PushButton button = new PushButton();
button.getUpFace().setImage(new Image(icon));

but if I do this the image disappears:

button.setText("ABC");

How can I keep both? I would prefer not to use the setHtml method because that would create a new HTTP request

EDIT: The problem with calling setHTML() is that it causes the browser to send another HTTP request to the server. This means that when I change the icon the button is blank for a second or two while the browser waits for a response from the server - obviously this not ideal. I'm looking for a way to use the image that is in memory in the form of a ImageResource object. Thanks!

Mark
  • 4,749
  • 7
  • 44
  • 53

2 Answers2

2

There are lots of ways to achieve this.

Please have a look at below post asked in the same context:

Sample code:

Button button = new Button();

// get image form CSS resource
String url = new Image(Resources.INSTANCE.cut()).getUrl();
// get image from url
String url = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/edit-cut-64.png";
// get image from the project war/images folder
String url = GWT.getHostPageBaseURL() + "images/cut.png";

String html = "<div><center><img src = '" + url
        + "'></img></center><label>Cut</label></br></div>";

button.setHTML(html);

Note: you can move it to CSS as well and append in HTML.

___________-

EDIT

You can achieve it using PushButton as well using setInnerHTML()method that will benefit from ImageResource as well. 

final PushButton pushButton = new PushButton(new Image(Resources.INSTANCE.old_cut_icon()));
pushButton.getElement().setInnerHTML("<div><center>"+pushButton.getElement().getInnerHTML()+"</center><label><center>Cut</center></label></div>");

now simply call setImage() whenever needed to change the icon only.

pushButton.getUpFace().setImage(new Image(Resources.INSTANCE.new_cut_icon()));

Screenshot

enter image description here

Community
  • 1
  • 1
Braj
  • 46,415
  • 5
  • 60
  • 76
  • Thanks - that produces the correct layout but means the button will be blank for a second or two when the image is changed (see my edit above) – Mark May 15 '14 at 07:13
  • @Mark share your code. What are you doing actually? – Braj May 15 '14 at 07:21
  • Here's what I'm trying to do: https://www.youtube.com/watch?v=0uFGkU6528E&feature=youtu.be Notice that the 'Draw' button icon is blank for a short while whenever it is changed – Mark May 15 '14 at 07:45
  • Right now my code is simply: button.getUpFace().setHTML( "
    " + label);     – Mark May 15 '14 at 07:46
  • @Mark OK I got it now that what you want to say. – Braj May 15 '14 at 07:51
  • @Mark create multiple buttons and only one shown at a time and others are hidden in the background. – Braj May 15 '14 at 08:01
  • @Mark I have updated my post that will use the images from memory as ImageResource using `PushButton`. – Braj May 15 '14 at 08:30
  • @@Braj Strangely for me that produces text above the image: http://imgur.com/rNfSu3Z – Mark May 16 '14 at 03:35
  • Braj - I have decided to follow your suggestion and create multiple buttons each with a different icon, then display the only appropriate button. Thanks for your help! – Mark May 16 '14 at 04:31
  • @Mark I think the actual issue flickering and delay issue are resolved? – Braj May 16 '14 at 04:58
1

Set a text on your button. Also set a CSS style:

.myButton {
    background-image:url('/images/icon/cut.png');
    background-position:center top;
    padding: 28px 2px 2px;
}

Adjust padding depending on the size of your image.

An alternative approach is to create a widget that combines a button with a label, and either (1) put them in a LayoutPanel, specifying the position that you want, or (2) use CSS to move the label on top of the button (better).

Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58
  • The problem with that approach is that it replaces the background image used by GWT to give a subtle gradient effect on the button – Mark May 14 '14 at 02:16
  • I updated the response (you did not mention the gradient). If your text is not dynamic, it may be easier to create an image that combines both an icon and a text in Photoshop. – Andrei Volgin May 14 '14 at 02:23