Codificación de una interfaz de usuario gráfica Java simple

Una interfaz gráfica de usuario (GUI) creada utilizando el Plataforma Java NetBeans Se compone de varias capas de contenedores. La primera capa es la ventana utilizada para mover la aplicación por la pantalla de su computadora. Esto se conoce como el contenedor de nivel superior, y su trabajo es dar a todos los demás contenedores y componentes gráficos un lugar para trabajar. Normalmente para una aplicación de escritorio, este contenedor de nivel superior se realizará utilizando el

clase.

Puede agregar cualquier cantidad de capas a su diseño GUI, dependiendo de su complejidad. Puede colocar componentes gráficos (por ejemplo, cuadros de texto, etiquetas, botones) directamente en el

, o puede agruparlos en otros contenedores.

Las capas de la GUI se conocen como la jerarquía de contención y pueden considerarse como un árbol genealógico. Si el

es el abuelo sentado en la parte superior, entonces el próximo contenedor puede considerarse como el padre y los componentes que tiene como hijos.

Para este ejemplo, crearemos una GUI con un

instagram viewer

que contiene dos

y un

. El primero

tendrá un

. El segundo

tendrá un

y un

. Solo uno

(y, por lo tanto, los componentes gráficos que contiene) serán visibles a la vez. El botón se usará para cambiar la visibilidad de los dos

Hay dos formas de construir esta GUI usando NetBeans. El primero es escribir manualmente el código Java que representa la GUI, que se trata en este artículo. El segundo es usar la herramienta NetBeans GUI Builder para construir Swing GUI.

Para obtener información sobre el uso de JavaFX en lugar de Swing para crear una GUI, vea ¿Qué es JavaFX??

Nota: El código completo para este proyecto está en Ejemplo de código Java para crear una aplicación GUI simple.

Configurando el Proyecto NetBeans

Crear un nuevo Java Proyecto de aplicación en NetBeans con una clase principal Llamaremos al proyecto

Punto de control: En la ventana Proyectos de NetBeans debe haber una carpeta GuiApp1 de nivel superior (si el nombre no está en negrita, haga clic con el botón derecho en la carpeta y elija

). Debajo de

La carpeta debe ser una carpeta de paquetes de origen con

llamado GuiApp1. Esta carpeta contiene la clase principal llamada

.Java.

Antes de agregar cualquier código Java, agregue las siguientes importaciones en la parte superior del

clase, entre el

línea y el

Estas importaciones significan que todas las clases que necesitamos para hacer esta aplicación GUI estarán disponibles para que las usemos.

Dentro del método principal, agregue esta línea de código:

Esto significa que lo primero que debe hacer es crear un nuevo

objeto. Es un buen atajo, por ejemplo, programas, ya que solo necesitamos una clase. Para que esto funcione, necesitamos un constructor para

clase, así que agregue un nuevo método:

En este método, colocaremos todo el código Java necesario para crear la GUI, lo que significa que cada línea de ahora en adelante estará dentro del

método.

Nota de diseño: Es posible que haya visto el código Java publicado que muestra la clase (es decir,

) extendido desde un

. Esta clase se utiliza como la ventana principal de la GUI para una aplicación. Realmente no hay necesidad de hacer esto para una aplicación GUI normal. La única vez que desearía extender el

clase es si necesita hacer un tipo más específico de

(echa un vistazo a

para más información sobre cómo hacer una subclase).

Como se mencionó anteriormente, la primera capa de la GUI es una ventana de aplicación hecha de un

. Para crear un

objeto, llame al

constructor:

A continuación, estableceremos el comportamiento de nuestra ventana de aplicación GUI, utilizando estos cuatro pasos:

1. Asegúrese de que la aplicación se cierra cuando el usuario cierra la ventana para que no continúe ejecutándose de forma desconocida en segundo plano:

2. Establezca un título para la ventana para que la ventana no tenga una barra de título en blanco. Agrega esta línea:

3. Establezca el tamaño de la ventana, de modo que la ventana tenga el tamaño adecuado para los componentes gráficos que coloque en ella.

Nota de diseño: Una opción alternativa para configurar el tamaño de la ventana es llamar al

método de la

clase. Este método calcula el tamaño de la ventana en función de los componentes gráficos que contiene. Debido a que esta aplicación de muestra no necesita cambiar el tamaño de su ventana, solo usaremos

