GWT Image Button

Question

I create an Image button from PNG icons, I need to make a button (but not a button effect) only when the user clicks on the image, a dotted square will appear (for example, selection) to have the effect that the button is pressed. Any ideas?

Answer 1

Something like this in GWT:

Hyperlink link = new Hyperlink(); Image image = new Image(imageUrl); ... link.getElement().appendChild(image.getElement()); link.setStyleName("imgBtnLink"); 

Add / Set CSS Style:

 .imgBtnLink:active { border-style:dashed; } 

Old JSFiddle example: http://jsfiddle.net/Wsaf5/

Answer 2

You can create your own widget, I have this

 public class ImageButton extends Button { public ImageButton() { super(); } public void setImgSrc(String imgSrc) { Image img = new Image(imgSrc); String definedStyles = img.getElement().getAttribute("style"); img.getElement().setAttribute("style",definedStyles); img.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE); DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement())); } @Override public void setText(String text) { Element span = DOM.createElement("span"); span.setInnerText(text); span.getStyle().setPaddingLeft(5, Unit.PX); span.getStyle().setPaddingRight(3, Unit.PX); span.getStyle().setVerticalAlign(VerticalAlign.MIDDLE); span.getStyle().setColor("black"); span.setAttribute("class", "arial12R6D6D6D"); DOM.insertChild(getElement(), span, 0); } } 

Answer 3

A CSS style ToggleButton is suitable.

 ToggleButton button = new ToggleButton(); button.setStyleName("toggle-button"); ... 

CSS

 .toggle-button { outline: none; border: none; margin: 3px; /* border size */ background: transparent url(../img/toggle-button.jpg); } .toggle-button-down, .toogle-button-down-hovering { margin: 0; border: 3px #469 dashed; /* margin size */ } 

Answer 4

Could you add a stylesheet to the ClickEvent handler element? (AddStyleDependentName).

Or maybe PushButton could be useful?

Answer 5

I created a simple custom widget class that uses CSS and Events to display custom buttons:

Activity: view.getContent (). add (new ImageButton (resource.comment (), resource.search (), resource.chechCircle (), new ClickCallback () {public void onClick () {Window.alert ("Clicked!");}}));

I use UiBinder / Composite to control layout and css and events. "ClickCallback" is just a customizable interface with one onClick method

UiBinder files are here: http://www.acrinta.com/ImageButton.zip

Css shows the hover border, and MouseOverMouseOut can share images using onClick, where it changes the image for a split second. may give some ideas