PrimeFaces签名例子

本文概述

  • 签名属性
  • 例子
它用于绘制签名作为输入。它提供了一个可以在其中绘制签名的画布。它提供了各种选项, 例如背景色, 前景色, 用于自定义的厚度。可以在支持触摸的设备中使用。在JSF应用程序中, 我们可以使用< p:signature> 组件创建它。它还提供了下表中列出的各种属性。
签名属性
Attribute Default value Type Description
id null String 它用于组件的唯一标识符。
rendered true Boolean 它用于指定组件的呈现。
value null Object 用于设置组件的值。
required false Boolean 用于根据需要标记组件。
validator null MethodExpr 用于设置验证器。
requiredMessage null String 它用于设置在必填字段验证失败时显示的消息。
widgetVar null String 它是客户端小部件的名称。
backgroundColor #ffffff String 用于设置背景色。
color #000000 String 用于设置前景色。
thickness 2 Integer 用于设置线条的粗细。
style null String 它用于设置组件的内联CSS。
readonly false Boolean 它用于使组件变为只读。
guideline false Boolean 用于设置公会线。
guidelineColor #a0a0a0 String 用于设置指南的颜色。
guidelineOffset 25 String 用于设置基准线与底部的偏移量。
guidelineIndent 10 Boolean 用于从边缘设置准线缩进。
onchange null String 签名更改时, 用于执行脚本。
base65Value null String 只写值, 用于将base64中的值传递到支持bean。
例子 在下面的示例中, 我们正在实现< p:signature> 组件。本示例包含以下文件。
JSF文件
// signature.xhtml
< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"> < h:head> < title> Signature< /title> < /h:head> < h:body> < h:form> < p:growl autoUpdate="true" /> < p:signature style="width:400px; height:200px" widgetVar="sig" value="http://www.srcmini.com/#{signatureDemo.signature}" required="true" label="Signature" guideline="true"/> < div style="margin:20px 0"> < p:commandButton value="http://www.srcmini.com/Submit" icon="ui-icon-check"/> < p:commandButton value="http://www.srcmini.com/Clear" icon="ui-icon-close" type="button" onclick="PF('sig').clear()"/> < /div> < /h:form> < /h:body> < /html>

ManagedBean
// SignatureDemo.java
package com.srcmini; import javax.faces.bean.ManagedBean; @ManagedBeanpublic class SignatureDemo {private String signature; public String getSignature() {return signature; }public void setSignature(String signature) {this.signature = signature; }}

【PrimeFaces签名例子】输出
PrimeFaces签名例子

文章图片
PrimeFaces签名例子

文章图片

    推荐阅读