Desarrollo mvc paso a paso by Kleber Posligua

LENGUAJES DE PROGRAMACION

PONTIFICIA UNIVERSIDAD CATOLICA DEL ECUADOR SEDE EN ESMERALDAS

MAESTRIA EN TECNOLOGIAS PARA LA GESTION Y LA PRACTICA DOCENTE POR KLEBER POSLIGUA Y TANIA POSLIGUA

Contenido 1. Ingresando a NetBeans ............................................................................................................. 3 2. Creando un nuevo proyecto tipo Aplicaci贸n web ..................................................................... 3 3. Creando los paquetes para alojar los archivos modelo vista controlador ............................... 5 4. Creando la vista. ........................................................................................................................ 6 5. Codificando la vista ................................................................................................................... 7 6. Creando el modelo. ................................................................................................................. 11 7. Creando el controlador. .......................................................................................................... 17 8. Recuperando los valores en la vista. ....................................................................................... 20 9. Probando la aplicaci贸n ............................................................................................................ 23 Bibliograf铆a .................................................................................................................................. 24

1. Ingresando a NetBeans -

Haga doble clic sobre el ícono de NetBeans

2. Creando un nuevo proyecto tipo Aplicación web -

Clic en menú archivo Clic en Proyecto nuevo

A continuación se muestra la siguiente ventana:

En categorías seleccione Java Web 3

En proyectos seleccione Web Application Clic en siguiente para continuar En la pantalla siguiente escriba el nombre del proyecto y pulse siguiente

En esta pantalla aseg煤rese que esta seleccionado el servidor web GlassFish Server. Pulse Terminar para finalizar con la creaci贸n del proyecto.

En el explorador de proyectos se muestra la aplicación web creada

3. Creando los paquetes para alojar los archivos modelo vista controlador -

Para crear el paquete modelo haga clic derecho sobre la carpeta Source Packages Luego vaya a nuevo y clic en Java Package

Escriba “modelo ” para el nombre de este paquete y haga clic en finalizar

Repita estos pasos y cree los paquetes vista y controlador

Su proyecto debe tener esta apariencia

4. Creando la vista. -

Recordemos que la vista es la interfaz de usuario y que permite al usuario interactuar con la aplicaci贸n. La vista que vamos a crear debe tener la siguiente apariencia

Para crear esta vista primero hacemos clic derecho en el paquete vista Luego nuevo y clic en servlet: En java los servlet tambi茅n pueden generar vistas

A continuaci贸n escribimos el nombre del servlet que har谩 las veces de vista

Le escribimos el nombre ingresar y Hacemos clic en siguiente

En esta pantalla marcamos la casilla Add information to deployment descriptor (web.xml). Esta opción permite agregar la descripción del servlet al archivo de configuración de la aplicación llamado web.xml

En URL Pattern(s) escribimos: /ingresar.view indicando que el recurso será accedido con este nombre

Pulsamos terminar para continuar

5. Codificando la vista -

Se acaba de agregar el archivo ingresar.java. Esto se puede verificar en el explorador de proyectos

El código generado lo podemos observar en la pantalla de nuestro entorno de desarrollo.

El punto de entrada a este fichero es el método processRequest. Vamos a borrar este código que está entre try y finally para comenzar a crear la interfaz de usuario Luego de borrar debería quedar nos así:

SE BORRO TODO ESTE CODIGO

Ahora entre las sentencias try y finally vamos a escribir nuestro código para generar la Interfaz de Usuario pedida:

