In this recipe, we will explore RichFaces CDK for creating JSF custom components. For those who are not familiar, CDK stands for Component Development Kit—a sub-project of RichFaces that allows you to easily create rich components with built-in Ajax support.
During this recipe, we will develop a custom component that will render a text field for inserting a phone number of type
xxxx-xxxxx-x. We will render the phone number as a string, of the form
xxxx-xxxxx-x, but we will store it as a string of type
xxxxxxxxxx—this task will be accomplished by a custom converter.
The HTML prototype of our custom component will be:
<div title="Phone field:"> <input name="phoneField" value="0000-00000-0" /> <img src="phone.gif" ...