GWT Image button

I am creating a Image button from PNG icons, I need to make a feel of button (but not push button开发者_开发知识库 effect) just a when user clicks the image a dotted square (like a selection) will appear so to have the effect that the button is clicked. Any ideas?

---

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/

---

ToggleButton with CSS-styling 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 */
}

---

You can create your own Widget, i have this one

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);
    }
}

---

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

Or, maybe PushButton could be useful?

---

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 a UiBinder/Composite to control the layout and css and events. The "ClickCallback" is just a custom interface with one onClick method

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

The Css shows a border on hover and the MouseOverMouseOut can swap images same with onClick where it changes the image for a split second. may give some ideas