Interfacce utente grafiche (GUI) con JavaFX

JavaFX

• Libreria Java per la creazione di GUI per Rich Applications multi-piattaforma

  • Disponibile dal 2008 (v. 1.0 – 2.2) come libreria stand-alone
  • Presente “stabilmente” nel JDK da Java 8 (v. JavaFX 8)
  • Introdotto ufficialmente in Java con l’idea di sostituire (gradualmente) Swing
  • Torna ad essere una libreria stand-alone da Java 11: è opensource e parte del progetto OpenJDK – https://openjfx.io

• Consente la creazione di GUI moderne, di qualità e ben adattabili a qualunque piattaforma e supporto hardware

JavaFX: funzionalità principali

Java APIs

• Libreria che include classi e interfacce scritte in Java
• Ogni nuova versione utilizza l’ultima versione disponibile di Java

FXML (e CSS per lo stile)

• FXML è un linguaggio dichiarativo per definire la GUI di un’applicazione JavaFX-based
• CSS è un linguaggio flessibile per specificare lo stile di elementi della GUI
• Il loro impiego non è indispensabile
  • Può essere utile per chi già conosce CSS

Graphics API

• Supporto nativo per la grafica 3D (geometrie, camere, luci)
• Abilita la possibilità di disegnare direttamente sulla superficie (canvas) dell’applicazione

Supporto per schermi Multi-touch e Hi-DPI

• Fornisce il supporto per funzionalità multi-touch (cf. SwipeEvent), in funzione della piattaforma in cui l’applicazione è in esecuzione
• Garantisce una buona visualizzazione della GUI anche su schermi ad alta densità di pixel

Interoperabilità bidirezionale con la libreria Java built-in per GUI Swing

• GUI Swing esistenti possono includere componenti JavaFX (cf. JFXPanel)
• È possibile inserire componenti Swing in interfacce JavaFX (cf. SwingNode)

Astrazioni fondamentali

Stage

• Il contenitore (esterno) dove la GUI sarà visualizzata (ad es., una finestra del S.O.)
  • Corrisponde al JFrame di Swing
• javafx.stage.Stage, sottoclasse di Window

Scene

• Una scene rappresenta un contenuto (una pagina della GUI) visualizzabile sullo Stage
  • ogni Stage può mostrare una sola Scene alla volta: si imposta via Stage#setScene(Scene)
• javafx.scene.Scene contiene il cosiddetto scene graph, impostabile attraverso Scene#setRoot(Parent)

Application

• Un’applicazione JavaFX si definisce estendendo javafx.application.Application
  • Consente di definire metodi hook sul ciclo di vita dell’applicazione (init, start, stop, …)
  • Tipicamente, si opera ridefinendo start(Stage) che riceve lo stage primario

Esempio: GUI vuota

public class App extends javafx.application.Application {
	@Override
	public void start(Stage stage) throws Exception {
		Group root = new Group();
		Scene scene = new Scene(root, 500, 300);
		stage.setTitle("JavaFX Demo");
		stage.setScene(scene);
		stage.show();
	}
}

Applicazione JavaFX: runner

import javafx.application.Application;

public class Main {
	public static void main(String[] args) {
	    // App è la classe definita nella slide precedente
	    Application.launch(App.class, args);
	}
}

• ATTENZIONE: per motivi tecnici che non approfondiremo, definire il metodo main() dentro la classe App (che estende Application) può risultare nel seguente errore:
  • Error: JavaFX runtime components are missing, and are required to run this application
  • richiederebbe l’aggiunta di JavaFX al module path all’avvio dell’applicazione
• Di conseguenza, si consiglia di definire main in una classe separata da quella dell’applicazione JavaFX

Ciclo di vita di applicazioni JavaFX

L’avvio mediante Application.launch(App.class) comporta:

1. Avvio del runtime JavaFX
   • comporta la creazione di vari thread, tra cui il JavaFX Application Thread
2. Istanziazione di App (la classe specificata che estende Application)
3. Invocazione metodo init()
4. Invocazione metodo start(javafx.stage.Stage) dell’applicazione
5. Attesa terminazione applicazione
   • (a) mediante Platform.exit()
   • (b) chiusura dell’ultima finestra (e Platform.isImplicitExit() è true)
6. Invocazione metodo stop() dell’applicazione

Node

• Un nodo è un elemento/componente della scena
  • Ciascun nodo ha sia la parte di view (aspetto) sia la parte di controller (comportamento)
  • Hanno proprietà (con supporto al binding) e possono generare eventi
  • Possono essere organizzati gerarchicamente
    • La sottoclasse Parent rappresenta nodi che possono avere figli (recuperabili via getChildren())
  • Un nodo ha un ID univoco, coordinate locali, può subire trasformazioni (ad es. rotazione), ha un bounding rectangle associato, e può essere stilizzato via CSS
