Introduzione alla JavaFX GUI

Java è un linguaggio ormai maturo che vanta interfacce grafiche semplici ed intuitive. Accanto alle storiche librerie Swing, trattate in queste pagine, ci sono le più recenti e performanti Java Fx, librerie inizialmente sviluppate da Oracle e ora concesse al mondo Open Source e la sua collettività. Vediamo come usarle cercando di confrontarle con le Swing

 JavaFx nascono nel 2008, dall’esigenza di riscrivere e ristrutturare le ottime Swing per renderle più funzionali a pari merito con le GUI dei linguaggi concorrenti. Il lavoro, seppur a rilento, era stato di ottima fattura in quanto a performance da parte di Sun, poi acquisita da Oracle. Il problema di quel periodo storico era cruciale: JavaScript aveva fatto passi in avanti mostruosi così da rendere HTML e i browser ottimi strumenti per creare applicazioni anche complesse, seppur di natura web, capaci di girare anche in locale. Oracle ha intuito questa sfida, in cui Android, Angular, React ed altri sistemi tendono ad imoprsi tra gli sviluppatori, segnando una rotta. Dal 2018 con Java 11, Oracle si disfa di Java Fx, non includendolo più nella sua JVM (a differenza delle Swing, quasi per retro-compatibiltà). Java Fx viene così concesso alla comunità, che lo sviluppa e porta avanti ancora oggi sotto il nome di OpenJFX, giunto alla versione 14. L’intento è chiaro: il mondo va verso il cloud spinto e, anche se c’è spazio per interfacce grafiche in locale per gestire oggetti remoti, non è più la priorità facendo di HTML5/CSS3/Javascript i veri padroni del mondo lato client. Lo stesso sito di OpenJfx cita:

“OpenJFX is an open source, next generation client application platform for desktop, mobile and embedded systems built on Java”

Piattaforme dektop, mobile e sistemi embedded, territorio sconosciuto al navigatore main-stream ma che vanta una fetta di mercato professionale non trascurabile dove la portabilità è piuttosto importante, soprattutto quando parliamo di piattaforme diffuse basate sulla tecnologia ARM, per citarne una.

Va da se, è evidente anche nelle pagine del nostro sito, come la programmazione web sia quasi preponderante ormai nella realizzazione di servizi software. Il cloud sembra interessante, e sta convincendo sempre più il mercato che spinge in quella direzione, spesso anche in modo esagerato. Non tutto però è vantaggioso da far girare in cloud, vuoi per la qualità dell’infrastruttura di rete, dei costi non sempre chiari e spesso più alti delle licenze, e della oggettiva insensatezza di alcune scelte tecniche. Perché usare un Office online o un prodotto di fotoritocco Adobe solo attraverso la connessione internet in cloud? Se internet è giù non posso stampare una lettera o una foto? Eccessi di chi o cosa spinge il mercato. Di fatto JavaFX, merita di essere approfondita ed usata, anche solo per creare i nostri tool personali.

Se non vi convince la scelta di React, Angular, JQuery, VUE.JS, ma non volete sporcarvi le mani con JavaFx c’è sempre la possibilità di un approccio ibrido che sfrutti le potenzialità di Java con HTML e AJAX che si combinano in un Web Toolkit detto Vaadin.

Creiamo il progetto

Con NetBeans

Creiamo in NetBeans un progetto predisposto per l’uso di JavaFX. Suggerisco sempre di usare il tool Maven con il tipo Simple JavaFX Maven Archetype. Se è la prima volta che usiamo un progetto FX con Maven, probabilmente chiederà di scaricare una manciata di plugin da spuntare. Per questo progetto scegliamo il nome TestFX e GroupId com.iisteramo. Il resto lasciamo invariato o personalizziamo a piacere.

Sul menu di esplorazione del progetto, nella sezione src, troveremo una classe App.java che sarà la nostra classe “main” eseguibile, più una classe SystemInfo in realtà eliminabile.

Con IntelliJ Idea

Intellij è un validissimo IDE, forse più indirizzato al professionista che allo studente ma è pur sempre un’ottima alternativa che vale la pena vedere. Essendo dedicato a Java e Kotlin fondamentalmente, ci sono meno fronzoli, meno esempi del fratello NetBeans. Se lo scarichiamo, ricordate di prelevare la versione gratuita Community Edition. Nella creazione nuovo progetto c’è una voce esplicita JavaFX, possiamo scegliere il linguaggio Java e il pacchettatore di progetto lasciando tranquillamente Maven. Ci viene creata un’applicazione di default da cui possiamo partire più agilmente per realizzare il nostro software.

Il tool Glucon SceneBuilder

Contrariamente a quanto avveniva per le vecchie Java Swing, non c’è un tool interno agli IDE, qualcosa di più o meno blasonato adatto a sviluppare un software complesso. In realtà parte grafica e parte di classi sono apparentemente sconnessi tra loro. Alla base del design c’è il software SceneBuilder, alla cui base ci sarà un file FXML, ovvero lo scenario, che si dovrà importare nell’IDE in cui andremo a toccare il codice vero e proprio.

Possiamo scaricarlo dal sito ufficiale https://gluonhq.com/products/scene-builder/

Mentre scriviamo è fermo alla versione 19 e contempla pacchetti di installazione Window, Mac e Linux.

Da IntelliJ è anche facilmente integrabile. Cercate il tab col file fxml ed entrateci, tasto destro in fondo alla tendina “Open in Scene Builder”. La prima volta vi chiederà il patch/percorso dove è stato installato SceneBuilder. Se non avete fatto particolari sotterfugi, in Linux il binario da eseguiere si trova in /opt/scenebuilder/bin/SceneBuilder.

