- Área: Catálogo de componentes de interfaz en JSF RichFaces
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
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ítulo | Carácter |
|---|---|
| Pocas opciones posibles | Recomendada |
| Muchas opciones de selección posibles | Obligatoria |
| Categorización padre/hijo (componente árbol) | Obligatoria |
| Selección múltiple con pocos elementos | Obligatoria |
| Selección múltiple con muchos elementos | Obligatoria |
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:
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:
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:
El 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>