▷ Curso de JAVA: Como cambiar de un JPanel a otro con botón siguiente y atrás

En el presente POST estaremos abordando un tema de suma importancia como lo es el control de las vistas en nuestras aplicaciones, cuando trabajamos con una interfaz gráfica en java hacemos uso de una ventana JFrame, la cual nos sirve para agregar los distintos componentes que se requieran; 
por Ej: 
Botones, Etiquetas de texto, Tablas, etc. 
Para tener un mejor control de nuestros componentes y teniendo en cuenta que la mayoría de nuestros proyectos poseen varios módulos o secciones hacemos uso de un Panel en el cual agregamos los diferentes componentes que utilizaremos (nosotros en este ejemplo trabajaremos con la clase JPanel). Generalmente estos paneles están ocultos y dependiendo las opciones que se elijan se hacen visible, un ejemplo claro de esto, seria un menú de opciones en el cual el usuario selecciona un ítem el cual lo redirige a una nueva sección. 
En este ejemplo utilizaremos dos botones (Siguiente/atrás) en el cual dependiendo el botón seleccionado ocultaremos o haremos visible un panel(JPanel) 

Si aun tienes dudas acerca de como crear un proyecto, ventanas JFrame, etc. Te invito a que mires el siguiente POST  Curso de JAVA: Cómo hacer un proyecto, un paquete y un formulario?

No siendo mas comencemos!!!

Múltiples JPanel Java

Explicación por Videotutorial:

Explicación por Foto-Tutorial:

Para realizar nuestro ejemplo, vamos a trabajar con tres clases; dos de estas harán referencia a los JPanel que utilizaremos y la otra clase sera nuestra clase principal.

1.   Una vez creado nuestro proyecto al cual hemos llamado Jpanel_multiple, creamos un nuevo paquete al cual llamaremos images.
Nos posicionamos en nuestro proyecto, seleccionamos la opción Source Packages, oprimimos click derecho y seleccionamos la opción New seguido a esto seleccionamos la opción Java Package.

Crear Nuevo Paquete

Seguido a esto nos aparecerá la siguiente ventana en la cual debemos ingresar el nombre del paquete el cual le llamaremos images, para finalizar oprimimos el botón finish.

paquete images

Una vez creado nuestro paquete, agregamos dos imágenes(next.png, previous.png) las cuales estaremos utilizando mas adelante en nuestro proyecto.

agregamos imágenes

2. El siguiente paso sera crear un JPanel para esto nos posicionamos en el paquete que contiene nuestra clase principal (jpanel_multiple) y repetimos el proceso anterior, oprimiendo click derecho seleccionamos la opción New seguido a esto seleccionamos la opción JPanel Form.

Seguido a esto, asignaremos un nombre a la clase que hemos creado  repetiremos este proceso dos veces y de estar manera crear dos clases, las cuales serán nuestros JPanel los llamaremos panel1 y panel2

creamos un JPanel Form

Asignamos un nombre al JPanel

3. Para finalizar con la creación de las clases que estaremos utilizando en este ejemplo, procedemos a crear nuestra clase principal, la cual contendrá la ventana JFrame donde visualizaremos los JPanel que hemos creado, Repetimos el proceso de creación de las clases con la diferencia que seleccionaremos la opción JFrame Form.
Acto seguido asignaremos un nombre a nuestra clase JFrame, para este ejemplo le llamaremos principal.

Asignar nombre clase JFrame java

4. Una vez creada la clase principal, se habilitara nuestra área de trabajo que tendrá la opción design la cual es para posicionar los componentes o elementos con los que trabajaremos, igualmente estará la sección Source en la cual podremos tener acceso al código de nuestra clase y manejar los eventos que crearemos. 

opciones Source And Design

Área de trabajo Clase JFrame

Clase principal 

5. Nos posicionamos en el área de diseño de nuestro JFrame,  en la parte derecha de la ventana tendremos unas opciones que son los componentes que podemos agregar a nuestra ventana JFrame, seleccionamos el componente Panel(JPanel) y lo arrastramos hasta nuestra área de trabajo de la ventana JFrame. 

