Modelo Vista Controlador

Iniciado por Expermicid, Noviembre 30, 2013, 10:49:42 PM

Tema anterior - Siguiente tema

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


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
public void setBtnMayuscula(JButton btnMayuscula) {
    this.btnMayuscula = btnMayuscula;
}
   
public JButton getBtnMayuscula() {
    return this.btnMayuscula;
}
   
public void setBtnMinuscula(JButton btnMinuscula) {
    this.btnMinuscula = btnMinuscula;
}
   
public JButton getBtnMinuscula() {
    return this.btnMinuscula;
}
   
public void setTxtFrase(JTextArea txtFrase) {
    this.txtFrase = txtFrase;
}
   
public JTextArea getTxtFrase() {
    return this.txtFrase;
}


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

Código: java
import javax.swing.JButton;
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
public class AdministradorFrases {
   
    public String pasarMayuscula(String txtOriginal) {
       
        return txtOriginal.toUpperCase();
       
    }
   
    public String pasarMinuscula(String txtOriginal) {
       
        return txtOriginal.toLowerCase();
       
    }
   
}


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
import Modelo.AdministradorFrases;
import Vista.ventPrincipal;


y creamos dos variable privadas de tipo ventPrincipal y AdministradorFrases.

Código: java
public class ventPrincipalController {
   
    private ventPrincipal vP;
    private AdministradorFrases amdF;
   
}


Generamos los Getter y Setter de las variable.

Código: java
public class ventPrincipalController {
   
    private ventPrincipal vP;
    private AdministradorFrases amdF;

    public ventPrincipal getvP() {
        return vP;
    }

    public void setvP(ventPrincipal vP) {
        this.vP = vP;
    }

    public AdministradorFrases getAmdF() {
        return amdF;
    }

    public void setAmdF(AdministradorFrases amdF) {
        this.amdF = amdF;
    }
   
}


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
public ventPrincipalController(ventPrincipal vP, AdministradorFrases amdF) {
       
    this.vP = vP;
    this.amdF = amdF;
       
    this.vP.getBtnMinuscula().addActionListener(new MinusculaListener());
    this.vP.getBtnMayuscula().addActionListener(new MayusculaListener());
}


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

Código: java
public class MinusculaListener implements ActionListener {

    @Override
    public void actionPerformed(ActionEvent e) {
           
    }
       
}
   
public class MayusculaListener implements ActionListener {

    @Override
    public void actionPerformed(ActionEvent e) {
           
    }
       
}


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

Código: Java
public class MinusculaListener implements ActionListener {

    @Override
    public void actionPerformed(ActionEvent e) {
        vP.getTxtFrase().setText(amdF.pasarMinuscula(vP.getTxtFrase().getText()));
    }
       
}
   
public class MayusculaListener implements ActionListener {

    @Override
    public void actionPerformed(ActionEvent e) {
        vP.getTxtFrase().setText(amdF.pasarMayuscula(vP.getTxtFrase().getText()));
    }
       
}


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

Código: java
public static void main(String[] args) {
    ventPrincipal vtP = new ventPrincipal();
    AdministradorFrases admF = new AdministradorFrases();
    ventPrincipalController vtPC = new ventPrincipalController(vtP, admF);
       
    vtP.setLocationRelativeTo(null);
    vtP.setVisible(true);
}


Lo probamos y...







Saludos

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!

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



El controlador recibe en su constructor la vista y el modelo

Código: java
public ventPrincipalController(ventPrincipal vP, AdministradorFrases amdF) {
       
    this.vP = vP;
    this.amdF = amdF;
       
    this.vP.getBtnMinuscula().addActionListener(new MinusculaListener());
    this.vP.getBtnMayuscula().addActionListener(new MayusculaListener());
}


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

Saludos

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