Interfaz gráfica en Java-Netbeans Parte 3

Interfaz gráfica en Java-Netbeans Parte 3

Mis saludos internautas. Esta vez continuaremos con la GUI en Java para PC desarrollada en los tutos anteriores: Parte 1 y Parte 2.

El estado anterior corresponde al indicado en la figura siguiente.

Lo que haremos en este tutorial:

1.- Trabajaremos sobre el diseño de la GUI

2.- Habilitaremos campos para ingresar el Nombre, Teléfono y Correo

3.- Procesaremos la información ingresada por el usuario.

4.- Representaremos la información en un campo de texto.

El objetivo consiste en dominar diversas técnicas de manejo de los componentes. Con un poco de creatividad podrás utilizar estas mismas técnicas para darle valor agregado a tus proyectos.

Paso 1: Añadir campos para ingresar información

Debes seleccionar el jLabel y el jTextField, en el tab de diseño "Design" y copiarlo-pegarlo las veces que necesites. Para este caso pegaremos el contenido 2 veces. También puedes arrastrar cuantos jLabel y TextField necesites desde la Paleta de componentes.

Sitúa los componentes en el jPanel de tal modo que te queden organizados de la siguiente manera:

Recuerda que puedes previsualizar el avance, seleccionando la opción "Preview" desde el pane superior.

Paso 2: Editar el texto de los campos agregados.

Dale click derecho a cada componente (jLabel y jTextField) y luego selecciona la opción "Edit Text", tal como figura en la imagen a continuación.

Modifica el texto de cada jLabel para indicar: Nomre, Teléfono y Correo.

Si tuvieras problemas con la ubicación de los componentes sobre el Panel, es posible que se deba al Layout seleccionado. El Layout es una especie de matriz invisible que fija las reglas de ubicación de los componentes. Selecciona el layout haciendo click derecho sobre el jPanel y modifícalo para que experimentes

Puedes hacer click derecho también sobre la sección que quisieras modificar su layout. El resultado sería una especie de layout específico a la sección. Dale click derecho, selecciona "Edit Layout Space" y sobre la ventana selecciona o no la opción "Resizable" según quieras alterar o fijar su ancho en este caso, respectivamente.

Paso 3. Añadiendo una imagen de la becera (o logo).

Un truco importante es saber que los contenedores en general pueden integrar imágenes. Por ejemplo un botón puede ser una imagen seleccionando la opción "Icon" en sus propiedades (click derecho sobre el componente).
Es este caso utilizaremos un jLabel para poner una imagen. El jLabel nos servirá como contenedor de la imagen, y el texto típico del jLabel simplemente lo borramos. Lo que  obtendremos será una imagen enmarcada.
Arrastra el jLabel al panel tal como se indica en la figura:

Para añadir la imagen dale click derecho al componente y selecciona la opción "Icon", tal como se muestra en la figura.

Con esta opción (Icon) podrás seleccionar la imagen que quieres agregar.

Se abrirá una imagen como la siguiente. Selecciona la opción "External Image" y en la opción "..." busca tu imagen preferida. Una vez que selecciones tu imagen, dale OK.

El resultado de añadir la imagen arrojará algo como lo siguiente.

Paso 4. Añade un jTextArea de salida y un jButton para limpiar.

El jTextArea nos servirá para mostrar la información ingresada. Así sabremos que la manipulación de la información ingresada es la correcta.

Arrastra un Jbutton hacia el panel y modifica su texto dándole click derecho / Edit Text.

Arrastra un TextArea, altera sus dimensiones y distribuye los elementos de la siguiente manera.

Paso 5. Lectura de datos.

Dale doble click al botón "Aceptar" para acceder al código relacionado al evento OnClick.
Dentro del código generado, añade el siguiente fragmento:
                               
        // Lectura de datos
        String nombre   = jTextField1.getText();
        String telefono = jTextField2.getText();
        String correo   = jTextField3.getText();
     
        // Escritura de datos
        jTextArea1.setText(""
                + "El Nombre es   : "+nombre+"\n"
                + "El Teléfono es : "+telefono+"\n"
                + "El Correo es   : "+correo+"\n");

Particular atención en los nombres de los componentes. En mi caso el TextField1 corresponde a aquel designado para el nombre, el 2 para el teléfono y así. Para validar el nombre de tu variable, selecciona 1 vez el componente en el tab de Diseño y fíjate cuál es el elemento seleccionado en el Navigator (costado inferior izquierdo). Ese será el nombre de tu variable.
En la escritura de datos lo que hago es añadir al jTextArea las variables leídas. El signo "+" se usa para concatenar. El "\n" quiere decir New Line.

Paso 6. Ejecución.

Cómo harías para limpiar los campos al seleccionar el botón "Limpiar"?

Nos vemos en la siguiente entrada!