JAVA WEB - COMBOS ANIDADOS CON JQUERY Y JSON

INTRODUCCIÓN

Cuando desarrollamos una aplicación web, una de las tareas mas frecuentes que tenemos que programar son los combos anidados, el ejemplo tipico es el del código de ubicación geografica (UBIGEO).

En este oportunidad desarrollare un ejemplo utilizando la base de datos EurekaBank y la plataforma Java.

La base de datos la puede descargar desde:

http://gcoronelc.blogspot.com/2011/08/base-de-datos-ejemplo.html

FUNDAMENTOS

JSON

JSon es una notación para representar arreglos y objetos JavaScript, se puede encontrar mas información en la siguiente URL:

http://www.json.org/

GSON

Gson es una librería de Java que se puede utilizar para convertir objetos Java en su representación JSON. Podemos encontrar mas información en la siguiente dirección:

https://code.google.com/p/google-gson/

Por ejemplo, para convertir un Map con diferentes tipos de objetos las sentencias son las siguientes:

Map<String, Object> rpta = new HashMap<String, Object>();
EurekaModel model = new EurekaModel();
List<Map<String, ?>> lista = model.consultarCuentas("001");
rpta.put("rpta", "1");
rpta.put("lista", lista);
Gson gson = new Gson();
String texto = gson.toJson(rpta);
System.out.println(texto);

El resultado que se obtiene es el siguiente:

{"lista":[{"descripcion":"Cuenta: 00100001 | Moneda: 01 | Saldo: 6900.0","cuenta":"00100001"},{"descripcion":"Cuenta: 00100002 | Moneda: 02 | Saldo: 4500.0","cuenta":"00100002"}],"rpta":"1"}

EL CASO

DESCRIPCIÓN

De lo que se trata es de llenar el combo de cuentas en función al valor que el usuario seleccione en el combo de sucursales, tal como se muestra en la siguiente imagen:

SUCURSALES

Mediante un listener de sesión cargamos la lista de sucursales en sesión, la clase es la siguiente:

package pe.egcc.demo.servlets;

import javax.servlet.annotation.WebListener;
import javax.servlet.http.HttpSessionEvent;
import javax.servlet.http.HttpSessionListener;
import pe.egcc.demo.model.EurekaModel;

/**
 *
 * @author Eric Gustavo Coronel Castillo
 * @blog gcoronelc.blogspot.com
 */
@WebListener()
public class SessionListener implements HttpSessionListener {

  @Override
  public void sessionCreated(HttpSessionEvent event) {
    try {
      EurekaModel model = new EurekaModel();
      event.getSession().setAttribute("sucursales", model.cosultarSucursales());
    } catch (Exception e) {
    }
  }

  @Override
  public void sessionDestroyed(HttpSessionEvent event) {
  }
}

Luego para llenar el combo utilizamos JSTL, el script es el siguiente:

<label>Sucursal</label><br/>
<select id="cboSucursal">
<option value="000">[Seleccione sucursal]</option>
<c:forEach items="${sessionScope.sucursales}" var="rec">
  <option value="${rec.codigo}">${rec}</option>
</c:forEach>
</select><br/>
<label>Cuenta</label><br/>
<select id="cboCuenta">
</select><br/>

CUENTAS

Para llenar el combo de cuentas se utiliza un servlet que retorna el resultado como un objeto JSon, se utiliza la librería GSON. La clase es la siguiente:

package pe.egcc.demo.servlets;

import com.google.gson.Gson;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import pe.egcc.demo.model.EurekaModel;

/**
 *
 * @author Eric Gustavo Coronel Castillo
 * @blog gcoronelc.blogspot.com
 */
@WebServlet(name = "DemoController", urlPatterns = {"/TraerCuentas"})
public class DemoController extends HttpServlet {

  private static final long serialVersionUID = 1L;

  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
          throws ServletException, IOException {
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    PrintWriter out = response.getWriter();
    Map<String, Object> rpta = new HashMap<String, Object>();
    try {
      // La siguiente línea es para poder apreciar el efecto AJAX.
      Thread.currentThread().sleep(2000);
      // Dato
      String sucursal = request.getParameter("sucursal");
      // Proceso
      EurekaModel model = new EurekaModel();
      List<Map<String, ?>> lista = model.consultarCuentas(sucursal);
      rpta.put("rpta", "1");
      rpta.put("lista", lista);
    } catch (Exception e) {
      rpta.put("rpta", "-1");
      rpta.put("mensaje", e.getMessage());
    }
    Gson gson = new Gson();
    out.print(gson.toJson(rpta));
    out.flush();
    out.close();
  }

}

Luego, para llenar el combo utilizamos JQuery, el script es el siguiente:

<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("#cboSucursal").change(function() {
  var cboCuenta = $("#cboCuenta");
  cboCuenta.empty();
  var sucursal = $("#cboSucursal").val();
  if (sucursal == '000') {
 return;
  }
  var data = "sucursal=" + sucursal;
  cboCuenta.append('<option value="">Cargando...</option>').val('');
  $.post("TraerCuentas", data, function(objJson) {
 cboCuenta.empty();
 if (objJson.rpta == -1) {
   alert(objJson.mensaje);
   return;
 }
 var lista = objJson.lista;
 if(lista.length > 0){
   cboCuenta.append("<option value='0'>[Seleccione cuenta]</option>");
 } else {
   cboCuenta.append("<option value='0'>[No hay cuentas]</option>");
 }
 for (var i = 0; i < lista.length; i++) {
   var item = "<option value='" + lista[i].cuenta + "'>" + lista[i].descripcion + "</option>";
   cboCuenta.append(item);
 }
  });
});
$("#cboCuenta").change(function() {
  var cuenta = $("#cboCuenta").val();
  if(cuenta=="0"){
 return;
  }
  alert("Cuenta: " + cuenta);
});
</script>

PROYECTO COMPLETO

Puede descargar el proyecto completo desde el siguiente enlace:

Descargar

CÓDIGO FUENTE

En esta sección te presento un video que una aplicación CLIENTE-SERVIDOR desarrollada con Java y Oracle.

Tú tienes acceso al código fuente de esta aplicación, después del video tienes el enlace.

Haz click aquí para acceder al código fuente