Agregamos un Panel al JFrame

El Panel debe tener el mismo ancho y alto que nuestra ventana JFrame 

JPanel agregado a la ventana JFrame

Una vez asignado el ancho y alto a nuestro JPanel,  nos posicionamos en el área de trabajo y oprimimos click derecho, seleccionamos la opción Set Layout para este ejemplo trabajaremos con BorderLayout por lo tanto seleccionamos el ítem referente a este Layout.
Este Layout(BorderLayout) dividirá el área de trabajo de nuestro JPanel en 5 regiones, las cuales serán: arriba, abajo, izquierda, derecha y centro.
Esto quiere decir que los componentes que agregaremos al JPanel serán distribuidos en estas 5 regiones.

Seleccionamos un Layout

6. Nos posicionamos en nuestro JPanel oprimimos click derecho y seleccionaremos la opción Properties, esto con el fin de cambiar el nombre de nuestro objeto JPanel el cual para este ejemplo lo llamaremos contenedor.

Seleccionar opción Properties

Cambiar nombre JPanel

7. Agregamos otro JPanel, lo posicionaremos en el JPanel ya creado(contenedor) el nuevo Panel debemos agregarle una propiedad esencial y es la posición en que queremos que este aparezca, para este ejemplo el nuevo JPanel lo posicionaremos en la parte de abajo.

Agregar JPanel

Seleccionamos la opción properties 

Buscaremos la sección que dice Layout, le asignaremos una nueva propiedad al atributo Direction, como deseamos agregar el JPanel en la parte de abajo debemos seleccionar el ítem South.

posicionar JPanel

8.  El siguiente paso será seleccionar el Layout con el cual administraremos la ubicación de los componentes del JPanel creado, para esto elegiremos FlowLayout el cual nos permitirá agregar componentes de forma horizontal uno seguido de otro.

Seleccionar Layout

9.  Agregamos dos JButton al JPanel que se encuentra posicionado en la parte de abajo de nuestro JPanel contenedor, debemos agregarle ciertas propiedades a estos botones ya que estos serán nuestros botones anterior y siguiente.

Agregamos Dos JButton (anterior y siguiente)

Iniciamos con el primer JButton, este sera nuestro botón regresar el cual iniciamos cambiando el tipo de fuente, para este ejemplo le asignaremos la fuente Tahoma 14 Bold.

Asignar Fuente

El siguiente paso sera agregar un icono a nuestro JBtutton, para esto seleccionamos esta opción para poder realizar el cambio.

seleccionar icono

Nos posicionamos en el menú desplegable(Package) y seleccionaremos el paquete en el cual se encuentra alojadas las imágenes, en este caso es el paquete images.

seleccionamos paquete

Una vez seleccionado el paquete, elegimos el menú desplegable(File) y seleccionamos la imagen que necesitamos, en este caso sera la imagen previous.png, una vez hecho eso oprimimos el botón OK.

seleccionar icono

Para finalizar, cambiaremos el texto de nuestro JButton el cual llevara por texto anterior

Este proceso se repetirá para el JButton restante, solo se deben cambiar las propiedades respectivas como lo son: el texto, el icono y nombre del objeto.

Para finalizar le hemos cambiado el nombre a los respectivos JButton (btn_anterior/btn_siguiente).

cambiar nombre objetos

10. Una vez creada la interfaz gráfica de nuestra clase principal igualmente debemos hacerlo con las clases panel1 y panel2 las cuales solo contendrán un mensaje y un color de fondo para identificar cuando el cambio de Panel se efectué.

Clase Panel1

clase Panel2

11. Una vez terminada la creación de las interfaces gráficas, volvemos a la clase principal y escribiremos la palabra clave implements seguido de la interfaz ActionListener, esto con el fin de trabajar con eventos.

Llamamos la interfaz ActionListener

