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: