JBoss.orgCommunity Documentation

Chapter 8. Rich inputs

8.1. <rich:autocomplete>
8.1.1. Basic usage
8.1.2. Submission modes
8.1.3. Interactivity options
8.1.4. Customizing the filter in client and lazyClient modes
8.1.5. JavaScript API
8.1.6. Reference data
8.1.7. Style classes and skin parameters
8.2. <rich:calendar>
8.2.1. Basic usage
8.2.2. Behavior and appearance
8.2.3. Time of day
8.2.4. Localization and formatting
8.2.5. Using a data model
8.2.6. Client-side customization
8.2.7. JavaScript API
8.2.8. Reference data
8.2.9. Style classes and skin parameters
8.3. <rich:editor>
8.3.1. Basic usage
8.3.2. Styling
8.3.3. Editor skins
8.3.4. Advanced configuration
8.3.5. Toolbar customization
8.3.6. Internationalization and localization
8.3.7. Client-side event handlers
8.3.8. JavaScript API
8.3.9. Reference data
8.3.10. Style classes and skin parameters
8.4. <rich:fileUpload>
8.4.1. Basic usage
8.4.2. Upload settings
8.4.3. Sanitizing file upload input
8.4.4. Interactivity options
8.4.5. <rich:fileUpload> client-side events
8.4.6. Reference data
8.4.7. Style classes and skin parameters
8.5. <rich:inplaceInput>
8.5.1. Basic usage
8.5.2. Interactivity options
8.5.3. JavaScript API
8.5.4. Reference data
8.5.5. Style classes and skin parameters
8.6. <rich:inplaceSelect>
8.6.1. Basic usage
8.6.2. Interactivity options
8.6.3. JavaScript API
8.6.4. Reference data
8.6.5. Style classes and skin parameters
8.7. <rich:inputNumberSlider>
8.7.1. Basic usage
8.7.2. Interactivity options
8.7.3. JavaScript API
8.7.4. Reference data
8.7.5. Style classes and skin parameters
8.8. <rich:inputNumberSpinner>
8.8.1. Basic usage
8.8.2. Interactivity options
8.8.3. JavaScript API
8.8.4. Reference data
8.8.5. Style classes and skin parameters
8.9. <rich:select>
8.9.1. Basic usage
8.9.2. Using manual input
8.9.3. Advanced options
8.9.4. JavaScript API
8.9.5. Reference data
8.9.6. Style classes and skin parameters
8.10. <rich:orderingList>
8.10.1. Basic usage
8.10.2. Column Layout
8.10.3. JavaScript API
8.10.4. Reference data
8.10.5. Style classes and skin parameters
8.11. <rich:pickList>
8.11.1. Basic usage
8.11.2. Column Layout
8.11.3. JavaScript API
8.11.4. Reference data
8.11.5. Style classes and skin parameters

This chapter details rich components for user input and interaction.

The <rich:autocomplete> component is an auto-completing input-box with built-in Ajax capabilities. It supports client-side suggestions, browser-like selection, and customization of the look and feel.

The auto-complete box is a standard JSF UIInput control with added validation.

Figure 8.1. <rich:autocomplete>


The <rich:autocomplete> component uses the JavaScript startsWith() method to create the list of suggestions. The filtering is performed on the client side. Alternatively, use the clientFilterFunction attribute to specify a custom filtering function. The custom function must accept two parameters: the subString parameter is the filtering value as typed into the text box by the user, and the value parameter is an item in the list of suggestions against which the subString must be checked. Each item is iterated through and passed to the function as the value parameter. The custom function must return a boolean value indicating whether the passed item meets the conditions of the filter, and the suggestion list is constructed from successful items.


Table 8.1. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-au-fnt

This class defines styles for the auto-complete box font.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-au-inp

This class defines styles for the auto-complete input box.

controlBackgroundColor

background-color

.rf-au-fld

This class defines styles for the auto-complete field.

panelBorderColor

border-color

controlBackgroundColor

background-color

.rf-au-fld-btn

This class defines styles for a button in the auto-complete field.

No skin parameters.
.rf-au-btn

This class defines styles for the auto-complete box button.

headerBackgroundColor

background-color

panelBorderColor

border-left-color

.rf-au-btn-arrow

This class defines styles for the button arrow.

No skin parameters.
.rf-au-btn-arrow-dis

This class defines styles for the button arrow when it is disabled.

