Java: ¿Qué narices es eso de JavaFx?
JavaFX es un framework para crear interfaces de usuario gráficas en Java. Se supone que es el sucesor de la librería Swing.
Estoy siguiendo el curso de José Paumard, y este es el penúltimo módulo.
Índice(Drive)
Mejorando el ejemplo mediante layout 4
Segundo ejemplo, usando XML para diseñar una ventana de login: 5
Repositorio donde están los ejemplos subidos: 15
Estructura
Primero veremos un ejemplo de la estructura mínima que tiene una aplicación:
La idea es crear una clase propia que extienda la clase de JavaFX Application. El IDE no nos dejará compilar el código hasta que implementemos el método start. Además, desde el main tenemos que emplear launch() que es la forma de expresar que queremos crear algo gráfico mediante JavaFX.
Luego dentro del start podemos hacer que aparezca lo que queramos:
En este ejemplo se muestra una etiqueta, Label(), con el texto Hello world. Luego se ajusta el tamaño de la letra. A continuación se engancha la etiqueta dentro de una escena (ventana/contenedor, como el JPanel de Swing) al stage (ventana principal tipo JFrame) y luego mostramos.
Ejecución
Al ejecutarlo:
Repasar conceptos
Para repasar los conceptos:
El Stage , plataforma en español, es la ventana principal, que puede estar a pantalla completa.
Además:
La Scene, escena, es la ventana que cuelga del Stage, ya que es el contenedor que tiene lo gráfico: formas, botones, etiquetas…
En el ejemplo que acabamos de ver:
La Label, etiqueta, se añade a la Scene. La Scene se incorpora al Stage. Y llamamos a show() en la Stage para mostrar todo.
Mejorando el ejemplo mediante layout
Si quisiéramos mejorar el ejemplo anterior, podríamos:
Poner un Layout, es decir, una disposición de los elementos gráficos, en este caso mediante VBox, es decir, una disposición vertical.
Segundo ejemplo, usando XML para diseñar una ventana de login:
Los archivos XML se pueden usar para definir la estructura de los componentes gráficos, en concreto se usa una variante, la extensión FXML:
En la imagen, lo que hacemos es definir un GridPane que permite definir una disposición de elementos flexibles, es decir, dejar huecos, espaciar, cambiar tamaños etc. Hgap y vgap es el ancho entre columnas, el alto entre filas.
Luego:
Podemos añadir contenido al GridPane, con otras etiquetas. Insets nos permite escribir el espacio en torno al área rectangular que forma nuestros elementos gráficos de login.
Además:
Tenemos la opción de indicar componentes dentro de la ventana principal, como en este caso la Label con User name: Además para referenciar el elemento desde Java, necesitamos ponerle un id.
Podemos:
Precisar en qué lugar va la etiqueta, y en qué lugar va el campo de texto, mediante la posición en filas y columnas, como si fuera una tabla.
Podríamos:
Anclar la etiqueta, en este caso a la derecha, para dar una referencia de donde se empieza a dibujar
Luego para la contraseña es similar:
Salvo que usamos un PasswordField, para hacer que los caracteres se vean tapados con los círculos negros típicos.
Y podemos anidar:
Las etiquetas children, haciendo niveles. En este caso, pondríamos botones en disposición horizontal, ya que están dentro del HBox.
En realidad se usa un formato especial: FXML
Primero definimos el estándar, mediante xmlns:fx, que es la abreviación de xml namespace. Luego la frase de fx:controller, deberemos poner la clase Java que controlará el comportamiento de los elementos gráficos. Me gusta porque enfoca a usar una arquitectura MVC.
A continuación se escribe fx:id para declarar el identificador del elemento gráfico al cual haremos referencia en el controlador para programar el componente gráfico.
Por último en el botón se usa onAction y en la ristra el numérico #, seguido del nombre del método que en el controlador implementa el comportamiento al pulsar el botón.
La clase controladora tiene esta apariencia:
Destaca que hay que implementar Initializable.
Luego se anota mediante @FXML las variables gráficas las cuales hemos previamente identificado mediante fx:id=”nombreVariable” en el FXML.
Después se sobreescribe el método initialize, porque es obligatorio, y lo podemos dejar vacío.
Por último escribimos los métodos que nos interesa llamar cuando pulsamos los botones, en este caso el okAction().
Por último el main:
La clase de la aplicación.
En ella de nuevo extendemos Application.
En el start indicamos el FXML que cargamos. De él accedemos al Parent, a la raíz, a la carpeta que contiene a los tres: el FXML, el controlador, y el main. Luego asociamos la Scene a la Stage y mostramos. Por último tenemos en cuenta llamar a Launch() desde el main.
Resultado de la ejecución del login:
Al pulsar el Ok se imprime el nombre de usuario, y al darle a cancel la contraseña como test de que se llaman los métodos asociados a los botones.
Resumen
En conclusión hemos visto:
Como crear una interfaz sencilla, tanto mediante código Java puro, como mediante XML y Java. Además hemos inyectado lo definido en el XML en el Java para obtener por ejemplo el texto escrito en el nombre de usuario / contraseña; mediante la anotación @FXML. Hemos usado llamadas a funciones al pulsar en los botones.
