019.- Uso de Layouts (Distribución de Elementos en las Ventanas) - Java y NetBeans

En esta publicación voy a explicar cómo dar solución al problema de la distribución de elementos en las ventanas.

Uno de los problemas que más quebraderos de cabeza da al programador es el diseño de las ventanas y la situación de los distintos componentes en ellas.

Para diseñar más cómodamente las ventanas, Java proporciona una serie de objetos denominados Layouts, que definen la distribución que tendrán los elementos al situarse en las ventanas.

Así pues, un Layout define de qué forma se colocarán las etiquetas, botones, cuadros de textos y demás componentes en la ventana que diseñamos.

Veamos un ejemplo de configuración de Layout “Diseño Libre” (“Free Design”):

1. Crea un nuevo proyecto en java.

2. Dentro de Source Packages crea un Java Package y llamalo paqueteInicial.

3. Dentro de paqueteInicial crea un JFrame Form y llamalo VentanaInicial.

4. Añade una etiqueta y un botón. Muévelos a la posición que se indica en la imagen. Deben aparecer las líneas “guía” de color azul que se muestran:

5. Las líneas azules que aparecen indican con qué otro elemento está relacionado un componente de la ventana. La situación de un elemento dependerá siempre de la situación del otro.

Dicho de otra forma, las líneas azules indican las distancias que siempre se respetarán. Observa la siguiente imagen:

6. Ejecuta el programa y prueba a ensanchar (o achicar) la ventana por el lado derecho y por el lado inferior. Debes observar como la etiqueta y el botón mantienen sus distancias relativas entre sí y con los bordes derecho e inferior de la ventana.

7. Este comportamiento de los elementos en la ventana viene dado por una opción del NetBeans llamada Diseño Libre (Free Design).

El Diseño Libre permite que los elementos de una ventana mantengan una distribución relativa da igual el tamaño que tenga la ventana. Dicho de otra forma, los elementos se redistribuyen al cambiar el tamaño de la ventana.

El problema del Diseño Libre es el poco control que se tiene sobre los elementos que se añaden a la ventana.

Se puede observar como a veces los elementos no se colocan en la posición que deseamos o como cambian de tamaño de forma inesperada. Todo esto es debido a la necesidad de dichos elementos de mantener unas distancias relativas con otros elementos de la ventana. Cuantos más elementos tengamos en una ventana, más difícil será el colocarlos usando el Diseño Libre.

Veamos un ejemplo de configuración de Layout “AboluteLayout” (“Posiciones Absolutas”):

8. El Diseño Libre es la opción que está activada por defecto cuando se crea un proyecto en NetBeans. Sin embargo, esta opción se puede cambiar por distintos “Layouts” o “Diseños”.

9. En el Inspector de tu proyecto pulsa el botón derecho del ratón sobre el objeto JFrame y activa la opción Set Layout (Establecer Disposición) – AbsoluteLayout.

10. El Inspector tendrá la siguiente forma ahora:

Como ves, aparece un objeto dentro del JFrame llamado AbsoluteLayout. Este objeto define otra forma de situar los elementos en la ventana. Concretamente, la distribución AbsoluteLayout permite al programador colocar cada elemento donde él quiera, sin restricciones, sin tener en cuenta distancias relativas.

11. Sitúa la etiqueta y el botón donde quieras. Observa que no aparece ninguna línea guía que defina distancias relativas:

12. La ventaja de definir una distribución AbsoluteLayout es la facilidad para colocar cada elemento en la ventana (no tendrás los problemas del Diseño Libre). Sin embargo, la desventaja es que los elementos no mantienen una distribución relativa respecto al tamaño de la ventana.

13. Ejecuta el programa y reduce su ancho. Observa lo que ocurre:

Verás que los elementos de la ventana son inamovibles aunque la ventana cambie de tamaño. En cambio, en el Diseño Libre los elementos intentaban siempre estar dentro de la ventana.

Veamos un ejemplo de configuración de Layout “Distribución en línea” (“FlowLayout”):

14. Practiquemos ahora con otro tipo de distribución. Accede al Inspector y pulsa el botón derecho del ratón sobre el objeto JFrame. Activa la opción Establecer Disposición – FlowLayout.