No skin parameters.
.rf-au-lst-scrl

This class defines styles for the scrollbar in the auto-complete list.

No skin parameters.
.rf-au-itm

This class defines styles for an item in the auto-complete list.

No skin parameters.
.rf-au-itm-sel

This class defines styles for a selected item in the auto-complete list.

headerBackgroundColor

background-color

generalTextColor

border-color

.rf-au-shdw

This class defines styles for the auto-complete box shadow.

No skin parameters.
.rf-au-shdw-t, .rf-au-shdw-l, .rf-au-shdw-r, .rf-au-shdw-b

These classes define styles for the top, left, right, and bottom part of the auto-complete box shadow.

No skin parameters.
.rf-au-tbl

This class defines styles for a table in the auto-complete box.

No skin parameters.

The <rich:calendar> component allows the user to enter a date and time through an in-line or pop-up calendar. The pop-up calendar can navigate through months and years, and its look and feel can be highly customized.

Figure 8.2. <rich:calendar>


The <rich:calendar> component is presented as a pop-up by default, appearing as a text field with a button to expand the full pop-up calendar. To render the calendar in-line on the page instead, set popup="false. This displays the full calendar without the text field and display button.

To add keyboard support for manual input, set enableManualInput="true". To disable the calendar from any user input, set disabled="true".

To change the appearance of the display button from the standard calendar icon, use the buttonIcon and buttonDisabledIcon attributes to replace the icon with a specified file. Alternatively, use the buttonLabel attribute to display text on the button without an icon. If buttonLabel is specified then both the buttonIcon and buttonDisabledIcon attributes are ignored. To hide the text field box, set showInput="false".

The calendar features a Today button for locating today's date on the calendar. This can be set to three different values using the todayControlMode attribute:

To make the entire calendar read-only, set readonly="true". This allows months and years to be browsed through with the arrow controls, but dates and times cannot be selected.

Instead of using a data model, the <rich:calendar> component can be customized on the client-side using JavaScript. Use the dayClassFunction attribute to reference the function that determines the CSS style class for each day cell. Use the dayDisableFunction to reference the function that enables or disables a day cell. Example 8.4, “Client-side customization” demonstrates how client-side customization can be used to style different days in a calendar.


Table 8.2. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-cal-extr

This class defines the styles for a pop-up calendar exterior.

panelBorderColor

border-color

.rf-cal-btn

This class defines styles for a calendar button.

No skin parameters.
.rf-cal-hdr

This class defines the styles for a calendar header.

panelBorderColor

border-bottom-color

additionalBackgroundColor

background-color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-hdr-optnl

This class defines the styles for an optional header.

panelBorderColor

border-bottom-color

additionalBackgroundColor

background-color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-hdr-month

This class defines the styles for the month header.

headerBackgroundColor

background-color

headerSizeFont

font-size

headerFamilyFont

font-family

headerWeightFont

font-weight

headerTextColor

color

.rf-cal-ftr

This class defines the styles for a calendar footer.

panelBorderColor

border-right-color, border-bottom-color

additionalBackgroundColor

background

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-ftr-optnl

This class defines the styles for an optional footer.

panelBorderColor

border-right-color, border-bottom-color

additionalBackgroundColor

background

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-tl

This class defines the styles for calendar toolbars.

headerBackgroundColor

background-color

headerSizeFont

font-size

headerFamilyFont

font-family

headerWeightFont

font-weight

headerTextColor

color

.rf-cal-tl-ftr

This class defines the styles for a toolbar item in the calendar footer.

additionalBackgroundColor

background

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-tl-btn

This class defines styles for a toolbar button.

No skin parameters.
.rf-cal-tl-btn-dis

This class defines styles for a disabled toolbar button.

No skin parameters.
.rf-cal-tl-btn-hov

This class defines the styles for toolbar items when it is hovered over with the mouse cursor.

calendarWeekBackgroundColor

background-color

generalTextColor

color

tableBackgroundColor

border-color

panelBorderColor

border-right-color, border-bottom-color

.rf-cal-tl-btn-press

This class defines the styles for toolbar items when it is pressed.

panelBorderColor

border-color

panelBorderColor

border-right-color, border-bottom-color

.rf-cal-tl-close

This class defines styles for a Close button in a toolbar.

No skin parameters.
.rf-cal-c

This class defines the styles for regular calendar cells.

panelBorderColor

border-bottom-color, border-right-color