• Sottoclassi di Node: SwingNode, Canvas, Parent

Sommario

Struttura di un’applicazione JavaFX-based

Build Gradle ed esempi

• Si faccia riferimento al repository di esempio: https://github.com/unibo-oop/sample-javafx-project

val javaFXModules = listOf("base", "controls", "fxml", "swing", "graphics")

val supportedPlatforms = listOf("linux", "mac", "win") // All required for OOP

dependencies {
    // Suppressions for SpotBugs
    compileOnly("com.github.spotbugs:spotbugs-annotations:4.9.8")

    // Example library: Guava. Add what you need (and use the latest version where appropriate).
    // implementation("com.google.guava:guava:28.1-jre")

    // JavaFX: comment out if you do not need them
    val javaFxVersion = "23.0.2"
    implementation("org.openjfx:javafx:$javaFxVersion")
    for (platform in supportedPlatforms) {
        for (module in javaFXModules) {
            implementation("org.openjfx:javafx-$module:$javaFxVersion:$platform")
        }
    }

    // The BOM (Bill of Materials) synchronizes all the versions of Junit coherently.
    testImplementation(platform("org.junit:junit-bom:6.0.2"))
    // The annotations, assertions and other elements we want to have access when compiling our tests.
    testImplementation("org.junit.jupiter:junit-jupiter")
    // The engine that must be available at runtime to run the tests.
    testRuntimeOnly("org.junit.platform:junit-platform-launcher")
}

Creazione di un’applicazione JavaFX: linee guida

1. La classe principale di un’applicazione JavaFX (chiamiamola App) deve estendere la classe javafx.application.Application
2. Si effettua l’override di void start(Stage primaryStage) che è, di fatto, l’entry point dell’applicazione JavaFX (lo stage primario è creato dalla piattaforma)
3. Sullo stage is imposta la scena (setScene())
4. Lo stage va mostrato invocando show()
5. Una classe separata definisce il main() dell’applicazione Java, che deve chiamare Application.launch(App.class)

Nodi e Proprietà

• Ogni scena ha un root node relativo a una gerarchia di nodi descrivente la GUI

• Ciascun nodo (componente) espone diverse proprietà osservabili (classe Property<T>)

  • relative all’aspetto (es. size, posizion, color, …)
  • relative al contenuto (es. text, value, …)
  • relative al comportamento (es. event handler, controller, …)

• Ciascun nodo genera eventi in relazione ad azioni dell’utente

GUI con bottone e label

public class Example1 extends Application {
	@Override
	public void start(Stage stage) throws Exception {
		final Label lbl = new Label();
		lbl.setText("Label text here...");

		final Button btn = new Button();
		btn.setText("Click me");

		final HBox root = new HBox();
		root.getChildren().add(btn);
		root.getChildren().add(lbl);

		stage.setTitle("JavaFX - Example 1");
		stage.setScene(new Scene(root, 300, 250));
		stage.show();
	}
}

Binding e proprietà

• Per binding si intende il meccanismo che consente di collegare due proprietà fra loro, in modo unidirezionale o bidirezionale
• Una proprietà JavaFX Property<T> è un ObservableValue<T> (un valore ottenibile con getValue() a cui possono essere associati dei ChangeListener via remove/addListener) scrivibile che può essere collegato/scollegato ad altri osservabili o proprietà attraverso
  • bind(ObservableValue<? extends T> observable) / bindBidirectional(Property<T> other)
  • unbind() / unbindBidirectional(Property<T> other)
• Una proprietà JavaFX xxx di tipo T ha (opzionalmente) getter/setter getXxx() e setXxx(), e un metodo xxxProperty() che restituisce un oggetto Property<T>
  • Ad esempio, un TextField offre getText():String, setText(String), e textProperty():Property<String>

final TextField input = new TextField();
final Label mirror = new Label();
// connette la label con il valore del textfield
mirror.textProperty().bindBidirectional(input.textProperty());
mirror.setText("default");

I layout (cf. package javafx.scene.layout)

• Sottoclassi di Parent (nodo che può avere nodi figli – cf. proprietà protected children):
  • Group (gestisce un insieme di figli; ogni trasformazione/effetto è applicata su ogni figlio)
  • Region (classe base per tutti i controlli UI e i layout)
    • Control (classe base per tutti i controlli UI)
• Ogni layout è un contenitore che regola il posizionamento e il dimensionamento dei nodi figli

Group

• Da utilizzare per posizionare i componenti figli in posizioni fisse (cf. proprietà layoutX e layoutY dei Node)
• Ogni trasformazione/effetto applicato al gruppo è applicato su ogni figlio

