ResetButtonForTextField

Extension that adds a reset button to any TextField component

View larger

Close

Adds a reset button to a text field, allowing users to clear the value of the field with one click.

The reset button is drawn using SVG images in supported browsers. With IE8 PNG versions of those are used.

Also an example project for a blog post Extending components in Vaadin 7.

Usage

Either add Maven

<dependency>
    <groupId>org.vaadin</groupId>
    <artifactId>
        resetbuttonfortextfield
    </artifactId>
    <version>1.2.1</version>
</dependency>

or Ivy dependency

<dependency 
    org="org.vaadin" 
    name="resetbuttonfortextfield" 
    rev="1.2.1" 
/>

or just add the JAR to your project, compile the widgetset and then extend any TextField:

TextField tf = new TextField();
ResetButtonForTextField.extend(tf);

Sample code

TextField tf = new TextField();
ResetButtonForTextField.extend(tf);

package org.vaadin.resetbuttonfortextfield;

import java.util.Date;

import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.event.FieldEvents;
import com.vaadin.event.FieldEvents.TextChangeEvent;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;

@SuppressWarnings("serial")
public class ResetButtonForTextFieldTestUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        final FormLayout layout = new FormLayout();
        layout.setMargin(true);
        setContent(layout);

        final TextField tf = new TextField("Type something, please");
        ResetButtonForTextField.extend(tf);
        layout.addComponent(tf);
        tf.setImmediate(true);
        tf.setWidth("300px");

        final Label textChangeEventListenerLabel = new Label();
        textChangeEventListenerLabel.setCaption("I show textChangeEvents!");
        layout.addComponent(textChangeEventListenerLabel);

        final Label valueChangeListenerLabel = new Label();
        valueChangeListenerLabel.setCaption("I show valueChangeEvents!");
        layout.addComponent(valueChangeListenerLabel);

        tf.addValueChangeListener(new Property.ValueChangeListener() {
            @Override
            public void valueChange(ValueChangeEvent event) {
                valueChangeListenerLabel.setValue(event.getProperty()
                        .getValue().toString());
            }
        });

        tf.addTextChangeListener(new FieldEvents.TextChangeListener() {
            @Override
            public void textChange(TextChangeEvent event) {
                textChangeEventListenerLabel.setValue(event.getText());
            }
        });

        Button b1 = new Button("Clear the value of the textfield",
                new Button.ClickListener() {
                    @Override
                    public void buttonClick(ClickEvent event) {
                        tf.setValue("");
                    }
                });
        Button b2 = new Button(
                "Set the value of the textfield to current date",
                new Button.ClickListener() {

                    @Override
                    public void buttonClick(ClickEvent event) {
                        tf.setValue(new Date().toString());
                    }
                });

        layout.addComponent(b1);
        layout.addComponent(b2);
    }
}

Links

• Online Demo
• Issue Tracker
• Source Code
• Blog post

Compatibility