tableBackgroundColor

background-color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-c-cnt

This class defines styles for the content of a cell.

No skin parameters.
.rf-cal-today

This class defines the styles for the cell representing today's date.

calendarCurrentBackgroundColor

background-color

calendarCurrentTextColor

color

.rf-cal-sel

This class defines the styles for the selected day.

headerBackgroundColor

background-color

headerTextColor

color

.rf-cal-hov

This class defines the styles for a cell when it is hovered over with the mouse cursor.

calendarSpecBackgroundColor

background-color

calendarSpecTextColor

color

.rf-cal-week

This class defines the styles for week numbers.

panelBorderColor

border-bottom-color, border-right-color

calendarWeekBackgroundColor

background-color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-holiday

This class defines the styles for weekends and holidays.

calendarHolidaysBackgroundColor

background-color

calendarHolidaysTextColor

color

.rf-cal-boundary-day

This class defines styles for an active boundary button.

No skin parameters.
.rf-cal-sp-inp

This class defines the styles for a spinner input field in the pop-up element for time selection.

buttonSizeFont

font-size

buttonFamilyFont

font-family

.rf-cal-sp-inp-cntr

This class defines the styles for a wrapper <td> element for a spinner input field in the pop-up element for time selection.

controlBackgroundColor

background-color

panelBorderColor

border-color

subBorderColor

border-right-color, border-bottom-color

.rf-cal-sp-btn

This class defines the styles for a wrapper <td> element for spinner buttons in the pop-up element for time selection.

headerBackgroundColor

background-color, border-color

.rf-cal-sp-up

This class defines styles for the Up spinner button.

No skin parameters.
.rf-cal-sp-down

This class defines styles for the Down spinner button.

No skin parameters.
.rf-cal-sp-press

This class defines styles for a spinner button when it is pressed.

No skin parameters.
.rf-cal-edtr-shdw

This class defines the styles for the calendar editor shadow.

tableBackgroundColor

background

.rf-cal-edtr-layout-shdw

This class defines the styles for the layout shadow of a calendar editor.

shadowBackgroundColor

background-color

.rf-cal-edtr-btn

This class defines styles for a button in the calendar editor.

No skin parameters.
.rf-cal-edtr-btn-over

This class defines the styles for the calendar editor button when it is hovered over with the mouse cursor.

panelBorderColor

border-color

calendarSpecBackgroundColor

background

.rf-cal-edtr-btn-sel

This class defines the styles for the calendar editor button when it is selected.

calendarCurrentBackgroundColor

background-color

calendarCurrentTextColor

color

.rf-cal-edtr-tl-over

This class defines the styles for a toolbar item in the calendar editor when it is hovered over with the mouse cursor.

additionalBackgroundColor

background

tableBackgroundColor

border-color

panelBorderColor

border-right-color, border-bottom-color

.rf-cal-edtr-tl-press

This class defines the styles for a toolbar item in the calendar editor when it is pressed.

additionalBackgroundColor

background

panelBorderColor

border-color

tableBackgroundColor

border-right-color, border-bottom-color

.rf-cal-time-inp

This class defines styles for the time input field.

No skin parameters.
.rf-cal-time-btn

This class defines the styles for a button in the pop-up element for the calendar's time section.

tableBackgroundColor

border-color

panelBorderColor

border-right-color, border-bottom-color

.rf-cal-time-btn-press

This class defines the styles for a pressed button in the pop-up element for the calendar's time section.

tableBackgroundColor

border-right-color, border-bottom-color

panelBorderColor

border-color

calendarWeekBackgroundColor

background-color

.rf-cal-timepicker-cnt

This class defines the styles for the content of the pop-up element during time selection.

panelBorderColor

border-color

additionalBackgroundColor

background

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-timepicker-inp

This class defines the styles for an input field in the time picker.

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-timepicker-ok

This class defines styles for the OK button in the time picker.

No skin parameters.
.rf-cal-timepicker-cancel

This class defines styles for the Cancel button in the time picker.

No skin parameters.
.rf-cal-monthpicker-cnt

This class defines the styles for the content of the pop-up element during month or year selection.

panelBorderColor

border-color

tableBackgroundColor

background

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-cal-monthpicker-ok

This class defines the styles for the OK button for the month picker.

additionalBackgroundColor

background

panelBorderColor

border-top-color

.rf-cal-monthpicker-cancel

