Apuntes Java FX

Java Fx

2 trimestre

Transformaciones en el espacio

Layouts

Sincronización de elementos de la UI

Conexión a bd

Repaso: Elementos básicos de Java FX

Las clases principales en Java FX son las siguientes:

• Stage: Es la ventana principal de la aplicación.
• Scene: Contenedor de todos los elementos que se muestran en el stage
• Node: Elementos individuales como botones, tablas, etc.

+ info

La clase Node

Es la superclase de la cual heredan todos los elementos que podemos renderizar en una escena. Entre los elementos que heredan de la clase Node, encontramos:

+ info

La clase Node

+ info

La clase Node

Parent es una clase abstracta que sirve como una superclase a los nodos contenedor y control

Region proporciona propiedades y métodos para la gestión del tamaño y diseño de los nodos hijos.

+ info

La clase Node

Algunos aspectos que podemos configurar en un nodo son:

• Posición y tamaño
• Eventos : Eventos del ratón o del teclado, entre otros
• Transformaciones geométricas (Rotacion, Traslación, Escalado)
• Visibilidad
• Anidamiento

+ info

La clase Node : Transformaciones

Algunos de los métodos más importantes de la clase Node son:

• getLayoutX(), getLayoutY(): Para obtener la posición inicial del nodo en la escena.
• setTranslateX(), setTranslateY(): Para mover el nodo a lo largo de los ejes X e Y.
• getTranslateX(),getTranslateY(): Obtiene la posición actual en los ejes X e Y.
• setRotate(): Para rotar el nodo.
• setScaleX(), setScaleY(): Para escalar el nodo en los ejes X y Y.

+ info

Transformaciones

+ info

Transformaciones

Ejemplo : Imaginemos que queremos mover un control a lo largo de la escena:

+ info

Transformaciones

Una forma sería asociar el movimiento a un evento (por ejemplo, el movimiento del ratón ), pero de esta forma sólo apreciaríamos el movimiento una vez

+ info

Transformaciones

Las funciones getLayoutX() y getLayoutY() nos devuelven siempre la posición inicial del control, por lo que esto no funcionaría:

+ info

Transformaciones

Para lograr que el círculo se mueva cada vez que pasamos el ratón por encima, deberemos coger las coordenadas actuales del círculo en cada momento.

+ info

Transformaciones

Ahora imaginemos un botón que se mueve en diagonal por la pantalla hasta que se pulsa.

+ info

Transformaciones

Para implentar este caso podemos utilizar la clase TranslateTransition. Algunos métodos interesantes que aporta esta clase son:

• play()
• pause()
• stop()
• onFinished()
• setDuration()
• setDelay()
• setCycleCount()

+ info

Transformaciones

Código del botón que se mueve en diagonal por la pantalla hasta que se pulsa

+ info

Transformaciones

Si queremos que se pare en los límites de la ventana, podemos realizarlo así:

+ info

Layouts

+ info

Layouts

• HBox: Organiza los nodos horizontalmente, en una sola línea

+ info

Layouts

• VBox: Organiza los nodos verticalmente, en una sola columna.

+ info

Layouts : TilePane

• TilePane: Organiza los elementos consecutivamente en una fila y automáticamente los coloca en la siguiente fila si la actual está llena. Es útil para casos en los que deseas una distribución uniforme de nodos, como en una interfaz de galería de imágenes o mosaico

+ info

Layouts: TilePane

Utiliza las propiedades Hgap y VGap para determinar la distancia entre elementos. Cuando éstos tienen distinto tamaño no resulta útil. Por otro lado no aprovecha el borde del layout.

+ info

Layouts: FlowPane

• FlowPane: Coloca los elementos en una fila o en una columna y los mueve a la siguiente fila o

columna cuando se alcanza el borde del layout. Útil cuando deseas que los nodos tengan tamaños variables y se organicen de manera dinámica en filas y columnas.

+ info

Layouts

+ info

Layouts

• StackPane: La principal característica de StackPane es que coloca todos sus nodos en la misma posición,

uno encima del otro

Ejemplos : https://o7planning.org/10633/javafx-stackpane

+ info