15. Observa como el Layout “AbsoluteLayout” es sustituido por la distribución “FlowLayout”. Un elemento solo puede tener un tipo de distribución a la vez.

16. Observa la ventana. Los elementos se han colocado uno detrás de otro. Se han colocado “en línea”. Esto es lo que hace el “FlowLayout”. Fuerza a los distintos elementos a que se coloquen en fila.

17. Si seleccionas el FlowLayout en el Inspector, podrás acceder a sus propiedades (los Layout son objetos como los demás). Una de las propiedades del FlowLayout se llama alineación y permite que los elementos estén alineados a la izquierda, derecha o centro. El FlowLayout tiene una alineación centro por defecto.

18. El FlowLayout no permite controlar la posición de los elementos en la ventana, pero sí procura que los elementos estén siempre visibles aunque la ventana se cambie de tamaño. Ejecuta el programa y observa el comportamiento del FlowLayout al agrandar o achicar la ventana:

Veamos un ejemplo de configuración de Layout “Distribución en rejilla” (“GridLayout”):

19. Otra distribución que se puede usar es la distribución GridLayout. Esta distribución coloca a los elementos en filas y columnas, como si formaran parte de una tabla. Al añadir esta distribución es necesario indicar cuantas filas y columnas tendrá la rejilla.

20. Cambia el Layout del JFrame por un GridLayout:

21. Selecciona el GridLayout en el Inspector y cambia sus propiedades Filas y Columnas. Asigna a la propiedad Filas un 2 y a la propiedad Columnas un 3.

 

22. Al asignar 2 filas y 3 columnas al GridLayout, conseguiremos que los elementos de la ventana se distribuyan en una tabla como la siguiente:

Los distintos elementos se adaptarán al espacio que tienen asignado, y cambiarán de tamaño.

23. Ya que solo tienes dos elementos en la ventana (una etiqueta y un botón), añade otros cuatro elementos más (cuatro botones) para observar como se distribuyen en la cuadrícula.

24. En un GridLayout, los elementos estarán situados siempre en una casilla de la rejilla, ocupando todo su espacio. El programador no tiene mucho control sobre la disposición de los elementos.

25. Ejecuta el programa y agranda y achica la ventana. Observa como los elementos siempre mantienen su disposición en rejilla y siempre aparecen dentro de la ventana aunque el tamaño de esta varíe.

Veamos un ejemplo de configuración de Layout “BorderLayout”:

26. Otra de las distribuciones posibles es la llamada BorderLayout. Esta distribución coloca los elementos de la ventana en cinco zonas:

-        Zona norte (parte superior de la ventana)

-        Zona sur (parte inferior de la ventana)

-        Zona este (parte derecha de la ventana)

-        Zona oeste (parte izquierda de la ventana)

-        Zona centro.

27. Haz clic con el botón derecho sobre el JFrame y asigna una distribución “BorderLayout”.

28. Para poder entender el funcionamiento del BorderLayout, se recomienda que el JFrame contenga únicamente 5 botones (elimina los elementos que tienes ahora y añade cinco botones).

La ventana tendrá un aspecto parecido al siguiente:

29. Como se puede observar, cada botón se ha colocado en una zona, y su tamaño ha variado hasta ocupar la zona entera. Tenemos un botón en el norte, otro al sur, uno al este, otro al oeste y uno en el centro.

El programador no tiene mucho control sobre la disposición de los elementos en la ventana al usar esta distribución.

30. Ejecuta el programa y observa como los elementos siempre se mantienen dentro de la ventana aunque esta cambie de tamaño.

CONCLUSIONES:

El diseño de la ventana viene definido por los Layouts o distribuciones.

Diseño Libre – Esta distribución viene activada por defecto en el NetBeans, y define una distribución de componentes en la que se respetan las distancias entre ellos cuando la ventana cambia de tamaño.

AbsoluteLayout – En esta distribución el programador puede colocar cada elemento en la posición que desee de la ventana. Los distintos elementos mantienen su posición aunque la ventana cambie de tamaño, lo que puede hacer que si la ventana se reduce de tamaño algunos elementos no se vean.

