Java MVC y Conexión a Base de Datos MySQL
El patrón de diseño MVC permite separar los datos de la lógica del negocio, a la vez que se mantiene una estructura que es fácil de mantener, en este ejemplo se muestra, como realizar una conexión a una base de datos para navegar entre los registros.
PACKAGES
1. El primer paso es crear la estructura del proyecto, como se muestra en la imagen siguiente, como se puede ver, también existe un paquete llamado sql, en este se almacena el script para crear la base de datos agenda, con la que se establecerá conexión.
LIBRERÍAS
2. Para poder realizar la conexión a la base de datos MySQL se agregaran al proyecto las siguientes librerías:
a) MySQL JDBC Driver
b) DBConnection
La librería DBConnection se puede descargar de la siguiente dirección https://github.com/salvadorhm/DBConnection, no es indispensable su uso, pero el utilizarla facilita la conexión, ya que contiene métodos para conectarse, realizar consultas, llenar JTable, etc. además de atrapar las excepciones que puedan ocurrir durante la conexión o consulta de los datos, en la descarga se incluye un ejemplo de su uso y la documentación necesaria.
DATABASE
3.- A continuación se muestra un script para crear la base de datos agenda y la tabla contactos, con los campos de idContacto, nombre, teléfono y email, que permitirán mostrar el objetivo de la práctica.
--
-- Base de datos: agenda
--
CREATE DATABASE IF NOT EXISTS agenda;
USE agenda;
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla contactos
--
CREATE TABLE IF NOT EXISTS contactos (
idContacto int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
nombre varchar(100) NOT NULL,
telefono varchar(10) NOT NULL,
email varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
--
-- Volcado de datos para la tabla contactos
--
INSERT INTO contactos (idContacto, nombre, telefono, email) VALUES
(1, 'María del Valle', '7757512345', 'maria.valle@gmail.com'),
(2, 'José Iguain', '7757523456', 'jose.iguain@gmail.com');
VISTA CONTACTOS
4. Una vez que se creo la base de datos y se agregaron las librerías, se diseña la interfaz para navegar por los registros, en este caso es el archivo ViewContacts.java, y el diseño se muestra a continuación.
5. Una vez insertado los componentes se re-nombran como se muestra en la imagen, para mantener uniformidad en los nombre de los campos y los componentes, lo que facilita su uso.
Modelo Contactos
6. En el archivo ModelContacts.java, se crean una propiedad o variable miembro para cada uno de los campos de la tabla Contactos, este paso nos permite generar persistencia entre la programación y la estructura de la base de datos.
A- Para realizar la conexón se importa la librería sax.DBConnection y se crea una instancia del esta clase, donde se realiza la configuración de la conexión con la base de datos, con los parámetros Servidor, base de datos, usuario, contraseña.
private DBConnection conection = new DBConnection("localhost", "agenda", "root", "");
B- La clase DBConnection tiene los siguientes métodos para realizar las consultas y recorrer los registros.
moveFirst()
moveLast()
moveNext()
movePrevious()
executeQuery(String consulta)
ModelContacts.java
package models;
import sax.DBConnection;
public class ModelContacts {
private DBConnection conection = new DBConnection(3306,"localhost", "agenda", "root", "");
private int idContacto;
private String nombre;
private String telefono;
private String email;
public int getIdContacto() {
return idContacto;
}
public void setIdContacto(int idContacto) {
this.idContacto = idContacto;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getTelefono() {
return telefono;
}
public void setTelefono(String telefono) {
this.telefono = telefono;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public void moveNext(){
conection.moveNext();
setValues();
}
public void movePrevious(){
conection.movePrevious();
setValues();
}
public void moveFirst(){
conection.moveFirst();
setValues();
}
public void moveLast(){
conection.moveLast();
setValues();
}
public void initValues(){
conection.executeQuery("SELECT idContacto, nombre, telefono, email FROM contactos;");
conection.moveNext();
setValues();
}
public void setValues(){
this.idContacto = conection.getInteger("idContacto");
this.nombre = conection.getString("nombre");
this.telefono = conection.getString("telefono");
this.email = conection.getString("email");
}
}
CONTROLADOR CONTACTOS
4.- Una vez que se crearon la vista y el modelo de datos, se crea la clase ControllerContactos.java, que tiene como objetivo la implementación de las reglas de negocio, en otras palabras controla el flujo de la información durante la ejecución de la aplicación.
a) Como primer paso se importan los paquetes models y views, que contienen la vista y el modelo de datos.
b) Es necesario que se implemente la interface ActionListener, para que la clase este preparada para “escuchar” las acciones que sucedan en la UI, si se necesitan escuchar otros eventos, por ejemplo los del mouse, se separan en la clase con , los diferentes Listeners.
c) Una vez que se implemento el Listener, se sobre escribe el método abstracto actionPerformed, que es el método que puede reconocer que componente de la UI genero la acción a través de la variable ActionEvent.
d) Como siguiente paso se crea el constructor de la clase, donde se reciben como parámetros la vista y el modelo, para posteriormente iniciar la variable miembro, este paso permite tener acceso tanto a la UI como a los datos y métodos de estos.
e) Para cada uno de los botones creados, se genera un método actionPerformed, con la finalidad de separar el funcionamiento para cada uno de los componentes, estos métodos se pueden crear con el nombre del botón mas el nombre del evento, tal como se muestra en el código:
a) moveNextActionPerformed().
b) movePreviousActionPerformed().
c) moveLastActionPerformed().
d) moveFirstActionPerformed().
f) Se crea un método llamado initView() que es el que se encarga de inicializar la vista, como un JPanel es un contenedor, es decir su función es la de agrupar componentes, no es posible visualizarla sin ayuda de un JFrame, así que esta función de desarrollará más adelante.
g) Para este ejercicio se crea un método llamado showValues() que tiene como función tomar los datos del idContacto, nombre, telefono y email alamacenados en el modelo, y mostrarlos en las cajas de texto del la vista.
package controllers;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import views.ViewContacts;
import models.ModelContacts;
public class ControllerContacts implements ActionListener {
private final ViewContacts viewContacts;
private final ModelContacts modelContacts;
public ControllerContacts(ViewContacts viewContacts, ModelContacts modelContacts){
this.viewContacts = viewContacts;
this.modelContacts = modelContacts;
this.viewContacts.jbtnFirst.addActionListener(this);
this.viewContacts.jbtnPrevious.addActionListener(this);
this.viewContacts.jbtnNext.addActionListener(this);
this.viewContacts.jbtnLast.addActionListener(this);
initView();
}
private void initView(){
modelContacts.initValues();
getValues();
}
@Override
public void actionPerformed(ActionEvent e) {
if(e.getSource()==viewContacts.jbtnFirst)
jbtnFirstActionPerformed();
else if(e.getSource()==viewContacts.jbtnPrevious)
jbtnPreviousActionPerformed();
else if(e.getSource()==viewContacts.jbtnNext)
jbtnNextActionPerformed();
else if(e.getSource()==viewContacts.jbtnLast)
jbtnLastActionPerformed();
}
private void jbtnFirstActionPerformed(){
modelContacts.moveFirst();
showValues();
}
private void jbtnPreviousActionPerformed(){
modelContacts.movePreviousActionPerformed();
showValues();
}
private void jbtnNextActionPerformed(){
modelContacts.moveNext();
showValues();
}
private void jbtnLastActionPerformed(){
modelContacts.moveLast();
showValues();
}
private void showValues(){
viewContacts.jtfIdContacto.setText(""+modelContacts.getIdContacto());
viewContacts.jtfNombre.setText(modelContacts.getNombre());
viewContacts.jtfTelefono.setText(modelContacts.getTelefono());
viewContacts.jtfEmail.setText(modelContacts.getEmail());
}
}
VISTA JFRAME
2.- El siguiente paso es diseñar la interfaz de usuario UI que si se puede visualizar por si misma, para esto se crea un JFrame de nombre ViewMain.java, y se agregan los componentes que se van a utilizar, en este caso se hará una interfaz como la que se muestra a continuación. En la siguiente imagen se puede ver una barra de menú y un menuItem que al presionarlo mostrarla el panel Contactos.
a) Los componentes se nombran como se muestra en la siguiente imagen.
b) Posteriormente a cada uno de los componentes se cambia el nivel de acceso a public. Este paso es importante porque permitirá el poder controlar el funcionamiento de la interfaz desde la clase controlador correspondiente.
MODELO JFRAME
3.- Una vez que se diseño la interfaz del usuario UI, se genera el modelo de datos que se va a utilizar, en este ejemplo se crea la clase ModelMain.java, junto con los métodos necesarios para modificar estos datos. En este caso el modelo no contiene datos, aun así se crea para mantener la estructura del MVC.
package models;
public class ModelMain {
}
CONTROLADOR MAIN
4.- Una vez que se crearon la vista y el modelo de datos, se crea la clase ControllerMain.java, que tiene como objetivo la implementación de las reglas de negocio, en otras palabras controla el flujo de la información durante la ejecución de la aplicación, además de visualizar el panel que se desarrollo anteriormente.
h) Como primer paso se importan los paquetes models y views, que contienen la vista y el modelo de datos, en este caso también se importa la vista del panel viewContacts para poder visualizarla cuando se precione el jmiContacts.
i) Es necesario que se implemente la interface ActionListener, para que la clase este preparada para “escuchar” las acciones que sucedan en la UI, si se necesitan escuchar otros eventos, por ejemplo los del mouse, se separan en la clase con , los diferentes Listeners.
j) Una vez que se implemento el Listener, se sobre escribe el método abstracto actionPerformed, que es el método que puede reconocer que componente de la UI genero la acción a través de la variable ActionEvent.
k) Como siguiente paso se crea el constructor de la clase, donde se reciben como parámetros la vista y el modelo, para posteriormente iniciar la variable miembro, este paso permite tener acceso tanto a la UI como a los datos y métodos de estos.
l) Para cada uno de los jMenuItem creados, se genera un método actionPerformed, con la finalidad de separar el funcionamiento para cada uno de los componentes, estos métodos se pueden crear con el nombre del JMenuItem mas el nombre del evento, tal como se muestra en el código jmiContactsActionPerformed().
m) Se crea un método llamado initView() que es el que se encarga de hacer visible la vista y configurar su ubicación y titulo; Este método se llama dentro del controlador como última línea, lo que hará que cuando se cree la instancia del controlador, este hará visible automáticamente la vista.
package controllers;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import views.ViewMain;
import views.ViewContacts;
import models.ModelMain;
public class ControllerMain implements ActionListener{
private final ViewMain viewMain;
private final ViewContacts viewContacts;
private final ModelMain modelMain;
public ControllerMain(ViewMain viewMain, ViewContacts viewContacts, ModelMain modelMain){
this.viewMain = viewMain;
this.viewContacts = viewContacts;
this.modelMain = modelMain;
this.viewMain.jmiContacts.addActionListener(this);
initView();
}
@Override
public void actionPerformed(ActionEvent e) {
if(e.getSource()==viewMain.jmiContacts)
jmiContactsActionPerformed();
}
public void jmiContactsActionPerformed(){
viewMain.setContentPane(viewContacts);
viewMain.revalidate();
viewMain.repaint();
}
private void initView(){
viewMain.setTitle("Hello MVC Panel DataBase");
viewMain.setLocationRelativeTo(null);
viewMain.setVisible(true);
}
}
MAIN
5.- Para que todo funcione es necesario crear el punto de entrada o método main, para esto se crea la clase Main.java.
a) Para unir todas las clases se importan los paquetes views, models, controllers.
b) Se crear una variable por cada clase.
c) Se crean instancias para las vistas, modelos y estas se pasan como parámetro en el controlador.
d) En este caso primero se inicializa el JPanel y después el JFrame, ya que su constructor recibe como uno de los parámetros a la vista del Panel, para poder mostrarla cuando el usuario haga clic en el JMenuItem.
e) Después se ejecuta la aplicación y se comprueban los resultados.
package main;
import views.*;
import models.*;
import controllers.*;
public class Main {
public static void main(String[] args) {
ViewContacts viewContacts = new ViewContacts();
ModelContacts modelContacts = new ModelContacts();
ControllerContacts controllerContacts = new ControllerContacts(viewContacts, modelContacts);
ViewMain viewMain = new ViewMain();
ModelMain modelMain = new ModelMain();
ControllerMain controllerMain = new ControllerMain(viewMain, viewContacts, modelMain);
}
}
RESULTADO DE LA EJECUCIÓN
Comentarios