try { /* TODO output your page here. You may use following sample code. */ ArrayList errores=(ArrayList)request.getAttribute("errores"); Reclamo reclamo=(Reclamo)request.getAttribute("reclamo"); out.println("<!DOCTYPE html>"); out.println("<html>"); out.println("<head>"); out.println("<title>Ingreso de reclamos</title>"); out.println("</head>"); out.println("<body>"); 8

out.println("<center>"); out.println("<h2>Ingreso de reclamos</h2>"); out.println("<form name='frm1' method='post' action='ReclamoIngreso.do' >"); out.println("<table>"); out.println("<tr>"); out.println("<td>Nombre</td>"); out.println("<td><Input type='text' name='txtnombre' /></td>"); out.println("</tr>"); out.println("<tr>"); out.println("<td>Teléfono</td>"); out.println("<td><Input type='text' name='txttelefono' /></td>"); out.println("</tr>"); out.println("<tr>"); out.println("<td>Tipo de reclamo</td>"); out.println("<td><select name='txttipo'>"); out.println("<option value='0'>Elija el tipo"); out.println("<option>Atención al cliente"); out.println("</select>"); out.println("</td>"); out.println("</tr>"); out.println("<tr>"); out.println("<td>Texto de reclamo</td>"); out.println("<td><textarea name='txttexto'></textarea> </td>"); out.println("</tr>"); out.println("<tr>"); out.println("<td colspan='2' align='center'>"); out.println("<Input type='submit' value='Aceptar' name='btnaceptar' />"); out.println("</td>"); out.println("</tr>"); out.println("</table>"); out.println("</form>"); if(errores!=null){ for(int i=0;i<errores.size();i++) out.println("<br/>"+errores.get(i)); } if (reclamo!=null){ out.println("<br/>Estimado/a " + reclamo.getNombre()); out.println(" Su reclamo pronto será atendido..."); } out.println("</center>"); 9

out.println("</body>"); out.println("</html>"); } finally { out.close(); }

Para ejecutar el archivo creado hacemos clic derecho sobre el mismo, y luego clic en ejecutar archivo

Se abre nuestro navegador web y el resultado se muestra en pantalla

6. Creando el modelo. -

Para crear el modelo hacemos clic derecho sobre el paquete modelo y hacemos clic en Java Class

Escribimos el nombre de la clase: Reclamo y clic en Terminar

Podemos verificar su creaci贸n en el explorador de proyectos

En nuestro entorno de desarrollo aparece la siguiente ventana

Primero crearemos los atributos de la clase

Generamos un constructor sin parámetros. Haga clic derecho sobre cualquier parte del archivo y haga clic en generar código.

En el menú contextual seleccione contructor:

En esta pantalla haga clic en Generar

Debe aparecer el siguiente c贸digo. Compl茅telo con el c贸digo encerrado en el c铆rculo

Para generar el constructor con parámetros: Haga clic derecho sobre el documento y luego clic en insertar código. En el menú contextual seleccione constructor. Pero esta vez seleccione todos los atributos, tal como se muestra a continuación:

Haga clic en generar. Debe aparecer el siguiente código:

Ahora vamos a generamos los métodos getter y setter. Clic derecho sobre el documento. Clic en insertar código. Clic en Getter y Setter:

Se muestra la siguiente pantalla. Seleccione todas los atributos y haga clic en Generar:

Se genera el siguiente c贸digo:

El c贸digo completo de la clase Reclamo queda de la siguiente forma:

public class Reclamo { private String nombre; private int telefono; private String tipoReclamo; private String textoReclamo; public Reclamo() { this.nombre=""; this.telefono=0; this.tipoReclamo=""; this.textoReclamo=""; } public Reclamo(String nombre, int telefono, String tipoReclamo, String textoReclamo) { this.nombre = nombre; this.telefono = telefono; this.tipoReclamo = tipoReclamo; this.textoReclamo = textoReclamo; } public String getNombre() { return nombre; } public void setNombre(String nombre) { this.nombre = nombre; } public int getTelefono() { return telefono; } public void setTelefono(int telefono) { this.telefono = telefono; } public String getTipoReclamo() { return tipoReclamo; } public void setTipoReclamo(String tipoReclamo) { this.tipoReclamo = tipoReclamo; 16

} public String getTextoReclamo() { return textoReclamo; } public void setTextoReclamo(String textoReclamo) { this.textoReclamo = textoReclamo; } }

7. Creando el controlador. -

Para el controlador vamos a utilizar un servlet. Clic derecho sobre el paquete controlador. Ir a nuevo y clic en servlet

Escribimos el nombre del controlador: ReclamoIngreso y hacemos clic en siguiente

Marcamos la casilla Add information to deployment descriptor (web.xml). En URL Pattern(s): Escribimos /ReclamoIngreso.do. Luego clic en Terminar

En el explorador de proyectos vemos el archivo creado:

En el explorador de proyectos aparece el siguiente código:

