Fecha y hora actual: Sábado 24 Ago 2019 04:21
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Lección 96: Bordes predefinidos y Layout Managers

Responder al Tema

Índice del Foro > Programación en general > Lección 96: Bordes predefinidos y Layout Managers

Autor Mensaje
Kyshuo Ayame
Moderador Global


Registrado: 07 Ene 2011
Mensajes: 1043

Mensaje Publicado: Miércoles 17 Jul 2013 18:30

Título del mensaje: Lección 96: Bordes predefinidos y Layout Managers

Responder citando

Layout Managers

Lo único que hemos visto hasta ahora de los gestores de disposición (layout managers) ha sido sobre FlowLayout como disposición de flujo. Vagamente comenté que Swing utiliza estos gestores para “saber” cómo deben dibujarse los componentes en una interfaz gráfica, o mejor dicho, los layout managers son quienes “dicen” o indican a Java cómo deben mostrarse los componentes.

La idea básica es que cada contenedor que utilicemos para armar nuestra GUI tenga su propio gestor de disposición con el fin de que cada panel pueda mostrar los componentes según convenga independientemente de los demás paneles que le circunden.

Si bien los gestores de disposición ahorran mucho trabajo al programador a la hora de implementar GUIs, pueden ser un dolor de cabeza o una experiencia traumática para algunos ya que muchas veces no es fácil lograr lo que se quiere y pues, su curva de aprendizaje es bastante pronunciada. En este curso veremos lo básico sobre los layout managers con el fin de conocer los más comunes y cómo utilizarlos en nuestros programas; luego utilizaremos más que nada el editor gráfico de NetBeans para generar interfaces gráficas de un modo más rápido que si lo hiciéramos a pulmón.

Antes de atacar de lleno el tema de los layout managers veamos cómo asignar de forma sencilla bordes a un panel.

==============================================

Uso básico de bordes:

Muchos componentes pueden tener bordes pero nosotros básicamente nos enfocaremos en los paneles. El borde representa justamente al límite gráfico de un panel, es decir, cómo se dibuja. Por defecto los paneles tienen un borde vacío o emptyBorder.
Quién representa a los bordes es la interfaz Border y se encuentra en el paquete javax.swing.border. La clase JPanel contiene una operación llamada setBorder cuya firma es:

Código:
  1. public void setBorder(Border border)


Por tanto lo único que se espera es un objeto Border que especifique cómo debe dibujarse el borde del panel cuando este sea visible en la GUI. Aquí se preguntarán ¿cómo creo un objeto Border? Una forma sería crear una clase que implemente a la interfaz Border y dar método a sus operaciones; la otra es utilizar una clase muy sencilla llamada BorderFactory (fábrica de bordes). A mi me gusta mucho la idea de usar esa clase porque ya contiene lo más usado y nos facilita mucho la vida. Veamos un ejemplo donde creo una ventana con un único panel al que le daré un borde con título. ¿Qué es un borde con título? Pues ya lo verán:

Código:
  1. import javax.swing.border.Border;
  2.  
  3. public class Ventana extends JFrame{
  4. JPanel panel;
  5.  
  6. public Ventana(){
  7. panel= new JPanel();
  8. Border borde;// Un objeto Border.
  9. borde= BorderFactory.createTitledBorder("Un borde con título");
  10. panel.setBorder(borde);
  11.  
  12. setContentPane(panel);
  13. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  14. setLocationRelativeTo(null);
  15. setVisible(true);
  16. setSize(200,100);
  17. }
  18. }


Lo nuevo en ese código radica en las líneas 2, 3 y 4 del constructor de Ventana que es donde creamos y agregamos un borde al panel de contenido. La clase BorderFactory posee una operación estática que crea y retorna un borde con título cuya firma es:

Código:
  1. public static TitledBorder createTitledBorder(String title)


Verán que esta operación en vez de retornar algo de tipo Border retorna algo de tipo TitledBorder. Bien, TitledBorder es una clase que extiende a AbstractBorder la cual implementa a la interfaz Border, por tanto un objeto TitledBorder es también un objeto Border (herencia por doquier).
Usando esa operación inicializamos a la variable borde mediante esta instrucción:

Código:
  1. borde= BorderFactory.createTitledBorder("Un borde con título");


Luego asigno a dicha variable como borde del panel:

