Componentes de selección en RichFaces

LIBP-0158 (Libro de pautas)

Se describen las pautas para la utilización de los componentes de JSF RichFaces que realizan la implementación enriquecida de los componentes de selección de datos identificados en el subárea de Componentes de Interfaz.

Pautas

TítuloCarácter
Pocas opciones posiblesRecomendada
Muchas opciones de selección posiblesObligatoria
Categorización padre/hijo (componente árbol)Obligatoria
Selección múltiple con pocos elementosObligatoria
Selección múltiple con muchos elementosObligatoria

Pocas opciones posibles

Para la implementación de un componente de selección que permita pocas opciones posibles se utilizará el componente de RichFaces denominado "Inplace Select".

El componente Inplace Select de RichFaces muestra el valor inicial como una etiqueta y define un evento mediante el cual se transforma en una lista desplegable con filtrado automático. A medida que se va introduciendo el texto en el campo, la lista va filtrando los valores automáticamente para reducir el número de elementos sugeridos, tal y como se muestra en la siguiente imagen:

RichFaces InplaceSelectRichFaces InplaceSelect

El código asociado a este ejemplo es el siguiente:

<rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}" defaultLabel="Pulsar para editar">
        <f:selectItem itemValue="04" itemLabel="Almería" />
        <f:selectItem itemValue="11" itemLabel="Cádiz" />
        <f:selectItem itemValue="14" itemLabel="Córdoba" />
        <f:selectItem itemValue="18" itemLabel="Granada" />
        <f:selectItem itemValue="21" itemLabel="Huelva" />
        <f:selectItem itemValue="23" itemLabel="Jaén" />
        <f:selectItem itemValue="29" itemLabel="Málaga" />
        <f:selectItem itemValue="41" itemLabel="Sevilla" />   
</rich:inplaceSelect>

Muchas opciones de selección posibles

Para implementar un componente de selección simple para muchas opciones disponibles se utilizará el componente de RichFace denominado "Inplace Select".

Para pocas o muchas opciones de selección se utilizará el componente Inplance Select de RichFace.

NOTA: Ver pauta "Pocas opciones posibles".

Categorización padre/hijo (componente árbol)

Para la implementación mediante RichFaces de un componente árbol que realice la categorización y visualización padre/hijo de una estructura jerárquica se utilizará el componente "Tree".

El componente Tree de RichFace implementa una estructura jerárquica en forma de árbol con las siguientes características:

  • Soporte nativo para las operaciones de Ajax.
  • Soporte para operar con el componente mediante "Ajax", "cliente" y "servidor".
  • Construido con capacidades para "arrastrar y soltar" (drag and drop).
  • Con formatos de visualización flexibles.

En el siguiente ejemplo, se construye un árbol con los valores por defecto en la configuración para un tipo de árbol "cliente":

<rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}" 
           reRender="selectedNode" ajaxSubmitSelection="true"  switchType="client"
           value="#{simpleTreeBean.treeNode}" var="item" ajaxKeys="#{null}">
</rich:tree>

Los datos se obtienen del objeto simpleTreeBean generándose la siguiente renderización:

RichFaces TreeRichFaces Tree

Selección múltiple con pocos elementos

Para la implementación de una lista desplegable con selección múltiple se utilizará el componente SelectManyListBox.

Richfaces no dispone de un componente de lista desplegable con la posibilidad de selección múltiple. Es por ello que deberá utilizarse el componente JSF SelectManyListBox de la siguiente forma:

<h:selectManyListbox  size="5" value="#{controladorBean.municipios}">
     <f:selectItems value="#{controladorBean.municipios}"/>
</h:selectManyListbox>

Selección múltiple con muchos elementos

Para la implementación de una selección múltiple donde existan muchos elementos posibles, se utilizará el componente de RichFace denominado "Pick List".

El componente Pick List de RichFaces permite implementar una selección múltiple de elementos cuando el número de opciones es elevado. Muestra dos listas, una con los datos seleccionables y otra lista con los elementos seleccionados hasta el momento. Mediante un conjunto de botones de acción es posible gestionar los elementos seleccionados, tal y como se muestra en la siguiente imagen:

RichFaces PickListRichFaces PickListEl código asociado a este ejemplo de utilización del componente es el siguiente:

<rich:pickList>
            <f:selectItem itemLabel="Opción 1" itemValue="1"/>
            <f:selectItem itemLabel="Opción 2" itemValue="2"/>
            <f:selectItem itemLabel="Opción 3" itemValue="3"/>
            <f:selectItem itemLabel="Opción 4" itemValue="4"/>
            <f:selectItem itemLabel="Opción 5" itemValue="5"/>
</rich:pickList>