Directory

← Back

SignatureField

Vaadin field to capture signatures

Author

Contributors

Rating

A CustomField that captures signatures using the JavaScript library Signature Pad by Szymon Nowak.

Signature Pad is released under the MIT License.

Sample code

FormLayout layout = new FormLayout();

SignatureField signatureField = new SignatureField();
signatureField.setWidth("350px");
signatureField.setHeight("150px");

layout.addComponent(signatureField);

signatureField.addValueChangeListener(new ValueChangeListener() {
    @Override
    public void valueChange(ValueChangeEvent event) {
        String signature = (String) event.getProperty().getValue();
        // do something with the string
    }
});
ObjectProperty<DataURL> dataUrlProperty =
    new ObjectProperty<DataURL>(null, DataURL.class);

FormLayout layout = new FormLayout();

SignatureField signatureField = new SignatureField();
signatureField.setWidth("350px");
signatureField.setHeight("150px");
signatureField.setConverter(new StringToDataURLConverter());
signatureField.setPropertyDataSource(dataUrlProperty);

layout.addComponent(signatureField);

dataUrlProperty.addValueChangeListener(new ValueChangeListener() {
    @Override
    public void valueChange(ValueChangeEvent event) {
        final DataURL signature = (DataURL) event.getProperty().getValue();
        String mimeType = signature.getAppliedMimeType();
        byte[] data = signature.getData();
        // do something with the data
    }   
});

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

Released
2018-01-16
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.4+ in 1.0.2
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Online