Interfaz Gráfica en Java

Curso propuesto por el grupo de trabajo Semana de Ingenio y Diseño (SID) de la Universidad Distrital Francisco Jose de Caldas.

Monitor

Cristian Felipe Patiño Cáceres - Estudiante de Ingeniería de Sistemas de la Universidad Distrital Francisco Jose de Caldas

Clase 15

Objetivos

• Reconocer el modo de gestionar el posicionamiento y tamaño de objetos gráficos a traves de LayoutManager y mostrar las ventajas de utilizar este enfoque.
• Identificar alguno de los principales tipos de Layout para gestionar el posicionamiento y tamaño de objetos gráficos.
• Realizar uso del GridBadLayout dentro de nuestro proyecto y reconocer cada uno de los procesos que intervienen en su construcción.
• Explicar particularidades en torno al uso de GridBadLayout para entender a detalle como funciona este LayoutManager.

Antes de Comenzar

Antes de iniciar con la clase de hoy vamos a realizar una actualización en la carpeta images de nuestro proyecto, en este caso vamos a agregar nuevas imágenes sobre productos que están contenidas en una carpeta internas llamada productos, usted puede descargar estas imágenes dentro del mismo repositorio entrando a la carpeta Clase15/resources/images/productos:

Nota: Estas imágenes fueron tomadas de la página ed.team son ellos los creadores y dueños de estas imágenes, aquí daremos uso a estas imágenes con motivos académicos basándonos un poco en el diseño de su página web. Por favor utilizar estas imágenes con responsabilidad en caso de ser descargadas.

Vamos a crear algunos nuevos objetos decoradores dentro de nuestro servicio RecursosService, que vamos a necesitar para la construcción de la interfaz en esta sesión, primero vamos a crear dos nuevos colores de tipo azul:

• Declaración:

// Dentro del servicio RecursosService
private Color colorAzulClaro, colorAzulMarino;

• Ejemplificación

// Dentro del constructor
colorAzulClaro = new Color(231, 244, 253);
colorAzulMarino = new Color(17, 146, 238);

• Métodos get:

public Color getColorAzulClaro(){
    return colorAzulClaro;
}

public Color getColorAzulMarino(){
    return colorAzulMarino;
}

También vamos a crear una fuente que usaremos en los productos que se verán a lo largo de esta clase:

• Declaración:

private Font fontTProducto;

• Ejemplificación:

fontTProducto = new Font("LuzSans-Book", Font.BOLD, 28);

• Método Get:

public Font getFontTProducto(){
    return fontTProducto;
}

Recordando un poco nuestro recorrido, en la clase anterior vimos el funcionamiento de cada método contenido en el servicio GraficosAvanzadosService para personalizar nuestros objetos gráficos de forma especial.

Posicionamiento y tamaño de elementos con LayoutManager

En esta sesión se explicara el uso de LayoutManager para el posicionamiento y tamaño de objetos gráficos en la interfaz y para una explicación completa veremos los siguientes items:

• Definición de LayoutManager.
• Tipos de LayoutManager.
• Preparación de proyecto para uso de GridBadLayout.
• Implementación de GridBadLayout.

Definición de LayoutManager

Los LayoutManager son objetos en Java encargados de posiciónar los objetos gráficos dentro de nuestras interfaces gráficas además de darles un tamaño de forma automática, para esto se deben tener en cuenta ciertos criterios, existen por ejemplo, varios tipos de LayoutManagers con distintas configuraciones pero en general, todos ofrecen el servicio de posicionar y dar tamaño a los elementos en pantalla de forma adecuada.

Hasta el momento no hemos utilizado ningún LayoutManager y esto es por que son complejos de utilizar y aprender, pero el tiempo que nos ahorramos aprendiendo el uso de estos Layouts lo gastamos en el calculo de cada posición y tamaño de cada objeto gráfico en pantalla y muchas veces haciendo multiples pruebas para comprobar que nuestros elementos en pantalla están como queremos. Aunque esto trae cierta ventaja ya que nosotros somos los que controlamos este aspecto y podemos posicionar nuestros elementos como queremos, si es verdad que el tiempo invertido para la gestión de posicionamiento y tamaña en cada objeto se vuelve bastante largo.

El uso de LayoutManager ademas de ahorrarnos tiempos de cálculos para posicionar nuestros elementos y darles un tamaño adecuado, tiene un serie de ventajas que valen la pena recalcar.

Reactividad

Esta es quizás la ventaja que mas resalta en el uso de LayoutManager a comparación del uso de posicionamiento por pixeles, cuando usamos el segundo enfoque estamos dando un tamaño y posición fija a nuestros elementos y esto quiere decir que si la ventana se va a cambiar de tamaño en algún punto estos objetos no van a reaccionar al cambio de la pantalla y se quedaran estáticos con la posición y tamaño dado. Por el contrario cuando utilizamos LayoutManager nuestros objetos gráficos van a tener un tamaño y posición dinámica que va a depender del tamaño de la ventana y se va a reactivar cada vez que la ventana cambie este aspecto, avisando internamente que el tamaño y posición del objeto gráfico va a cambiar para que sea proporcional al nuevo tamaño de la ventana.

