srcmini本文概述
它是带有调色板的输入组件。它允许我们在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;
}
}输出
评论前必须登录！
注册