viernes, 30 de diciembre de 2011

Patron de diseño: MVC en Java


El tema principal es, aprender a usar uno de los tantos patrones de diseño que existen para el desarrollo de software pero, en Java. Primero veamos un poco de teoría para ir entendiendo de que va esto.

MVC 
MVC viene de las siglas Modelo Vista Controlador. Es un patrón de diseño de software. Aquí se nos presenta el termino "patrón".
Demos una definición simple:  
Un patrón es la abstracción de una forma concreta que puede repetirse en contextos específicos.
Simple, ¿Verdad? Expliquemos lo en cristiano...
 En el desarrollo de software un patron es una forma, un metodo, una manera, un procedimiento. ¿De que? Pues de realizar las cosas, de llevar a cabo el objetivo, de finalizarlo pero, todo esto segun las caracteristicas de los objetivos de la aplicacion, de alli lo de contexto. Y todo el proceso puede repetirse, por eso el termino "patron".

¿Para que?
Cuando desarrollamos software empezamos a escribir código tal cual como las patadas del ahogado. Osea solo nos importa que el problema (el objetivo del programa) se resuelva. Después, cuando tenemos que hacer otro programa iniciamos desde cero y lo normal es que se repita lo de las patadas de ahogado. Incluso, en nuevos programas es posible que tengamos que escribir código que en aplicaciones anteriores ya habíamos realizado.

Aqui es donde intervienen los patrones de diseño. Un patron de diseño nos ayuda a realizar nuestras aplicaciones de manera que se nos faciliten cosas como: 
  • Facilitan  la comunicacion interna
  • Ahorran tiempo y experimentos inutiles
  • Mejoran la calidad del diseño y la implementacion
Ademas de que actuan como "normas" o "buenas practicas de programacion".
Existen varios tipos de patrones, en este caso hablaremos sobre el patron de diseño MVC.

Como habia mencionado antes MVC es Modelo, Vista y Controlador.
Este patron de diseño nos dice que debemos separar nuestro programa en tres partes. Las cuales son las anteriores y nos indican lo siguiente.

Modelo: Es la parte logica del programa, el que resuelve el problema, el que da el resultado. Aqui van los algoritmos y la parte logica, la crucial.
Controlador: Es la seccion que se comunica con el modelo y la vista, obtiene los datos ingresados por el usuario a traves de la vista y lo manda al modelo para que este realice las operaciones correspondientes.
Vista: Esta parte es la que interactua con el usuario y envia los datos al controlador para que se realice la comunicacion con el modelo.

Podriamos decir que el modelo es la parte donde mas vamos a tardar pues es donde debemos resolver el problema. El controlador va muy ligado a la vista y estas dos partes son lo mas facil de realizar, relativamente.

Ahora que ya sabemos que debe hacer cada parte pongamos un ejemplo de algun programa que nos hayan pedido. Digamos que nos encargan realizar un programa que convierta una cantidad a pesos(MXN) y a Dolares(USD).

Realizamos un analisis del problema y ya sabemos como obtener el resultado.
Sabemos que un dolar vale 13,943 pesos y que un peso vale 0.072 dolares.
Entonces las operaciones para realizar la conversion serian: 
moneda * cantidad

Entonces ya tenemos como resolver el problema principal, ahora podemos empezar a escribir codigo.
Lo primero es el modelo. Crearemos un paquete que se llame mvc. En el que iran tres clases.
Modelo.java, Vista.java y Controlador.java.

Coloquemos el codigo de el Modelo:
package mvc;

public class Modelo {
 
 private Double moneda;
 private Double cantidad;
 private Double resultado;
 
 public void setMoneda(Double moneda) {
  this.moneda = moneda;
 }
 public void setCantidad(Double cantidad) {
  this.cantidad = cantidad; 
 }
 public Double getResultado() {
  return resultado;
 }
 public void convetirDolarAPeso() {
  resultado = cantidad * moneda;
 }
 public void convertirPesoADolar() {
  resultado = cantidad * moneda;
 }
}
Explicacion: 
La clase Modelo establece tres variables de clase o globales(atributos) y cinco metodos. Las variables son accedidas y modificadas por los metodos. Usamos los metodos set y get para modificar el valor de las variables cantidad y moneda. Y usamos los metodos que se encargan de realizar la conversion para obtener el resultado.

Ahora veamos el codigo de la Vista:
package mvc;