En los ejemplos anteriores tenemos un botón que queremos que este ubicado en el medio de nuestra ventana siempre, sin embargo cuando cambiamos el tamaño de la ventana este no reacciona a menos que usemos un LayoutManager.

Esto se podría realizar también con un enfoque derivado del Posicionamiento por pixeles que es el Posicionamiento por porcentajes, pero de todos modos nosotros internamente tendríamos que crear métodos que de forma manual cambiaran el tamaño y posición de nuestros elementos una vez la ventana cambia de tamaño lo cual requiere más lineas de código mientras que el uso de LayoutManager hace que este proceso se realice de forma automática.

Tamaño real a nuestros objetos gráficos

Esto es un problema que muchos desarrolladores no pueden solucionar cuando utilizan Posicionamiento por pixeles y es que cuando se quiere utilizar un JScrollPane debido a que lo elementos dentro de la ventana van a ocupar un tamaño mayor a esta, tenemos que utilizar ScrollBar para poder navegar dentro de la pantalla y asi ver todos los elementos.

El problema aquí radica en que si utilizamos el enfoque que hemos venido utilizando el JScrollPane no va a reconocer un tamaño real en nuestros elementos y por esta razón no va a activar los ScrollBar para navegar. Esto quiere decir que si por ejemplo tenemos un botón que ocupa de ancho mas de lo que la ventana puede mostrar nuestro JScrollPane no nos activara estas barras y no podremos ver el objeto gráfico completo. A esto le llamamos un Tamaño Falso por que aunque le configuremos este tamaño a nuestro botón y podamos ver el tamaño en pantalla internamente Java no lo esta reconociendo y por eso no activará barras de navegación.

Por otro lado usando LayoutManager el compilador es quien se encarga de dar un tamaño y por esto los tamaños serán reales para el programa y activará las barras de navegación.

Este problema se puede solucionar mediante el uso del método setPreferredSize y el uso de objetos Dimension y asi Java podrá reconocer el Tamaño Real de nuestros objetos Gráficos y activar las barras de navegación en un JScrollPane cuando usemos Posicionamiento por pixeles. Sin embargo esto implica crear un objeto Dimension nuevo en memoria por cada objeto gráfico en nuestra interfaz lo cual llenará mas la memoria y habrá mas consumos de recursos.

Tamaño dinámico de la ventana

Cuando utilizamos posicionamiento por pixeles siempre debemos estar pendiente del tamaño ideal de nuestra ventana mientras realizamos su contenido, sin embargo esto queda de lado usando LayoutManager, una vez nuestros objetos están creados y agregados, solo basta con utilizar el método Pack() de la ventana y esta ajustara su tamaño para que todos los elementos en pantalla puedan verse de manera adecuada.

---

Los LayoutManager posiciónan los elementos bajo ciertos criterios y depende del Layout que vamos a manejar en la siguiente sección se explicaran las características generales de los LayoutManager mas importantes.

Tipos de LayoutManager

BorderLayout

Este LayoutManager es el que viene por defecto en la mayoría de objetos encargados de contener otro objetos tales como Frames, Paneles, ScrollPane etc. Divide la ventana en 5 partes: centro, arriba, abajo, derecha e izquierda y esto implica cierta estructura:

• Los objetos que se ubiquen en la parte superior o inferior va a ocupar siempre todo el ancho de la ventana.
• Los objetos que se ubiquen en los laterales ocuparan siempre todo el alto de la ventana.
• El objeto ubicado en el centro tratará siempre de expandirse en ambas dimensiones, de esta forma si hay un único elemento central ocupara toda la ventana, de lo contrario se extenderá hasta el limite con sus objetos compañeros.

El BorderLayout es ideal para posicionar elementos generales en las ventanas ya que tiene una estructura básica de una aplicación de escritorio. Es común que los JFrames utilicen este LayoutManager para dar la estructura principal de la aplicación y cada elemento en especifico use sus propios layouts.

A continuación veremos un ejemplo sencillo:

Podemos ver algunas particularidades:

• Construcción Layout: Basta con ejemplificarlos y agregarlo mediante el método setLayout, en este caso al ser una ventana este paso esta de mas ya que por defecto tiene este layout, pero se coloco para mostrar su construcción.
• Dirección de Objetos Gráficos: Para indicarle a nuestra aplicación debemos indicar la dirección del objeto una vez se agrega a la ventana mediante el objeto BorderLayout y sus opciones North, South, West, East, Center.
• Tamaño de objetos gráficos: Podemos notar que cuando construimos los paneles, le pasamos como argumentos 0, ya que nosotros no nos encargaremos de dar la posición o tamaño como lo hacíamos antes, ahora es el LayoutManager.
• Tamaño de Paneles: Por defecto el compilador ira agrandando o reduciendo la ventana a medida que cada panel ubicado va agregando objetos, en este caso solo se crearon paneles vacíos, asi que para representar que ocuparan un tamaño usamos el método setPreferredSize, pero esto no será necesario una vez cada panel tenga elementos internos.
• Tamaño de la ventana: No es necesario indicarle un tamaño fijo a la ventana, mediante el método pack() la ventana encontrará el menor tamaño para que los objetos gráficos quepan en ella.

Como desventaja esta el hecho de que este LayoutManager impone una sola estructura para cr