Está en la página 1de 42

Desarrollo de Aplicaciones Java

Arquitectura MVC
Interacción entre el Modelo, la Vista y el Controlador.
Autor del Presente Tutorial
Ingeniero de Sistemas
Ignacio R. Aular R.
SCJP 310-055

Esquema

Uso de librerías para crear elementos

gráficos. Distribución de la aplicación en
tres capas.

Objetivo
Mostrar el uso del patrón MVC en el
desarrollo de aplicaciones de
escritorio implementando las
librerías swing de Java.

Situación Presente
Carencia de material instruccional con
contenidos
bre- que permita al joven novicio
ves
y precisos
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
asesoría
constante
para comprender y aplicar el patrón
MVC.

● Investigar.Alternativas Posibles Conocer las convenciones de internacionales Java emanadas por Oracle (Ingles). conocer y deaplicar escrituralas de programas normasen Java. ● .

de marcado o de comu. ● .guaje de programación. ● Conocer la importancia de seguir las ciones para convenescritura de código en cualquier len.nicación con base de datos. ● En el próximotutorial veremos con la base interacción de datos bajo el patrón MVC. no se lo pueden perder.Recomendaciones La primera alternativa es muy recomendada.

Ejemplo Swing de Java y MVC Interfáz Gráfica de Usuario (GUI) .

● El Controlador escucha el ● evento. Hace el llamado al Controlador. y éste leinforma a El Modelo Vista procesa datos y que los muestre para retorna la información al como resultado al usuario. la . ● ● ● ● evento.Descripción General La Vista recibe datos por parte del Reacciona ante la ocurrencia de un usuario. Transfiere la solicitud Controlador al Modelo.

Arquitectura MVC Básica VISTA Solamente Componentes Gráficos CONTROLADOR Conecta la Vista y al Modelo MODELO Base de Datos Lógica .

. la misma será usada para mostrar la arquitectura MVC y es por tanto que se dividirá este programa en cuatro partes.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".

● Vista: ClaseVista.Clases de la Aplicación ● Modelo: ClaseModelo. ● Inicializadora: ClasePrincipal. . ● Controlador: ClaseControlador.

awt.awt. import javax.swing.swing.FlowLayout.Container.swing.JButton.JTextField.La Vista Parte 1 Importar Librerías: import java. import javax.JFrame. import java. import javax.swing.JLabel. . import javax.

La Vista Parte 2 Definición de clase: public class ClaseVista extends JFrame { .

JLabel etiquetaResultado = null.La Vista Parte 3 Declaración de objetos: Container bloqueContenedor = null. JLabel etiquetaNumero1 = null. . JTextField cajaDeTextoNumero2 = null. JTextField cajaDeTextoNumero1 = null. JLabel etiquetaNumero2 = null. JTextField cajaDeTextoResultado = null.

La Vista Parte 4 Definición del constructor: public ClaseVista() { .

200). setTitle("Calculadora MVC"). . setLayout(new FlowLayout()).La Vista Parte 5 Definiendo el contenedor: bloqueContenedor = getContentPane(). setSize(220.

cajaDeTextoResultado = new JTextField("". 10). cajaDeTextoNumero1 = new JTextField("". .La Vista Parte 6 Definiendo cada componente: etiquetaNumero1 = new JLabel("Numero 01: "). 10). etiquetaResultado = new JLabel("Resultado: "). cajaDeTextoNumero2 = new JTextField("". etiquetaNumero2 = new JLabel("Numero 02: ").

add(cajaDeTextoNumer o2).add(cajaDeTextoNumer o1).add(etiquetaNumero1) .add(etiquetaNumero2) .add(etiquetaResultado).La Vista Parte 7 Agregamos cada conponente al contenedor: bloqueContenedor. bloqueContenedor. bloqueContenedor. bloqueContenedor. . bloqueContenedor.

La Vista Parte 9 Hacemos que el contenedor sea visible: setVisible(true). } } .

event.awt.ActionListener.event.ActionEvent. import java. .El Controlador Parte 1 Importamos Librerías: import java.awt.

El Controlador Parte 2 Definimos la clase: public class ClaseControlador implements ActionListener { .

ClaseVista objVista = null. .El Controlador Parte 3 Declaramos dos objetos nuevos: ClaseModelo objModelo = null.

objModelo = objModelo.objVista = objVista. ClaseModelo objModelo) { this.El Controlador Parte 4 Definimos el constructor: public ClaseControlador(ClaseVista objVista. this. actionListener(this). // Escuchador para el botón } .

El Controlador Parte 5 Sobreescribir un método: @Override public void actionPerformed(ActionEvent objEvento) { try { .

cajaDeTextoNumero2. .objVista.cajaDeTextoNumero1.getText().El Controlador Parte 6 Tomamos los datos de entrada: // Capturamos los números desde la vista String numero1 = this.objVista.getText(). String numero2 = this.

El Controlador Parte 7 Llamamos al método para sumar: int resultado = objModelo. numero2).sumarDosEnteros(numero1. .

} .setText( "" + resultado ).cajaDeTextoResultado.El Controlador Parte 8 Mostramos los datos en la salida: // Mostramos el resultado en la vista (GUI) objVista.

printStackTrace(). } } .El Controlador Parte 9 Sí ocurre un error lo mostramos: catch(Exception objExcepcion) { objExcepcion.

addActionListener(escuchador) .El Controlador Parte 10 Proporcionamos un escuchador: public void actionListener(ActionListener escuchador) { objVista. } } .botonSumar.

El Modelo Parte 1 Definimos la clase: public class ClaseModelo { .

String n2) { .El Modelo Parte 2 Definimos el método para sumar: // Implementa la lógica del objetivo principal del programa public int sumarDosEnteros(String n1.

parseInt(n2). .El Modelo Parte 3 Declaramos. int resultado = numero1 + numero2. convertimos e inicializamos: int numero1 Integer. = int numero2 = Integer.parseInt(n1).

El Modelo Parte 4 Retornamos el resultado al llamador: return (resultado). } } .

La Clase Principal Parte 1 Definimos la clase: public class ClasePrincipal { .

La Clase Principal Parte 2 Definimos el metodo principal: public static void main(String args[]) { .

. ClaseVista vista = new ClaseVista().La Clase Principal Parte 3 Creamos los objetos necarios: ClaseModelo modelo = new ClaseModelo().

} } . modelo).La Clase Principal Parte 4 Instanciamos al constructor de la clase: new ClaseControlador(vista.

La Clase Principal Parte 5 Pasamos los objetos al controlador: new ClaseControlador(vista. } } . modelo).

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 .

Ejecución de la Aplicación Parte 2 .

Ejecución de la Aplicación Parte 3 Calculadora MVC: .