Signature is used to draw a signature as an input. Various options such as background color, foreground color, thickness are available for customization. Signature also supports touch enabled devices and legacy browsers without canvas support.
<div class="card">
<h:form>
<p:growl>
<p:autoUpdate/>
</p:growl>
<p:signature style="width:400px;height:200px" widgetVar="sig" value="#{signatureView.value}"
required="true" guideline="true"/>
<div style="margin:20px 0">
<p:commandButton value="Submit" icon="pi pi-check" update="output"/>
<p:commandButton value="Clear" icon="pi pi-times" type="button" onclick="PF('sig').clear()" styleClass="ui-button-flat ml-2"/>
</div>
<p:outputPanel id="output">
<h:outputText rendered="#{not empty signatureView.value}" style="font-size:1.5rem" styleClass="block mb-2"
value="Your Signature" />
<p:signature style="width:400px;height:200px;" value="#{signatureView.value}" readonly="true"
rendered="#{not empty signatureView.value}" backgroundColor="#eaeaea" color="#03a9f4"/>
</p:outputPanel>
</h:form>
</div>
@Named
@RequestScoped
public class SignatureView {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}