First of all, we need to configure our new component let's open the src/main/config/component/starRating.xml file for editing and add the value property inside the<component> element, using the following code:

<property>
<name>value</name>
<classname>java.lang.Float</classname>
<description>
The value of the component.
</description>
</property>

Also, we want to support the standard properties for style customizing (style and styleClass); instead of adding them by hand, we can use the predefined entities by adding this code:

&html_style_attributes;

There are other predefined entities for the common attributes you can use (refer to the CDK documentation for this purpose at http://docs.jboss.org/richfaces/latest_3_3_X/en/cdkguide/html/).

The second thing we need are the images of two kinds of stars full and half.

They are shown in the next image:

Let's create the starRating/src/main/resources/book/richfaces/cdk/example/renderkit/html/images directory and copy the two images (named full.png and half.png) inside it.

We will see how to use them in the next section.

The Renderer class of a component is responsible to make the representation of the component generating the chosen markup (such as HTML, WML, and so on.). It is also responsible for converting the client values to the right type that the component will use.

In order to go into the depth of the JSF components' structure and life-cycles, refer to the official JSF documentation.

Using the CDK framework, we can create our Renderer class using a JSP-like markup page that will be automatically converted into Java code during the package generation. Very convenient!

Let's open the generated template file starRating/src/main/templates/book/richfaces/cdk/example/htmlStarRating,jspx and start importing the resources we are going to use, by adding the highlighted code between the f:clientId and the div tags:

...
<f:clientid var="clientId"/>
<f:resource var="fullStar" name="images/full.png" />
<f:resource var="halfStar" name="images/half.png" />
<div ...

Now we can refer to them using the name set in the var attribute (fullStar and halfStar). For example, if we want to insert the full star image, we can use the following code:

<img src="#{fullStar}" />

In our application, we accept Float values in the value attribute (that we specified as a Float into the configuration file), so the first thing to do is to get a Float from the passed value.

In order to do so, we use a special tag called jsp:scriptlet that is very useful to insert Java logic inside the JSP-like code it will be copied "as is" into the generated Renderer class.

Let's add the following Java logic code inside the div tag:

<jsp:scriptlet>
<!
[CDATA[
Float ratingValue =(Float) component.getAttributes().get("value"); variables.setVariable("ratingValue", ratingValue);
]]>
</jsp:scriptlet>

In this code, we first get the passed Float value and then insert it into a variable named ratingValue (so, we can refer to it in the next code snippet we are going to insert).

After getting and setting the value, we have to get the integer part of the float value and write as many stars as the number we have found.

For that purpose, we use the following scriptlet (to be written after the first one):

<jsp:scriptlet>
<!
[CDATA[
// Render the full stars
int integerValue = (int)Math.floor(ratingValue);
for (int b=0; b<integerValue; b++) {
]]>
</jsp:scriptlet>
<img src="#{fullStar}" alt="#{ratingValue}" />
<jsp:scriptlet>
<!
[CDATA[
}
]]>
</jsp:scriptlet>

As you can see, we mixed the HTML code and Java code (properly closing and re-opening the scriptlet tags).

The code we've just inserted iterates over the integer part in order to write a list of full stars for example, if we pass the number 3.4, it writes three full stars.

Now we have to consider the decimal part and decide what to do. We've made a simple logic:

We can implement this simple logic by appending the following code:

<jsp:scriptlet>
<!
[CDATA[
// Decide if I have to render for the last star
float decimalPart = (ratingValue-integerValue);
if (decimalPart>0.66) {
]]>
</jsp:scriptlet>
<img src="#{fullStar}" alt="#{ratingValue}" />
<jsp:scriptlet>
<!
[CDATA[
} else if (decimalPart>=0.33 && decimalPart<=0.66) {
]]>
</jsp:scriptlet>
<img src="#{halfStar}" alt="#{ratingValue}" />
<jsp:scriptlet>
<!
[CDATA[
}
]]>
</jsp:scriptlet>

We have finished (this is a very simple component), and we are ready to test it inside our application!