Swing: Ventanas, componentes y gestión de disposición básica

Ha llegado la hora de comenzar a crear interfaces gráficas. Todo esto corresponde a un apartado entero dentro de lo

que es Java. Digamos que la primera parte correspondía a todo lo que tiene que ver con programación estructurada

en Java, programación orientada a objetos, herencia y polimorfismo. Agregué algunas cosas extra a ello por lo que se

hizo un poco más largo de lo que esperaba, pero a cambio hay bastante información que no encontrarán en la Web

fácilmente. En ese agregado vimos un pequeño acercamiento a las interfaces gráficas de usuario en Java a través de

operaciones estáticas de la clase JOptionPane para mostrar cuadros de diálogo básicos.

Ustedes bien pueden intuir que el potencial de Java para crear interfaces gráficas va más allá de simples cuadros de

diálogo. Como les dije antes, NetBeans ha sido hecho en Java por tanto todo lo que ven en él podrán programarlo

ustedes en un futuro en lo que a interfaces gráficas refiere. Claro que un IDE tan poderoso como NetBeans tiene

metidos dentro de sí un sin fin de componentes extremadamente complejos. Otro programa interesante desarrollado

en Java es un gestor de descargas bastante popular llamado JDownloader. Pueden bajárselo para ver otro ejemplo

de las utilidades de Java. Claro que se pueden crear cosas que van más allá de las funcionalidades de este programa,

pero será interesante que lo vean; yo lo utilizo muy a menudo para gestionar mis descargas. La página oficial es

http://jdownloader.org/download/index

Como casi todo sistema hecho en Java su código es libre y de código abierto.

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

JFrame

El paquete más popular para crear interfaces gráficas es Swing, así que desde ahora será nuestro fiel amigo. La

mayoría de las clases que conoceremos desde ahora serán parte de este paquete.

Las interfaces gráficas de usuario son conocidas como GUI de sus siglas en inglés Graphical User Interface que

significan simplemente Interfaz Gráfica de Usuario, por tanto en español seríaIGU. De ahora en más yo utilizaré a

menudo el término GUI para referirme a interfaces gráficas.

Como su nombre lo indica, son interfaces. Como tales deben cumplir su propósito como medio de comunicación entre

dos actores: un sistema informático y una persona o usuario final. El propósito de la GUI es entonces que un humano

común pueda comunicarse con un sistema informático y viceversa. Antes de aprender a programar ustedes eran

capaces de utilizar muchos programas sin tener idea de cómo funcionan, es más, lo siguen haciendo al día de hoy. Por

ejemplo, pueden usar un navegador para surfear en Internet o un IDE como NetBeans para programar sin tener idea

de cómo estos sistemas funcionan. Las GUIs de estos sistemas nos ayudan mucho a comunicarnos con ellos porque

resultan intuitivas. Claro que hay miles de funciones que requieren de un manual, pero en la cotidiana podemos

aprender a usar muchos programas tan solo mirando su interfaz gráfica. Créanme que lograr eso no es para nada

sencillo.

Los componentes que forman parte de una GUI en Java tienen una jerarquía. Hay componentes que pueden contener

a otros componentes dentro y pues hay componentes que no. Por ejemplo, una ventana puede contener botones,

menúes y muchas otras cosas, pero un botón no puede contener nada dentro de él. Uno de los componentes entonces

que está más arriba en la jerarquía de Swing es la ventana.

Una ventana para nosotros es un objeto de la clase JFrame. Esta clase contiene un montón de operaciones que nos

permiten trabajar con ventanas. Crearemos un proyecto nuevo al que yo llamaré Swing01 para mostrar como

utilizar JFrame para mostrar ventanas en pantalla. Este proyecto contendrá solo una clase principal y utilizaremos

todas las variables como locales al procedimiento main para no complicar las cosas:

Código:

1. public class Swing01 {

2. public static void main(String[] args){

3.

4. }

5. }

Ahora me declararé dentro de main una variable de tipo JFrame llamada ventana. Para utilizar JFrame debo

importarla desde el paquete javax.swing:

Código:

1. import javax.swing.JFrame;

2.

3. public class Swing01 {

4. public static void main(String[] args){

5. JFrame ventana;

6. }

7. }

