Software">
Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 132 vistas

    Taller MVC

    Cargado por

    alvaro orlando perez ragua
    El documento describe los pasos para construir una aplicación web simple utilizando el patrón MVC. Se crea un proyecto con paquetes para el modelo, la vista y el controlador. Se diseña una vista con un formulario, un controlador para procesar los datos ingresados y una vista de resultado. Finalmente, se agrega un modelo de datos para almacenar y compartir los datos entre las capas.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Taller MVC

    Cargado por

    alvaro orlando perez ragua
    132 vistas17 páginas
    El documento describe los pasos para construir una aplicación web simple utilizando el patrón MVC. Se crea un proyecto con paquetes para el modelo, la vista y el controlador. Se diseña una vista con un formulario, un controlador para procesar los datos ingresados y una vista de resultado. Finalmente, se agrega un modelo de datos para almacenar y compartir los datos entre las capas.

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe los pasos para construir una aplicación web simple utilizando el patrón MVC. Se crea un proyecto con paquetes para el modelo, la vista y el controlador. Se diseña una vista con un formulario, un controlador para procesar los datos ingresados y una vista de resultado. Finalmente, se agrega un modelo de datos para almacenar y compartir los datos entre las capas.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    132 vistas17 páginas

    Taller MVC

    Cargado por

    alvaro orlando perez ragua
    El documento describe los pasos para construir una aplicación web simple utilizando el patrón MVC. Se crea un proyecto con paquetes para el modelo, la vista y el controlador. Se diseña una vista con un formulario, un controlador para procesar los datos ingresados y una vista de resultado. Finalmente, se agrega un modelo de datos para almacenar y compartir los datos entre las capas.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 17

    TALLER EN CLASE

    Construcción Modelo Vista Controlador


    Ejemplo Página WEB
    Con el presente ejemplo aprenderemos de una manera práctica como realizar la
    configuración de un diseño patrón en arquitectura de aplicaciones WEB empleando un
    Modelo Vista Controlador.
    1. Crear un nuevo project

    2. Asignar nombre al nuevo proyecto EjemploMVCBasico


    Nota: tenga en cuenta la ruta de ubicación del proyecto y de la carpeta, para el ejemplo es
    C:\Users\jcabr_000\Documents\NetBeansProjects y
    C:\Users\jcabr_000\Documents\NetBeansProjects\EjemploMVCBasico
    3. Seleccionar servidor GlashFish Server 4.1.1

    4. Para este ejemplo no se utilizará ningún framework complementario y no se deberá


    seleccionar ninguna opción.

    5. Creado el nuevo proyecto se deberá eliminar el archivo index.html y crear dos nuevos
    “Sources Packages” para los paquetes Modelo y Controlador
    6. La estructura de la nueva aplicación quedará creada según la siguiente imagen

    Nota: Como vamos a aplicar un Patrón de diseño basado en MVC, se debe eliminar el
    archivo index.html
    7. Dentro del contenedor Source Packages se deben crear los paquetes asociados al
    controlador y al Modelo.
    Nota: No se crea un paquete asociado a la vista porque se usará el paquete “Web Pages”
    donde crearemos las páginas jsp.
    8. Crear la nueva página index.jsp

    Nota:
    • Los formularios deben ir diseñados en tablas, para el ejemplo se realizará en texto
    plano sin estilo arquitectónico.
    • Para enviar un formulario siempre se debe ingresar la instrucción

    9. Modificar la página index para que muestre los siguientes campos


    El código del <Body> de la página index.jsp es:

    <h1>Formulario de Ejemplo MVC</h1>


    <form >
    Nombre: <input type="text" name="txtNombre" /><br />
    Edad: <input type="text" name="txtEdad" /><br />
    <input type="submit" value="Enviar Datos a procesar" >
    </form>

    Probemos nuestra aplicación: Hasta este momento hemos diseñado una vista que
    deberá mostrar dos campos:

    10. Ahora crearemos un programa dentro del controlador que gestionará las transacciones
    de las vistas, para esto debe Ingresar dentro del paquete controlador y crear un nuevo
    archivo tipo controlador (Servlet), en la ruta ../others/web/Servlet
    Nota: Un Servlet es una clase que participa en las aplicaciones java y se considera un
    archivo controlador.
    11. El nuevo archivo se llamará “Procesar” y está dentro del paquete “controlador”

    12. Seleccionar la casilla de verificación “Add information to deployment descriptor” para


    que la nueva clase quede incluida dentro de las definiciones xml de la aplicación.

    Nota: En Java los controladores tienen la extensión .do y se debería agregar en el campo
    URL Pattern, este campo debe ser en minúscula y es usando en la acción de un formulario.
    11. Realizar la modificación del controlador “procesar.do” para que desde la página
    index.jsp se genere una acción y envíe las variables del formulario al controlador para ser
    procesados. Se crea una clase dentro del Controlador.

    13. El método processRequest dentro de la nueva clase creada después de la línea 29,
    imprime una página web predeterminada, estas líneas podemos borrarlas porque no
    tienen funcionalidad para el controlador:

    response.setContentType("text/html;charset=UTF-8");
    try (PrintWriter out = response.getWriter()) {
    /* TODO output your page here. You may use following sample code. */
    out.println("<!DOCTYPE html>");
    out.println("<html>");
    out.println("<head>");
    out.println("<title>Servlet Procesar</title>");
    out.println("</head>");
    out.println("<body>");
    out.println("<h1>Servlet Procesar at " + request.getContextPath() + "</h1>");
    out.println("</body>");
    out.println("</html>");
    }

    14. Con la clase procesar.do creada, vamos a la vista index.jsp y modificamos el formulario
    para crearle una acción de llamado al controlador mediante la instrucción:

    <form action="procesar.do" method="post">

    15. En la clase procesar.do recibimos la información enviada desde la vista mediante las
    siguientes instrucciones que deberán ser ingresadas después del método post o
    simplemente después del método processRequest

    String nombre = request.getParameter("txtNombre");


    String edad = request.getParameter("txtEdad");

    16. Seguido a estas instrucciones validamos que los campos no vengan vacíos y manejar
    el error en una vista nueva para estos errores. Entonces primero creamos la vista
    17. Crear una nueva vista para el manejo de errores
    El código del cuerpo de la página debe ser similar al siguiente:
    <body>
    <h1>Complete la información de los campos</h1>
    <a href="index.jsp">Volver al indice </a>
    </body>

    18. Finalizando la configuración del numeral 16 del controlador procesar.do entonces


    incluimos las siguientes instrucciones para validar que los datos no vengan vacíos.

    if (nombre.equals("")|| edad.equals("")) {
    request.getRequestDispatcher("errorcampos.jsp").forward(request, response);
    }

    19. Probemos nuestra aplicación: Hasta este momento hemos diseñado una vista que
    deberá mostrar dos campos y al presionar el botón “Enviar Datos a procesar” sin
    ingresar información deberá realizar llamado al controlador procesar.do
    20. Ahora configuraremos el controlador procesar para que reciba datos que están
    completos, esto lo realizamos completando el else del if que tenemos iniciado en el
    numeral 18.
    Para esto incluiremos las siguientes líneas en el controlador procesar.do

    else{
    request.getRequestDispatcher("exito.jsp").forward(request, response);
    }

    13. Crear la nueva vista indicada en numeral anterior para el mostrar los resultados.

    El código del cuerpo de la página debe ser similar al siguiente:


    <body>
    <h1>Datos recibidos correctamente</h1>
    <p>Nombre: </p>
    <p>Edad: </p>
    </body>
    21. Probemos nuestra aplicación: Hasta este momento hemos diseñado una vista que
    deberá mostrar dos campos y al presionar el botón “Enviar Datos a procesar”
    ingresando la información deberá realizar llamado al controlador procesar.do para
    visualizar el resultado en la vista éxito.jsp

    Pero no muestra las variables txtNombre y txtEdad porque están declaradas solo en el
    controlador procesar.do y no están públicas para la aplicación. Se deberá configurar un
    modelo de datos en este momento.
    22. Crear un nuevo modelo para almacenar de manera global los datos capturados en el
    formulario, para esto se crea un nuevo modelo de tipo java class
    El cuerpo del nuevo modelo debe definir las variables ser similar al siguiente:
    private String nombre;
    private int edad;

    23. Con las teclas Alt + Insert puedo tener acceso al contructor para definir las clases con
    las cuales termino de construir la clase.

    24. Presionar la tecla generar y luego para generar los métodos Getter y Setter se vuelve a
    presionar las teclas Alt + Insert :
    Presionamos generar para finalizar
    El código del modelo deberá quedar de la siguiente manera, por favor verifique:
    public class Persona {
    private String nombre;
    private int edad;
    public Persona(String nombre, int edad) {
    this.nombre = nombre;
    this.edad = edad;
    }
    public String getNombre() {
    return nombre;
    }
    public void setNombre(String nombre) {
    this.nombre = nombre;
    }
    public int getEdad() {
    return edad;
    }
    public void setEdad(int edad) {
    this.edad = edad;
    }
    }

    25. Con nuestro modelo listo para recibir datos, podemos ir al controlador procesar y enviar
    los datos mediante un objeto que crearemos llamado persona que será de la clase
    modelo y recibirá dos parametros nombre y edad. Esto lo realizaremos en el else justo
    antes de enviar la información a la vista exito.jsp

    Persona p1 = new Persona(nombre, edad);

    26. Pero se presenta un error de tipo de variables, ya que el campo edad es string y el
    modelo está definido como int. Para eso, es necesario realizar la conversión del dato
    string a int mediante un parse antes de enviarlo mediante las siguientes líneas de código
    asignándolo a una nueva variable la cual debemos cambiar en la creación del nuevo
    objeto persona:

    int ed = Integer.parseInt(edad);
    Persona p1 = new Persona(nombre, ed);

    27. La variable P1 se queda solo en el ámbito del controlador y para llevarla al ámbito de
    toda la aplicación se incluye la variable en el contexto de la sesión

    request.getSession().setAttribute("persona1", p1);

    El cuerpo final del else para enviar los resultados a la vista éxito.jsp debe ser similar al
    siguiente:

    else{
    int ed = Integer.parseInt(edad);
    Persona p1 = new Persona(nombre, ed);
    request.getSession().setAttribute("persona1", p1);
    request.getRequestDispatcher("exito.jsp").forward(request, response);
    }

    28. Para poder leer la variable persona1 de la sesión, se deberá crear un scriptlet al
    comienzo de la vista exito.jsp para recuperarlo de la siguiente manera:

    <%@page import="modelo.Persona" %>


    <%
    Persona p1 = (Persona)request.getSession().getAttribute("persona1");
    %>

    Finalmente es necesario ajustar la vista exito.jsp para leer los valores almacenados en el
    modelo Persona, para esto creamos dos expresiones para recuperar las variables despues
    del enunciado de cada párrafo así;

    <p>Nombre: <%= p1.getNombre()%> </p>


    <p>Edad: <%= p1.getEdad()%> </p>

    29. Probemos nuestra aplicación: Hasta este momento hemos diseñado una vista que
    deberá mostrar dos campos y al presionar el botón “Enviar Datos a procesar”
    ingresando la información deberá realizar llamado al controlador procesar.do para
    visualizar el resultado en la vista éxito.jsp y mostrando la información capturada
    correctamente.

    Pero si ingresamos una cadena en vez de un número la aplicación no la valida:


    Y presenta error 500

    30. Modificar el código del controlador procesar.do para manejar el error de tipo de dato, el
    error se informará en una nueva vista
    int ed = 0;
    try {
    ed = Integer.parseInt(edad);
    }
    catch(NumberFormatException ex){
    request.getRequestDispatcher("errornumero.jsp").forward(request, response);
    }

    18. Crear la nueva vista errornumero.jsp para manejar el error del número

    El cuerpo de esta nueva vista debe ser:

    <body>
    <h1>Por favor ingrese un valor número en la edad</h1>
    <a href="index.jsp"> Volver al indice ...</a>
    </body>
    31. Verificar el contenido del else en el controlador procesar.do el cual debió quedar como
    se indica a continuación:

    else{
    int ed = 0;
    try{
    ed = Integer.parseInt(edad);
    }
    catch(NumberFormatException Ex){
    request.getRequestDispatcher("errornumero.jsp").forward(request, response);
    }
    Persona p1 = new Persona(nombre, ed);
    request.getSession().setAttribute("persona1", p1);
    request.getRequestDispatcher("exito.jsp").forward(request, response);
    }

    32. Probemos nuestra aplicación final: Hasta este momento hemos diseñado una vista
    que deberá mostrar dos campos y al presionar el botón “Enviar Datos a procesar”
    ingresando la información deberá realizar llamado al controlador procesar.do para
    visualizar el resultado en la vista éxito.jsp y mostrando la información capturada
    correctamente manejando el error de número.
    Pero si ingresamos una cadena en vez de un número la aplicación no la valida:

    También podría gustarte