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:
FUNDAMENTOS
JSON
JSon es una notación para representar arreglos y objetos JavaScript, se puede encontrar mas información en la siguiente URL:
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:
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:
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.
