RichFaces Rich:Picklist

by Online Tutorials Library July 14, 2022

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

  <?xml version=’1.0′ encoding=’UTF-8′ ?>  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  <ui:composition xmlns=”http://www.w3.org/1999/xhtml”  xmlns:h=”http://java.sun.com/jsf/html”  xmlns:f=”http://java.sun.com/jsf/core”  xmlns:ui=”http://java.sun.com/jsf/facelets”  xmlns:a4j=”http://richfaces.org/a4j”  xmlns:rich=”http://richfaces.org/rich”>  <f:view>  <h:head>  <title>Pick List Example</title>  </h:head>  <h:body>  <h:form>  <h:outputText value=”Pick List Example”/><br/><br/>  <rich:pickList value=”#{pickList.list}”  sourceCaption=”Available Countries”  targetCaption=”Selected Countries”  listWidth=”170px”  listHeight=”120px”  orderable=”true”>  <f:selectItems value=”#{pickList.countryList()}” var=”capital” itemValue=”#{pickList}” itemLabel=”#{pickList.countryName}” />  </rich:pickList>  </h:form>  </h:body>  </f:view>  </ui:composition>  

Managed Bean

// PickList.java

  import java.util.ArrayList;  import java.util.List;  import javax.faces.bean.ManagedBean;  import javax.faces.bean.RequestScoped;  @ManagedBean  @RequestScoped  public class PickList {  String CountryName;  List<String> list;  public List<String> countryList() {  ArrayList<String> list = new ArrayList<>();  list.add(“India”);  list.add(“Australia”);  list.add(“Germany”);  list.add(“Italy”);  list.add(“United States”);  list.add(“Russia”);  return list;  }  public String getCountryName() {  return CountryName;  }  public void setCountryName(String CountryName) {  this.CountryName = CountryName;  }  public List<String> getList() {  return list;  }  public void setList(List<String> list) {  this.list = list;  }  }  

Output:

Next TopicRichFaces <rich:panel>

RichFaces Rich:Picklist

RichFaces <rich:pickList>

Style classes and skin parameters

Example

JSF File

Managed Bean

Verbal Reasoning | Assertion and Reason 1

Components of Robot

You may also like