Formularios para dummies I [Java]

Hola buen día a todos! :D después de hacer una pregunta en el grupo de facebook que conforma mi salón por el tema que querían leer hoy me contestaron que "para dummies" y por eso decidí colocar así a esta publicación.

El objetivo de esta serie de publicaciones va ser aprender a usar los formularios (JFrame) en Java desde NetBeans. Aprenderemos a como ocupar cajas de texto, radios, checkbox, listas, botones etc.

Ahora bien antes de comenzar para poder hacer este ejercicio te recuerdo que necesitas solo 3 cosas:

• JDK Instalado en tu PC
• NetBeans (La aplicación de hoy esta hecha  desde la V. 7.2)
• Muchas ganas de aprender :D

Bueno pues primero abriremos Netbeans y ya que cargue nos dirigimos a crear nuestro proyecto desde el menú File o Archivo > New Project o Proyecto Nuevo, aparecerá un cuadro como el siguiente:

Debemos escoger Java Application y vamos a dar un clic en siguiente para colocar un nombre a nuestro proyecto:

En mi caso el nombre que me agrado fue Formularios tu puedes colocar el que gustes, una cosa importante es desactivar la opción que dice: create class main o crear clase principal, ahora solo daremos clic en Finalizar o Finish.

Ahora bien! cuando cargue en la parte de la derecha aparece un panel en el que se encuentran los proyecto abiertos (unas tacitas de café rojas)  elije el tuyo da un clic derecho y elije Java Package esto para crear un paquete donde almacenaremos nuestra clase, muestra un cuadro solicitando un nombre yo le puse ejemplo1.

Ahora como se muestra en la anterior captura nuevamente vamos a dar clic derecho pero ahora sobre ejemplo1 y vamos elegir la opción JFrame Form o Formulario JFrame <recuerda! que puede cambiar según el idioma> pide un nombre yo le coloqué Home :/ ahora que lo pienso un nombre raro nada que ver con lo que hará nuestra aplicación, te recomiendo le coloques MiniCalculadora, por favor!!!! respeta la mayúsculas! o al menos la primera, recuerda que las clases siempre deben nombrarse con la primera mayúscula, cuando cargue tu formulario se debería ver así (bueno así pero sin los JLabel JTextFiel y JButton que se muestran en el cuadrito):

Los 3 objetos que aprenderemos a usar hoy son los siguientes:

1. Etiquetas (JLabel) que se usan solo para mostrar texto... son como letreros nada mas.
2. Campos de Texto (JTextField) o también llamadas cajas de texto que nos servirán para que el usuario escriba "algo" dentro de ellas.
3. Botones (JButton) que los usaremos para que cuando se de un clic sobre ellos se realice una acción (llamada a un método por medio de un evento [Debería pero no entrare en detalles de que es un evento] ).

Ahora bien! cual es tu trabajo! pues será arrastrar los objetos de la derecha al cuadro (JFrame) de la izquierda de manera que el formulario se parezca al de la captura anterior, es decir implántale esas etiquetas, cajas de texto y botones.

Ahora no vas a querer que se queden así verdad?  Pues bien! comienza presionando clic derecho en la primera label y escoge la opcion Edit Text o editar texto y cambia sus contenidos por los que se muestran en la siguiente captura:

Ten mucho cuidado! se pueden mover los objetos de forma rara además las cajas al borrarles el contenido se encogen así que tendrás que estilaras! hasta que tomen una forma muy parecida a la de arriba.

Hasta estos momentos solo modificamos los "letreros" que mostraran los objetos, pero para trabajar de manera mas eficiente deberíamos darle nombres a los objetos, por el momento solo a las cajas que son las que mas nos interesan. Da clic sobre la primera caja de las que están en blanco y en el panel de la derecha se mostrara algo como lo siguiente:

Si no se muestra no te preocupes por ahí debe decir: Navegator o Navegador da clic sobre ese letrero y se mostrara el panel que te menciono. Por default estará seleccionado el objeto ... como diría un compañero (-Es lógico, Luis-) que seleccionaste hace un momento, presiona la lecla F2 y coloca el nombre txtn1 a la siguiente caja txtn2 y a la última txtn3,  puedes colocar los nombres que gustes para hacer referencia a los objetos, pero ya en el código yo usare esos.

Ahora comienza la hora de programar, da doble clic muy rápido en el boton "Sumar" para que aparezca el código del método que se llamará, fíjate bien donde escribes y checa la siguiente captura.

Ignora el cuadro de la derecha por el momento, dentro del método jButton1ActionPerformed vamos a escribir el código que se muestra en la captura anterior:

Se crean las variables n1 y n2 de tipo enteras que guardara el contenido de las cajas txtn1 y txtn2. El método getText() se usa para obtener el contenido escrito de una caja lo cual devuelve una cadena o texto por lo que debe ser convertido a número por medio del método parseInt de la clase Intenger.

 

int n1=Integer.parseInt(txtn1.getText());
        

int n2=Integer.parseInt(txtn2.getText());

       

Se crea una tercera variable r para almacenar el valor de la suma de las variables n1 y n2.

int r=n1+n2;

Para asignar un valor a una caja de texto se usa el método setText() que como parámetro se pasa el contenido que tendrá el TextField y que NO puede ser de tipo int por lo cual se usa el método valueOf de la clase String para convertir el valor de la variable r a un texto.

    

txtn3.setText(String.valueOf(r));
        

Asignamos valores nulos "nada de nada" a las cajas txtn1 y txtn2 esto para que se elimine su contenido. Si gustas puedes omitir estos 2 renglones de código que no afectan en el funcionamiento pero pueden ahorrarte un poco de tiempo.

txtn1.setText(null);
        

txtn2.setText(null);

Ahora bien! si deseas ver como funciona hasta aquí tu formulario, córrelo (clic en el botón verde de PLAY que se encuentra arriba) o bien presiona la tecla F6, se mostrara el cuadro que aparece mas arriba indicando que no existe una clase principal elige la que estamos trabajando (ejemplo1.MiniCalculadora) y da clic en Ok y taran.

Prueba colocando un número en el primer cuadro otro en el segundo! y da clic en Sumar debería aparecer el resultado en la caja de abajo, si eres mas curioso prueba los otros botones pero te darás cuenta que no funcionan aun, ese es tu trabajo! prográmalos, cierra la ventana que apareció y regresa al diseño del formulario.

Para regresar al formulario, arriba del código hay 3 pestañas: Source, Desing y History da clic en Design y ahora vuelve a dar doble clic en el botón Restar y prográmalo como el anterior, recuerda checar que te encuentres en el método jButton2ActionPerformed o jButton3ActionPerformed o jButton4ActionPerformed depende del orden en el que acomodaste los botones, y recuerda que la variable r ahora sera igual a n1-n2 para la multiplicacion n1*n2 y para division n1/n3. Suerte.

Si deseas el código fuente de la aplicación lo puedes bajar dando clic aqui.