mvc-130707154055-phpapp01
-
Upload
jose-francisco-serrano-umana -
Category
Documents
-
view
12 -
download
3
description
Transcript of mvc-130707154055-phpapp01
![Page 1: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/1.jpg)
Desarrollo de Aplicaciones Java
Arquitectura MVCInteracción entre el Modelo, la Vista y el Controlador.
Autor del Presente TutorialIngeniero de Sistemas
Ignacio R. Aular R.SCJP 310-055
![Page 2: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/2.jpg)
Esquema
● Uso de librerías para crear elementos gráficos. ● Distribución de la aplicación en tres capas.
![Page 3: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/3.jpg)
Objetivo
Mostrar el uso del patrón MVC en el desa-rrollo de aplicaciones de escritorio imple-mentando las librerías swing de Java.
![Page 4: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/4.jpg)
Situación Presente● Carencia de material instruccional con contenidos bre-ves y precisos que permita al joven novicio aprender con una curva mínima de esfuerzo, para poder ofrecer Soluciones de Software de Calidad, en cumplimiento con los lineamientos éxigidos por el PNFI, de acuerdo al perfil que debe poseer el egresado como Ingeniero en Informática.
● Estudiantes principiantes en Java requieren constante asesoría para comprender y aplicar el patrón MVC.
![Page 5: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/5.jpg)
Alternativas Posibles
● Conocer las convenciones internacionales de Java emanadas por Oracle (Ingles).
● Investigar, conocer y aplicar las normas de escritura de programas en Java.
![Page 6: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/6.jpg)
Recomendaciones● La primera alternativa es muy recomendada.
● Conocer la importancia de seguir las conven-ciones para escritura de código en cualquier len-guaje de programación, de marcado o de comu-nicación con base de datos.
● En el próximo tutorial veremos la interacción con base de datos bajo el patrón MVC, no se lo pueden perder.
![Page 7: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/7.jpg)
Ejemplo Swing de Java y MVC
Interfáz Gráfica de Usuario (GUI)
![Page 8: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/8.jpg)
Descripción General● La Vista recibe datos por parte del usuario.● Reacciona ante la ocurrencia de un evento.● Hace el llamado al Controlador.● El Controlador escucha el evento.● Transfiere la solicitud al Modelo.● El Modelo procesa datos y retorna la información al
Controlador y éste le informa a la Vista para que los
muestre como resultado al usuario.
![Page 9: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/9.jpg)
Arquitectura MVC Básica
VISTASolamente
ComponentesGráficos
MODELOBase de Datos
Lógica
CONTROLADORConecta la Vista
y al Modelo
![Page 10: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/10.jpg)
Idea Global
Introducción: La arquitectura MVC se usa para separar el la Vista del
Modelo que interactúan entre sí mediante un comunicador común entre ambos llamado Controlador.
Tutorial: Nuestra aplicación se llamará: "Sumar dos números",
la misma será usada para mostrar la arquitectura MVC y es por tanto que se dividirá este programa en cuatro partes.
![Page 11: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/11.jpg)
Clases de la Aplicación
● Modelo: ClaseModelo.● Vista: ClaseVista.● Controlador: ClaseControlador.● Inicializadora: ClasePrincipal.
![Page 12: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/12.jpg)
La Vista Parte 1Importar Librerías:
import java.awt.Container;
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
![Page 13: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/13.jpg)
La Vista Parte 2
Definición de clase:
public class ClaseVista extends JFrame{
![Page 14: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/14.jpg)
La Vista Parte 3Declaración de objetos:Container bloqueContenedor = null;
JTextField cajaDeTextoNumero1 = null; JTextField cajaDeTextoNumero2 = null;JTextField cajaDeTextoResultado = null;
JLabel etiquetaNumero1 = null;JLabel etiquetaNumero2 = null;JLabel etiquetaResultado = null;
JButton botonSumar = null;
![Page 15: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/15.jpg)
La Vista Parte 4
Definición del constructor:
public ClaseVista() {
![Page 16: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/16.jpg)
La Vista Parte 5Definiendo el contenedor:
bloqueContenedor = getContentPane();
setTitle("Calculadora MVC");
setLayout(new FlowLayout());
setSize(220,200);
![Page 17: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/17.jpg)
La Vista Parte 6Definiendo cada componente:
etiquetaNumero1 = new JLabel("Numero 01: "); cajaDeTextoNumero1 = new JTextField("", 10);
etiquetaNumero2 = new JLabel("Numero 02: ");cajaDeTextoNumero2 = new JTextField("", 10);
etiquetaResultado = new JLabel("Resultado: ");cajaDeTextoResultado = new JTextField("", 10);
botonSumar = new JButton("Sumar");
![Page 18: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/18.jpg)
La Vista Parte 7Agregamos cada conponente al contenedor:
bloqueContenedor.add(etiquetaNumero1);bloqueContenedor.add(cajaDeTextoNumero1);
bloqueContenedor.add(etiquetaNumero2);bloqueContenedor.add(cajaDeTextoNumero2); bloqueContenedor.add(etiquetaResultado);bloqueContenedor.add(cajaDeTextoResultado);
bloqueContenedor.add(botonSumar);
![Page 19: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/19.jpg)
La Vista Parte 9Hacemos que el contenedor sea visible:
setVisible(true);}}
![Page 20: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/20.jpg)
El Controlador Parte 1Importamos Librerías:
import java.awt.event.ActionEvent;import java.awt.event.ActionListener;
![Page 21: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/21.jpg)
El Controlador Parte 2
Definimos la clase:public class ClaseControlador implements ActionListener{
![Page 22: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/22.jpg)
El Controlador Parte 3
Declaramos dos objetos nuevos:
ClaseModelo objModelo = null;
ClaseVista objVista = null;
![Page 23: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/23.jpg)
El Controlador Parte 4
Definimos el constructor:public ClaseControlador(ClaseVista objVista, ClaseModelo objModelo) { this.objModelo = objModelo; this.objVista = objVista; actionListener(this); // Escuchador para el botón }
![Page 24: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/24.jpg)
El Controlador Parte 5Sobreescribir un método:
@Overridepublic void actionPerformed(ActionEvent objEvento) {try{
![Page 25: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/25.jpg)
El Controlador Parte 6
Tomamos los datos de entrada:
// Capturamos los números desde la vista
String numero1 = this.objVista.cajaDeTextoNumero1.getText();
String numero2 = this.objVista.cajaDeTextoNumero2.getText();
![Page 26: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/26.jpg)
El Controlador Parte 7 Llamamos al método para sumar:
int resultado = objModelo.sumarDosEnteros(numero1, numero2);
![Page 27: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/27.jpg)
El Controlador Parte 8Mostramos los datos en la salida:
// Mostramos el resultado en la vista (GUI)
objVista.cajaDeTextoResultado.setText( "" + resultado );
}
![Page 28: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/28.jpg)
El Controlador Parte 9Sí ocurre un error lo mostramos:
catch(Exception objExcepcion){ objExcepcion.printStackTrace();} }
![Page 29: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/29.jpg)
El Controlador Parte 10
Proporcionamos un escuchador:public void actionListener(ActionListener escuchador){ objVista.botonSumar.addActionListener(escuchador);}}
![Page 30: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/30.jpg)
El Modelo Parte 1
Definimos la clase:
public class ClaseModelo{
![Page 31: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/31.jpg)
El Modelo Parte 2
Definimos el método para sumar:
// Implementa la lógica del objetivo principal del programa
public int sumarDosEnteros(String n1, String n2)
{
![Page 32: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/32.jpg)
El Modelo Parte 3
Declaramos, convertimos e inicializamos:
int numero1 = Integer.parseInt(n1);
int numero2 = Integer.parseInt(n2);
int resultado = numero1 + numero2;
![Page 33: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/33.jpg)
El Modelo Parte 4
Retornamos el resultado al llamador:
return (resultado);} }
![Page 34: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/34.jpg)
La Clase Principal Parte 1
Definimos la clase:
public class ClasePrincipal{
![Page 35: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/35.jpg)
La Clase Principal Parte 2
Definimos el metodo principal:
public static void main(String args[]){
![Page 36: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/36.jpg)
La Clase Principal Parte 3
Creamos los objetos necarios:
ClaseModelo modelo = new ClaseModelo();
ClaseVista vista = new ClaseVista();
![Page 37: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/37.jpg)
La Clase Principal Parte 4
Instanciamos al constructor de la clase:
new ClaseControlador(vista, modelo);}}
![Page 38: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/38.jpg)
La Clase Principal Parte 5
Pasamos los objetos al controlador:
new ClaseControlador(vista, modelo);}}
![Page 39: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/39.jpg)
Ejecución de la Aplicación Parte 1
Compilar Java desde la terminal:usuario@localhost:~$ javac ClasePrincipal.java
Ejecutar Java desde la terminal:usuario@localhost:~$ java ClasePrincipal
![Page 40: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/40.jpg)
Ejecución de la Aplicación Parte 2
![Page 41: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/41.jpg)
Ejecución de la Aplicación Parte 3
Calculadora MVC:
![Page 42: mvc-130707154055-phpapp01](https://reader034.fdocuments.co/reader034/viewer/2022042706/577cc0ee1a28aba71191a564/html5/thumbnails/42.jpg)