JSF Component Libraries - JSF and HTML5 - page 231

In the next section, we will show a RichFaces application example in order to show you how to utilize the library.

■ in order to get the full documentation of richFaces, you can check the documentation from
http://www.jboss.org/richfaces/docs . You can access the complete richFaces showcase that includes an example
of almost every richFaces component from http://showcase.richfaces.org .

Note

Integrating and Customizing RichFaces
The RightCountry application is a RichFaces application which allows the user to drag a list of available places into
their corresponding countries as shown in Figure 9-2 .

Figure 9-2. Right Country application

The application does not allow the user to drag a place and drop it into a country that the place does not belong
to. Listing 9-10 shows the code snippet which represents the drop source panel (on the left).

Listing 9-10. Drop Source Panel Code (on the Left)
<rich:panel styleClass="dropSourcePanel">
<f:facet name="header">
<h:outputText value="Places" />
</f:facet>
<h:dataTable id="places" columns="1"
value="#{rightCountry.places}"
var="place" footerClass="footerClass">

<h:column>
<a4j:outputPanel styleClass="placesContainer"
layout="block">
<rich:dragSource type="#{place.country}"
dragValue="#{place}"
dragIndicator="ind"/>
<h:outputText value="#{place.name}"></h:outputText>
</a4j:outputPanel>
</h:column>
</h:dataTable>
</rich:panel>