El siguiente paso es utilizar un constructor de JFrame para inicializar esa variable. De los cuatro constructores

disponibles me interesan solo dos:

El constructor por defecto.

El constructor que toma un String como argumento que corresponde al título de la ventana.

Utilizaré primero el constructor por defecto:

Código:

1. public static void main(String[] args){

2. JFrame ventana= new JFrame();

3. }

Listo, ya tenemos una ventana. Sin embargo, si ejecutamos el sistema veremos que no aparece nada en pantalla. Eso es porque por defecto un objeto JFrame se crea con estado oculto, es decir que la ventana es invisible. Además como nuestro sistema no hace más nada luego y no hay modo de hacer visible la venta pues terminará por cerrarse.

Así, la primera operación de JFrame que conoceremos es setVisible. Su firma es la siguiente:

Código:

1. public void setVisible(boolean b)

Como pueden observar recibe un booleano como argumento. Si le pasamos TRUE pues la ventana será visible, sino se

ocultará. Que una ventana esté oculta no significa que no esté dibujada ni que no esté ocupando memoria RAM sino todo lo contrario. Una ventana oculta está en memoria solo que no se ve dibujada, nada más. Existen aplicaciones con

interfaces gráficas muy pesadas que cargan todo en memoria y ocultan lo innecesario para lograr que luego el trabajo

sea fluido y no haya que estar esperando para abrir ciertos componentes complejos. Bien, vayamos a lo nuestro, hagamos que nuestra ventana sea visible:

Código:

1. public static void main(String[] args){

2. JFrame ventana= new JFrame();

3. ventana.setVisible(true);

4. }

Si ejecutamos nuestro programa ahora veremos que en la esquina superior izquierda de la pantalla aparece algo como

esto:

Digamos que eso intenta ser una ventana en el tamaño mínimo posible. Si nos paramos con el ratón en un borde y le

cambiamos el tamaño veremos algo como esto:

Una ventana vacía. También podemos maximizar, minimizar, restaurar y cerrar esa ventana. Además si presionamos

en el ícono de Java tendremos un menú como el que sigue:

Este menú, así como la forma de la ventana, los colores y la ubicación de los botones dependerán estrictamente de la

plataforma en la que se esté ejecutando. La visualización que tienen allí corresponde a Windows 7, sin embargo si

ejecutan esto en otro Windows o bien en Linux, Solaris o Mac verán a la ventana con la forma típica de las ventanas

de esos sistemas.

Algo notorio tal vez para ustedes es que la ventana no tiene título. Pues es literalmente una ventana vacía, no tiene

nada de nada. Además hereda el ícono de la taza de café típico de Java. Otro punto a tener en cuenta es que al

presionar el botón de cerrar (en este caso la cruz en rojo) en realidad no están cerrando la ventana ni el sistema, sino

que esta simplemente se ocultará y el sistema seguirá ejecutándose, pueden verlo en NetBeans:

Tanto el hecho de que el botón STOP esté habilitado, como el que la barra de progreso diga running… indican que el

sistema no ha sido cerrado. En ambos casos yo he pegado las imágenes que corresponden a estas indicaciones luego

de haber cerrado la ventana de mi programa Java. Basta con dar en STOP o en la cruz a la derecha de la barra de

progreso para terminar con la ejecución del sistema. Cabe destacar que esto es posible porque yo ejecuté el sistema

directamente desde NetBeans. Si esto no fuera así tendría que recurrir al sistema operativo para cancelar el proceso

asociado a mi programa y así cerrarlo, por ejemplo con el típico CTRL+ALT+SUP de Windows.

Las ventanas de JFrame tienen tres posibles operaciones asociadas a la acción de cerrar:

Ocultarse tras el cierre. Liberar la memoria RAM ocupada.

Cerrar el sistema.

No hacer nada.

Por defecto al crear un objeto JFrame se ocultará al cerrarse. Para cambiar esto JFrame nos provee de la operación setDefaultCloseOperation que significaríaasignarOperacionDeCierrePorDefecto. La firma de esta

operación es

Código:

1. public void setDefaultCloseOperation(int operation)

El entero recibido debe corresponderse con una constante ya declarada en JFrame para tal propósito:

