Signature updates

melloware · Sep 14, 2024 · b7b5e53 · b7b5e53
1 parent a59bcc7
commit b7b5e53
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/src/main/java/org/primefaces/showcase/view/input/SignatureView.java b/src/main/java/org/primefaces/showcase/view/input/SignatureView.java
@@ -31,6 +31,8 @@
 public class SignatureView {
 
     private String value;
+    private String text;
+    private String base64;
 
     public String getValue() {
         return value;
@@ -39,4 +41,20 @@ public String getValue() {
     public void setValue(String value) {
         this.value = value;
     }
+
+    public String getBase64() {
+        return base64;
+    }
+
+    public void setBase64(String base64) {
+        this.base64 = base64;
+    }
+
+    public String getText() {
+        return text;
+    }
+
+    public void setText(String text) {
+        this.text = text;
+    }
 }
diff --git a/src/main/resources/META-INF/resources/ui/input/signature.xhtml b/src/main/resources/META-INF/resources/ui/input/signature.xhtml
@@ -11,7 +11,7 @@
 
     <ui:define name="description">
         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.
+        for customization. Signature also supports touch enabled devices as well as typeable text.
     </ui:define>
 
     <ui:param name="documentationLink" value="/components/signature"/>
@@ -21,22 +21,25 @@
         <div class="card">
             <h:form>
                 <p:growl>
-                    <p:autoUpdate/>
+                    <p:autoUpdate />
                 </p:growl>
 
-                <p:signature style="width:400px;height:200px" widgetVar="sig" value="#{signatureView.value}"
-                             required="true" guideline="true"/>
+                <p:outputPanel id="input">
+                    <p:outputLabel for="@next" value="Signature:" style="font-size:1.5rem" styleClass="block mb-2" />
+                    <p:signature id="signature" widgetVar="sig" style="width:400px;height:200px" value="#{signatureView.value}" required="true" guideline="true"
+                         textValue="#{signatureView.text}" base64Value="#{signatureView.base64}" />
+                </p:outputPanel>
 
                 <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"/>
+                    <p:commandButton value="Submit" icon="pi pi-check" update="output signature" />
+                    <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"/>
+                    <h:outputText rendered="#{not empty signatureView.value}" style="font-size:1.5rem" styleClass="block mb-2" value="Your Signature" />
+                    <p:signature id="signed" widgetVar="signed" style="width:400px;height:200px;" value="#{signatureView.value}"
+                        textValue="#{signatureView.text}" readonly="true" rendered="#{not empty signatureView.value}" backgroundColor="#eaeaea"
+                        color="#1769aa" />
                 </p:outputPanel>
             </h:form>
         </div>