6.3. Components using User-Input Data

These components produce output based on a user's actions. The component provides a response that appears as output on the webpage.

6.3.1. rich:inputNumberSlider

The rich:inputNumberSlider component allows users to select a number from a pre-defined range. It is rendered as a slider which the user can move to select a number, with the option to type a specific value into an input field. This dual method of specifying a quantity is useful for web forms.
The range of the slider can be defined:
  • The value field is defined so the slider displays a value of 50. The default range of the slider is 1 to 100.

Example 6.8. rich:inputNumberSlider

This example creates a scale that ranges from 1 to 100 with the arrow automatically set to 50.
 <rich:inputNumberSlider value="50" />
Using the rich:inputNumberSlider component as shown in the above code creates this result:

6.3.2. a4j:mediaOutput

The a4j:mediaOutput component displays multimedia objects as defined by the user. It can be used to add an image to a layout and give users the option to resize it to a predefined resolution.
The acceptable file types can be defined in the code:
  • The element field specifies the file type. (In this case, an image file.)
  • The mimeType field specifies the file format. (In this case, a JPEG file.)

Example 6.9. a4j:mediaOutput

This example creates an embedded image that users can modify the colours of.
 <a4j:mediaOutput element="img" cacheable="false" session="true" id="img" createContent="#{mediaBean.process}"
            value="#{mediaData}" mimeType="image/jpeg" alt="img" />
Using the a4j:mediaOutput component as shown in the above code creates this result:

6.3.3. rich:focus

The rich:focus component alerts users to an item in the panel they are using. For example, if a user types an invalid term in a web form, a message displays next to the text field stating that alternate text must be entered before submitting the form.
The rich:focus component has various uses:
  • Provides a visual alert to users.
  • Is applied to every field that is triggered.
  • Does not allow validation until the correct input is added.

Example 6.10.  rich:focus

This example can be added at the beginning of a body of HTML to display an alert to users if they have used an invalid term in a text field.
<rich:focus />
Using the rich:focus component shown above creates this result: