La carga dinámica de un combo basado en la selección de un combo previo es un problema relativamente clásico y que ha sido abordado de distintas maneras a lo largo del tiempo.

En este post queremos mostrarles como es que nosotros abordamos el tema usando componentes JSF y de Richfaces para resolver el problema.

Para este ejemplo usaremos 2 entidades (Ciudad y Distrito) donde una ciudad tiene múltiples distritos asociados y para el caso práctico asumiremos que ambas solo tienen un id y un nombre.

@Entity
@Table(name = "CIUDAD")
public class Ciudad implements Serializable {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "ID_CIUDAD", nullable = false)
    private Integer idCiudad;
 
    @Length(max=45)
    @Column(name = "NOMBRE",length=45)
    private String nombre;
}
 
@Entity
@Table(name = "DISTRITO")
public class Distrito implements Serializable {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "ID_CIUDAD", nullable = false)
    private Integer idDistrito;
 
    @Length(max=45)
    @Column(name = "NOMBRE",length=45)
    private String nombre;
}

Además tendremos un managed bean de JSF llamado testBean que nos servirá para almacenar la información temporal de la página.

@Name("testBean")
@Scope(ScopeType.CONVERSATION)
public class TestBean implements Serializable {
 
    private Integer idCiudad = -1; //Omitimos sus gets y sets
    private Integer idDistrito = -1;//Omitimos sus gets y sets
 
    public  Map<String,Integer> getCiudades() {
        String query = "select new map(nombre as nombre, idCiudad as idCiudad) " +
                "from Ciudad order by nombre";
        return uiUtils.getComboBox(query, "nombre", "idCiudad");
    }
 
    public  Map<String,Integer> getDistritos() {
        String query = "select new map(d.nombre as nombre, d.idDistrito as idDistrito) " +
                "from Distrito d where d.ciudad.idCiudad = " + idCiudad + " order by nombre";
        return uiUtils.getComboBox(query, "nombre", "idDistrito");
    }
 
}

Solo para simplificar el asunto el método getComboBox hace una consulta a la Base de datos y genera una estructura Map<String,Integer>

El signature del método es:

public  Map<String,Integer> getComboBox(String query, String value, String key)

UPDATE:
Me preguntaron que cosa hace el uiUtils, el uiUtils es un seam bean stateless que tiene un método llamado getComboBox el cual devuelve un Map de labels, ids, la función hace un query a la bd que retorna un map con los dos valores.

Otra alternativa a usar un Map es utlilizar una lista de SelectItem, el objeto tiene el siguiente constructor en su modalidad más sencilla:

new SelectItem(Object valor, String label)

Por lo tanto simplemente es iterar sobre el resultado del query y crear los objetos y retornar la lista.
El código que corresponde a la parte de JSF se los presento a continuación:

<h:selectOneMenu value="#{testBean.idCiudad}" style="width:200px;">
  <f:selectItem itemLabel="#{messages['comun.selectOneMenu.seleccione']}" itemValue="-1" />
  <f:selectItems value="#{testBean.cuidades}"/>
  <a4j:support event="onchange" reRender="distritosPanel"/>
</h:selectOneMenu>
<a4j:outputPanel id="distritosPanel">
  <ui:fragment rendered="#{testBean.idCiudad ne -1}">
    <h:selectOneMenu value="#{testBean.idDistrito}" style="width:200px;">
       <f:selectItem itemLabel="#{messages['comun.selectOneMenu.seleccione']}" itemValue="-1" />
       <f:selectItems value="#{testBean.distritos}"/>
    </h:selectOneMenu>
  </ui:fragment>
</a4j:outputPanel>

Como pueden ver es muy sencillo, cada combo tiene dos propiedades importantes, la primera es la que almacenará el resultado de la selección en este caso idCiudad y idDistrito, la segunda es la lista de opciones del combo el cual se obtiene de una propiedad List<SelectItem>, esta lista es generada en el managed bean haciendo consultas a la base de datos.

Los componentes JSF por default no tienen soporte AJAX, lo que significa que tendrían que hacer un submit cada vez que quisieran recargar una sección de la página, es por esto que utilizamos el tag a4j:support que nos permite darle una naturaleza AJAX al componente JSF.

<a4j:support event="onchange"  reRender="distritosPanel"/>

Como pueden ver al tag a4j:support tiene 2 propiedades, la primera es el evento que dispara la acción, este podría ser onclick, onmouseover, onmouseout, en este caso utilizamos onchange.La segunda propiedad es el parámetro reRender que le dice al componente las secciones de código que deben ser refrescadas una vez que el request AJAX haya terminado.

De esta manera podemos conseguir cargar dinámicamente un combo JSF mediante AJAX.

Más información

• Rich faces Demo
• Tag lib de JSF 1.2

No related posts.

Autor: Giancarlo Corzo

Socio y Gerente de desarrollo de nuevos productos en Antartec. Con experiencia en desarrollo de interfaces para Web, Móvil (en especial para iPhone). Me desempeño además como Profesor en la universidad PUCP asesorando a los futuros tesistas.

• Entrada Anterior: Pop up windows en las aplicaciones web
• Siguiente Entrada: Performance: Uso de @Create