comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

Modelo Vista Controlador

  • 4 Respuestas
  • 5704 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Expermicid

  • *
  • Underc0der
  • Mensajes: 457
  • Actividad:
    0%
  • Reputación 0
  • _-Expermicid-_
    • Ver Perfil
  • Skype: expermicid.xd
« en: Noviembre 30, 2013, 10:49:42 pm »

Para el diseño de aplicaciones con interfaces sofisticados se utiliza el patrón de diseño Modelo Vista Controlador (MVC). La lógica de un interfaz de usuario cambia con mas frecuencia que los datos que tenemos almacenados y la lógica de negocio. Si realizamos un diseño complicado, es decir, una mezcla de componentes de interfaz y de negocio, entonces cuando necesitamos cambiar la interfaz, tendremos que modificar trabajosamente los componentes de negocio -> mayor trabajo y mayor riesgo de error.
MVC fomenta un diseño que desacople la vista del modelo, con la finalidad de mejorar la reusabilidad. De esta forma las modificaciones en las vistas impactan en menor medida en la lógica de negocio o de datos.

Los elementos de MVC son:

  • Modelo: datos y reglas de negocio
  • Vista: muestra la información del modelo al usuario
  • Controlador: gestiona las entradas del usuario

En esta imagen que encontré se muestra bien como es la interacción entre los componentes.


Los eventos de entrada del usuario son procesados por el Controlador, quien hace invocaciones al Modelo y actualiza la Vista, que será mostrada al usuario.

Vamos a realizar un ejemplo para poder entender bien como separar la Vista del Modelo y como conectarlo a través del Controlador.
La aplicacion va a ser muy simple, solo va a poder cambiar una frase a mayuscula o a minuscula, segun se quiera.

Como IDE voy a usar Netbeans, creo un nuevo proyecto y le agrego 3 paquetes, uno para cada uno de los elementos de MVC



Dentro de Vista voy a crear un JFrame Form que lo llamare ventPrincipal. Le agrego los componentes y lo adecuo a las necesidades.



En rojo coloque los nombre que le puse a los JButton y al JTextArea.
Para terminar con la Vista, voy al codigo y le agrego los getter y setter de los componentes.

Código: Java
  1. public void setBtnMayuscula(No tienes permisos para ver links. Registrate o Entra con tu cuenta btnMayuscula) {
  2.     this.btnMayuscula = btnMayuscula;
  3. }
  4.    
  5. public No tienes permisos para ver links. Registrate o Entra con tu cuenta getBtnMayuscula() {
  6.     return this.btnMayuscula;
  7. }
  8.    
  9. public void setBtnMinuscula(No tienes permisos para ver links. Registrate o Entra con tu cuenta btnMinuscula) {
  10.     this.btnMinuscula = btnMinuscula;
  11. }
  12.    
  13. public No tienes permisos para ver links. Registrate o Entra con tu cuenta getBtnMinuscula() {
  14.     return this.btnMinuscula;
  15. }
  16.    
  17. public void setTxtFrase(No tienes permisos para ver links. Registrate o Entra con tu cuenta txtFrase) {
  18.     this.txtFrase = txtFrase;
  19. }
  20.    
  21. public No tienes permisos para ver links. Registrate o Entra con tu cuenta getTxtFrase() {
  22.     return this.txtFrase;
  23. }

Para que no de error hay que importar estas dos librerias:

Código: Java
  1. import javax.swing.JButton;
  2. import javax.swing.JTextArea;

Ahora dentro del paquete Modelo creo un Java Class que lo llamare AdministradorFrases.
Aqui voy a poner los datos o funciones necesarias, en mi caso va a contener dos funciones, una para pasar a mayuscula y otra para pasar a minuscula.

Código: Java
  1. public class AdministradorFrases {
  2.    
  3.     public No tienes permisos para ver links. Registrate o Entra con tu cuenta pasarMayuscula(No tienes permisos para ver links. Registrate o Entra con tu cuenta txtOriginal) {
  4.        
  5.         return txtOriginal.toUpperCase();
  6.        
  7.     }
  8.    
  9.     public No tienes permisos para ver links. Registrate o Entra con tu cuenta pasarMinuscula(No tienes permisos para ver links. Registrate o Entra con tu cuenta txtOriginal) {
  10.        
  11.         return txtOriginal.toLowerCase();
  12.        
  13.     }
  14.    
  15. }

Y listo, solo nos falta el Controlador, que sera el encargado de captar los eventos producidos por el usuario y procesarlo.
Dentro del paquete Controlador creamos un Java Class con el nombre ventPrincipalController.

Esta clase va a hacer uso del Modelo y la Vista asi que las importamos.

Código: Java
  1. import Modelo.AdministradorFrases;
  2. import Vista.ventPrincipal;

y creamos dos variable privadas de tipo ventPrincipal y AdministradorFrases.

Código: Java
  1. public class ventPrincipalController {
  2.    
  3.     private ventPrincipal vP;
  4.     private AdministradorFrases amdF;
  5.    
  6. }

Generamos los Getter y Setter de las variable.

Código: Java
  1. public class ventPrincipalController {
  2.    
  3.     private ventPrincipal vP;
  4.     private AdministradorFrases amdF;
  5.  
  6.     public ventPrincipal getvP() {
  7.         return vP;
  8.     }
  9.  
  10.     public void setvP(ventPrincipal vP) {
  11.         this.vP = vP;
  12.     }
  13.  
  14.     public AdministradorFrases getAmdF() {
  15.         return amdF;
  16.     }
  17.  
  18.     public void setAmdF(AdministradorFrases amdF) {
  19.         this.amdF = amdF;
  20.     }
  21.    
  22. }

