First of all, we have to regenerate the component's JAR package using the following command from the starRating directory:

mvn clean install

After the process completes, we have to copy the JAR (named starRating-1.0-SNAPSHOT.jar) package inside the lib directory of our project (in our case, we are going to use the AdvContactManager project we've used for the examples in Chapter 10, Advanced Techniques).

After that, we have to add the new library into the produced package in a seam-generated project and edit the deployed-jars-war.list file by adding the following line:

starRating-1.0-SNAPSHOT.jar

In our case, we are adding it into the EAR list file (deployed-jars-ear.list), because we've moved all of the libraries there, while writing the examples for Chapter 10.

Now let's create the example bean class called StarRatingTest in the package book.richfaces.advcm.modules.main.examples.component:

package book.richfaces.advcm.modules.main.examples.component;
import org.jboss.seam.annotations.Name;
@Name("starRatingTest")
public class StarRatingTest {
private Integer intTest;
private Float floatTest;
public Integer getIntTest() {
return intTest;
}
public void setIntTest(Integer intTest) {
this.intTest = intTest;
}
public Float getFloatTest() {
return floatTest;
}
public void setFloatTest(Float floatTest) {
this.floatTest = floatTest;
}
}

It is just a "container" for an integer and a float variable.

Now let's use it inside the XHTML with our new component!

Let's create a file called componentExample.xhtml inside the /view/examples/component/ directory and add the following code:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j" 
xmlns:test="http://mycompany.org/starRating"

template="/layout/template.xhtml">
<ui:define name="body">
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Integer test: "/>
<h:inputText value="#{starRatingTest.intTest}">
<a:support event="onchange" reRender="sri" ajaxSingle="true"/>
</h:inputText>
<test:starRating id="sri" value="#{starRatingTest.intTest}"/>
<h:outputText value="Float test: "/>
<h:inputText value="#{starRatingTest.floatTest}"> <a:support event="onchange" reRender="srf" ajaxSingle="true"/>
</h:inputText>
<test:starRating id="srf" value="#{starRatingTest.floatTest}"/>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>

As you can see, we've connected the bean values to an input text and two starRating components in order to show the value the user types into the input as stars.

For using the component, we've defined the namespace as you can notice by the highlighted line.

The last thing we can add (optionally, just to have a good looking URL for the page) is the Seam page descriptor in the same directory, with the name componentExample.page.xml and the following content:

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns="http://jboss.com/products/seam/pages"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://jboss.com/products/seam/pages http://jboss.com/products/seam/pages-2.1.xsd">
<rewrite pattern="/componentExample"/>
</page>

If we run the example, we can see the component updated by an Ajax request after the user's input focus leaves the h:inputText component.

The following screenshot shows the example in action:

We can also try to set the style and styleClass elements to customize the component appearance, as shown in the following screenshot, for example:

Here we added colored borders to our test components just to give you an example. You can also implement custom images for stars and so on: it's up to you!