SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
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 desa-
rrollo de aplicaciones de escritorio imple-
mentando las librerías swing de Java.
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.
Alternativas Posibles
●
Conocer las convenciones internacionales
de Java emanadas por Oracle (Ingles).
●
Investigar, conocer y aplicar las normas
de escritura de programas en Java.
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.
Ejemplo Swing de Java y MVC
Interfáz Gráfica de Usuario (GUI)
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.
Arquitectura MVC Básica
VISTA
Solamente
Componentes
Gráficos
MODELO
Base de Datos
Lógica
CONTROLADOR
Conecta la Vista
y al Modelo
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.
Clases de la Aplicación
●
Modelo: ClaseModelo.
●
Vista: ClaseVista.
●
Controlador: ClaseControlador.
●
Inicializadora: ClasePrincipal.
La Vista Parte 1
Importar 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;
La Vista Parte 2
Definición de clase:
public class ClaseVista extends JFrame
{
La Vista Parte 3
Declaració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;
La Vista Parte 4
Definición del constructor:
public ClaseVista()
{
La Vista Parte 5
Definiendo el contenedor:
bloqueContenedor = getContentPane();
setTitle("Calculadora MVC");
setLayout(new FlowLayout());
setSize(220,200);
La Vista Parte 6
Definiendo 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");
La Vista Parte 7
Agregamos 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);
La Vista Parte 9
Hacemos que el contenedor sea visible:
setVisible(true);
}
}
El Controlador Parte 1
Importamos Librerías:
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
El Controlador Parte 2
Definimos la clase:
public class ClaseControlador implements ActionListener
{
El Controlador Parte 3
Declaramos dos objetos nuevos:
ClaseModelo objModelo = null;
ClaseVista objVista = null;
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
}
El Controlador Parte 5
Sobreescribir un método:
@Override
public void actionPerformed(ActionEvent objEvento)
{
try
{
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();
El Controlador Parte 7
Llamamos al método para sumar:
int resultado = objModelo.sumarDosEnteros(numero1, numero2);
El Controlador Parte 8
Mostramos los datos en la salida:
// Mostramos el resultado en la vista (GUI)
objVista.cajaDeTextoResultado.setText( "" + resultado );
}
El Controlador Parte 9
Sí ocurre un error lo mostramos:
catch(Exception objExcepcion)
{
objExcepcion.printStackTrace();
}
}
El Controlador Parte 10
Proporcionamos un escuchador:
public void actionListener(ActionListener escuchador)
{
objVista.botonSumar.addActionListener(escuchador);
}
}
El Modelo Parte 1
Definimos la clase:
public class ClaseModelo
{
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)
{
El Modelo Parte 3
Declaramos, convertimos e inicializamos:
int numero1 = Integer.parseInt(n1);
int numero2 = Integer.parseInt(n2);
int resultado = numero1 + numero2;
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[])
{
La Clase Principal Parte 3
Creamos los objetos necarios:
ClaseModelo modelo = new ClaseModelo();
ClaseVista vista = new ClaseVista();
La Clase Principal Parte 4
Instanciamos al constructor de la clase:
new ClaseControlador(vista, modelo);
}
}
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:
Calculadora Gráfica Java implementando el Patrón MVC

Weitere ähnliche Inhalte

Was ist angesagt?

Tópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y libreriasTópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y libreriasJosé Antonio Sandoval Acosta
 
Ejemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datosEjemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datosVane Borjas
 
Principios orientacion-objetos
Principios orientacion-objetosPrincipios orientacion-objetos
Principios orientacion-objetoskarlalopezbello
 
investigacion topicos avanzados de programacion unidad dos interfaz grafica
investigacion topicos avanzados de programacion unidad dos interfaz graficainvestigacion topicos avanzados de programacion unidad dos interfaz grafica
investigacion topicos avanzados de programacion unidad dos interfaz graficaAnel Sosa
 
Diagrama de actividades
Diagrama de actividadesDiagrama de actividades
Diagrama de actividadesnoeliaaiza
 
diagrama de colaboracion
diagrama de colaboraciondiagrama de colaboracion
diagrama de colaboracionstill01
 
Introducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAMLIntroducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAMLSorey García
 
modelo vista controlador
modelo vista controladormodelo vista controlador
modelo vista controladorcom2merwil
 
Diagrama de colaboración
Diagrama de colaboraciónDiagrama de colaboración
Diagrama de colaboraciónushur_4
 
Sesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuenciaSesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuenciaJulio Pari
 
Documentación
DocumentaciónDocumentación
DocumentaciónFSILSCA
 

Was ist angesagt? (20)

Tópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y libreriasTópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y librerias
 
Ejemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datosEjemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datos
 
Topicos avanzados de programacion
Topicos avanzados de programacionTopicos avanzados de programacion
Topicos avanzados de programacion
 