Layouts

Los layouts son contenedores que sitúan los componentes o nodos en la escena.

• AnchorPane: Permite "anclar" los nodos a los bordes del layout utilizando las propiedades AnchorPane.topAnchor, AnchorPane.bottomAnchor, AnchorPane.leftAnchor, y AnchorPane.rightAnchor. Esto puede ser útil para crear

diseños más flexibles que se ajustan bien al cambio de tamaño de la ventana.

+ info

Layouts

• GridPane: Organiza los nodos en una rejilla bidimensional, con filas y columnas.Un subcomponente puede ubicarse en una celda o en una celda fusionada con las celdas adyacentes

+ info

Layouts

• BorderPane: Divide el área en cinco regiones: superior, inferior, izquierda, derecha y centro. Cada

región puede contener un solo nodo, como otro layout, que a su vez puede contener múltiples nodos. Es útil para diseños responsive.

+ info

BorderPane

Top y bottom crecen en horizontal

Left y right crecen en vertical

Dentro de cada región otros contenedores,como HBOX, VBOX, GridPane, etc.

+ info

Layouts : BorderPane

En una aplicación típica de Windows, una pantalla utiliza cinco regiones para ubicar su contenido.

• Un menú o una barra de herramientas en la parte superior
• Una barra de estado en la parte inferior
• Un panel de navegación a la izquierda
• Información adicional a la derecha
• Contenido principal en el centro

Un BorderPane satisface todos los requisitos de diseño para una pantalla de interfaz gráfica de usuario (GUI) basada en Windows. Por ello el BorderPane se utiliza con mayor frecuencia como el nodo raíz para una escena.

+ info

BorderPane : Ejemplo

+ info

Documentación útil y ejemplos

https://o7planning.org/11009/javafx

+ info

Binding y properties

En JavaFX, el binding (enlace) y las propiedades permiten que las variables y los elementos de la UI estén sincronizados.

Una propiedad en JavaFX no es más que una clase especial que puede contener un valor, como un int, un String, un objeto, etc. Las propiedades son objetos que encapsulan un valor y permiten ser observados, lo que significa que puedes ser notificado cuando su valor cambia.

+ info

Binding y properties

El Binding permite mantener dos propiedades sincronizadas

+ info

Tipos de Binding

Unidireccional: Cuando una propiedad cambia, la otra también lo hace, pero no al revés.

+ info

Tipos de Binding

Bidireccional: Ambas propiedades se actualizan cuando cualquiera de ellas cambia

+ info

Tipos de Binding

También podemos utilizar la clase estática Bindings, que proporciona métodos de utilidad como :

• add(ObservableNumberValue a, ObservableNumberValue b): Realiza la suma de a y b.

• subtract(ObservableNumberValue a, ObservableNumberValue b): Realiza la resta de a y b.

• multiply(ObservableNumberValue a, ObservableNumberValue b): Realiza la multiplicación de a y b.

• divide(ObservableNumberValue a, ObservableNumberValue b): Realiza la división de a y b.

• when(BooleanExpression condition): Crea un enlace condicional. Puede usarse en conjunción con then y otherwise para definir los dos posibles resultados.

+ info

Tipos de Binding

+ info

Ejemplos Binding : Auto resize de la UI

Para sincronizar controles en la UI, será necesario definir en el controller las respectivas propiedades, y hacer un bind con ellas. Ejemplo:

+ info

Ejemplos Binding : Barra de progreso

+ info

Enlazar propiedades con la UI

Ejercicio :

+ info

Enlazar propiedades con la UI

Solución :

+ info

Enlazar propiedades con la UI

Documentación : https://edencoding.com/javafx-properties-and-binding-a-complete-guide/

+ info

Conexión a BD

• Instalar Mysql Server
• Añadir dependencias en el pom del proyecto
• Crear base de datos
• Crear Tabla
• Crear Interface/Controller
• Crear JdbcDao
• Modificar el controller para insertar en bd

https://www.javaguides.net/2019/07/javafx-jdbc-mysql-tutorial.html https://mariadb.com/kb/en/about-mariadb-connector-j/#java-compatibility

+ info