(http://i.imgur.com/YXlBNhG.jpg)
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.
(http://i.imgur.com/eCuptyU.png)
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
(http://i.imgur.com/1WMqt6a.png)
Dentro de Vista voy a crear un
JFrame Form que lo llamare
ventPrincipal. Le agrego los componentes y lo adecuo a las necesidades.
(http://i.imgur.com/rb9Bimk.png)
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.
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:
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.
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.
import Modelo.AdministradorFrases;
import Vista.ventPrincipal;y creamos dos variable privadas de tipo
ventPrincipal y
AdministradorFrases.
public class ventPrincipalController {
private ventPrincipal vP;
private AdministradorFrases amdF;
}Generamos los Getter y Setter de las variable.
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.
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.
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.
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.
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...
(http://i.imgur.com/Auwb6LM.png)
(http://i.imgur.com/uVQK5sW.png)
(http://i.imgur.com/u9Yv15Q.png)
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
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