This class defines the styles for the Cancel button for the month picker.

additionalBackgroundColor

background

panelBorderColor

border-top-color

.rf-cal-monthpicker-split

This class defines the styles for the splitter in the month picker.

panelBorderColor

border-right-color


The <rich:editor> component is used for creating a WYSIWYG editor on a page.

Figure 8.3. <rich:editor>


<rich:editor> component is based on the CKEditor implementation.

When rendering a <rich:editor>, a textarea is rendered to the page and once the page is completely loaded (ready state), the textarea is enhanced using a CKEditor script and replaced with a full-featured WYSIWYG editor.

The <rich:editor> is skinnable using the skin attribute and either of the two approaches:

By default, <rich:editor> has a skin called richfaces that is optimized to match rest of the component suite look & feel and changes to match the active RichFaces skin (refer to RichFaces Developer's Guide for details about Skinning and theming).

Example 8.6. The skin richfaces of <rich:editor>

Figure 8.4. 


A <rich:editor> with the default richfaces editor skin rendered against several RichFaces Skin options.


Alternatively, you can use any other CKeditor skin, either from the standard distribution, a downloaded skin, or a custom skin. In the distribution, there are three skins bundled: kama, v2, office2003.

Example 8.7. Examples of <rich:editor> skins in CKEditor distribution

Figure 8.5. 


A CKEditor distribution skins kama, v2 and office2003.


The <rich:editor> supports a toolbar attribute, which is able to change the configuration of the toolbar's button set. There are two configurations available: basic (default), full (enables all of the features).

It is also possible to define a custom toolbar using the CKEditor toolbar configuration in a config facet:


<rich:editor toolbar="CustomToolbar">
    <f:facet name="config">
        toolbar_CustomToolbar:
        [
        { name: 'document', items : [ 'NewPage','Preview' ] },
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
        { name: 'insert', items : [ 'Image', 'Flash', 'Table', 'HorizontalRule', 
                 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
                '/',
        { name: 'styles', items : [ 'Styles','Format' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
        { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
        { name: 'tools', items : [ 'Maximize' ] }
        ]
        </f:facet>
</rich:editor>

Note that toolbar name (CustomToolbar) needs to match the toolbar_<name> configuration option.

The <rich:editor> comes with a lang attribute which allows you to change the localization of the editor. For language configuration options, refer to http://www.w3.org/TR/html4/struct/dirlang.html.

The lang attribute influences following settings:

  • underlying textarea - specifies the i18n settings for received and submitted content

  • editor value - specifies the i18n settings for value edited in WYSIWYG mode

  • default settings of localization of editor controls and interface

However the interface first localized using the browser configuration (usually determined by client system settings). To force the editor to use a specific localization for the interface, you use the advanced CKEditor configuration option language, as in following sample:


<rich:editor lang="fr" config="language: 'fr'" />

The above sample forces the editor to use a french interface, suppressing the browser preferred settings.

The <rich:fileUpload> component allows the user to upload files to a server. It features multiple uploads, progress bars, restrictions on file types, and restrictions on sizes of the files to be uploaded.

Table 8.4. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-fu

This class defines styles for the file upload control.

generalBackgroundColor

background-color

panelBorderColor

border-color

.rf-fu-hdr

This class defines styles for the header of the file upload control.

headerBackgroundColor

background-color, border-color

.rf-fu-lst

This class defines styles for lists in the file upload control.

No skin parameters.
.rf-fu-cntr-hdn

This class defines styles for the file upload container when it is hidden.

No skin parameters.
.rf-fu-btns-lft, .rf-fu-btns-rgh

These classes define styles for buttons on the left and right of the file upload control.

No skin parameters.
.rf-fu-btn-add

This class defines styles for the Add button in the file upload control.

trimColor

background-color

panelBorderColor

border-color

.rf-fu-btn-cnt-add

This class defines styles for the content of the Add button in the file upload control.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-btn-add-dis

This class defines styles for the Add button in the file upload control when it is disabled.

tableFooterBackgroundColor

background-color

tableFooterBackgroundColor

border-color

.rf-fu-btn-cnt-add-dis

This class defines styles for the content of the Add button in the file upload control when it is disabled.

tabDisabledTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-btn-upl

This class defines styles for the Upload button in the file upload control.

trimColor

background-color

panelBorderColor

border-color

.rf-fu-btn-cnt-upl

This class defines styles for the content of the Upload button in the file upload control.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-btn-clr

This class defines styles for the Clear button in the file upload control.

trimColor

background-color

panelBorderColor

border-color

.rf-fu-btn-cnt-clr

This class defines styles for the content of the Clear button in the file upload control.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-itm

This class defines styles for an item in the file upload control.

panelBorderColor

border-bottom-color

.rf-fu-itm-lft, .rf-fu-itm-rgh

These classes define styles for items on the left and right of the file upload control.

No skin parameters.
.rf-fu-itm-lbl

This class defines styles for the label of an item in the file upload control.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-itm-st

This class defines styles for the status of an item in the file upload control.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-itm-lnk

This class defines styles for a link item in the file upload control.

generalLinkColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-fu-inp

This class defines styles for the input field in the file upload control.

No skin parameters.
.rf-fu-inp-cntr

This class defines styles for the input field container in the file upload control.

No skin parameters.

The <rich:inplaceInput> component allows information to be entered in-line in blocks of text, improving readability of the text. Multiple input regions can be navigated with keyboard navigation. The component has three functional states: the view state, where the component displays its initial setting, such as "click to edit"; the edit state, where the user can input text; and the "changed" state, where the new value for the component has been confirmed but can be edited again if required.

Table 8.5. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-ii-d-s

This class defines styles for the in-place input when it is in the default state.

editorBackgroundColor

background-color

generalTextColor

border-bottom-color

.rf-ii-e-s

This class defines styles for the in-place input when it is in the editing state.

No skin parameters.
.rf-ii-c-s

This class defines styles for the in-place input when it is in the changed state.

No skin parameters.
.rf-ii-dis-s

This class defines styles for the in-place input when it is in the disabled state.

No skin parameters.
.rf-ii-fld

This class defines styles for the in-place input field.

editBackgroundColor

background-color, border-bottom-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-ii-dflt-lbl

This class defines styles for the default label of the in-place input.

No skin parameters.
.rf-ii-edit

This class defines styles for the in-place input when it is being edited.

No skin parameters.
.rf-ii-btn

This class defines styles for the buttons for the in-place input.

tabBackgroundColor

background-color

panelBorderColor

border-color

.rf-ii-btn-p

This class defines styles for the buttons for the in-place input when they are pressed.

tabBackgroundColor

background-color

panelBorderColor

border-color

.rf-ii-btn-set, .rf-ii-btn-prepos, .rf-ii-btn-pos

These classes define the positioning of the buttons.

No skin parameters.
.rf-ii-btn-shdw

This class defines styles for the button shadows for the in-place input.

No skin parameters.
.rf-ii-btn-shdw-t, .rf-ii-btn-shdw-b, .rf-ii-btn-shdw-l, .rf-ii-btn-shdw-r

These classes define the top, bottom, left, and right edge of the button shadows.

No skin parameters.
.rf-ii-none

This class defines styles for the in-place input when it cannot be edited.

No skin parameters.

The <rich:inplaceSelect> component is similar to the <rich:inplaceInput> component, except that the <rich:inplaceSelect> component uses a drop-down selection box to enter text instead of a regular text field. Changes can be rendered either in-line or for the whole block, and inputs can be focused with keyboard navigation. The component is based on the JSF UISelectOne component, so all the standard rules for value definition, processing, conversion, and validation apply.

The component has three functional states:

Figure 8.6. <rich:inplaceSelect>


Table 8.6. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-is-d-s

This class defines styles for the in-place select when it is in the default state.

editorBackgroundColor

background-color

generalTextColor

border-bottom-color

.rf-is-e-s

This class defines styles for the in-place select when it is in the editing state.

No skin parameters.
.rf-is-c-s

This class defines styles for the in-place select when it is in the changed state.

No skin parameters.
.rf-is-dis-s

This class defines styles for the in-place select when it is in the disabled state.

No skin parameters.
.rf-is-fld

This class defines styles for the in-place select field.

editBackgroundColor

background

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-is-opt

This class defines styles for an option for the in-place select.

generalTextColor

border-color

.rf-is-sel

This class defines styles for the selected option of the in-place select.

generalTextColor

border-color

.rf-is-lbl

This class defines styles for the label of the in-place select.

No skin parameters.
.rf-is-dflt-lbl

This class defines styles for the default label of the in-place select.

No skin parameters.
.rf-is-edit

This class defines styles for the in-place select when it is being edited.

No skin parameters.
.rf-is-btn

This class defines styles for the buttons for the in-place select.

tabBackgroundColor

background-color

panelBorderColor

border-color

.rf-is-btn-p

This class defines styles for the buttons for the in-place select when they are pressed.

tabBackgroundColor

background-color

panelBorderColor

border-color

.rf-is-btn-set, .rf-is-btn-prepos, .rf-is-btn-pos

These classes define the positioning of the buttons.

No skin parameters.
.rf-is-lst-pos

This class defines the positioning of the list.

No skin parameters.
.rf-is-lst-dec

This class defines styles for a decreasing list for the in-place select.

editBackgroundColor

background-color

panelBorderColor

border-color

.rf-is-lst-scrl

This class defines styles for the list scrollbar.

No skin parameters.
.rf-is-shdw

This class defines styles for the in-place select shadow.

No skin parameters.
.rf-is-shdw-t, .rf-is-shdw-b, .rf-is-shdw-l, .rf-is-shdw-r

These classes define the top, bottom, left, and right edge of the in-place select shadows.

No skin parameters.
.rf-is-btn-shdw

This class defines styles for the button shadows for the in-place select.

No skin parameters.
.rf-is-none

This class defines styles for the in-place select when it cannot be edited.

No skin parameters.

The <rich:inputNumberSlider> component provides a slider for changing numerical values. Optional features include control arrows to step through the values, a tool-tip to display the value while sliding, and a text field for typing the numerical value which can then be validated against the slider's range.

Figure 8.7. <rich:inputNumberSlider>


Table 8.7. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-insl

This class defines styles for the number slider itself.

No skin parameters.
.rf-insl-trc

This class defines styles for the number slider track.

controlBackgroundColor

background-color

panelBorderColor

border-bottom-color

.rf-insl-trc-cntr

This class defines styles for the container of the number slider track.

No skin parameters.
.rf-insl-mn

This class defines styles for the minimum label on the number slider.

generalSizeFont

font-size

generalFamilyFont

font-family

generalTextColor

color

panelBorderColor

border-left-color

.rf-insl-mx

This class defines styles for the maximum label on the number slider.

generalSizeFont

font-size

generalFamilyFont

font-family

generalTextColor

color

panelBorderColor

border-right-color

.rf-insl-inp

This class defines styles for the input field on the number slider.

generalSizeFont

font-size

generalFamilyFont

font-family

generalTextColor

color

.rf-insl-inp-cntr

This class defines styles for the container of the input field.

No skin parameters.
.rf-insl-hnd

This class defines styles for the handle on the number slider.

No skin parameters.
.rf-insl-hnd-cntr

This class defines styles for the container of the handle.

No skin parameters.
.rf-insl-hnd-sel

This class defines styles for the handle when it is selected.

No skin parameters.
.rf-insl-hnd-dis

This class defines styles for the handle when it is selected.

No skin parameters.
.rf-insl-dec, .rf-insl-inc

These classes define styles for the step controls to decrease and increase the number.

No skin parameters.
.rf-insl-dec-sel, .rf-insl-inc-sel

These classes define styles for the step controls when they are selected.

No skin parameters.
.rf-insl-dec-dis, .rf-insl-inc-dis

These classes define styles for the step controls when they are disabled.

No skin parameters.
.rf-insl-tt

This class defines styles for the tool-tip on the number slider.

generalSizeFont

font-size

generalFamilyFont

font-family

generalTextColor

color

tipBorderColor

border

tipBackgroundColor

background-color


The <rich:inputNumberSpinner> component is a single-line input field with buttons to increase and decrease a numerical value. The value can be changed using the corresponding directional keys on a keyboard, or by typing into the field.

Figure 8.8. <rich:inputNumberSpinner>


The <rich:select> component provides a drop-down list box for selecting a single value from multiple options. The <rich:select> component can be configured as a combo-box, where it will accept typed input. The component also supports keyboard navigation. The <rich:select> component functions similarly to the JSF UISelectOne component.

Figure 8.9. <rich:select>


Table 8.9. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-sel

This class defines styles for the select control itself.

No skin parameters.
.rf-sel-cntr

This class defines styles for the container of the select control.

panelBorderColor

border-color

.rf-sel-inp

This class defines styles for the select control input field.

controlBackgroundColor

background-color

.rf-sel-fld-err

This class defines styles for the input field when an error occurs.

No skin parameters.
.rf-sel-opt

This class defines styles for an option in the select control.

generalTextColor

color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-sel-sel

This class defines styles for the selected option of the select control.

generalTextColor

border-color

.rf-sel-dflt-lbl

This class defines styles for the default label of the select control.

No skin parameters.
.rf-sel-btn

This class defines styles for the button of the select control.

headerBackgroundColor

background-color

panelBorderColor

border-left-color

.rf-sel-btn-arrow

This class defines styles for the arrow on the button.

No skin parameters.
.rf-sel-btn-dis

This class defines styles for the button of the select control when it is disabled.

No skin parameters.
.rf-sel-lst-scrl

This class defines styles for the list scrollbar.

No skin parameters.
.rf-sel-shdw

This class defines styles for the select control shadow.

No skin parameters.
.rf-sel-shdw-t, .rf-sel-shdw-b, .rf-sel-shdw-l, .rf-sel-shdw-r

These classes define the top, bottom, left, and right edge of the select control shadows.

No skin parameters.

The <rich:orderingList> is a component for ordering items in a list (client-side).

Figure 8.10. <rich:select>


Table 8.10. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-ord

This class defines styles for the orderingList control itself.

No skin parameters.
.rf-ord-cntr

This class defines styles for the container of the orderingList control.

No skin parameters.
.rf-ord-cptn

This class defines styles for the caption of the orderingList control.

headerTextColor

color

headerSizeFont

font-size

headerFamilyFont

font-family

headerWeightFont

font-weight

.rf-ord-lst

This class defines styles for the items list of the orderingList control.

No skin parameters.
.rf-ord-hdr

This class defines styles for the header of the items list.

headerBackgroundColor

background-color

headerTextColor

color

headerSizeFont

font-size

headerFamilyFont

font-family

headerWeightFont

font-weight

.rf-ord-opt

This class defines styles for an option in the orderingList control.

generalTextColor

color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-ord-sel

This class defines styles for the selected option of the orderingList control.

generalTextColor

border-color

.rf-ord-dflt-lbl

This class defines styles for the default label of the orderingList control.

No skin parameters.
.rf-ord-btn

This class defines styles for the button of the orderingList control.

headerBackgroundColor

background-color

panelBorderColor

border-left-color

.rf-ord-btn-dis

This class defines styles for the button of the orderingList control when it is disabled.

No skin parameters.
.rf-ord-lst-scrl

This class defines styles for the list scrollbar.

No skin parameters.

The <rich:pickList> is a component for selecting items from a list. Additionally, it allows for the selected items to be ordered (client-side). From the client side perspective, items are added/removed from the source list, and removed/added to the target list. However it is important to note that the server-side source of items is never modified, and always represents the list of all items available for selection. If the list of unselected items is required, it can be determined by subtracting the collection of all selected items from the collection of all available items.

Figure 8.11. <rich:select>


Table 8.11. Style classes (selectors) and corresponding skin parameters

Class (selector)Skin ParametersMapped CSS properties
.rf-pick

This class defines styles for the pickList control itself.

No skin parameters.
.rf-pick-cntr

This class defines styles for the container of the pickList control.

No skin parameters.
.rf-pick-src-cptn, .rf-pick-tgt-cptn

These classes define styles for the source and target captions of the pickList control.

headerTextColor

color

headerSizeFont

font-size

headerFamilyFont

font-family

headerWeightFont

font-weight

.rf-pick-lst

This class defines styles for the items list of the pickList control.

No skin parameters.
.rf-pick-hdr

This class defines styles for the header of the items list.

headerBackgroundColor

background-color

headerTextColor

color

headerSizeFont

font-size

headerFamilyFont

font-family

headerWeightFont

font-weight

.rf-pick-opt

This class defines styles for an option in the pickList control.

generalTextColor

color

generalSizeFont

font-size

generalFamilyFont

font-family

.rf-pick-sel

This class defines styles for the selected option of the pickList control.

generalTextColor

border-color

.rf-pick-dflt-lbl

This class defines styles for the default label of the pickList control.

No skin parameters.
.rf-pick-btn

This class defines styles for the button of the pickList control.

headerBackgroundColor

background-color

panelBorderColor

border-left-color

.rf-pick-btn-dis

This class defines styles for the button of the pickList control when it is disabled.

No skin parameters.
.rf-pick-lst-scrl

This class defines styles for the list scrollbar.

No skin parameters.