Importare il file scenario

Se con il progetto non viene caricato il file fxml oppure ne vogliamo aprire o crearne uno senza l’ausilio di IntelliJ, da Scene Builder possiamo sempre usare la funzione File->Open ed andarci a prelevare un file o tra la cartella IdeaProject o altrove. Va da se che potremmo creare un’applicazione JavaFX senza SceneBuilder o file FXML, semplicemente scrivendo codice per la creazione esplicita di oggetti grafici, ma lo riteniamo troppo artificioso se non per meriti puramente didattici.

Gli elementi fondamentali

Stage

Sin dall’esempio iniziale, abbiamo una classe Application che parte con un metodo start al cui interno è previsto uno Stage. L’idea è quella di avere un palcoscenico ma con più scene intercabiabili all’occorrenza. Stage è una sottoclasse di Window, più intuitiva forse per il lettore, su cui quindi possiamo effettuare più poperazioni di ridimensionamento e trascinamento della finestrella con la nostra applicazione. Ci sono altri tipi di stage come PopupWindow o WebView, intuitivamente un popup informativo e uno stage per applicazioni web.

Scene

Una scena è organizzata in una struttura gerarchica di nodi che rappresentano tutti gli elementi visuali dell’interfaccia. Questa struttura è il punto di partenza per organizzare e fare il rendering di un’applicazione di ogni tipo. Esistono due tipi di nodi: Branch node: nodi intermedi che hanno nodi figlio nella gerarchia e Leaf nodes che non hanno nodi figlio. Esiste un nodo radice (root) che non ha nodo padre (è
diverso da Stage e Scene). I nodi possono essere di diversa natura: geometrici per il disegno 2D e 3D, media come immagini, video ecc, Gruppi e contenitori come i pannelli e gli elementi UI quali bottoni, etichette, barre ecc.

Le scene sono realizzate su file FXML. Questi permettono di separare la realizzazione della UI dalla logica dietro le sigole azioni. Se la UI dovesse cambiare spostando gli oggetti grafici, non c’è bisogno di ricompilare il codice JavaFx.

Pane

JavaFX rispetto alle precedentei GUI JAva, cerca di semplificare al massimo la vita del programmatore/designer, offrendo una serie di contenitori di base preimpostati con una serie di caratteristiche molto utili. I layout a disposizione sono HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel e possono essere ulteriormente arricchiti da elementi custom. Ognuno è descritto da una classe.

• HBox dispone i contenuti orizzontalmente in una sola linea
• VBox, analogamente, dispone i contenuti verticalmente in una singola colonna
• StackPane dispone in una modalità da dietro ad avanti tipo una singola pila
• TilePane dispone i suoi contenuti uniformemente in celle di dimensioni autocalcolate. E’ molto interessante per svariate applicazioni anche semplici.
• FlowPanedispone i contenuti si orizzontalemnte che verticalmente adattando il tutto a larghezza ed altezza del pannello
• BorderPane dispone i contenuto nelle regioni top, bottom, right,left, o center.
• AnchorPane permette di creare ancore nel top, bottom, left side, o center del layout.
• GridPane è quello più versatile perchè constente allo sviluppatore di creare una griglia flessibile con righe e colonne in cui disporre gli elementi.
• Pane è ovviamente il più semplice di tutti, dispone a mano libera i contenuti, senza particolari ausili
• ScrollPane è come il precedente ma con l’aggiunta di barre discorrimento, molto utili con numerosi contenuto o testi.

Va da se che è possibile mischiare vari tipi di layout innestando pannelli dentrio altri pannelli, fino a raggiungere il livello di grana desiderata. Non resta che provarli e verificarne l’effetto.

Control

Assieme alla classe Applicaton che equivale al main della nostra applicazione e il file FXML, dobbiamo sempre avere una classe Control. Questa va specificata in modo chiaro all’interno del file fxml all’inizio della dichiarazione del pane. Occhio al percorso dichiarato in fase di creazione del progetto e del nome del progetto stesso.

[...]  xmlns:fx="http://javafx.com/fxml" fx:controller="com.example.helloworldfx.HelloController"

La classe Control ha lo scopo di metetre a disposzione ed eseporre quindi tutti gli oggetti che abbiamo aggiunto al nostro FXML/UI. La pratica fondamentale è assegnare un id, un identificativo ad ogni oggetto grafico con cui bisogna interagire a livello di codice. Tale id può essere specificato nei menù di destra dello SceneBuilder, tab Code->fx:id

Ancora, Scene Builder fa il grosso del lavoro per noi. Se specifichiamo un id e/o un evento (che vediamo tra poco), ci viene pregenerato un frammento di codice che possiamo agilmente copiare nella nostra Controller. Il codice lo reperiamo al tab ->View->Show Sample Controller Skeleton

La libreria javafx.scene.control fa poi tutto il resto: ci mette a disposizione diversi widget/controlli da utilizzare, dai bottoni alle etichette, menù, slider ecc

Events

In JavaFX, un evento si verifica ogno qualvolta un utente interagisce con i vari elementi della nostra GUI. Ad esempio, quando viene usato i lmouse o viene premuto un bottone con la tastiera. Ogni evento richiede un metodo nella Control per dettagliare il suo comportamento (ad esempio tab Codice->On Action)

Ultima modifica 26 Maggio 2023