Using rich:colorPicker in RichFaces

Posted by: Max Katz on 07/01/2009

One of the new components in RichFaces 3.3.1 is rich:colorPicker. The component is based on jQuery widget and has the same functionality and events. Using the component is straight forward. Here is an example.

JSF page:

<h:outputText id="text" value="RichFaces is cool!" 
   style="font-size: x-large; color: #{colorBean.color}"/>
<h:form>
   <rich:colorPicker value="#{colorBean.color}">
      <a4j:support event="onchange" reRender="text"/>
   </rich:colorPicker>
</h:form>

Initial rendering and opening the picker:
screenshot71

After color selection:
screenshot72


  • Currently 4.0/5
  • 1
  • 2
  • 3
  • 4
  • 5
4.0 rating out of 1 votes

About Max Katz

Max Katz

Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past three years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of "Practical RichFaces" book (Apress). Max holds a BS in computer science from the University of California, Davis.

More About Max »

NFJS, the Magazine

August Issue Now Available
  • Google Your Persistent Domain Model
    by John Griffin
  • Get Cooking in the Cloud with Chef, Part 2
    by Michael Nygard
  • Making Java Bearable with Guava
    by Daniel Hinojosa
  • HTML 5 Update
    by Brian Sletten
Learn More »