Directory

SignatureField

Vaadin field to capture signatures

View larger

Close

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

Links

• Online Demo
• Issue Tracker
• Source Code
• Signature Pad
• Author Homepage
• Discussion Forum
• JavaDoc

Compatibility