Principios orientacion-objetos
Principios orientacion-objetosPrincipios orientacion-objetos
Principios orientacion-objetos
 
Alice 11
Alice 11Alice 11
Alice 11
 
investigacion topicos avanzados de programacion unidad dos interfaz grafica
investigacion topicos avanzados de programacion unidad dos interfaz graficainvestigacion topicos avanzados de programacion unidad dos interfaz grafica
investigacion topicos avanzados de programacion unidad dos interfaz grafica
 
Diagrama de actividades
Diagrama de actividadesDiagrama de actividades
Diagrama de actividades
 
Alice 11
Alice 11Alice 11
Alice 11
 
diagrama de colaboracion
diagrama de colaboraciondiagrama de colaboracion
diagrama de colaboracion
 
Modelo incremental
Modelo incrementalModelo incremental
Modelo incremental
 
Introducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAMLIntroducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAML
 
modelo vista controlador
modelo vista controladormodelo vista controlador
modelo vista controlador
 
Diagrama de colaboración
Diagrama de colaboraciónDiagrama de colaboración
Diagrama de colaboración
 
Sesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuenciaSesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuencia
 
Documentación
DocumentaciónDocumentación
Documentación
 
DIAGRAMAS DE CLASE
DIAGRAMAS DE CLASEDIAGRAMAS DE CLASE
DIAGRAMAS DE CLASE
 
excepciones en java
excepciones en javaexcepciones en java
excepciones en java
 
Diagrama de estado
Diagrama de estadoDiagrama de estado
Diagrama de estado
 
Windows.forms.ejercicios
Windows.forms.ejerciciosWindows.forms.ejercicios
Windows.forms.ejercicios
 
PRACTICA 7 ALICE
PRACTICA 7 ALICEPRACTICA 7 ALICE
PRACTICA 7 ALICE
 

Ähnlich wie Calculadora Gráfica Java implementando el Patrón MVC

Ähnlich wie Calculadora Gráfica Java implementando el Patrón MVC (20)

1TAP Tema 1-GUI.pptx
1TAP Tema 1-GUI.pptx1TAP Tema 1-GUI.pptx
1TAP Tema 1-GUI.pptx
 
Mvc
MvcMvc
Mvc
 
Model View Controller - MVC
Model View Controller - MVCModel View Controller - MVC
Model View Controller - MVC
 
Modelo vista controlador vas Programacion por n capas
Modelo vista controlador vas Programacion por n capasModelo vista controlador vas Programacion por n capas
Modelo vista controlador vas Programacion por n capas
 
Java Web Lección 03 - MVC
Java Web Lección 03 - MVCJava Web Lección 03 - MVC
Java Web Lección 03 - MVC
 
Spring Mvc Final
Spring Mvc FinalSpring Mvc Final
Spring Mvc Final
 
[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)
[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)
[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)
 
Health WorldBank 2012
Health WorldBank 2012Health WorldBank 2012
Health WorldBank 2012
 
Analisis del patron mvc
Analisis del patron mvcAnalisis del patron mvc
Analisis del patron mvc
 
MVC
MVCMVC
MVC
 
Computación 3
Computación 3Computación 3
Computación 3
 
Parte I. Notas Rapidas (sticky notes) App w8: MVVM y SQLite
Parte I. Notas Rapidas (sticky notes) App w8: MVVM y SQLiteParte I. Notas Rapidas (sticky notes) App w8: MVVM y SQLite
Parte I. Notas Rapidas (sticky notes) App w8: MVVM y SQLite
 
S01-s1-MVC.pptx
S01-s1-MVC.pptxS01-s1-MVC.pptx
S01-s1-MVC.pptx
 
Computación 3
Computación 3Computación 3
Computación 3
 
Tutorial java fx_8_espanol
Tutorial java fx_8_espanolTutorial java fx_8_espanol
Tutorial java fx_8_espanol
 
Pattern template
Pattern templatePattern template
Pattern template
 
Curso de Struts2: Unidad Didáctica 00 Introduccion
Curso de Struts2: Unidad Didáctica 00 IntroduccionCurso de Struts2: Unidad Didáctica 00 Introduccion
Curso de Struts2: Unidad Didáctica 00 Introduccion
 
Clase 10 mvc
Clase 10 mvcClase 10 mvc
Clase 10 mvc
 
Model View Controller (MVC)
Model View Controller (MVC)Model View Controller (MVC)
Model View Controller (MVC)
 
Presentación Evenge #hackathonugr
Presentación Evenge #hackathonugrPresentación Evenge #hackathonugr
Presentación Evenge #hackathonugr
 

Mehr von Ignacio Aular Reyes

Mehr von Ignacio Aular Reyes (6)

Logica
LogicaLogica
Logica
 
Código Java Escrito de Forma Estándar
Código Java Escrito de Forma EstándarCódigo Java Escrito de Forma Estándar
Código Java Escrito de Forma Estándar
 
