PrimeFaces ColorPicker组件用法 _PrimeFaces组件

本文概述

ColorPicker属性
结构样式类
例子

它是带有调色板的输入组件。它允许我们在Web应用程序中选择和重新选择颜色。我们可以在JSF应用程序中使用它来获取颜色作为用户输入。
PrimeFaces提供< p：colorPicker> 组件以在Web应用程序中创建ColorPicker。它具有下表列出的各种属性。
ColorPicker属性

Attribute	默认值	Type	Description
id	null	String	它是组件的唯一标识符
value	null	Object	用于设置组件的值。
required	false	Boolean	用于根据需要标记组件。
valueChangeListener	null	ValueChangeListener	它是一个方法绑定表达式, 它表示处理valuchangeevent的方法。
requiredMessage	null	String	它用于设置在必填字段验证失败时显示的消息。
validatorMessage	null	String	用于设置验证字段时显示的消息。
mode	popup	String	用于设置显示模式。
style	null	String	用于设置组件的内联CSS样式。

结构样式类以下是适用于ColorPicker的结构样式类。

Style Class	Applies
.ui-colorpicker	Container element.
.ui-colorpicker_color	渐变背景。
.ui-colorpicker_hue	色相元素。
.ui-colorpicker_new_color	新的彩色显示。
.ui-colorpicker_current_color	当前颜色显示。
.ui-colorpicker-rgb-r	Red input.
.ui-colorpicker-rgb-g	贪婪的输入。

例子 【PrimeFaces ColorPicker组件用法】在下面的示例中, 我们正在实现< p：colorPicker> 组件。本示例包含以下文件。
JSF文件
// colorPicker.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> Color Picker< /title> < /h:head> < h:body> < h:form> < h:panelGrid columns="2" cellpadding="5" style="margin-left: 20px"> < h:outputText value="http://www.srcmini.com/Select Color:" /> < p:colorPicker value="http://www.srcmini.com/#{colorPicker.color}" /> < /h:panelGrid> < p:commandButton value="http://www.srcmini.com/Submit" style="margin-left: 20px" /> < /h:form> < /h:body> < /html>

ManagedBean
// ColorPicker.java

package com.srcmini; import javax.faces.bean.ManagedBean; @ManagedBeanpublic class ColorPicker {private String color; public String getColor() {return color; }public void setColor(String color) {this.color = color; }}

输出