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.