SignatureField

A Vaadin Field<String> to capture signatures. Its value is the data url from the html canvas as simple String. signature_pad by Szymon Nowak is used to capture the signature at the client-side.

Requirements

• Vaadin 7.4+

Demo

http://maxschuster.jelastic.servint.net/SignatureField/

Usage

Simple

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

Using DataURL

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

Licence

• SignatureField Add-on: Apache License Version 2.0
• signature_pad: MIT License