FlowLayout – En esta distribución los elementos se colocan uno detrás de otro. Los elementos intentarán estar dentro de la ventana aunque esta se reduzca de tamaño.

GridLayout – Esta distribución coloca a los elementos en filas y columnas. Los elementos siempre estarán dentro de la ventana aunque esta se reduzca de tamaño.

BorderLayout – Esta distribución coloca a los elementos en 5 zonas (este, oeste, norte, sur y centro). Los elementos siempre estarán dentro de la ventana aunque esta se reduzca de tamaño.

018.- Centralizar el Código y Evitar su Repetición - Java y NetBeans

En este post voy a explicar cómo dar solución al problema de la repetición de código en un proyecto.

Es muy habitual en Java que varios métodos o eventos tengan que ejecutar el mismo código. En este caso se plantea la necesidad de “copiar y pegar” ese código en los distintos métodos o eventos a programar:

Esta es una mala forma de programación, ya que si va a modificar el código, sería necesario realizar la modificación en cada copia del código. Es muy fácil que haya olvidos y aparezcan errores en el proyecto que luego son muy difíciles de localizar.

Lo mejor es que el código que tenga que ser ejecutado desde distintos métodos o eventos aparezca sólo una vez, y sea llamado desde cada método o evento:

Veamos un ejemplo en el que el código se puede repetir y como evitar dicha repetición.

1. Crea un nuevo proyecto en java y nombralo ProyectoCalculos.

2. Dentro de Source Packages crea un Java Package y llamalo paqueteCalculos.

3. Dentro de paqueteCalculos crea un JFrame Form y nombralo VentanaCalculos.

4. El proyecto tendrá el siguiente aspecto:

5. La VentanaCalculos debe estar diseñada de la siguiente forma:

Esta ventana contiene los siguientes elementos:

-        Una barra de menús a la que puede llamar mnuBarra.

-        La barra de menús contiene un JMenu con el texto “Calcular” y que se puede llamar mnuCalcular

-        El mnuCalcular contendrá tres JMenuItem, llamados respectivamente: mnuSumar, mnuRestar, mnuBorrar y con los textos “Sumar”, “Restar” y “Borrar”.

-        Una etiqueta con el texto “Número 1:”. (no interesa su nombre)

-        Una etiqueta con el texto “Número 2:”. (no interesa su nombre)

-        Un cuadro de texto con un 0 y con el nombre txtNumero1.

-        Un cuadro de texto con un 0 y con el nombre txtNumero2.

-        Una etiqueta sin texto, con borde llamada etiResultado.

-        Un botón con el texto “Sumar” de nombre btnSumar.

-        Un botón con el texto “Restar” de nombre btnRestar.

-        Un botón con el texto “Borrar” de nombre btnBorrar.

6. Aquí puedes ver la ventana en ejecución con el menú “Calcular” desplegado:

7. El objetivo de programa es el siguiente:

1. El usuario introducirá números en los cuadros de texto.
2. Si pulsa el botón Sumar, se calculará la suma.
3. Si pulsa el botón Restar, se calculará la resta.
4. Si pulsa el botón Borrar, se borrarán ambos cuadros de texto.
5. Si elige la opción del menú Calcular-Sumar entonces se calculará la suma.
6. Si elige la opción del menú Calcular-Restar entonces se calculará la resta.
7. Si elige la opción del menú Calcular-Borrar entonces se borrarán ambos cuadros de texto.
8. Si se pulsa enter en alguno de los dos cuadros de texto se debería calcular la suma.

8. Este es un ejemplo en el que al activarse uno de varios eventos distintos se tiene que ejecutar el mismo código. Observa el caso de la suma:

9. Para que el código esté “centralizado”, es decir, que aparezca sólo una vez, será necesario construir en la clase un método. Un método en java es el equivalente de una función o procedimiento en C. Veamos como hacerlo:

10. Accede al código de tu programa a través del botón “Source” (u “Origen” dependiendo del idioma del NetBeans instalado en la computadora que estas utilizando) para acceder al código:

