ActionButtonTextField

An extension for the TextField component which adds search, clear or upload buttons to the field.

View larger

Close

An extension for the TextField component. It adds either a search, clear or upload icon button image to the extended TextField.

When the mouse rolls over an image it changes to a darker color.All buttons when clicked send an event back to the server indicating that the action was fired. The reset button clears the text immediately, the other actions (upload and search) require an implementation on the server side.

The actions (which determine the icon used) are set via the shared state of the ActionButtonTextField

The buttons are rendered using SVG images in supported browsers; there are also PNG versions for IE8 users.

This was created from a fork of the ResetButtonForTextField plugin.

Sample code

final TextField searchField = new TextField("Search Action");
ActionButtonTextField searchButtonTextField = ActionButtonTextField.extend(searchField);
searchButtonTextField.getState().type = ActionButtonType.ACTION_SEARCH;
searchButtonTextField.addClickListener(new ActionButtonTextField.ClickListener() {
    @Override
    public void buttonClick(ActionButtonTextField.ClickEvent clickEvent) {
        Notification.show("Search Action Button Clicked...");
    }
});
layout.addComponent(searchField);
searchField.setImmediate(true);
searchField.setWidth("300px");

Links

• Source Code
• Issue Tracker

Compatibility