Código:
  1. panel.setBorder(borde);


Espero que quede claro que podría haberme ahorrado la declaración de la variable borde y haber hecho la asignación así:

Código:
  1. panel.setBorder(BorderFactory.createTitledBorder("Un borde con título"));


Bien, con ese código veremos lo siguiente:



Seguramente habrán visto cosas así en un sin fin de aplicaciones a lo largo de su vida.

El uso de BorderFactory se resume entonces a eso, a utilizar una de sus operaciones estáticas que nos retorne un borde según lo que queremos. Hay muchas las cuales pueden ver en NetBeans o en la documentación oficial de Oracle:

http://docs.oracle.com/javase/7/docs/api/javax/swing/BorderFactory.html

Podría dar muchos ejemplos sobre esto pero creo que es sencillo y que ustedes podrán darle uso sin problemas. Veremos luego más ejemplos de esto aunque no creo que hagan falta.

===============================================

El gestor FlowLayout:

Anteriormente vimos que por defecto todo panel creado posee como gestor de disposición a un objeto del tipo FlowLayout. Este gestor es el más básico y “libre” ya que lo único que hace es dibujar a los componentes según el orden en que se agregan al panel intentando completar el espacio disponible. En general los componentes se organizan de izquierda a derecha y de arriba hacia abajo (tal como leemos un texto). La clase FlowLayout posee operaciones para configurar un poco la alineación de los componentes así como el espacio horizontal y vertical entre ellos. Ya vimos ejemplos de esto y pues los invito a leer la documentación:

http://docs.oracle.com/javase/7/docs/api/java/awt/FlowLayout.html

==============================================

El gestor BoxLayout:

Este layout manager permite colocar a los componentes de un panel ordenados de forma horizontal (sobre el eje X) o bien, de forma vertical (sobre el eje Y). Aquí se hace referencia a los ejes de un sistema cartesiano, es decir, el típico dibujo de ejes matemáticos:



No se preocupen que no tendremos que empezar a ver coordenadas ni mucho menos, simplemente es una alución a esto porque internamente se utiliza muchísimo para dibujar las GUIs. Para visualizar los distintos tipos de gestores crearemos una aplicación que mostrará una ventana con distintos paneles, cada uno tendrá un distinto layout manager. A medida que avancemos iremos agregando código a dicha aplicación para agregar más paneles. Comencemos así:

Código:
  1. import java.awt.FlowLayout;
  2. import javax.swing.*;
  3.  
  4. public class Ventana extends JFrame{
  5. JPanel panelPrincipal, panelConFlow, panelConBox;
  6. JButton boton1, boton2, boton3, boton4, boton5, boton6;
  7.  
  8.  
  9. public Ventana(){
  10. panelPrincipal= new JPanel(); //Creamos el panel principal.
  11.  
  12. /* CREAMOS EL PANEL CON FLOW LAYOUT
  13.   * A este panel le agregaremos los botones 1, 2 y 3.
  14.   */
  15. panelConFlow= new JPanel(new FlowLayout(FlowLayout.RIGHT));
  16. panelConFlow.setSize(50,100);
  17. panelConFlow.setBorder(BorderFactory.createTitledBorder("FlowLayout"));
  18. boton1= new JButton("Boton1");
  19. boton2= new JButton("Boton2");
  20. boton3= new JButton("Boton3");
  21. panelConFlow.add(boton1);
  22. panelConFlow.add(boton2);
  23. panelConFlow.add(boton3);
  24.  
  25. /* CREAMOS EL PANEL CON BOX LAYOUT
  26.   * El layout manager será establecido para que ordene los componentes
  27.   * según el eje Y. Notar que el constructor de BoxLayout no es tan
  28.   * simple como el de FlowLayout. El detalle está en el curso.
  29.   * A este panel le agregamos los botones 4, 5 y 6.
  30.   */
  31. panelConBox= new JPanel();
  32. panelConBox.setLayout(new BoxLayout(panelConBox, BoxLayout.Y_AXIS));
  33. panelConBox.setSize(50,100);
  34. panelConBox.setBorder(BorderFactory.createTitledBorder("BoxLayout"));
  35. boton4= new JButton("Boton4");
  36. boton5= new JButton("Boton5");
  37. boton6= new JButton("Boton6");
  38. panelConBox.add(boton4);
  39. panelConBox.add(boton5);
  40. panelConBox.add(boton6);
  41.  
  42. //AGREGAMOS LOS PANELES AL PANEL PRINCIPAL
  43. panelPrincipal.add(panelConFlow);
  44. panelPrincipal.add(panelConBox);
  45.  
  46. setContentPane(panelPrincipal);
  47. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  48. setLocationRelativeTo(null);
  49. setVisible(true);
  50. setSize(360,160);
  51. }
  52. }