Region

• Classe base per tutti i layout general purpose (simili a quelli offerti da Swing):
  • BorderPane, HBox/VBox, TilePane, GridPane, FLowPane, AnchorPane, StackPane

Aggiungere componenti ad un layout

• Il metodo ObservableList<Node> getChildren() restituisce la lista di nodi figli di un qualunque nodo/layout
  • Alla lista possono essere aggiunti (add(Node) e addAll(Node...)) e gestiti i componenti figli

Group g = new Group();
Label l1 = new Label("label");
Button b1 = new Button("a larger button");
Button b2 = new Button("small button");
g.getChildren().addAll(l1, b2, b3);
// Use binding to suitable place the components
b1.layoutXProperty().bind(l1.widthProperty().add(10));
b2.layoutXProperty().bind(b1.layoutXProperty()
    .add(b1.widthProperty()).add(10));
g.setTranslateX(-5); // applies translation to all children
g.setEffect(new DropShadow()); // applies effect to all children

• Layout pane forniscono metodi d’istanza/statici per dettagliare i posizionamenti

Text center = new Text("Center"); // ...
BorderPane bpane = new BorderPane(center, top, right, bottom, left);
bpane.setCenter(new Text("NewCenter"));

Button topLeft = new Button("Top Left");
AnchorPane.setTopAnchor(topLeft, 10.0); // 10px from the top edge
AnchorPane.setLeftAnchor(topLeft, 10.0); // 10px from the left edge
AnchorPane root = new AnchorPane(topLeft);

// An empty vertical TilePane with 5px horiz / 10px vertical spacing
TilePane tp2 = new TilePane(Orientation.VERTICAL, 5, 10);
tp2.setPrefRows(3);
tp.setPrefTileHeight(100);
for(Month m : Month.values()) { tp2.getChildren().add(new Label(m.name())); }

GridPane gp = new GridPane();
gp.setGridLinesVisible(true);
for(Month m : Month.values()) {
    Label l = new Label(m.name());
    gp.getChildren().add(l);
    int columnIndex = (m.getValue()-1) / 4; int rowIndex = (m.getValue()-1) % 4;
    GridPane.setConstraints(l, columnIndex, rowIndex);
    // OR ALSO: gp.add(l, columnIndex, rowIndex);
}

Layout pane: sommario

Una nota sul posizionamento e dimensionamento delle GUI

• I bound di un nodo/scena/stage/schermi ne definiscono:
  • (1) posizione (position)
  • (2) dimensione (size)
• Essi sono definiti in termini di un cosiddetto bounding rectangle, rappresentato da un’istanza di javafx.geometry.Bounds che espone:
  • (1) le coordinate del punto in alto a sinistra: getMinX(), getMinY(), getMinZ()
  • (2) le dimensioni: getWidth(), getHeight(), getDepth()
  • Di conseguenza si definisce un default anche per getMaxX()… come getMinX()+getWidth()…
• Sul dimensionamento di una Scene
  • Se dimensione non è specificata, sarà calcolata automaticamente in base alla dimensione preferita dal contenuto
  • Se il nodo radice di una scene è ridimensionabile (ad es. Region ma non un Group), allora il ridimensionamento della scena causerà un aggiustamento del layout
• Sul dimensionamento di uno Stage
  • Se non ha una scena associata o la scena è vuota, la dimensione è specificata dalla piattaforma. Altrimenti, la dimensione sarà data dalla scena.
• Un Node può essere “gestito” (managed) o meno: nel primo caso, il parent ne gestirà il posizionamento/dimensionamento (in base alla preferred size del nodo)

Eventi

• Gli eventi (javafx.event.Event) possono essere generati dall’interazione dell’utente con gli elementi grafici
  • ogni evento ha un event source, event target, ed event type e può essere consumato (consume())
• Gli eventi possono essere gestiti attraverso event handlers
  • Ogni EventHandler<T extends Event> deve implementare il metodo void handle(T)
• Ogni nodo può registrare uno o più event handler
  • In generale, attraverso i metodi setOn...()

Es. Gestione del click su un Button

btn.setOnMouseClicked(event -> {
    lbl.setText("Hello, JavaFX World!");
});
// same as
btn.addEventHandler(ActionEvent.ACTION, e -> lbl.setText("Hello, JavaFX World!"));

Esempio con più Stage (1/2)

public class App extends Application {

  @Override
  public final void start(final Stage mainStage) {
    final Scene scene = new Scene(initSceneUI());
    mainStage.setScene(scene);
    mainStage.setTitle("JavaFX Example");
    mainStage.show();
  }

