Color Picker
Gone are the days to manually enter in hex codes to select colors.
Source
<h:form id="form">
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="Inline: " />
<p:colorPicker id="inlineCP" value="#{colorBean.color1}" mode="inline" />
<h:outputText value="Styled: " />
<p:colorPicker value="#{colorBean.color2}" styleClass="silver" mode="inline" />
<h:outputText value="Popup: " />
<p:colorPicker id="popupCP" value="#{colorBean.color3}" widgetVar="picker"/>
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" oncomplete="dlg.show()" update="grid @parent" />
</p:panel>
<p:dialog modal="true" widgetVar="dlg" showEffect="fade" hideEffect="fade" header="Selected Colors">
<h:panelGrid columns="2" id="grid">
<h:outputText value="Color 1: " />
<h:outputText value="#{colorBean.color1}" style="background-color:\##{colorBean.color1}"/>
<h:outputText value="Color 2: " />
<h:outputText value="#{colorBean.color2}" style="background-color:\##{colorBean.color2}"/>
<h:outputText value="Color 3: " />
<h:outputText value="#{colorBean.color3}" style="background-color:\##{colorBean.color3}"/>
</h:panelGrid>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
public class ColorBean {
private String color1;
private String color2;
private String color3;
public String getColor1() {
return color1;
}
public void setColor1(String color1) {
this.color1 = color1;
}
public String getColor2() {
return color2;
}
public void setColor2(String color2) {
this.color2 = color2;
}
public String getColor3() {
return color3;
}
public void setColor3(String color3) {
this.color3 = color3;
}
}