11. Un buen sitio para programar tus métodos puede ser debajo del método constructor. Puedes distinguir fácilmente al método constructor porque tiene el mismo nombre que la clase que estás programando, o dicho de otro modo, tiene el mismo nombre que la ventana que estás programando: VentanaCalculos.

12. Se va a programar un método que se encargue de recoger los valores de los cuadros de texto. Calculará la suma de dichos valores, y luego mostrará la suma en la etiqueta de resultados.

Los métodos en java tienen prácticamente la misma estructura que los procedimientos en C. Programe lo siguiente:

13. Si observas el código, es el típico procedimiento de C, cuya cabecera comienza con void y el nombre que le hayas asignado (en nuestro caso sumar):

    void sumar() {

…

    }

Si estudias las líneas del código, verás que lo que hace es recoger los contenidos de los dos cuadros de texto convertidos en números que se almacena en dos variables enteras llamadas num1 y num2.

Seguidamente suma las variables num1 y num2 en otra variable entera llamada suma y presenta el resultado en la etiqueta etiResultado.

14. Hay que destacar que este código no pertenece ahora mismo a ningún evento en concreto, por lo que no tiene efecto alguno sobre el programa. Será necesario pues asociar los eventos correspondientes con este método.

15. Interesa que al pulsar el botón “Sumar” se ejecute la suma, así pues entre en el evento actionPerformed del botón “Sumar” y añada la siguiente línea:

sumar();

16. Como también interesa que al pulsar la opción del menú “Calcular-Sumar” se ejecute la suma, entre en el evento actionPerformed de la opción del menú “Sumar” y añade de nuevo la siguiente línea:

sumar();

17. También se quiere que al pulsar la tecla enter en el cuadro de texto del número 1 se ejecute la suma. Por lo tanto, en el evento actionPerformed del cuadro de texto txtNumero1 hay que añadir la siguiente línea:

sumar();

18. Y como también se quiere que al pulsar la tecla enter en el cuadro de texto del número 2 se ejecute la suma, también habrá que introducir en su actionPerformed la siguiente línea:

sumar();

19. Antes de continuar, ejecute el programa, introduzca dos números, y compruebe como se calcula la suma al pulsar el botón Sumar, o al activar la opción del menú Calcular–Sumar, o al pulsar Enter en el primer cuadro de texto, o al pulsar Enter en el segundo cuadro de texto.

En cada uno de los eventos hay una llamada al método sumar, que es el que se encarga de realizar la suma.

20. En el caso de la resta sucede igual. Tenemos que varios eventos distintos deben provocar que se realice una misma operación. En este caso tenemos lo siguiente:

21. Para centralizar el código, crearemos un método restar que se encargará de hacer la resta de los números introducidos en los cuadros de texto. Este método se puede colocar debajo del anterior método sumar:

22. El código de este método es prácticamente idéntico al del método sumar, así que no se comentará.

23. Ahora, es necesario que cuando se activen los eventos indicados anteriormente, estos hagan una llamada al método restar para que se efectúe la resta. Así pues, entre en el evento actionPerformed del botón “Restar” y añada esta línea de código:

restar();

24. Igualmente, entre en el evento actionPerformed de la opción del menú “Calcular – Restar” y añada la misma llamada:

restar();

25. Ejecute el proyecto y compruebe como funciona el cálculo de la resta, da igual que lo haga pulsando el botón “Restar” o la opción del menú “Restar”. Ambos eventos llaman al mismo método:

26. Finalmente se programará el borrado de los cuadros de texto a través del botón “Borrar” y de la opción del menú “Borrar”. En primer lugar, programa el siguiente método (puedes hacerlo debajo del método “restar”):

27. Ahora programa las llamadas al método borrar desde los distintos eventos. En el evento actionPerformed del botón “Borrar” y en el evento actionPerformed de la opción del menú “Borrar” programa la siguiente llamada:

borrar();

28. Ejecuta el proyecto y prueba su funcionamiento.

CONCLUSIONES:

En java se pueden programar métodos al igual que los procedimientos en el lenguaje de programación C. Normalmente, estos métodos se programarán debajo del método constructor, y tienen la misma estructura que en C.

Se puede llamar a un mismo método desde distintos eventos, evitando así la repetición de código.