Una vez más borramos el código que queda entre try y finally. Nos debe quedar así:

Y procedemos a escribir el código siguiente:

/*Declaramos las variables y recuperamos los valores que el usuario ingresó en la vista*/ String nombre=request.getParameter("txtnombre"); String strtelefono=request.getParameter("txttelefono"); String tipoReclamo=request.getParameter("txttipo"); String textoReclamo=request.getParameter("txttexto"); int telefono=0; /*Declaramos una lista para guardar los errores*/ 18

ArrayList errores=new ArrayList(); if(nombre.isEmpty()) errores.add("Debes ingresar el nombre"); if(tipoReclamo.equals("0")) errores.add("Falta seleccionar el tipo de reclamo"); if(textoReclamo.isEmpty()) errores.add("Falta escribir el texto del reclamo");

/*Recuperamos el valor entero y tratamos de convertirlo en entero. Si son letras se produce error, de lo contrario la transformación es correcta*/ try { telefono=Integer.parseInt(strtelefono); //solo 7 dígitos para el teléfono if(strtelefono.length()>7) errores.add("El teléfono no puede tener más de siete dígitos..."); }catch(NumberFormatException e) { errores.add("El teléfono debe ser numérico..."); }

/*Si la lista de errores esta vacia. Significa que no hubo errores*/ if (errores.isEmpty()){ //Se declara un objeto de la clase modelo Reclamo Reclamo reclamo=new Reclamo(nombre, telefono, tipoReclamo, textoReclamo); //Se guarda el reclamo en el ámbito de contexto request.setAttribute("reclamo", reclamo); //Se redirecciona hacia la vista RequestDispatcher vista=request.getRequestDispatcher("Ingresar.view"); vista.forward(request, response); } else{ //guardar los errores en el ámbito de contexto request.setAttribute("errores", errores); //redireccionar hacia la vista RequestDispatcher vista=request.getRequestDispatcher("Ingresar.view"); vista.forward(request, response); }

El controlador ha sido creado

8. Recuperando los valores en la vista. -

La vista debe recuperar la lista de errores en caso que los hubiese o debe recuperar los datos del Reclamo en caso que hayan sido ingresados correctamente. En el explorador de proyectos haga doble clic sobre el archivo ingresar.java. Agregue estas dos líneas al principio método processRequest dentro del bloque try: ArrayList errores=(ArrayList)request.getAttribute("errores"); Reclamo reclamo=(Reclamo)request.getAttribute("reclamo");

Debería quedar de la siguiente forma:

Observe que al agregar estas dos líneas aparece un error. Esto se debe a que se deben agregar las librerías necesarias para poder utilizar esas clases. Para solucionarlo haga clic normal sobre el foco amarillo que tiene el error y haga clic sobre “Añadir import a modelo.Reclamo”. Repita este proceso para solucionar otros posibles errores de este tipo.

Hecho esto el error desaparece. Ahora nos ubicamos entre la etiqueta </form> y </center> , tal como se muestra :

Y agregamos el siguiente código():

if(errores!=null){ /*Imprime los errores*/ for(int i=0;i<errores.size();i++) out.println("<br/>"+errores.get(i)); } if (reclamo!=null){ /*Confirma que el reclamo fue ingresado correctamente*/ out.println("<br/>Estimado/a " + reclamo.getNombre()); out.println(" Su reclamo pronto será atendido..."); } -

Así debería quedarnos:

Listo hemos terminado la codificaci贸n

9. Probando la aplicación -

Haga clic derecho sobre el archivo de la vista ingresar.java y luego clic en ejecutar archivo: Se despliega la aplicación. Si no ingresamos ningún dato y pulsamos en aceptar, los datos se manda al controlador, este los procesa y detecta que están vacíos. El controlador devuelve la lista de errores a la vista y esta los muestra.

Ahora ingresamos datos correctos y hacemos clic en Aceptar. Igual que el caso anterior, los datos los procesa el controlador, y envía un mensaje de confirmación que es mostrado en la vista.

Bibliografía Gajardo, R. (s.f.). Youtube. Recuperado el 23 de Noviembre de 2013, de Youtube: http://www.youtube.com/watch?v=BbfXafRQkhc&list=UUEEW9kO_qu0E2XOhAh5jFg&index=7