Interfaz gráfica en Java-Netbeans Parte 2

Interfaz gráfica en Java-Netbeans Parte 2

En esta segunda entrada bajo el tópico "Programando una interfaz gráfica en Java", abordaremos algunas técnicas básicas de diseño y funcionamiento lógico de la interfaz. 

En caso de que no hayas revisado la entrada anterior en donde presento paso a paso cómo desarrollar una interfaz en Java, te invito a que te des un paseo rápido por la Parte 1 de tal modo de avanzar sobre lo construido.

El proyecto de hoy consistirá en recopilar datos de usuarios y gestionarlos de acuerdo a ciertos requerimientos. Esta base nos servirá para almacenarlos en un archivo de texto, para subirlos a una base de datos, enviarlos por correo electrónico y muchas otras aplicaciones más.

Paso 1: Retomar desde el paso anterior

Anteriormente, a modo de resumen:
a) Creamos un proyecto
b) Entendimos el uso básico de los package
c) Creamos un nuevo jFrame
d) Instanciamos el jFrame llamado "ventana1" desde el Main Class
e) Trabajamos con los modificadores de acceso
f) Modificamos algunos atributos.

Paso 2. Editar el jFrame (ventana1)

Lo primero que haremos será añadir un fondo colorido al Frame.
Por conveniencia, eliminaremos el jLabel y el jButton con el botón "suprimir" desde la ventada de diseño. Luego añadiremos un jPanel arrastrándolo hacia el jFrame y luego seleccionaremos el color desde las propiedades del elemento.

Particular atención en la ventana "Navigator" (costado inferior izquierdo), el elemento que estás editando debe estar seleccionado. En caso contrario podrías estar modificando otro componente sin haberlo notado.
Asimismo, en la paleta "Properties" (costado inferior derecho) identifica el atributo "background", es este campo el que debemos editar de tal modo de modificar el fondo del panel. Dale click y selecciona el color blanco.



Dale OK

Modifica el tamaño del jPanel arrastrando con el mouse su esquina hasta cubrir la dimensión de todo el jFrame.
Selecciona la opción "Preview" encerrada en un cuadro rojo de la siguiente imagen y obtendrás una vista previa del diseño de tu interfaz.

Te invito a que navegues por todas las propiedades del jPanel, allí encontrarás atributos como: tamaño, posición, tipo de fuente, habilitación, cursor, etc. Todas las propiedades pueden ser modificadas mediante código o a través de la paleta.

Para modificar los atributos mediante código sigue la siguiente regla:

nombre_elemento.método.atributo

Más específicamente, para obtener el valor de ciertos atributos, la regle será:

variable = nombre_elemento.getNombre_Atributo();
Por ejemplo:
texto = jLabel1.getText();

Por otro lado, para setear el valor de un atributo en algún elemento, la regla será:

nombre_elemento.setNombre_Atributo(Valor);
Por ejemplo
jLabel1.setText("Hola");

Paso 3. Habilitar campos para ingresar la información

Utilizaremos 3 tipos de componentes o elementos:
a) jTextField: Permite el ingreso de texto por parte del usuario.
b) jLabel: Permite identificar el campo con un texto guía.
c) jButton: Permite confirmar la acción.

Arrastre al contenido del jPanel cada uno de los componentes antes listados

Particular atención acerca de la distribución de los componentes en el "Navigator" (costado inferior izquierdo). Ya que añadimos estos 3 componentes al jPanel, el orden jerárquico debe ser tal que el jPanel contenga los elementos soportados.
Si revisamos con detalle el "Navigator", veremos que el jPanel está contenido dentro del jFrame y, de acuerdo a la jerarquía, sería correcto: el jFrame contiene al jPanel y este último contiene a los otros 3 elementos.
Te invito a que alteres la jerarquía para que veas lo que pasa. Para modificarla sólo debes arrastrar desde el mismo "Navigator" el componente que quieras modificar y posicionarlo en el orden que desees. En nuestro caso no es necesario modificar la distribución, pero sí será importante cuando tengamos más elementos dentro de la interfaz.

Paso 4. Editar texto de los componentes

Editaremos el texto de los componentes con el objeto de informarle al usuario qué es lo que debe hacer. Para editar el texto de cada uno de los componentes disponemos de al menos 3 opciones (utilizaremos la tercera opción):

a) Seleccionar el componentes y buscar la información en la paleta de propiedades (ya la utilizamos)
b) Modificar por código mediante las reglas antes descritas (ya la utilizamos)
c) Haciendo click derecho sobre el elemento y seleccionando: "Edit Text" (*)

Modificaremos el texto de los componentes seleccionando la opción "Edit Text" al hacer click derecho sobre el elemento.

Escribe "Aceptar" para el jButton, "Nombre" para el jLabel y borra el texto del jTextField.

Paso 5. Manejar la información

Lo que queremos hacer es manejar la información que ingrese el usuario mediante el jTextField una vez que confirme con el botón "Aceptar".
Para lo anterior accederemos al método "OnClick" del botón. Este método nos servirá para ejecutar alguna función una vez que el usuario haga click; en otras palabras: leer el contenido del jTextField.

Para acceder a los métodos de cada componente existen al menos 3 opciones (utilizaremos la tercera opción):

a) Hacer click derecho sobre el componente, seleccionas "Events", luego el evento de interés en nuestro caso "Mouse" y finlamente "MouseClicked".

b) Seleccionas el elemento, vas a la paleta de propiedades "Properties" (costado inferior derecho) y seleccionas el tab "Events". Allí encontrarás todo los eventos disponibles.

c) Seleccionar el elemento y hacer doble click sobre él.
Si hacer doble click sobre el botón el entorno cambiará la vista de diseño "Design" hacia la vista de código "Source". Verás que el cursor estará parpadeando dentro del método "jButtonActionPermormed".
Este método, creado automáticamente por NetBeans, es el que utilizaremos para ingresar nuestro código.
En caso de que Netbeans no nos lleve hacia el método esperado, vuelva al tab de diseño "Design" y presione doble click sobre el elemento nuevamente.

Paso 6. Ingresar código de manejo de datos

Dentro del método del jButton, copia el siguiente código. Si recuerdas las fórmulas, lo que hacemos es obtener el texto que hay en el jTextField1 (ojo con el nombre correcto, se puede ver en el "Navigator"), y pasarlo a la variable de tipo String "nombre_variable".

        String nombre_variable = jTextField1.getText();
        System.out.println(nombre_variable);

System.out.println(nombre_variable) lo que hace es imprimir por la pantalla de salida el texto de la variable.

Paso 7. Ejecutar la aplicación

Una vez finalizado lo anterior, revisaremos la clase GUI.java para validar que todo esté en orden.
En el recuadro "Projects" (costado superior derecho) selecciona la clase GUI.java dándole doble click. Nuestro main class debiera ser igual a lo siguiente.

Ejecutamos la aplicación y observamos que la ventana aparece. Podemos ingresar un texto, darle click al botón "Aceptar" y ver cómo en la ventana "Output" (segmento inferior) aparece el texto ingresado.

En la próxima entrada continuaremos sobre este progreso y manejaremos contenidos adicionales, diseños, manejos más complejos y otros más.
Espero que esta información compartida te sea de utilidad. Cualquier información adicional o consulta no dudes en comentarlo.
Un abrazo y nos vemos en la siguiente entrada.