RichFaces <rich:pickList>
It is used to select items from a list. It allows us to change order of selected items at client-side. We can add, remove items from the source list to the target list and vice-versa. However it is important to note that the server-side source of items does not modify.
Style classes and skin parameters
The following table contains the Style classes and corresponding skin parameters for pickList.
Class |
Function |
Skin Parameters |
Mapped CSS properties |
.rf-pick |
It is used to define styles for the pickList control itself. |
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
headerSizeFont
|
color
font-size
|
.rf-pick-lst |
It is used to define styles for the items list of the pickList control. |
No skin parameters. |
|
.rf-pick-hdr |
It is used to define styles for the header of the items list. |
headerBackgroundColor
headerTextColor
|
background-color
color
|
.rf-pick-opt |
It is used to define styles for an option in the pickList control. |
generalTextColor
generalSizeFont
|
color
font-size
|
.rf-pick-sel |
It is used to define styles for the selected option of the pickList control. |
generalTextColor |
border-color |
.rf-pick-dflt-lbl |
It is used to define styles for the default label of the pickList control. |
No skin parameters. |
|
.rf-pick-btn |
It is used to define styles for the button of the pickList control. |
headerBackgroundColor
panelBorderColor
|
background-color
border-left-color
|
.rf-pick-btn-dis |
It is used to define styles for the button of the pickList control when it is disabled. |
No skin parameters. |
|
.rf-pick-lst-scrl |
It is used to define styles for the list scrollbar. |
No skin parameters. |
|
Example
Here, in the following example, we are implementing <rich:pickList> component. This example contains the following files.
JSF File
// pickList.xhtml
Managed Bean
// PickList.java
Output:
|