▷ VENTANAS en JAVA 【 TEXT FIELD, RADIO BUTTON y BOTONES 】

Interfaces gráficas en Java (Ventanas)

Parte 1

En este artículo aprenderemos a realizar una interfaz gráfica de usuario (GUI - Graphic User Interface) en el lenguaje Java, la cual nos permitirá una interacción más amigable con el usuario mediante ventanas que le resulten atractivas y fáciles de usar a nuestros usuarios.

Es importante tener en consideración que las interfaces gráficas de usuario en Java pueden ser codificadas desde cero o bien haciendo uso del editor de ventanas de un IDE, como por ejemplo Apache NetBeans, en este artículo nos centraremos en la utilización de éste editor para la codificación de ventanas.

Clase gráfica JFrame

Para poder crear una clase gráfica, debemos crear un proyecto en Apache NetBeans y borrar la clase principal que nos crea por defecto, luego debemos de hacer clic con el boton derecho del mouse en el paquete de la clase y después en las opciones New-->JFrame Form el cual se define como el formulario principal de nuestro programa y el cual contendrá todos los objetos gráficos que interactuarán con el usuario.

Figura 1. Creamos nuestra clase gráfica JFrame Form.

Cuando creamos una clase gráfica podemos ver que aparecen en ella 3 opciones que nos ayudarán a construir nuestra ventana si vamos trabajando en ellas adecuadamente, dichas opciones son: 

Figura 2. Opciones de la clase gráfica JFrame Form.

1. Source: Permite editar el código funcional de la clase gráfica.
2. Design: Permite editar el diseño de la clase gráfica, genera en Source el código de diseño, sin embargo, no es editable directamente desde ahí.
3. History: Permite visualizar el historial de cambios en la clase gráfica
   

El código autogenerado no editable lo podremos encontrar en las partes coloreadas en gris y en la línea Generated Code que podremos ampliar haciendo clic en el botón [ + ]. Si queremos editar este tipo de código debemos de hacerlo mediante las propiedades de diseño en los objetos.

Figura 3. Código autogenerado en Java con Apache NetBeans.

Panel de objetos gráficos (Paleta)

Los objetos gráficos que pueden insertarse en la clase gráfica JFrame Form se encuentran en el panel Palette, en caso de no encontrarla puede obtenerse mediante el menú Window-->IDE Tools-->Palette.

Figura 4. Objetos gráficos para el JFrame en la paleta de Apache NetBeans.

En este artículo nos centraremos en los siguientes objetos gráficos:

• Text Field: Es aquel campo que nos permite ingresar texto y números al formulario, por defecto los datos que se ingresan a este campo son de tipo cadena (String), por lo que si queremos hacer operaciones con números (Integer, float, Double) debemos de transformarlos a ese formato por medio de funciones de conversión.
• Radio Button: Son aquellos botones de opción que permiten al usuario seleccionar un valor de un menú de opciones, los radio button se utilizan principalmente para que se pueda elegir solo una opción, por lo tanto cada radio button que tengamos debe pertenecer al mismo grupo de botones (Button group).
• Button: Los botones en un formulario son aquellos elementos que permiten realizar las acciones de una ventana dependiendo de los datos ingresados en otros elementos gráficos, generalmente son los que se usan para darle funcionalidad a la ventana cuando se hace clic en él, pero se puede optar por codificar otros elementos que realicen la misma tarea.

Panel de Propiedades

Los objetos en Java poseen propiedades que son útiles en su construcción y permiten que estos tengan ciertas características y propiedades para su uso en ejecución. Dichas propiedades se encuentran en el panel Properties, en caso de no encontrarlo puede obtenerse mediante el menú Window-->IDE Tools-->Properties.

Figura 5. Panel de propiedades de Apache NetBeans.

 

El panel de propiedades tiene las siguientes pestañas de opciones:

1. Properties: Muestran las propiedades gráficas del objeto, cuando se cambian se actualiza su código de diseño en Source y de igual forma no es editable desde ahí.
2. Events: Contiene los métodos manejadores de eventos, los cuales que indican el momento en el cual se debe ejecutar un bloque de código cuando el objeto pase de un estado a otro, por ejemplo al oprimirse, arrastrarse, colocar el mouse, al cerrarse, al minimizarse etc.
3. Code: Muestra las propiedades de código del objeto, en esta pestaña se puede cambiar el nombre del objeto en la opción Variable Name o bien su modificador de acceso en la opción Variable Modifiers entre otras.

Para ampliar un poco más la temática te dejo un enlace a la parte 2 de este artículo.

 

En el siguiente video te explico un poco más a detalle el ejemplo anterior y su codificación paso a paso.

 

No te olvides darle LIKE y SUSCRIBIRTE al blog y a mi canal si te gustó el video. Si gustas realizar una DONACIÓN para ayudarme a mejorar el canal y mi contenido, puedes hacerlo mediante el botón ❤$GRACIAS ubicado en la parte posterior del video en YouTube o visitando el enlace https://linktr.ee/ezavalar y haciendo clic en el botón Donaciones.