  private Parent initSceneUI() {
    final Label inputLbl = new Label("Input: ");
    final TextField inputArea = new TextField();
    final Button okBtn = new Button("Open a new Stage with the input data!");

    okBtn.setOnMouseClicked(event -> {
      new SecondStage(inputArea.getText()).show();
    });

    final BorderPane root = new BorderPane();
    root.setRight(okBtn);
    root.setLeft(inputLbl);
    root.setCenter(inputArea);

    BorderPane.setAlignment(inputLbl, Pos.CENTER_LEFT);
    BorderPane.setAlignment(okBtn, Pos.CENTER_RIGHT);

    return root;
  }
}

Esempio con più Stage (2/2)

public class SecondStage extends Stage {
    private Label lbl;

    public SecondStage(final String message) {
        super();
	    setTitle("New Window...");
	    setScene(new Scene(initSceneUI(), 400, 200));
	    lbl.setText(message);
    }

    private Parent initSceneUI() {
        lbl = new Label();
	    FlowPane root = new FlowPane();
	    root.setAlignment(Pos.CENTER);
	    root.getChildren().add(lbl);
	    return root;
    }
}

public class Main {
    public static void main(final String[] args) {
        Application.launch(App.class, args);
    }
}

JavaFX e concorrenza

• Similarmente a Swing, JavaFX ha un singolo thread che gestisce il processing degli eventi: JavaFX Application Thread (JFXAT)
• Tutte le modifiche allo scene graph devono essere effettuate su JFXAT
• Nota: è opportuno conoscere quali metodi hook dell’Application sono eseguiti (ad es. start) oppure no (ad es. init) su JFXAT
• Platform.runLater(Runnable) accoda il runnable nella coda degli eventi del JFXAT
  • l’analogo di SwingUtilities.invokeLater

Conoscere dettagli degli schermi in uso

Screen s = Screen.getPrimary();
double dpi = s.getDpi();
Rectangle2D sb = s.getBounds();
Ractangle2D svb = s.getVisualBounds();

ObservableList<Screen> screenList = Screen.getScreens();

Ad es., per dimensionare lo stage

stage.xProperty().addListener(x -> {
    Screen s = Screen.getScreensForRectangle(
        new Rectangle2D(stage.getX(), stage.getY(), stage.getWidth(), stage.getHeight())
    ).get(0);
    stage.setMinHeight(...);
    stage.setMinWidth(...);
    stage.setMaxHeight(s.getVisualBounds().getHeight()/2);
    stage.setMaxWidth(s.getVisualBounds().getWidth()/2);
});

Integrare JavaFX e Swing

• L’integrazione può avvenire nelle due direzioni
  • Si possono includere elementi Swing in applicazioni JavaFX attraverso SwingNode
  • Si possono includere elementi JavaFX in applicazioni Swing attraverso JFXPanel
  • Nota: SwingNode e JFXPanel si trovano nel modulo javafx.swing
• Va prestata particolare attenzione a dove viene eseguito il codice che gestisce la GUI
  • javafx.application.Platform.runLater(), per eseguire codice nel thread dedicato a JavaFX
  • javax.swing.SwingUtilities.invokeLater(), per eseguire codice nel thread dedicato a Swing

Usare JavaFX in applicazioni Swing: esempio

public static void main(final String[] args){
  initMainJFrame(new JFrame("JFrame GUI"));
}

private static void initMainJFrame(final JFrame frame) {
  final JButton button = new JButton();
  button.setText("Launch JavaFX Scene");
  button.addActionListener(event -> {
    final JFXPanel jfxPanel = new JFXPanel();
    Platform.runLater(() -> {
      jfxPanel.setScene(new Scene(initJavaFXSceneUI(), 300, 300));
      SwingUtilities.invokeLater(() -> {
        final JFrame frameWithJavaFX = new JFrame("JFrame with JavaFX embedded!");
        frameWithJavaFX.add(jfxPanel);
        frameWithJavaFX.pack();
        frameWithJavaFX.setVisible(true);
  }); }); });

  final JPanel panel = new JPanel();
  panel.setLayout(new FlowLayout());
  panel.add(button);

  frame.setContentPane(panel);
  frame.setSize(300, 300);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.setVisible(true);
}

Usare Swing in applicazioni JavaFX

public final class JavaFXAppWithSwing extends Application {
    @Override
    public void start(final Stage primaryStage) throws Exception {
        final SwingNode msg = new SwingNode();
        SwingUtilities.invokeLater(() ->
            msg.setContent(new JLabel("Hello by Swing JLabel")));
        HBox pane = new HBox();
        pane.getChildren().add(msg);
        primaryStage.setScene(new Scene(pane));
        primaryStage.show();
    }

    // ...
}

Interfacce utente grafiche (GUI) con JavaFX