Curso de JavaFX | Documentos FXML

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

• Es posible crear las interfaces visuales con código Java o con FXML (similar a HTML).
• FXML soporta el estandar de CSS 2.1 y tiene algunas características de CSS3.
• Los estilos que alteran el posicionamiento de las capas, como position, o display, no funcionan con JavaFX.
• Cuenta con un Scene Builder para poder crear interfaces de manera más amigable.

Botón derecho sobre un paquete → new → New FXML Document

Configurar el Scene Builder en Eclipse

1. Para editar visualmente estos ficheros, podemos instalar el Scene Builder: https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html

2. Configurar el uso del Scene Builder en Eclipse: Window → Preferences → JavaFX → Scene Builder Executable → C:\Program Files (x86)\Oracle\JavaFX Scene Builder 2.0

3. Botón derecho sobre el fichero FXML que queremos editar → Open With Scene Builder

Cargar una escena definida con el scene Builder

Parent root = FXMLLoader.load(getClass().getResource("/view/tresenraya.fxml"));

Llamar a un método definido en nuestro .java desde nuestro fichero FXML

Y en el controlador, definir el método que será llamado con su correspondiente anotación.

@FXML
public void calcular() {
	System.out.println("Llega al método");
}

Acceder a un elemento de nuestro fichero .fxml

Hay varias formas, aunque la más sencilla, sería ponerle un identificador en el fxml:

Y luego hacer referencia a ese identificador desde el controlador:

@FXML
private TextField n1;

Hacer que un elemento ocupe el 100% de la capa que lo envuelve:

Con CSS:

.btn {
	-fx-max-width: Infinity;
	max-width: Infinity;
	-fx-max-height: Infinity;
	max-height: Infinity;
}

Con atributos:

<Node maxWidth="Infinity"/>

Con el Scene Builder:

• Layout → maxWidth
• Layout → VGrow, HGrou

Los códigos anteriores son equivalentes a este:

node.setMaxWidth(Double.MAX_VALUE);