个性化阅读
专注于IT技术分析

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 贪婪的输入。

例子

在下面的示例中, 我们正在实现<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="Select Color: " />
<p:colorPicker value="#{colorPicker.color}" />
</h:panelGrid>
<p:commandButton value="Submit" style="margin-left: 20px" />
</h:form>
</h:body>
</html>

ManagedBean

// ColorPicker.java

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

输出

PrimeFaces ColorPicker 1
PrimeFaces ColorPicker 2
赞(0) 打赏
未经允许不得转载:srcmini » PrimeFaces ColorPicker组件用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