HIDE_ON_CLOSE: Ocultarse al cerrarse. Es la que viene por defecto. DISPOSE_ON_CLOSE: Indica que la ventana debe liberar sus recursos al cerrarse con lo cual su referencia

quedará en null.

EXIT_ON_CLOSE: Indica que se debe salir del sistema al cerrarse.

DO_NOTHING_ON_CLOSE: Indica que la ventana no debe hacer nada al cerrarse.

Asignemos entonces a nuestra ventana la operación de cierre:

Código:

1. ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Con eso podrán comprobar ahora que nuestro sistema se cerrará tras presionar el botón de cierre.

Agreguemos ahora un título a nuestra ventana usando la operación setTitle cuya firma es:

Código:

1. public void setTitle(String title)

Esta operación recibe un String como argumento indicando el título de la ventana. Démosle a la nuestra el título Mi primera ventana en Java:

Código:

1. ventana.setTitle("Mi primera ventana en Java");

Con esto ya pueden ir viendo que las interfaces gráficas en Java resultarán dinámicas. Si en otro momento yo quisiera cambiar el título de la ventana podría hacerlo en tiempo de ejecución. Veamos esto con una petición a través de un cuadro de entrada que pida el nuevo título:

Código:

1. public static void main(String[] args){

2. JFrame ventana= new JFrame();

3. ventana.setVisible(true);

4. ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

5. ventana.setTitle("Mi primera ventana en Java");

6.

7. String titulo= JOptionPane.showInputDialog(null,"Ingresa un título para tu ventana:", "Selección de

título",JOptionPane.QUESTION_MESSAGE);

8. ventana.setTitle(titulo);

9. }

Un código muy simple. Lo nuevo aquí es que en vez de poner null como padre de nuestro cuadro de diálogo podría

poner a nuestra ventana de modo que el cuadro de diálogo perteneciera a ella. Con esto, dicho cuadro aparecerá

delante de ella sin importar la posición en la que esté y no nos dejará usarla hasta que no lo cerremos a él. Basta poner mi variable JFrame allí en vez de null ylisto.

Quiero destacar que eso que hice en dos operaciones podría hacerlo en una, es decir, colocar el llamado a showInputDialog dentro de setTitle así:

Código:

1. ventana.setTitle(JOptionPane.showInputDialog(ventana,"Ingresa un título para tu ventana:", "Selección de título",

JOptionPane.QUESTION_MESSAGE));

Esto no es necesario y además ustedes deberían manejarlo bien a estas alturas.

----------------------------------------------------------------------------------

Contenedores:

Como dije antes, existen componentes de las interfaces gráficas que pueden contener a otros componentes. A ellos

los conoceremos de ahora en más como contenedores. Dentro de los contenedores tenemos dos categorías:

Contenedores de alto nivel (top-level containers): Son los componentes que dan origen a una interfaz

gráfica y por tanto son la raíz de ella. Un ejemplo claro es una ventana ya que primero la necesitamos a ella

para luego comenzar a colocar componentes dentro. Si no hay ventana no hay posibilidad de colocar anda en

ninguna parte. En concreto tenemos tres componentes que son contenedores de alto nivel: o JFrame (ventanas): Como ya dije, las ventanas son contenedores de alto nivel porque a partir de

ellas se comienza a armar una GUI.

o JDialog (cuadros de diálogo): Funcionan como ventanas independientes y pueden existir aunque no

haya ningún JFrame al cual pertenezcan, por tanto pueden ser el inicio de una GUI.

o JApplet: Permiten visualizar una interfaz gráfica igual a una de escritorio pero dentro de un

navegador Web. Son, por tanto, un contenedor de alto nivel.

Contenedores intermedios (intermediate containers o mid-level containers): Estos contenedores van

dentro de un contenedor de alto nivel o de otro contenedor intermedio. Permiten estructurar la ubicación de

los componentes de un aGUI. Normalmente un contenedor de alto nivel irá seguido de uno o más

contenedores intermedios. Esto irá quedando claro a medida que avancemos. Por ahora estoy hablando en el

aire. Ejemplos de contenedores de nivel medio que veremos son:

o JPanel: Contenedor más común de componentes.

o JScrollPane: Un contenedor provisto de barras de desplazamiento.

o JSplitPane: Un contenedor dividido a la mitad permitiendo trabajar con dos áreas de trabajo a la vez

pudiendo modificar el tamaño de estas meditante el Mouse.

o JTabbedPane: Un contenedor que permite manipular pestañas.

o JToolBar: Una barra de herramientas.

o JDesktopPane: Un contenedor que permite manipular ventanas dentro de él.

o JInternalFrame: Ventanas internas que solo pueden ser contenidas por JDesktopPane.

Componentes básicos: Estos son los componentes que dan funcionalidad a una interfaz gráfica. Siempre

van contenidos en un contenedor intermedio. Algunos de los que veremos son:

o JButton: Botones de acción.

o JLabel: Etiquetas.

o JList: Listas de selección múltiple.

o JComboBox: Combo box.

o JRadioButton: Botones circulares de selección.

o JCheckBox: Botones de selección.

o JTable: Tablas.

o JTextField: Campos de texto.

o JTextArea: Áreas de texto.

o JPasswordField: Campo de contraseña.

Los contenedores de alto nivel son los únicos que pueden contener una barra de menús de la

clase JMenuBar. Esta barra irá contenida en un “lugar” a parte del resto de los componentes.

-----------------------------------------------------------------------------------

JPanel, JButton y FlowLayout:

Una ventana, que es un componente de alto nivel, necesitará un componente de nivel intermedio para comenzar a “tener” componentes dentro de ella. La mayoría de los contenedores intermedios se conocen como paneles.

Comenzaremos por utilizar paneles de la clase JPanel. Imaginen a un objeto JPanel como un rectángulo gris en el que podemos poner componentes.

Una ventana requiere al menos un panel intermedio para sus componentes. Este panel se llama panel de contenido o content pane en inglés. Cuando instanciamos un objeto JFramepor defecto se crea para sí mismo un panel de contenido de la clase JPanel. Nosotros crearemos nuestro propio panel y luego le diremos a la ventana que

ése es el panel que contiene a sus componentes. Seguiremos trabajando con el ejemplo anterior. Ahora importamos la clase JPanel desde javax.swing y modificaremos un poco el código que teníamos antes dentro delmain:

Código:

1. public static void main(String[] args){

2. JFrame ventana= new JFrame("Swing 01");

3. ventana.setVisible(true);

4. ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

5. ventana.setLocationRelativeTo(null);

6. ventana.setSize(200, 150);

7.

8. JPanel panel= new JPanel();

9. ventana.setContentPane(panel);

10. }

Declaramos la variable ventana de tipo JFrame y la instanciamos ya con un título. Luego la hacemos visible y le

asignamos la operación de cierre por defecto. Ahora tenemos dos instrucciones nuevas:

void setLocationRelativeTo(Component c): Esta operación de JFrame recibe un componente como

argumento y sitúa a la ventana según la posición de ese componente en la pantalla. Si la referencia que se le

pasa es null entonces la ventana se dibujará en el centro de la pantalla. void setSize(int width, int height): Esta operación asigna un tamaño a la ventana. Recibe dos enteros

como argumentos, el largo y el alto respectivamente medidos en píxeles. En este ejemplo yo quiero que mi

ventana tenga 200 píxeles de largo y 150 píxeles de altura. Si no utilizamos esto no podemos asumir el

tamaño inicial de la ventana, más allá de que podamos luego modificarlo a nuestro antojo.

Luego declaramos la variable panel de tipo JPanel y la instanciamos con el constructor por defecto para, en la

siguiente instrucción, indicar a nuestra variable ventana que el panel de contenido para ella será nuestra variable panel mediante la operación setContentPane. Algo que no he dicho es que los “componentes” con los que venimos trabajando heredan todos de una clase

llamada Component que justamente define a un componente. Los contenedores además de ser componentes heredan de la clase Container. Más adelante veremos la jerarquía de componentes de Swing para que todo se entienda más. Por ahora vamos despacio así se entiende cómo utilizar estas herramientas poco a poco.

------------------------------------------------------------------------------------

JButton: Teniendo entonces un panel como contenedor intermedio es hora de agregarle componentes básicos. El primer tipo de componentes básicos que veremos es el botón. La clase JButton nos permite trabajar justamente con botones de

acción. Agregaré el código necesario al que ya teníamos para crear tres botones y agregarlos a mi ventana:

Código:

1. JButton boton1= new JButton("Soy un botón");

2. JButton boton2= new JButton("Soy otro botón");

3. JButton boton3= new JButton("¿Y yo qué...?");

4.

5. panel.add(boton1);

6. panel.add(boton2);

7. panel.add(boton3);

La clase JButton debe ser importada desde javax.swing como todas las clases de Swing. Declaré allí tres variables

de tipo JButton a las que llamé boton1, boton2 y boton3, las cuales fueron instancias mediante el constructor

de JButton que admite un String como argumento. El String recibido es el texto que aparecerá en el botón.

Luego de eso utilizo la operación add de JPanel para agregar los botones uno a uno en mi variable panel. Esta

operación admite cualquier objeto Component, así que también puedo agregar otros paneles a un panel.

Si ejecutamos nuestro código veremos algo así:

Como verán tenemos los tres botones en nuestra ventana. Lo primero que supongo se darán cuenta es que no pasa

nada al hacer clic sobre ellos, se ve que son presionados pero no ocurre absolutamente nada. Esto es porque estos

botones no tienen ninguna acción asociada y por tanto de momento no sirven para nada. Lo segundo que deben notar

es que si cambian el tamaño de la ventana los botones cambian de posición, es decir, se acomodan según el espacio

que exista:

Esto se debe al gestor de disposición o Layout Manager, tema que abordaremos luego.

Veamos algunas de las operaciones más utilizadas de la clase JButton, incluyendo a los constructores:

public JButton(): El constructor por defecto inicializa un botón sin texto ni ícono. public JButton(String text): Inicializa un botón con el texto indicado pero sin ícono.

public JButton(String text, Icon icon): Inicializa un botón con texto e ícono.

void doClick(): Realiza la misma acción que sucede cuando el usuario hace clic sobre un botón.

void doClick(int passTime): Igual a la anterior con la diferencia de que el botón se mostrará presionado

tantos milisegundos como indique el argumento passTime.

String getActionCommand(): Retorna el String asociado a la acción del botón. Lo veremos luego.

String getText(): Retorna el texto del botón.

boolean isEnabled(): Retorna TRUE si el botón está habilitado, FALSE si no.

boolean isSelected(): Retorna TRUE si el botón está seleccionado, FALSE si no.

boolean isVisible(): Retorna TRUE si el botón es visible en ese momento, FALSE si no.

void setEnabled(boolean b): Habilita o deshabilita el botón, según se le pase TRUE o FALSE

respectivamente.

void setText(String text): Asigna al botón el texto text.

void setToolTipText(String text): Asigna el texto text como sugerencia del botón.

void setVisible(boolean b): Deja al botón visible o invisible según se le pase TRUE o FALSE

respectivamente.

Si agregamos las siguientes dos líneas a nuestro código:

Código:

1. boton1.setEnabled(false);

2. boton2.setToolTipText("Tengo una sugerencia!!!");

veremos lo siguiente:

Como podrán observar, el botón representado por boton1 quedó inhabilitado, y además cuando acercamos el Mouse al botón representado por boton2 y dejamos unos segundos el puntero allí aparece un texto de sugerencia o

información. Esto se logra muy fácilmente con setEnabled y setToolTipText. A pesar de todo esto, nuestros botones siguen sin hacer nada.

---------------------------------------------------------------------------------

Layout Managers:

Los gestores de disposición, conocidos por su nombre en inglés Layout Managers, son los encargados de indicar a un contenedor cómo deben colocarse los componentes dentro de él. Hay muchos tipos de gestores de disposición, todos ellos implementan la interfaz LayoutManager que es la que define las operaciones necesarias para manipular

la ubicación de los componentes de un contenedor. El gestor por defecto es un objeto de la clase FlowLayout, es decir, disposición de flujo. El

gestor FlowLayout indica que los componentes deben ordenarse de izquierda a derecha y de arriba hacia abajo en el orden en que son agregados al panel. En este caso, el primer botón es boton1, por tanto se dibuja en la ventana. Luego agregamos a boton2; si hay espacio a la derecha de boton1 entonces se agregará allí, sino irá

debajo. Esto se aplica a cada componente agregado. Veamos un ejemplo donde agregaremos 15 botones al panel. Ustedes deberán cambiar el tamaño de la ventana para ver cómo se acomodan los botones en ella. El código fuente es prácticamente el mismo que venimos trabajando, solo

que ahora utilizo un for para agregar los 15 botones al panel:

Código:

1. import javax.swing.JButton;

2. import javax.swing.JFrame;

3. import javax.swing.JPanel;

4.

5. public class Swing01 {

6. public static void main(String[] args){

7. JFrame ventana= new JFrame("Swing 01");

8. ventana.setVisible(true);

9. ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

10. ventana.setLocationRelativeTo(null);

11. ventana.setSize(200, 150);

12.

13. JPanel panel= new JPanel();

14. ventana.setContentPane(panel);

15.

16. for(int i=0; i<15; i++){

17. panel.add(new JButton("B"+i));

18. }

19. }

20. }

Noten como instancio diréctamente los botones dentro de la operacón add. Esto no es nada nuevo y deberían

comprenderlo a la perfección. Igualmente siempre pueden preguntar. Si usteden quisieran que el usuario no pueda cambiar el tamaño de la ventana porque esto distorcona la visual pues

simplemente deben utilizar la operación setResizable de JFrame:

Código:

1. public void setResizable(boolean b)

Este procedimiento toma un booleano como argumento el cual si es TRUE permite cambiar el tamaño de la ventana

dinámicamente, si es FALSE la ventana no puede cambiarse de tamaño o maximizarse. Por ejemplo:

Código:

1. public static void main(String[] args){

2. JFrame ventana= new JFrame("Swing 01");

3. ventana.setVisible(true);

4. ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

5. ventana.setLocationRelativeTo(null);

6. ventana.setResizable(false);

7. ventana.setSize(200, 200);

8.

9. JPanel panel= new JPanel();

10. ventana.setContentPane(panel);

11.

12. for(int i=0; i<15; i++){

13. panel.add(new JButton("B"+i));

14. }

15. }

Lo único nuevo en este código es el uso de setResizable para evitar que el usuario cambie el tamaño de la ventana y

además he cambiado el alto de la misma por 200 píxeles en vez de 150 a fin de que todos los botones se vean bien

dentro de ella. ¿Cómo saber qué tamaño adjudicar a una ventana? Pues a ensallo y error. Le asignan un tamaño,

ejecutan, y si se ve bien perfecto, sino cambian el largo y/o el ancho según les parezca y vuelven a probar. Tras la

ejecución del código anterior verán:

Noten que el botón de maximizar está deshabilitado. Además, al ubicar el puentero del Mouse en un borde no

cambia de forma para modificar el tamaño.

JFrame tiene la operación pack que se supone establece el tamaño adecuado para que todo sea visible en la

ventana, sin embargo esto no es así. Más adelante veremos lo que hay que tener en cuenta para utilizar dicha

operación.

-----------------------------------------------------------------------------------

Visualizar la interfaz gráfica como un árbol:

Es muy útil ver la interfaz gráfica como si fuera un árbol n-ario, es más, en realidad lo es, más allá de que uno no

tiene que lidiar con todo lo referente a nodos y demás, Swing se encarga de todo.

Si lo pensamos un poco tenemos la VENTANA la cual contiene al PANEL el cual contiene 15 BOTONES. Fácilmente

podríamos representarlo así:

La VENTANA es la raíz del árbol, luego tenemos un NODO que es el PANEL de contenido y luego tenemos “hojas” que

son los componentes básicos. Entonces, los contenedores pueden ser vistos (en efecto lo son) como NODOS y los

componentes básicos como hojas.

A veces resulta muy útil hacer un dibujo de árbol para diseñar una interfaz gráfica. Más adelante haremos ejercicios al

respecto.

---------------------------------------------------------------------------------

En la próxima lección comenzaremos con el manejo de eventos para que los botones hagan algo al ser presionados. Si

quieren pueden investigar un poco en la Web acerca del uso de los otros componentes básicos y crear ventanas con

muchos de ellos a ver que pasa.

Un saludo.