Seleccionamos la opción implementar todos los métodos abstractos y de esta manera evitar errores.

implementamos todos los métodos abstractos

12. El siguiente paso sera asignarle eventos a nuestros JButton, para esto nos posicionamos en el método constructor y escribimos las siguientes lineas de código.


btn_anterior.addActionListener(this);

btn_siguiente.addActionListener(this);

NOTA: Tener en cuenta que estas lineas de código, se agregan después del la llamada al método initComponents();

asignamos un evento a cada JButton

13. Siguiendo en nuestra clase principal, crearemos dos objetos de tipo panel1 y panel2 recordemos que estas son las clases pertenecientes a los JPanel que deseamos visualizar en nuestra ventana JFrame.

Creamos dos objetos de tipo panel1 y panel2

14. Lo siguiente que haremos sera crear un método el cual nos permitirá habilitar y deshabilitar un JButton. 

¿Porque hacemos esto? el botón se deshabilitara dependiendo el Jpanel que se vaya a visualizar por Ej. si el panel1 esta visible quiere decir que el JButton a deshabilitar seria el botón anterior(btn_anterior) y si el panel2 esta visible se habilitaría el botón anterior(btn_anterior) y se deshabilitara el botón siguiente(btn_siguiente).

método deshabilitarBoton

15. Regresamos al método constructor, y agregamos dos lineas de código, porque necesitamos que a la hora de ejecutar nuestra aplicación, por lo menos se visualice uno de los JPanel, para esto debemos escribir las siguientes lineas de código.

contenedor.add(panel1);

Llamamos nuestro objeto contenedor(Jpanel) y haremos uso del método add() y de esta manera agregar un nuevo componente que sera nuestro objeto de tipo JPanel(panel1).

Para finalizar llamamos el método que creamos en el paso anterior deshabilitarBoton()

agregamos un JPanel inicial al contenedor

16. Para finalizar nos posicionamos en el método actionPerformed el cual podremos administrar los eventos o acciones a realizar dependiendo el JButton que oprimamos. 

Creamos dos condicionales en los cuales verificamos el JButton que hemos seleccionado, si oprimimos el botón anterior(btn_anterior). Debemos agregar al contenedor el panel1(contenedor.add(panel1);), acto seguido hacemos visible el panel1 haciendo uso del método setVisible(true) y ocultamos el panel2(setVisible(false)).

Para efectuar los cambios debemos hacer uso del método validate() y de esta manera se actualizara nuestra ventana.

Este mismo proceso se repite en el siguiente condicional con la diferencia que debemos hacer visible el panel2.

creamos condicionales para cada JButton

17. Ejecutamos nuestro proyecto y obtenemos el siguiente resultado.

captura proyecto java

captura proyecto java

Con esto hemos concluido con el desarrollo de nuestro proyecto, te invitamos a seguir viendo otros temas interesantes y seguir obteniendo conocimientos acerca de este amplio mundo del desarrollo de software.

Espero este tutorial te haya sido de gran ayuda y pronto estaremos tratando otros temas interesantes.

Si tienes alguna  otra forma de implementar esta ejemplo no dudes en compartirla, y así poder compartir opiniones sobre el tema.

Si deseas descargar el código fuente del presente tema, sólo debes dirigirte a nuestra Zona de Descargas, y dar clic sobre el icono "Curso de JAVA Parte 24".

¿Quieres aprender a realizar aún más cosas y personalizar tus programas hechos en el lenguaje de programación JAVA?, si tu respuesta es "Sí", puedes acceder a todos los tips de JAVA que hemos estado publicando en este blog, dando clic aquí.
 

Suscríbete a nuestro blog, vía Email o RSS; además puedes seguirnos a través de nuestras redes sociales como: Facebook, Twitter, YouTube y Google+. 

Si te fue de gran ayuda este material, no olvides compartirlo con tus amigos. 
Si tienes dudas o sugerencias al respecto; puedes dejarnos tus comentarios.

Bendiciones...