Chapter 6. Rich Components

6.1. Add a Richfaces component to the CRUD Application

This lab will conclude with one last AJAX twist. In this section we add a RichFaces inputNumberSlider to the Order Details edit screen.

6.1. Add a Richfaces component to the CRUD Application

Switch to Seam perspective, and open WebContent/OrderdetailsEdit.xhtml in JBoss Developer Studio.

Change the form field values using the visual editor. Seam has generated the form field names that match the database column names. This is not ideal for business users.

Figure 6.1. Form Fields Editing

Also, replace the QTY Ordered input field with a inputNumberSlider. You can use the JBoss Developer Studio palette or right click on the form and insert the RichFaces component.

Figure 6.2. Insert RichFaces Component from Context Menu

One the last option is to use the source view and manually copy the inputNumberSlider markup listed below:

							<rich:inputNumberSlider id="quantityOrdered" required="true"
							value="#{orderdetailsHome.instance.quantityordered}"/>

Figure 6.3. Manually copying Source Code

The end result is an edit page that has better form labels and a new RichFaces control.

Figure 6.4. The Result Page

Congratulations! You have completed the JBoss Developer Studio lab.