Mi primera calculadora en Java
En este blog vamos a ver el paso a paso de como crear una calculadora que reciba dos números y pueda generar las operaciones básicas como sumar, restar, multiplicar y dividir. Adicional a eso vamos a crear un botón que sirva para limpiar todos los campos y otro para cerrar la aplicación.
- Primero creamos un proyecto con nombre Calculadora.
2. Dentro de este proyecto creamos una main Class llamada Operacion (sin tilde) para guardar los métodos que vamos a utilizar, todo esto dentro de un Package llamado en este caso Carpeta
3. Ahora creamos un JFrame Form haciendo clic derecho arriba del package «Carpeta», con esto lograremos generar la interfaz gráfica con nombre Calculadora (igual que el proyecto) y este formulario igual se guardará en el package llamado Carpeta.
4. Ahora haremos click en nuestro JFrame Form llamado Calculadora y buscaremos la pestaña llamada Design para poder dar las primeras configuraciones a nuestra pantalla.
Aquí agregaremos dos métodos.
public Calculadora() {
initComponents();
setSize(400,300); /* 1) Tamaño de la pantalla*/
setLocationRelativeTo(null); /* 2) Centrar la ventana al centro de la pantalla*/
}Se vería algo así en nuestro código del JFrame Form
5. Ahora si hacemos scroll en nuestro código vamos a pillar una parte que dice «Look and feel setting code (optional)», y ahí vamos a cambiar el estilo por defectos de los elementos de nuestro formulario, aprovechando de utilizar los estilos de Windows.
5.1 Aquí cuando se despliegue el codigo oculto, veremos un sitio donde dice «Nimbus», palabra la cual borraremos y cambiaremos por «Windows»
5.2 Ahora en ese lugar le escribiremos «Windows» como ya habíamos dicho.
6. Ahora haremos click en nuestro JFrame Form llamado Calculadora y buscaremos la pestaña llamada Design para poder comenzar con las primeras configuraciones de nuestra GUI (Graphic User Interface).
7. Ahora le daremos las primeras configuraciones a nuestra interfaz gráfica, para ello le arrastraremos un elemento Panel que cubra toda la pantalla desde el lado izquierdo de nuestro NetBeans.
De esta forma el panel quedará del mismo tamaño que el JFrame Form y ahí ya podremos comenzar agregar los elementos que necesitamos
8. Ahora comenzaremos a arrastrar y soltar los elementos que necesitamos en nuestra pestaña y los vamos a ordenar a nuestro gusto.
9. Si te das cuenta en el panel del lado inferior izquierdo están todos los elementos de nuestra pantalla pero sin nombres de fácil identificación para el código, por ende una buena practica es renombrar todos estos elementos
9.1 Entonces seleccionaremos una etiqueta (Label) y le cambiaremos su nombre en código
Le pondremos el nombre lblNum1 (lbl = label y Num1 = de Número 1),ya que ese nombre es más descriptivo y fácil de recordar e identificar.
Este procedimiento lo haremos con todos los JLabel según corresponda…
10. Ahora haremos el mismo procedimiento con los campos de texto, ya que sobre todo estos son campos que sí o sí debemos tener bien identificados a la hora de capturar nuestros datos para trabajar con ellos.
Le pondremos el nombre txtNum1 (txt = Texto y Num1 = de Número 1),ya que ese nombre es más descriptivo y fácil de recordar e identificar.
Este procedimiento lo haremos con todos los JTextField según corresponda…
Ahora para estos campos de texto le eliminaremos ese texto que aparece por defecto para que simplemente estén vacíos esperando información
Ahora nuestros campos de texto se ven mucho mejor!
11. El mismo procedimiento haremos con los JButton, le pondremos un nombre más descriptivo para poder identificarlos mejor a la hora de hacer código.
Le pondremos el nombre btnSumar (btn = Button y Sumar = por la acción que hará el botón según corresponda, en este primer caso es para sumar), ya que ese nombre es más descriptivo y fácil de recordar e identificar.
Hasta aquí ya terminamos con la interfaz gráfica, ahora lo que nos queda es lograr generar la funcionalidad de nuestro formulario, mira como está quedando si le damos clic derecho y run…
Nota: Si te fijas que te queda muy poco margen en la parte inferior es porque dentro de los 300px de alto que le configuramos en el paso 4 está considerando el espacio para la barrita superior. Por eso para solucionarlo le podrías agregar 30px más de alto para compensar ese espacio que se perdió, es decir te quedaría con un alto de 330px, el código sería así: setSize(400,330);
12. Ahora vamos a crear el primer método en la Clase Operacion que habíamos creado al inicio.
package Carpeta;
public class Operacion {
int suma;
public int Sumar(int num1, int num2) {
suma = num1 + num2;
return suma;
}
}En nuestro código se vería algo así…
13. Teniendo listo nuestro primer método, podemos comenzar a utilizarlo en el botón que corresponda de la interfaz. Para ello vamos a dar doble clic en el botón Sumar de nuestra interfaz y nos va a llevar al sitio donde debemos comenzar a codificar su funcionalidad.
Eso me llevará aquí, donde comenzaré a crear la funcionalidad del botón… (Aquí es cuando ya comenzamos a valorar y agradecer el hecho de haber renombrado correctamente todos los elementos de la interfaz para no perdernos ni marearnos con el código)
13.1 Ahora capturamos los datos ingresados en el cuadro de texto Número 1 y en el cuadro de texto Número 2.
Cabe destacar que como estos cuadros son de texto, hay que transformar ese tipo de dato String en Integer para que después realmente se puedan operar como números y no como letras.
13.2 Luego instanciamos la clase Operación para usar el método Sumar que habíamos creado anteriormente
13.3 Ahora usamos el metodo sumar del objeto «objOperacion» que acabamos de instanciar, de tal manera que el código quedaría de la siguiente forma
13.4 Luego de tener el resultado en tipo de dato Entero (Integer) debemos transformarlo a tipo de dato Texto (String), para que de esta manera la información pueda ser visualizada en la cajita del formulario donde se supone que debe mostrar el total de la suma.
Para hacer esta transformación escribimos el siguiente código…
13.5 Para finalizar el script del botón sumar vamos a poner este dato tipo String que acabamos de guardar en la variable «totalTexto«, con un codigo que se utiliza para «setear» osea configurar o asignar un valor a determinada cajita de texto, en este caso le vamos agregar un dato a la cajita txtTotal que habíamos hecho en nuestra interfaz.
En definitiva el script para generar la suma con un solo botón quedaría de la siguiente forma (recuerda que esto debe ir dentro del botón y no en cualquier lugar).
private void btnSumarActionPerformed(java.awt.event.ActionEvent evt) {
//1. Extraer valor de cada cuadro de texto
int num1 = Integer.parseInt(txtNum1.getText());
int num2 = Integer.parseInt(txtNum2.getText());
//2. Instanciamos la clase Operacion
Operacion objOperacion = new Operacion();
//3. Usamos el método sumar del objeto objOperacion
int resultadoSuma = objOperacion.Sumar(num1, num2);
//4. Transformamos el resultadoSuma de Entero a String
String totalTexto = String.valueOf(resultadoSuma);
//5. Seteo al cuadro de texto Total
txtTotal.setText(totalTexto);
} Ahora si lo imaginas el procedimiento para las otras 3 operaciones restantes es el mismo con la pequeña diferencia que vamos a cambiar el nombre del método en la Clase Operacion y dentro del mismo cambiar el operador suma (+) por el de resta (-), multiplicación (*), o división (/), y todo lo otro se haría exactamente igual, dentro del botón que corresponda.
14. Ahora para hacer el botón borrar vamos a asignarle el siguiente código.
Este pequeño script que le asignamos al botón borrar lo único que está haciendo es «setear» los campos de texto con nueva información, en este caso información nula, puesto que entre las comillas donde se supone que debería ir algo no se le agrega nada, para que todo aquello que estaba en aquello campos se reemplace por nada, valga la redundancia.
He aquí el código
private void btnBorrarActionPerformed(java.awt.event.ActionEvent evt) {
txtNum1.setText("");
txtNum2.setText("");
txtTotal.setText("");
}
15. Y el botón cerrar lo dejaré para otra ocasión porque ya me dio sueño. Espero que les sirva de ayuda.
~ Dedicado para Marcia para que le vaya super bien en la prueba de POO <3