Java Web Lección 03: Patrón MVC

SQL SERVER ORACLE MYSQL JAVA JAVAEE JDBC MVC DAO PATRONES ANDROID SERVLETS JSP WEB JAVA WEB SERVLETS JSP MVC DAO EJB JDBC

INTRODUCCIÓN

El Patrón Model-View-Controller (MVC) es el mas utilizado en desarrollo web.

Este patrón permite estructurar una aplicación web en tres capas, donde cada una tiene una responsabilidad bien definida, haciendo mas fácil el desarrollo y mantenimiento de la aplicación.



DIAPOSITIVA



TALLER VIRTUAL DE SPRING FRAMEWORK

Acceso a Cursos Virtuales

Java Web Lección 03: Patrón MVC

SQL SERVER ORACLE MYSQL JAVA JAVAEE JDBC MVC DAO PATRONES ANDROID SERVLETS JSP WEB JAVA WEB SERVLETS JSP MVC DAO EJB JDBC

INTRODUCCIÓN

El Patrón Model-View-Controller (MVC) es el mas utilizado en desarrollo web.

Este patrón permite estructurar una aplicación web en tres capas, donde cada una tiene una responsabilidad bien definida, haciendo mas fácil el desarrollo y mantenimiento de la aplicación.



DIAPOSITIVA

CÓDIGO FUENTE - EUREKA-WEB-ORACLE-JDBC

En esta oportunidad te presento un video donde te explico cómo ejecutar el código fuente de una aplicación Java Web, utilizando HTML, CSS, JavaScript, AJAX y JSON, en la capa de persistencia se utiliza JDBC y base de datos Oracle XE 11g.

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



Java Web Lección 03: Patrón MVC

SQL SERVER ORACLE MYSQL JAVA JAVAEE JDBC MVC DAO PATRONES ANDROID SERVLETS JSP WEB JAVA WEB SERVLETS JSP MVC DAO EJB JDBC

INTRODUCCIÓN

El Patrón Model-View-Controller (MVC) es el mas utilizado en desarrollo web.

Este patrón permite estructurar una aplicación web en tres capas, donde cada una tiene una responsabilidad bien definida, haciendo mas fácil el desarrollo y mantenimiento de la aplicación.



DIAPOSITIVA



TALLER VIRTUAL DE SPRING FRAMEWORK

Acceso a Cursos Virtuales

Java Web Lección 03: Patrón MVC

JAVA WEB - LECCIÓN 02: PATRON MVC

INTRODUCCIÓN

El Patrón Model-View-Controller (MVC) es el mas utilizado en desarrollo web.

Este patrón permite estructurar una aplicación web en tres capas, donde cada una tiene una responsabilidad bien definida, haciendo mas fácil el desarrollo y mantenimiento de la aplicación.



DIAPOSITIVA

CÓDIGO FUENTE - EUREKA-WEB-ORACLE-JDBC

En esta oportunidad te presento un video donde te explico cómo ejecutar el código fuente de una aplicación Java Web, utilizando HTML, CSS, JavaScript, AJAX y JSON, en la capa de persistencia se utiliza JDBC y base de datos Oracle XE 11g.

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



Java Web Lección 02: JavaServer Page

JAVA WEB - LECCION 02: JAVASERVER PAGE

INTRODUCCIÓN

Java Server Page (JSP) es la tecnología que permite crear aplicaciones web con la plataforma Java EE de una manera sencilla.

Las páginas JSP permiten combinar HTML estático con HTML generado dinámicamente de una manera muy fácil, de esta manera estaríamos liberándonos de lo dificultoso que resulta hacerlo desde los servlets.



DIAPOSITIVA

CÓDIGO FUENTE

En esta oportunidad te presento un video donde te explico cómo ejecutar el código fuente de una aplicación Java Web, utilizando HTML, CSS, JavaScript, AJAX y JSON, en la capa de persistencia se utiliza JDBC y base de datos Oracle XE 11g.

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



JAVA WEB - COMBOS ANIDADOS CON JQUERY Y JSON

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.