MVC MOSTRAR JPANEL DENTRO DE JFRAME
El patrón de diseño MVC ( Model - View - Controller) ayuda a dividir una aplicación en FrontEnd (la vista, lo que ve el usuario final) y el BackEnd ( El código que hace funcionar la aplicación) permitiendo dar mantenimiento de una forma simple, tanto al FrontEnd y el BackEnd ya que cada uno funciona de forma independiente.
En este tutorial se muestra como dividir una aplicación en diferentes partes, de tal forma que cada una realiza una tarea en especifico, contando con su propia vista, modelo y controlador.
PAQUETES
1.- Como primer paso hay que crear una nueva aplicación, y posteriormente crear la siguiente estructura de paquetes y clases, teniendo las siguientes reglas:
a) El nombre de los paquetes es comienza a escribir con minúsculas, notación camello.
b) El nombre de las clases se comienza a escribir con Mayúsculas, notación Pascal.
c) El nombre de métodos y variables se comienza a escribir con minúsculas, notación camello.
VISTA PANEL
2.- El siguiente paso es diseñar la interfaz de usuario UI, para esto se crea un JPanel de nombre ViewMessage.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.
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 PANEL
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 ModelMesasge.java, junto con los métodos necesarios para modificar estos datos. Para esta practica solo se maneja un dato, el mensaje que se va a mostrar al usuario.
a) Se declara una variable de tipo String con el mensaje inicial, y posteriormente se crean los métodos set y get para ver y modificar el valor de esta variable.
package models;
public class ModelMessage {
private String message = "it´s Works";
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
CONTROLADOR PANEL
4.- Una vez que se crearon la vista y el modelo de datos, se crea la clase ControllerMessage.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 btnHelloActionPerformed().
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.
package controllers;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import views.ViewMessage;
import models.ModelMessage;
public class ControllerMessage implements ActionListener{
private final ViewMessage viewMessage;
private final ModelMessage modelMessage;
public ControllerMessage(ViewMessage viewMessage, ModelMessage modelMessage){
this.viewMessage = viewMessage;
this.modelMessage = modelMessage;
this.viewMessage.jbtnHello.addActionListener(this);
this.viewMessage.jbtnBye.addActionListener(this);
initView();
}
@Override
public void actionPerformed(ActionEvent e) {
if(e.getSource()==viewMessage.jbtnHello)
jbtnHelloActionPerformed();
else if(e.getSource()==viewMessage.jbtnBye)
jbtnByeActionPerformed();
}
private void jbtnHelloActionPerformed(){
modelMessage.setMessage("Hello from MVC Panel");
viewMessage.jlMessage.setText(modelMessage.getMessage());
}
private void jbtnByeActionPerformed(){
modelMessage.setMessage("Bye from MVC Panel");
viewMessage.jlMessage.setText(modelMessage.getMessage());
}
private void initView(){
viewMessage.jlMessage.setText(modelMessage.getMessage());
}
}
VISTA JFRAME
2.- El siguiente paso es diseñar la interfaz de usuario UI que si es visible 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.
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
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.
g) 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 viewMessage para poder visualizarla cuando se precione el jmiMessage.
h) 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.
i) 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.
j) 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.
k) 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 jmiMessageActionPerformed().
l) 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 models.ModelMain;
import views.ViewMessage;
public class ControllerMain implements ActionListener{
ViewMain viewMain;
ViewMessage viewMessage;
ModelMain modelMain;
public ControllerMain(ViewMain viewMain,ViewMessage viewMessage,ModelMain modelMain){
this.viewMain = viewMain;
this.viewMessage = viewMessage;
this.modelMain = modelMain;
this.viewMain.jmiMessage.addActionListener(this);
initView();
}
@Override
public void actionPerformed(ActionEvent e) {
if(e.getSource()==viewMain.jmiMessage)
jmiMessageActionPerformed();
}
public void jmiMessageActionPerformed(){
this.viewMain.setContentPane(viewMessage);
this.viewMain.revalidate();
this.viewMain.repaint();
}
private void initView(){
this.viewMain.setTitle("Hello MVC Panel");
this.viewMain.setLocationRelativeTo(null);
this.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 {
private static ViewMain viewMain;
private static ModelMain modelMain;
private static ControllerMain controllerMain;
private static ViewMessage viewMessage;
private static ModelMessage modelMessage;
private static ControllerMessage controllerMessage;
public static void main(String[] args) {
viewMessage = new ViewMessage();
modelMessage = new ModelMessage();
controllerMessage = new ControllerMessage(viewMessage, modelMessage);
viewMain = new ViewMain();
modelMain = new ModelMain();
controllerMain = new ControllerMain(viewMain,viewMessage , modelMain);
}
}
Comentarios