import java.awt.BorderLayout;
import java.awt.FlowLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Vista extends JFrame{
 public JButton pesos, dolares;
 private JPanel panelB, panelR;
 public JLabel lResultado;
 public JTextField campoTexto;
 
 public Vista() {
  getContentPane().setLayout(new BorderLayout());
  
  panelB = new JPanel();
  panelB.setLayout(new FlowLayout());
  
  panelR = new JPanel();
  panelR.setLayout(new FlowLayout());
  
  pesos = new JButton("Convertir a Pesos");
  dolares = new JButton("Convertir a Dolares");
  
  lResultado = new JLabel("Resultado:");  
  campoTexto = new JTextField(20);
  
  panelB.add(pesos);
  panelB.add(dolares);
  
  panelR.add(lResultado);
  
  add(campoTexto, BorderLayout.NORTH);
  add(panelB, BorderLayout.SOUTH);
  add(panelR, BorderLayout.CENTER);
 }
}
Explicacion:
La clase vista se encarga de crear los componentes Swing que haran la GUI y no explico mas de UI porque eso es tema aparte =P
Basta con saber que hereda el componente JFrame, que contiene dos paneles, dos botones, un label y un textfield.

La clase Controlador:
package mvc;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JFrame;

public class Controlador implements ActionListener {
 private Modelo modelo;
 private Vista vista;
 private Double cantidad;
 
 public Controlador(Modelo modelo, Vista vista) {
  this.modelo = modelo;
  this.vista = vista;
  
  this.vista.pesos.addActionListener(this);
  this.vista.dolares.addActionListener(this);
 }
 public void iniciarVista() {
  vista.setTitle("Conversor");
  vista.pack();
  vista.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  vista.setLocationRelativeTo(null);
  vista.setVisible(true);  
 }
 public void actionPerformed(ActionEvent evento) {
  if(vista.pesos == evento.getSource()) {
   if(!"".equals(vista.campoTexto.getText())) {
    try{
     cantidad = Double.parseDouble(vista.campoTexto.getText());
     modelo.setCantidad(cantidad);
     modelo.setMoneda(13.943);
     modelo.convetirDolarAPeso();
     vista.lResultado.setText(modelo.getResultado().toString());
    }catch(NumberFormatException e) {
     vista.lResultado.setText("Introduzca una cantidad valida...");
    }
   }
  }
  else if(vista.dolares == evento.getSource()) {
   if(!"".equals(vista.campoTexto.getText())) {
    try{
     cantidad = Double.parseDouble(vista.campoTexto.getText());
     modelo.setCantidad(cantidad);
     modelo.setMoneda(0.072);
     modelo.convertirPesoADolar();
     vista.lResultado.setText(modelo.getResultado().toString());
    }catch(NumberFormatException e) {
     vista.lResultado.setText("Introduzca una cantidad valida...");
    }
   }
  }
 }
}
Explicacion:
La clase Controlador se divide en tres partes importantes, la primera es la declaracion de los atributos de clase y el constructor de la clase. Esta parte crea atributos tipo Modelo y tipo Vista para poder controlar la aplicacion completamente. Ademas le agrega los escuchadores a los botones.

La segunda parte es el metodo iniciarVista(), el cual utilizando la variable vista accede a los componentes Swing correspondientes y realiza las configuraciones para mostrar la ventana(aplicacion).

La tercera parte tiene que ver con los componentes visuales, en este caso los botones que son los que nos dan las ordenes de accion, como la clase implementa la interface ActionListener sobreescribimos el metodo actionPerformed y comprobamos que boton fue clickeado.

Cuando se trata de el boton pesos, sabemos que la cantidad que se encuentra en el campo de texto deben de ser dolares, por lo tanto el valor de la moneda seran 13.943 pesos. Realizamos un parser y usamos el objeto modelo para llamar a los metodos get y set del mismo. Despues realizamos la conversion y establecemos en el label el resultado.

Cuando se trata de el boton dolares el procedimiento es el mismo, solo que esta ves la cantidad se supone esta en pesos, y un peso tiene un valor de 0.072 dolares.

Por ultimo creamos una clase en cualquier paquete que queramos y esta ejecutara nuestra aplicacion.
Por ejemplo:
package ejecutarConversor;

import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

import mvc.Controlador;
import mvc.Modelo;
import mvc.Vista;

public class PruebaConversor {
 public static void main(String arf[]) {
  try {
   UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
  } 
  catch (UnsupportedLookAndFeelException e) {
  }
  catch (ClassNotFoundException e) {
  }
  catch (InstantiationException e) {
  }
  catch (IllegalAccessException e) {
  } 
  Modelo modelo = new Modelo();
  Vista vista = new Vista();
  Controlador controlador = new Controlador(modelo, vista);
  controlador.iniciarVista();
 }
}

Esta clase crea tres objetos que son, del tipo Modelo, del tipo Vista y del tipo Controlador. A este ultimo le pasamos como parametro los otros dos. Por ultimo, por medio del objeto controlador mandamos mostrar la ventana. El bloque try-catch es solo para la skin o look and feel de la aplicacion.

Por ultimo unas screens de la ejecucion.





















Aqui termina la entrada de el patron de diseño MVC, espero que les sirva y que le hayan entendido.