El código está comentado de modo que puedan ir siguiendo lo que se está haciendo en cada paso, sin embargo hay que resaltar lo referente a BoxLayout, en concreto estas líneas:

Código:
  1. panelConBox= new JPanel();
  2. panelConBox.setLayout(new BoxLayout(panelConBox, BoxLayout.Y_AXIS));


El constructor de BoxLayout recibe dos argumentos: el componente objetivo (quién va a ser gestionado) y un entero indicando la forma de ordenar los componentes pudiendo ser:

  • BoxLayout.X_AXIS
  • BoxLayout.Y_AXIS
  • BoxLayout.LINE_AXIS
  • BoxLayout.PAGE_AXIS


El problema que puede presentarse es que, a diferencia de lo que sucede con FlowLayout, no podemos agregar este layout directamente sobre el constructor de JPanel. ¿Por qué? Pues porque el constructor de BoxLayout requiere una referencia al componente objetivo y no podemos pasar como referencia un componente que aún no ha sido inicializado; en concreto, estamos construyendo el panel, pero para construirlo necesitaríamos primero tener el layout manager quién necesita del panel, por tanto verán que no se puede. Si lo hacen tendrán un error con el mensaje

BoxLayout can't be shared

Por tanto lo mejor es, primero crear el panel y luego sí asignar el gestor BoxLayout. En Internet verán otras alternativas a esto. El gestor de mi ejemplo fue inicializado con Y_AXIS, o sea, para dibujar según el eje Y, por tanto los componentes quedarán alineados verticalmente. La visual de ese código será esta:



Verán que el borde con título aquí resulta muy útil para ilustrar las explicaciones.

===============================================

El gestor GridLayout:

Este gestor divide al panel en celdas formando una tabla donde todas las celdas tienen las mismas dimensiones, es decir que todos los componentes que agreguemos a él serán “acomodados” para que midan lo mismo. Es ideal por ejemplo para generar un tablero de botones para una calculadora o un álbum de fotos. Para mostrarlo declararé 9 nuevos botones y un nuevo panel para luego agregar estas líneas a nuestro código:

Código:
  1. /* CREAMOS EL PANEL CON GRID LAYOUT
  2.   * Este layout manager será establecido con tres filas y tres columnas,
  3.   * es decir, como una tabla de 3x3.
  4.   */
  5. panelConGrid= new JPanel(new GridLayout(3,3));
  6. panelConGrid.setBorder(BorderFactory.createTitledBorder("GridLayout"));
  7. boton7= new JButton("Boton7");
  8. boton8= new JButton("Boton8");
  9. boton9= new JButton("Boton9");
  10. boton10= new JButton("Boton10");
  11. boton11= new JButton("Boton11");
  12. boton12= new JButton("Boton12");
  13. boton13= new JButton("Boton13");
  14. boton14= new JButton("Boton14");
  15. boton15= new JButton("Boton15");
  16. panelConGrid.add(boton7);
  17. panelConGrid.add(boton8);
  18. panelConGrid.add(boton9);
  19. panelConGrid.add(boton10);
  20. panelConGrid.add(boton11);
  21. panelConGrid.add(boton12);
  22. panelConGrid.add(boton13);
  23. panelConGrid.add(boton14);
  24. panelConGrid.add(boton15);


Vean que el constructor de GridLayout recibe enteros como argumentos indicando la cantidad de filas y de columnas respectivamente. Visualmente tendremos esto:



Vean que los botones se van agregando de forma que se rellenen las filas, es decir, se completa una fila entera antes de comenzar con la siguiente. Por esto es que numero los botones, para que entiendan el funcionamiento.

Este no es uno de los Layout Managers más útiles pero puede servir en algunos casos. Existe un gestor mucho más poderoso llamado GridBagLayout, pero no hablaré de él.