método.

4. Centre la ventana para que aparezca en el medio de la pantalla de la computadora para que no aparezca en la esquina superior izquierda de la pantalla:

Agregar los dos JPanels

Las dos líneas aquí crean valores Para el

objetos que crearemos en breve, usando dos

matrices Esto hace que sea más fácil completar algunas entradas de ejemplo para esos componentes:

Crea el primer objeto JPanel

Ahora, creemos el primero

objeto. Contendrá un

y un

. Los tres se crean a través de sus métodos de construcción:

Notas sobre las tres líneas anteriores:

los
```
JPanel
```
la variable se declara final. Esto significa que la variable solo puede contener
```
JPanel
```
que se crea en esta línea El resultado es que podemos usar la variable en una clase interna. Será evidente por qué queremos más adelante en el código.
los
```
JLabel
```
y
```
JComboBox
```
que les pasen valores para establecer sus propiedades gráficas. La etiqueta aparecerá como "Frutas:" y el cuadro combinado ahora tendrá los valores contenidos en el
```
fruitOptions
```
matriz declarada anteriormente.
los
```
añadir()
```
método de la
```
JPanel
```
coloca componentes gráficos en él. UN
```
JPanel
```
usa FlowLayout como predeterminado gerente de diseño. Esto está bien para esta aplicación, ya que queremos que la etiqueta se ubique al lado del cuadro combinado. Mientras agreguemos el
```
JLabel
```
primero, se verá bien:

Crear el segundo objeto JPanel

El segundo

sigue el mismo patrón. Agregaremos un

y un

y establezca los valores de esos componentes para que sean "Verduras:" y el segundo

formación

. La única otra diferencia es el uso de

método para ocultar el

. No olvides que habrá un

controlando la visibilidad de los dos

. Para que esto funcione, uno debe ser invisible al principio. Agregue estas líneas para configurar el segundo

Una línea que vale la pena señalar en el código anterior es el uso de

método de la

. los

El valor hace que la lista muestre los elementos que contiene en dos columnas. Esto se llama "estilo de periódico" y es una buena manera de mostrar una lista de elementos en lugar de una columna vertical más tradicional.

Agregar toques finales

El último componente necesario es el

para controlar la visibilidad de la

s. El valor pasado en el

El constructor establece la etiqueta del botón:

Este es el único componente que tendrá un detector de eventos definido. Un "evento" ocurre cuando un usuario interactúa con un componente gráfico. Por ejemplo, si un usuario hace clic en un botón o escribe texto en un cuadro de texto, se produce un evento.

Un oyente de eventos le dice a la aplicación qué hacer cuando ocurre el evento.

usa la clase ActionListener para "escuchar" un clic del botón por parte del usuario.

Crear el oyente de eventos

Debido a que esta aplicación realiza una tarea simple cuando se hace clic en el botón, podemos usar una clase interna anónima para definir el detector de eventos:

Esto puede parecer un código aterrador, pero solo tiene que desglosarlo para ver qué está sucediendo:

Primero, llamamos al
```
addActionListener
```
método de la
```
JButton
```
. Este método espera una instancia de la
```
ActionListener
```
clase, que es la clase que escucha el evento.
A continuación, creamos la instancia de
```
ActionListener
```
clase declarando un nuevo objeto usando
```
nuevo ActionListener ()
```
y luego proporciona una clase interna anónima, que es todo el código dentro de las llaves.
Dentro de la clase interna anónima, agregue un método llamado
```
acción realizada()
```
. Este es el método que se llama cuando se hace clic en el botón. Todo lo que se necesita en este método es usar
```
setVisible ()
```
para cambiar la visibilidad de la
```
JPanel
```
s.

Agregue los JPanels al JFrame

Finalmente, necesitamos agregar los dos

s y

. Por defecto, un

usa el administrador de diseño BorderLayout. Esto significa que hay cinco áreas (en tres filas) de la

que puede contener un componente gráfico (NORTE, {OESTE, CENTRO, ESTE}, SUR). Especifique esta área utilizando el

método:

Configure el JFrame para que sea visible

Finalmente, todo el código anterior habrá sido en vano si no configuramos el

ser visible:

Ahora estamos listos para ejecutar el proyecto NetBeans para mostrar la ventana de la aplicación. Al hacer clic en el botón cambiará entre mostrar el cuadro combinado o la lista.