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.

Interfaz gráfica en Java-Netbeans Parte 1

Interfaz Gráfica en Java-Netbeans para PC.

El desarrollo de una interfaz gráfica puede surgir debido a la necesidad de automatizar una tarea, facilitar el uso de ciertas funciones a un usuario o, tal vez, para darle valor agregado a la ejecución de algún proceso en particular. 

Cualquiera sea la razón por la cual se pretenda desarrollar una GUI, se debe considerar sobre todo el diseño y la usabilidad. He tenido experiencias de colegas en donde la preocupación fundamental radica en el lenguaje y el IDE, más allá de la distribución del contenido, la fuente y colores. Por mucho que se desarrolle una GUI en Java, no será mejor que otra desarrollada en cualquier lenguaje si es que no cumple los objetivos fundamentales: facilitar el uso.

Esta vez, se presentarán algunas técnicas básicas para el desarrollo de una GUI en Java bajo el entorno de Netbeans. Escoja ud, su mejor IDE y su mejor lenguaje. Una GUI no será mejor que otra si es que compara los lenguajes o el entorno como muchos por ahí acostumbran. Si el objetivo se cumple, entonces la interfaz es buena.

Paso 1: Crear proyecto en Java

Observa que sólo debes ingresar el nombre del proyecto en "Project Name". La ubicación del proyecto se completa en función del nombre del proyecto.

Paso 2: Entendiendo el entorno Netbeans

Es así como Netbeans arroja la creación del proyecto. En el costado izquierdo en "Projects" se puede observar el proyecto GUI1, el cual contiene las carpetas "Source Package" y "Libraries". En Source Package figura el package "gui" en el cual estará contenido todas las clases del proyecto.

Mi recomendación es usar los package como carpetas de administración en proyectos más extensos. Podrás tener en un package todas las clases relacionadas al ingresos de datos por parte del usuario, en otro toda la gestión de los mismos y en un tercero el almacenamiento.

Para crear nuevos package presiona click derecho sobre "Source Package" y creas uno nuevo. Recuerda añadir el package correspondiente en tu clase e importar los necesarios (si es que quieres tener acceso sobre otros).

Paso 3: Crear la clase de la interfaz con SWING

Selecciona la opción "New File" en la esquina superior izquierda. Luego, en la ventana emergente, seleccionas la categoría "Swing GUI Forms" y seleccionas el tipo "Jframe Form".

Le das "Next" y luego ingresas el nombre de tu jFrame, en este caso: "ventana1". Particular atención sobre la información de proyecto, ubicación y package. En nuestro caso el proyecto es GUI1, dentro de "Source Package" package "gui1". Si tuviéramos otro package, es aquí en donde debiéramos cambiar la información.

Paso 4: Entendiendo la clase

Observe cómo dentro del package "gui1" se ha añadido la clase "ventana1.java" que hemos creado. Además, en la ventana del editor figura una nueva pestaña "ventana1.java" la cual muestra el contenido de la clase lista para editar. Observe las sub-pestañas "Source" y "Design": éstas presentan el contenido en código y gráfico respectivamente.

Paso 5: Añadiendo contenido a la ventana.

Desde la paleta (costado derecho), selecciona y arrastra los controles "Label" y "Button" hacia la interfaz.

Paso 6: Instancia de clase

Vuelve a la clase principal "GUI.java" y dentro del método "Main" añade el código:

ventana1 nombre_cualquiera = new ventana1();

nombre_cualquiera.setVisible(true);

Lo anterior significa instanciar una clase. Corresponde al constructor de la clase. La clase ventana1 ha sido creada bajo el identificador "nombre_cualquiera" y podrá ser referenciada usando el mismo identificador.

Paso 7: Ejecutar la aplicación

Dale click a ejecutar o "run" (botón tipo play de color verde)

Paso 8: Utilizar lo aprendido

Esta técnica de instanciar la clase sirve para muchas otras cosas, Puedes utilizar el mismo Frame o crear otro Frame e instanciar su clase al presionar el botón. Así entonces podrás abrir la misma u otra ventana.

Por ejemplo: Dale doble click al botón en modo diseño (Design). El entorno te llevará al código (Source) del botón. Agrega el mismo segmento de código antes utilizado con algunas modificaciones como:

ventana1 nombre_cualquiera2 = new ventana1();

nombre_cualquiera2.setVisible(true);

Así entonces podrás llamar a la misma clase ventana1.java bajo el identificador "nombre_cualquiera2". Esta opción será de gran utilidad y permitirá reciclar o reutilizar código ya que no necesitarás "diseñar" una nueva ventana sino que podrás usar la misma pero alterando su contenido.

Paso 9: Modificar contenido de un Frame

Para modificar el contenido de un Frame desde otra clase, deberás prestar atención sobre los modificadores de acceso: private, public, static, etc. Para tener el control de los objetos de una clase sobre otra, estos objetos deberán ser del tipo "public static". Static permite el acceso desde una clase sobre otra dentro de un mismo package.

Entonces si deseamos modificar el texto "jLabel" del label al instanciar la clase desde la clase GUI1, deberás configurar el modificador de acceso del jLabel del siguiente modo:

a) Selecciona la clase ventana1.java

b) Selecciona el tab de diseño (Design)

c) Dale click al elemento jLabel1

d) En la paleta de propiedades (costado inferior derecho), selecciona la opción Code

e) Dale click a la opción "Variable Modifiers".

f) En la ventana emergente selecciona la opción default + static

g) Dale OK.

De este modo es como se debe proceder para modificar los atributos de otra clase.

Para validar lo anterior, dentro del código del método Main, dentro de la clase GUI1, añade:

nombre_cualquiera.jLabel1.setText("Texto de prueba");

El acceso siempre será del mismo modo, para cualquier elemento sobre cualquier clase:

1) Identificador de instancia de clase: nombre_cualquiera

2) Elemento de clase: jLabel

3) Método: setText

4) Atributo: "Texto de prueba"

Paso 10: Programar y diseñar

Finalmente, con estos pequeños tips y con algo de imaginación, podrás crear la base de una interfaz gráfica de usuario.

En otra oportunidad presentaré técnicas un poco más avanzadas, manejo de formularios, bases de datos, comunicación serial y muchos otros.

Como dijo alguien por ahí: "Devuélvele a internet lo que obtienes de él"

Los espero en la próxima entrada.

Dale +1 o comenta los tópicos que quisieras aborde en la siguiente entrada.

Saludos.