Creamos el constructor, que va a recibir como parametro la Vista y el Modelo.
Tambien le agregamos un ActionListener a cada uno de los JButton de la Vista.

Código: Java
  1. public ventPrincipalController(ventPrincipal vP, AdministradorFrases amdF) {
  2.        
  3.     this.vP = vP;
  4.     this.amdF = amdF;
  5.        
  6.     this.vP.getBtnMinuscula().addActionListener(new MinusculaListener());
  7.     this.vP.getBtnMayuscula().addActionListener(new MayusculaListener());
  8. }

Definimos las clases MinusculaListener y MayusculaListener que implementan ActionListener y sobreescribimos el metodo actionPerformed.

Código: Java
  1. public class MinusculaListener implements No tienes permisos para ver links. Registrate o Entra con tu cuenta {
  2.  
  3.     @Override
  4.     public void actionPerformed(No tienes permisos para ver links. Registrate o Entra con tu cuenta e) {
  5.            
  6.     }
  7.        
  8. }
  9.    
  10. public class MayusculaListener implements No tienes permisos para ver links. Registrate o Entra con tu cuenta {
  11.  
  12.     @Override
  13.     public void actionPerformed(No tienes permisos para ver links. Registrate o Entra con tu cuenta e) {
  14.            
  15.     }
  16.        
  17. }

Los metodos van a ser uso del modelo para utilizar las funciones, segun corresponda en cada caso.

Código: Java
  1. public class MinusculaListener implements No tienes permisos para ver links. Registrate o Entra con tu cuenta {
  2.  
  3.     @Override
  4.     public void actionPerformed(No tienes permisos para ver links. Registrate o Entra con tu cuenta e) {
  5.         vP.getTxtFrase().setText(amdF.pasarMinuscula(vP.getTxtFrase().getText()));
  6.     }
  7.        
  8. }
  9.    
  10. public class MayusculaListener implements No tienes permisos para ver links. Registrate o Entra con tu cuenta {
  11.  
  12.     @Override
  13.     public void actionPerformed(No tienes permisos para ver links. Registrate o Entra con tu cuenta e) {
  14.         vP.getTxtFrase().setText(amdF.pasarMayuscula(vP.getTxtFrase().getText()));
  15.     }
  16.        
  17. }

Tan solo nos falta hacer el metodo Main que genere la Vista y el Modelo y se los pase al Contolador.

Código: Java
  1. public static void main(No tienes permisos para ver links. Registrate o Entra con tu cuenta[] args) {
  2.     ventPrincipal vtP = new ventPrincipal();
  3.     AdministradorFrases admF = new AdministradorFrases();
  4.     ventPrincipalController vtPC = new ventPrincipalController(vtP, admF);
  5.        
  6.     vtP.setLocationRelativeTo(null);
  7.     vtP.setVisible(true);
  8. }

Lo probamos y...







Saludos

Desconectado alexander1712

  • *
  • Underc0der
  • Mensajes: 850
  • Actividad:
    0%
  • Reputación -2
    • Ver Perfil
    • El blog del programador
    • Email
« Respuesta #1 en: Noviembre 30, 2013, 11:12:38 pm »
está bueno para empezar de hecho yo lo uso como base en aplicaciones php, pero hoy en día ya estaría bueno explicar un poco de HMVC.

buen aporte gracias :)

saludos!

Desconectado rezyckller

  • *
  • Underc0der
  • Mensajes: 41
  • Actividad:
    0%
  • Reputación 0
  • Lo unico seguro es que es inseguro.
    • Ver Perfil
    • Invisible Research
    • Email
« Respuesta #2 en: Diciembre 08, 2013, 04:38:16 pm »
Excelente tutorial. Me gusto mucho y esta bastante sencillo de comprender.  :D

Pero parece que me perdí, cómo es que las clases que implementan el Action listener pueden haceder directamente al modelo?  :o



Saludos!

  rezyckller


Desconectado Expermicid

  • *
  • Underc0der
  • Mensajes: 457
  • Actividad:
    0%
  • Reputación 0
  • _-Expermicid-_
    • Ver Perfil
  • Skype: expermicid.xd
« Respuesta #3 en: Diciembre 08, 2013, 10:32:36 pm »
El controlador recibe en su constructor la vista y el modelo

Código: Java
  1. public ventPrincipalController(ventPrincipal vP, AdministradorFrases amdF) {
  2.        
  3.     this.vP = vP;
  4.     this.amdF = amdF;
  5.        
  6.     this.vP.getBtnMinuscula().addActionListener(new MinusculaListener());
  7.     this.vP.getBtnMayuscula().addActionListener(new MayusculaListener());
  8. }

Por ello puede acceder a ellas.
No se si era esa tu duda.

Saludos

Desconectado rommel360

  • *
  • Underc0der
  • Mensajes: 11
  • Actividad:
    13.33%
  • Reputación 0
    • Ver Perfil
« Respuesta #4 en: Septiembre 04, 2018, 05:50:03 pm »
aunq no le crea pero parece que ya le entiendo un poco mejor a esto de la vista modelo y controlador XD XD. he leido algunos ejemplos y no me quedaba claro pero con esto ya entendi un poco mejor. Entons si sigo tu ejemplo mi controlador aria todo lo que hace en este momento mi vista.  ya que siempre en mis botones de la vista agrego el Listener y alli pongo el codigo para hacer la cierta tarea. ajamm lo implementare en algo pequeño como tu.

y ahora que lea mas sobre sto podre entender lo mejor gracias este post.

+1000000 perro.

Buen post papu

 

¿Te gustó el post? COMPARTILO!