Convenciones Internacionales
Convenciones InternacionalesConvenciones Internacionales
Convenciones Internacionales
 
Tcp ip
Tcp ipTcp ip
Tcp ip
 
Tcp ip
Tcp ipTcp ip
Tcp ip
 
Tutorial de instalación de apache, php, mysql y phpmyadmin
Tutorial de instalación de apache, php, mysql y phpmyadminTutorial de instalación de apache, php, mysql y phpmyadmin
Tutorial de instalación de apache, php, mysql y phpmyadmin
 

Calculadora Gráfica Java implementando el Patrón MVC

  • 1. 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
  • 2. Esquema ● Uso de librerías para crear elementos gráficos. ● Distribución de la aplicación en tres capas.
  • 3. Objetivo Mostrar el uso del patrón MVC en el desa- rrollo de aplicaciones de escritorio imple- mentando las librerías swing de Java.
  • 4. 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.
  • 5. Alternativas Posibles ● Conocer las convenciones internacionales de Java emanadas por Oracle (Ingles). ● Investigar, conocer y aplicar las normas de escritura de programas en Java.
  • 6. 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.
  • 7. Ejemplo Swing de Java y MVC Interfáz Gráfica de Usuario (GUI)
  • 8. 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.
  • 9. Arquitectura MVC Básica VISTA Solamente Componentes Gráficos MODELO Base de Datos Lógica CONTROLADOR Conecta la Vista y al Modelo
  • 10. 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.
  • 11. Clases de la Aplicación ● Modelo: ClaseModelo. ● Vista: ClaseVista. ● Controlador: ClaseControlador. ● Inicializadora: ClasePrincipal.
  • 12. La Vista Parte 1 Importar 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;
  • 13. La Vista Parte 2 Definición de clase: public class ClaseVista extends JFrame {
  • 14. La Vista Parte 3 Declaració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;
  • 15. La Vista Parte 4 Definición del constructor: public ClaseVista() {
  • 16. La Vista Parte 5 Definiendo el contenedor: bloqueContenedor = getContentPane(); setTitle("Calculadora MVC"); setLayout(new FlowLayout()); setSize(220,200);
  • 17. La Vista Parte 6 Definiendo 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");
  • 18. La Vista Parte 7 Agregamos 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);
  • 19. La Vista Parte 9 Hacemos que el contenedor sea visible: setVisible(true); } }
  • 20. El Controlador Parte 1 Importamos Librerías: import java.awt.event.ActionEvent; import java.awt.event.ActionListener;
  • 21. El Controlador Parte 2 Definimos la clase: public class ClaseControlador implements ActionListener {
  • 22. El Controlador Parte 3 Declaramos dos objetos nuevos: ClaseModelo objModelo = null; ClaseVista objVista = null;
  • 23. 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 }
  • 24. El Controlador Parte 5 Sobreescribir un método: @Override public void actionPerformed(ActionEvent objEvento) { try {
  • 25. 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();
  • 26. El Controlador Parte 7 Llamamos al método para sumar: int resultado = objModelo.sumarDosEnteros(numero1, numero2);
  • 27. El Controlador Parte 8 Mostramos los datos en la salida: // Mostramos el resultado en la vista (GUI) objVista.cajaDeTextoResultado.setText( "" + resultado ); }
  • 28. El Controlador Parte 9 Sí ocurre un error lo mostramos: catch(Exception objExcepcion) { objExcepcion.printStackTrace(); } }
  • 29. El Controlador Parte 10 Proporcionamos un escuchador: public void actionListener(ActionListener escuchador) { objVista.botonSumar.addActionListener(escuchador); } }
  • 30. El Modelo Parte 1 Definimos la clase: public class ClaseModelo {
  • 31. 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) {
  • 32. El Modelo Parte 3 Declaramos, convertimos e inicializamos: int numero1 = Integer.parseInt(n1); int numero2 = Integer.parseInt(n2); int resultado = numero1 + numero2;
  • 33. El Modelo Parte 4 Retornamos el resultado al llamador: return (resultado); } }
  • 34. La Clase Principal Parte 1 Definimos la clase: public class ClasePrincipal {
  • 35. La Clase Principal Parte 2 Definimos el metodo principal: public static void main(String args[]) {
  • 36. La Clase Principal Parte 3 Creamos los objetos necarios: ClaseModelo modelo = new ClaseModelo(); ClaseVista vista = new ClaseVista();
  • 37. La Clase Principal Parte 4 Instanciamos al constructor de la clase: new ClaseControlador(vista, modelo); } }
  • 38. La Clase Principal Parte 5 Pasamos los objetos al controlador: new ClaseControlador(vista, modelo); } }
  • 39. 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
  • 40. Ejecución de la Aplicación Parte 2
  • 41. Ejecución de la Aplicación Parte 3 Calculadora MVC: