FXML

Contactar con el profesor

  • 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

1. Tendremos que vincular nuestro fichero fxml a su correspondiente controlador:

FXML 1

2. Debemos vincular el nombre del método que queremos ejecutar a su correspondiente botón.

FXML 2

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:

FXML 3

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);
← Algunos componentes
Hacer una calculadora →

Aviso Legal | Política de privacidad