Comments on Juri's TechBlog: GWT Button with image AND text

Hi Juri First, good work. I found that you can a...

2011-02-16T23:30:56.403+01:00

Hi Juri
First, good work.

I found that you can also use setHTML method of Button class to do the trick.

sorry, the blog does not allow me to add span tag. So. have to use SPAN
For example,
addStockButton.setHTML("SPAN class=\"gwt-PushButton-add\"\>Add_Icon SPAN");

You can control the class to show the icon. For example:
.gwt-PushButton-add {

background:url(image/add.png) no-repeat 0px 0px;
text-indent:30px;
display:block;
}

If you like to hide this trick, you can still create a custom class to wrap this trick and expose the text/class to users

Thanks

Jun

Thanks, Used your code but in my case the image en...

2011-01-17T14:38:23.833+01:00

Thanks, Used your code but in my case the image ends up behind the text in stead of in front of it!

Thanks so much for sharing this. It's works fi...

2010-12-08T19:32:52.738+01:00

Thanks so much for sharing this.
It's works fine!

Just for curiosity: what did you clean? (and of co...

2010-09-02T17:03:49.129+02:00

Just for curiosity: what did you clean? (and of course there was lots of space to clean up in my sample; it was more a proof of concept :) )

Good job, using your class after little cleanup.

2010-09-02T16:55:27.293+02:00

Good job, using your class after little cleanup.

Thanks so much for this posting! I'm developi...

2010-06-08T18:34:57.447+02:00

Thanks so much for this posting! I'm developing my first GWT app and coming from a Flex background so I'm used to a very firm ui / code distinction and having a lot of trouble with UiBinder not natively supporting a lot of attributes. Your code worked great and your other examples have also been very useful for me - thanks again!

Hei, thx for your infos. I certainly will use the ...

2010-03-23T08:07:37.510+01:00

Hei,
thx for your infos. I certainly will use the approach of using "img.getElement().getStyle().setVerticalAlignment(VerticalAlign.MIDDLE)", didn't know about that as well as your suggestion regarding the AbstractImagePrototype.

As I also mentioned in the post, this is just a sample implementation which makes it really easy to create a button with image + text. And sure, one should always prefer CSS classes over direct styles :)

thx

Well, first, both Button and Hyperlink are HasHTML...

2010-03-22T14:44:02.832+01:00

Well, first, both Button and Hyperlink are HasHTML, so you can really use whatever HTML snippet you want, including one with an image and some text.

As for your code (which makes it easier to use and makes your whole app more consistent as to how your image is displayed), I'd rather use img.getElement().getStyle().setVerticalAlignment(VerticalAlign.MIDDLE)than your setAttribute("style") technique (well, actually, I'd even rather use a CSS class); and the DOM class will soon be deprecated in favor of the Node and Element's own methods. Finally, you don't have to instantiate an Image widget, you can just use AbstractImagePrototype.create(imageResource).createElement() which is a bit lghter-weight.