jairogarcíarincón
06/09/2021
Contenidos
- UI, UX y Usabilidad
- Herramientas
- Eventos y componente JButton
- Componentes JFrame, JLabel y JDialog: Diálogos modales
- Componentes JTextField y JTextArea
- Calculadora guiada en Java Swing
- Componentes JMenuBar, JMenu y JMenuItem
- Componentes JCheckbox, JRadioButton y JComboBox
- Componentes: JEditorPane y JTextPane
- Práctica: Formulario de datos personales
- La clase Graphics
- Layout managers o gestores de composición
- Práctica: Formulario de registro
- Resolución: Formulario de registro
Introducción
En este apartado desarrollaremos las funcionalidades básicas de una calculadora en Java Swing, con el objetivo de luego mejorarla en una práctica posterior:
- Display para mostrar los números y el resultado de las operaciones
- Botones para números del 0 al 9
- Botones para las operaciones básicas (+, -, *, /)
- Botón para añadir el punto decimal "."
- Botón para calcular el Resultado
- Botón para limpiar display y operaciones "C"
Plantilla
Para empezar, partiremos de un JFrame con layout absoluto al que le iremos agregando los diferentes componentes mediante el uso de arrays y haciendo los cálculos de las posiciones de forma manual.
Está claro que esta es una forma poco eficiente de trabajar, y cuando estudiemos los diferentes layout managers dejaremos de hacerlo así. No obstante, plantéatelo como un ejercicio de aprendizaje y afianzamiento del uso de las diferentes estructuras de programación aprendidas en Java hasta ahora.
El código de nuestra plantilla básica podría ser así (fíjate bien en los comentarios para entender bien el código):
Como podrás apreciar, hemos dejado algunos métodos en blanco, que iremos rellenando más adelante.
El aspecto visual que conseguiremos será el siguiente:
Eventos asociados a los botones de números
La calculadora funcionará haciendo clic en los botones, si bien para la práctica posterior le añadiremos, entre otras cosas, la funcionalidad de que también funciones con el teclado del ordenador.
De este modo, debemos añadir a cada botón de número su correspondiente ActionListener y programar el método ActionPerformed asociado. Completa el método eventosNumeros() de la siguiente forma:
Evento asociado al botón del punto decimal
Para que funcione el punto decimal, debemos añadir a su botón un ActionListener y programar el método ActionPerformed asociado, teniendo además en cuenta que un número solo puede tener un punto decimal, y que es posible que el usuario empiece directamente a escribir un número desde el punto decimal (en vez de poner 0.534, puede escribir .534 directamente). Completa el método eventoDecimal() de la siguiente forma:
Eventos asociados a los botones de operaciones
En este caso, además de añadir a cada botón de número su correspondiente ActionListener y programar el método ActionPerformed asociado, debemos calcular el resultado de la operación y resetear ciertas variables para poder seguir encadenando operaciones. Presta mucho atención al código siguiente para entender bien el funcionamiento, ya que además de completar el método eventosOperaciones(), crearemos y completaremos dos nuevos métodos llamados resultado() y limpiar():
Evento asociado al botón de resultado
En este caso, tan solo debemos añadir a su botón un ActionListener y programar el método ActionPerformed asociado, pero dado que ya hemos realizado antes toda la lógica, dicho ActionPerformed tan solo debe llamar al método resultado() para funcionar adecuadamente. Completa el método eventoResultado() de la siguiente forma:
Evento asociado al botón de limpiar
De nuevo y para terminar, en este caso, tan solo debemos añadir a su botón un ActionListener y programar el método ActionPerformed asociado, pero dado que ya hemos realizado antes toda la lógica, dicho ActionPerformed tan solo debe llamar al método limpiar() para funcionar adecuadamente. Completa el método eventoLimpiar() de la siguiente forma:
Conclusiones
Con esto estaría terminada nuestra primera versión de la Calculadora. En la práctica que haremos a continuación, propondremos cambiar el aspecto visual, añadir nuevas operaciones y funcionalidades, y profundizar en el uso de Listeners añadiendo la posibilidad de utilizar el teclado como fuente de entrada mediante KeyListeners, así como efectos visuales al pasar el ratón por encima de los botones mediante el uso de MouseListeners.
Ejercicio propuesto
7. Modifica la calculadora anterior de manera que:
- el aspecto visual (colores, tamaño y fuentes debe ser diferente al planteado por el profesor
- al pulsar en una operación o en el resultado, debe cambiar el color del botón correspondiente
- al pasar por encima de un botón de dígito, limpiar, operación o resultado, este debe cambiar de color o aspecto (tamaño, negrita, etc.) y volver a su estado original al salir del botón
- al pulsar la tecla correspondiente al número de botón u operación, la calculadora también debe ejecutar la operación y cambiar el color o aspecto del botón como si hubiera hecho clic en él (de forma temporal en dígitos y limpiar y de forma permanente en operaciones y resultado).
- debe incluir al menos 4 operaciones adicionales, con sus correspondientes botones
- cualquier otro extra que el alumno considere oportuno ( logs, mejoras del display, etc.)
Publicado el 21 de Noviembre de 2024
interfacesusuariousabilidad