Directory

← Back

ResetButtonForTextField

Extension that adds a reset button to any TextField component

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Fix errors in pom.xml
Released
2015-04-19
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone

ResetButtonForTextField - Vaadin Add-on Directory

Extension that adds a reset button to any TextField component ResetButtonForTextField - Vaadin Add-on Directory
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](https://vaadin.com/blog/-/blogs/extending-components-in-vaadin-7). ## Usage ## Either add Maven org.vaadin resetbuttonfortextfield 1.2.1 or Ivy dependency or just add the JAR to your project, compile the widgetset and then extend any TextField: TextField tf = new TextField(); ResetButtonForTextField.extend(tf);
Online