===============================================

Más sobre Layout Managers:

Este tema es muy extenso en sí mismo y podría dedicar lecciones completas a él, incluso lecciones enteras por cada LayoutManager que existe. No es el objetivo del curso especializarse en Layout Managers. Quién quiera aprender más sobre ellos recomiendo la siguiente lectura:

https://www.dropbox.com/s/fq5jk5n6fcivx39/LayoutManagers.pdf

No es de mi autoría, así que agradezcan a su autor real: Martín Mariñán. Su dirección de correo está en el documento.

===============================================

En las próximas lecciones haremos algunos programas tales como una Calculadora y un Buscaminas.

Saludos.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Publicmind



Registrado: 16 Jun 2015
Mensajes: 4

Mensaje Publicado: Martes 16 Jun 2015 21:10

Título del mensaje: Lección 96: Bordes predefinidos y Layout Managers

Responder citando

Hola, antes que nada felicitarte por el curso. Soy programador profesional desde hace mas de 10 años y se lo he recomendado a gente que quiere aprender.

Me gustaria empezar a programar con Java y mi pregunta es sencilla: la mayoria de IDEs de programacion contienen un gestor de GUI, para diseñar formularios, frames, etc... y por lo que he visto en el curso, parece que el NetBeans no. ¿Hay algun otro IDE gratuito para java que lo contenga?


El curso ya tiene un tiempo publicado, aun asi seria genial obtener respuesta.
Gracias

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Kyshuo Ayame
Moderador Global


Registrado: 07 Ene 2011
Mensajes: 1043

Mensaje Publicado: Miércoles 17 Jun 2015 16:46

Título del mensaje: Lección 96: Bordes predefinidos y Layout Managers

Responder citando

Estimado Publicmind, NetBeans sí tiene un gestor de GUI muy bueno. En lo que llegué a publicar del curso no lo presenté porque justamente las personas primero tienen que entender cómo funciona todo y aprender a hacer algunas cosas a mano antes de darles una herramienta que a simple vista parece facilitar la vida pero que si no se comprende en profundidad lo complica todo.

También tienes el IDE Eclipse, que es gratuito y contiene un gestor de GUI. A mí me gusta más NetBeans, pero es simplemente gusto personal. Ambos IDE son buenos. La diferencia es que con NetBeans puedes abrir un proyecto hecho en Eclipse pero a la inversa no, al menos no hasta las últimas versiones de Eclipse, en cualquier caso verifícalo.

Cualquier duda, a tus órdenes. Saludos.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Publicmind



Registrado: 16 Jun 2015
Mensajes: 4

Mensaje Publicado: Jueves 18 Jun 2015 18:20

Título del mensaje: Lección 96: Bordes predefinidos y Layout Managers

Responder citando

Estupendo! espero con ansiedad pues la leccion dedicada al gestor de GUI ^^

Gracias maestro Risa

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Kyshuo Ayame
Moderador Global


Registrado: 07 Ene 2011
Mensajes: 1043

Mensaje Publicado: Jueves 18 Jun 2015 19:43

Título del mensaje: Lección 96: Bordes predefinidos y Layout Managers

Responder citando

Estimado Publicmind, de momento no estoy escribiendo más lecciones del curso porque estoy a cargo de varios proyectos y no cuento con el tiempo necesario. Sin embargo en Internet puedes encontrar muchísima info al respecto, incluso videos en YouTube sobre cómo usar el gestor de GUI, lo cual es sencillo. Lo que puede complicarte será el hecho de hacer funcionar esa GUI luego, para lo cual debes dominar Java.

Saludos.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 2 Horas

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

uso del layout?

dla_lisc Temas generales 3 Sábado 08 Feb 2014 16:29 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Lección 101: Lectura/Escritura de archivos de t...

Kyshuo Ayame Programación en general 3 Sábado 26 Oct 2013 03:04 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Lección 100: JMasterMind

Kyshuo Ayame Programación en general 7 Lunes 02 Sep 2013 20:29 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Lección 99: JBuscaminas - GUI - Mouse Event

Kyshuo Ayame Programación en general 2 Lunes 19 Ago 2013 16:55 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Lección 98: JBuscaMinas - Lógica

Kyshuo Ayame Programación en general 7 Martes 06 Ago 2013 18:23 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,