JavaFX [Manejo de TextField, Buttons y Variables]

 

Continuando con nuestro aprendizaje de JavaFX, esta vez realizaremos una aplicación gráfica que nos permita sumar dos números x,y para ello ejecutaremos nuestro IDE NetBeans y realizaremos un nuevo proyecto JavaFX al que llamare sumas o como gusten ponerle.

Ya que tenemos nuestro nuevo proyecto, borraremos todo el contenido a excepción de la palabra package

comenzaremos por importar las siguientes librerías para trabajar:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingTextField;
import javafx.ext.swing.SwingLabel;
import javafx.ext.swing.SwingButton;

Ahora declare tres variables que necesitare para almacenar la información.

var x1;
var x2;
var result;

Estas variables nos servirán para que los resultados que introduzcamos por medio de los TextField se almacenen en ellas.

El siguiente punto es la creación de los TextField, a diferencia de los JFrames, Applets, y Frames o Panels, la declaración de los TextField con JavaFX Script se realiza como si fuesen variables, de hecho son variables.

var numero1 = SwingTextField {
    columns: 10
    text: "0"
    editable: true
    translateX: 125
    translateY: 5
}

var numero2= SwingTextField {
    columns: 10
    text: "0"
    editable: true
    translateX: 125
    translateY: 35
}

var resultado = SwingTextField {
    columns: 10
    text: "0"
    editable: false
    translateX: 125
    translateY: 65

}

Entendiendo un poco más lo que estamos viendo en el código:

columns: Indica el número de caracteres que puede almacenar nuestro SwingTextField.

text: Indica el texto que contendrá nuestro SwingTextField.

editable: Indica si nuestro SwingTextField es editable o no.

translateX: Indica la posición en el eje X de la aplicación de nuestro SwingtextField.

translateY: Indica la posición en el eje Y de la aplicación de nuestro SwingTextField

Una vez que ya hemos dejado en claro algunas palabras de Java FX Script, pasaremos a crear nuestra aplicación, la cual hemos de realizar del tipo Stage.

Stage {
    title : "Suma Simple con JavaFX"
     width: 255
     height: 200

    scene: Scene {
        content: [

        //Cuadros de Información
        numero1,
        numero2,
        resultado,

                SwingLabel {
            text: "Escriba 1er Número:"
            translateX: 0
            translateY: 10
        }

        SwingLabel {

            text: "Escriba 2do Número: "
            translateX: 0
            translateY: 40

        }

        SwingLabel
        {
            text: "Resultado: "
            translateX: 0
            translateY: 70
        }

        SwingButton {
            text: "Sumar"
            translateX: 0
            translateY: 110
            action: function() {

                x1  = Integer.parseInt(numero1.getJTextField().getText());
                x2 = Integer.parseInt(numero2.getJTextField().getText());

                result = x1 + x2;

                resultado.getJTextField().setText("{result}");

                //println("La suma de {x1} + {x2} = {result}");

                }
        }

        // Boton para Borrar

                SwingButton {
            text: "Borrar"
            translateX: 80
            translateY: 110
            action: function() {

            numero1.getJTextField().setText("0");
            numero2.getJTextField().setText("0");
            resultado.getJTextField().setText("0");

            }
        }

        ]
    }
}

Entendiendo mejor el código.

los corchetes significan el inicio de la aplicación { } y el final de la misma.

title: Indicare el título en la barra de títulos (que titulo queremos ponerle a la aplicación)

width: Indica el ancho de nuestra aplicación

height: Indica el largo de nuestra aplicación

scene: Scene {}: Dentro de esta se encontrarán aquellas funciones del programa tal como llamar botones, etiquetas etc pero para ello se necesita de la siguiente palabra.

content: [] marca el contenido de la aplicación.

ahí pueden ver numero1, numero2, result, básicamente son llamadas a las variables para que nuestros JSwingTextField puedan incluirse en el Stage, de otra forma marcarían error.

SwingLabel: son las declaraciones de etiqueta

text: es el texto que ha de contener la etiqueta

SwingButton: Un botón

text: el texto del botón

action: function () {} indica que función va a realizar el botón cuando sea presionado.

Integer.parseInt: Convierte una cadena de texto a un valor entero

.getJTextField().getText(): Indicamos que queremos obtener un valor del campo.

getJTextField().setText(“"): Indicamos que queremos colocar otro valor al campo.

Los corchetes con variables indican que las  variables se van a imprimir dentro de la cadena, así nos ahorran un poquito de código de conversión.

Y el resultado de la aplicación JFX viene quedando como se muestra en la imagen de abajo: