GWT Ext - How to simulate a button using images

Extending the subject of the previous posting now we show how to have a button like control (with mouse roll-over and click look and feel) using the images, defined in you .CSS file.


import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.Event;
import com.gwtext.client.core.EventObject;
import com.gwtextux.client.widgets.image.Image;


/**
 * This class represent an image button for using in toolbars. Via CSS you can
 * setup the typical visual effects. The default class-name is ".MyImageButton"
 * defined in the "your-application.css" file.
 *
 * The ImageButton is using the follow style-names:
 *
 * MyImageButton
 * MyImageButton-over
 * MyImageButton-pressed
 *
 * @author SCC
 */
public class IvImgButton extends IvImage {


/* counter of the instances */
private static int INDEX = 1000;


private String baseImgRelUrl_;

private boolean disabled_;


/**
* The constructor of an ImageButton
*
* @param imgRelUrl
*            The relative (to the module's URL) URL of the Image (example:
*            images/icon.png).
* @param tooltip
*            The text of a tooltip. Will be ignored if null or empty.
*/
public IvImgButton(final String imgRelUrl, final String tooltip) {
super("IvImgButton" + (INDEX++), GWT.getModuleBaseURL() + imgRelUrl);


baseImgRelUrl_ = GWT.getModuleBaseURL() + imgRelUrl;


if (tooltip != null && tooltip.length() > 0) {
setTooltip(tooltip);
}
addClass("ImageButton");


this.addListener(new IvImageListenerAdapter() {


@Override
public void onMouseDown(final Image image, final EventObject e) {
/* 0 - left button */
if (!isDisabled() && e.getMouseButton() == 0) {
final int idx = baseImgRelUrl_.lastIndexOf(".");
setSrc(baseImgRelUrl_.subSequence(0, idx) + "_down"
+ baseImgRelUrl_.substring(idx));
}
}


@Override
public void onContextMenu(final Image image, final EventObject e) {
DeferredCommand.addCommand(new Command() {
public void execute() {
handleRightClickEvent(e);
}
});
}

@Override
public void onClick(final Image image, final EventObject e) {
/* 0 - left button */
if (!isDisabled() && e.getMouseButton() == 0) {
final int idx = baseImgRelUrl_.lastIndexOf(".");
setSrc(baseImgRelUrl_.subSequence(0, idx) + "_over"
+ baseImgRelUrl_.substring(idx));
DeferredCommand.addCommand(new Command() {
public void execute() {
handleLeftClickEvent(e);
}
});
}
}


@Override
public void onMouseOut(final Image image, final EventObject e) {
if (!isDisabled()) {
setSrc(baseImgRelUrl_);
}
}


@Override
public void onMouseOver(final Image image, final EventObject e) {
if (!isDisabled()) {
final int idx = baseImgRelUrl_.lastIndexOf(".");
setSrc(baseImgRelUrl_.subSequence(0, idx) + "_over"
+ baseImgRelUrl_.substring(idx));
}
}
});
}


/**
* {@inheritDoc}
*/
@Override
public void setDisabled(final boolean b) {
disabled_ = b;
if (b) {
final int idx = baseImgRelUrl_.lastIndexOf(".");
setSrc(baseImgRelUrl_.subSequence(0, idx) + "_disabled"
+ baseImgRelUrl_.substring(idx));

removeClass("ImageButton");
addClass("ImageButton-disabled");
} else {
setSrc(baseImgRelUrl_);

removeClass("ImageButton-disabled");
addClass("ImageButton");
}
}

/**
* {@inheritDoc}
*/
@Override
public boolean isDisabled() {
return disabled_;
}


/**
* Override this function, to block the browser's default behavior.
*/
@Override
public void onBrowserEvent(final Event event) {
super.onBrowserEvent(event);
/*
* This is required to prevent a Drag & Drop of the Image in the edit
* text.
*/
DOM.eventPreventDefault(event);
}


/**
* We have to override this function to be able to handle clicks.
*
* @param e
*            EventObject object pass from the click listener.
*/
protected void handleLeftClickEvent(final EventObject e) {
}


/**
* We have to override this function to be able to handle clicks.
*
* @param e
*            EventObject object pass from the click listener.
*/
protected void handleRightClickEvent(final EventObject e) {
}

}

Now you can have fully functional buttons of any size - not only just 16x16 pixels :)

Cheers!