Java Fx – Introduzione a Scene Builder

di admin - 14 Agosto 2012 in Programmazione

In questo articolo forniremo una breve panoramica circa le funzionalità offerte da SceneBuilder; chiaramente la nostra non potrà essere una trattazione esaustiva al contrario può essere pensata come una guida essenziale grazie alla quale si da la possibilità allo sviluppatore di essere immediatamente operativo. SceneBuilder è un tool visuale per la creazione di interfacce grafiche da utilizzare in applicazioni JavaFx, ciò significa che la costruzione della GUI avviene mediante gli usuali meccanismi di drag&drop. In particolare l’inserimento/modifica/cancellazione/riposizionamento di un nuovo elemento si ripercuoterà immediatamente sul file FXML, di cui ci occuperemo in un prossimo articolo, in cui è memorizzata la definizione dell’interfaccia grafica.

A questo punto cerchiamo di entrare nel merito dell’utilizzo di SceneBuilder; al suo avvio l’applicazione si presenta con un interfaccia simile alla seguente:

E’ chiaramente possibile utilizzare SceneBuilder anche per modificare un file FXML esistente creato ad esempio con NetBeans® 7.2, detto, questo passiamo ora ad esaminare gli elementi di cui consta l’interfaccia utente:

Cerchiamo di descrivere brevemente le funzionalità degli elementi evidenziati nell’immagine precedente e di cui forniremo nel seguito una descrizione più dettagliata.

Main Menu: permette di accedere ai diversi comandi messi a disposizione da SceneBuilder;
Selection and Message Bar: mostra il percorso per l’elemento selezionato in questo momento, inoltre fornisce informazioni in merito ad errori o messaggi di stato
Content Panel: rappresenta l’area di lavoro utilizzata per definire l’interfaccia utente
Library Panel: mostra l’insieme degli elementi inseribili all’interno dell’interfaccia utente, i vari pezzi sono organizzati in categorie:
- Containers;
- Controls;
- Menu Contents
- Ecc.
- Hierachy Panel: per mezzo di una rappresentazione ad albero fornisce una descrizione grafica dei legami padre-figlio (contenitore-contenuto) intercorrenti tra i diversi compenti dell’interfaccia, in particolare questo panel riveste un ruolo fondamentale nel caso si volesse accedere ad elementi non direttamente accessibili tramite il content panel;
- Inspector Panel: è il pannello in cui si trovano localizzate le schede con le quali gestire non solo gli aspetti legati al look&fell dei diversi componenti, ma consente l’associazione degli eventi definiti in una serie di classi java esterne, a tal proposito si rimanda all’articolo intitolato:”JavaFX Hello World utilizzando SceneBuilder” per una descrizione del meccanismo di definizione ed associazione degli eventi

A questo punto a partire dai prossimi entreremo maggiormente nel merito delle funzionalità offerte dai vari elementi di cui consta l’interfaccia utente.

All’interno del Main Menu trovano posto tutti i comandi con grazie ai quali è possibile interagire con i file FXML, in particolare è possibile creare, salvare, modificare, importare file già esistenti ridefinire, inoltre ogni nuovo file avrà associato ad esso una specifica finestra di gestione al fine di non indurre in confusione un utilizzatore alle prime armi, in particolare l’operazione con cui si crea un nuovo file FXML, presenta due diversi comportamenti, la prima, invocabile tramite il comando New crea un container base, la seconda opzione denominata New With Root Container. Permette di decidere sin da principio quello che sarà il layout del container principale, a tale proposito sono possibili le seguenti scelte:

Anchor Pane
Border Pane
Stack Pane

Se all’interno del menù File trovano posto i comandi per la gestione delle operazioni di I/O, all’interno del menù Edit, trovano posto le usuali azioni con le quali e possibile effettuare operazioni quali il copia&incolla, la seleziona e l‘undo, da questo punto di vista possiamo osservare come l’organizzazione dei comandi non specifici segua la struttura classica di tutte le applicazioni dotate di interfaccia grafica. La voce successiva alla Edit è la categoria View, con essa come possiamo facilmente intuire si da la possibilità allo sviluppatore di visualizzare/de visualizzare i vari elementi di cui consta l’interfaccia utente, garantisce inoltre un metodo veloce per passare da una scheda all’altra della sezione Inspector.

Attraverso la categoria dei comandi afferenti alla voce Insert è possibile inserire i vari componenti con cui si definirà l’interfaccia dell’applicazione; direttamente legata alle funzionalità della insert sono i comandi presenti sotto la voce Arrange, infatti per mezzo delle diverse opzioni messe a disposizione da questo menù è possibile organizzare al meglio l’ordine con cui saranno visualizzati i diversi elementi, nonché la possibilità di raggruppare in un unico componenti degli elementi logicamente correlati. La voce Successiva è quella denominata Preview, come suggerisce il nome le funzionalità da offerte sono quelle legate alla generazione di un anteprima dell’applicazione, l’elemento più interessante di questo menù è legato alla possibilità di gestire gli stylesheet e l’internazionalizzazione, in quest’ultimo caso è necessario specificare un apposito file sorgente. La voce Window consente un rapido passaggio da un progetto ad un altro; infine nel menù Help contiene i comandi con i quali accedere alla documentazione online di SceneBuilder. Da questa breve disamina appare chiaro come all’interno del Main Menù trovano posto tutti i comandi con cui gestire l’intero ciclo di sviluppo di un’interfaccia grafica per un progetto JavaFX®.

Il prossimo elemento di cui ci vogliamo occupare è quello denominato Selection and Message Bar. Questo elemento si prefigge di mettere a disposizione dello sviluppatore le seguenti funzionalità:

Mostrare il path per il componente attualmente attivo, per path in questo caso intendiamo la gerarchia di componenti che contengono l’elemento attualmente attivo, è importante sottolineare come sia possibile passare da un componete ad un altro, all’interno della stessa gerarchia, semplicemente selezionando all’interno di questo path, da questo punto di vista la logica alla base di questa funzionalità è ricalca quella di molti siti web che mostrano la sequenza di link seguiti per raggiungere la pagina attualmente visualizzata.
Fornire Feedback ed errori eventualmente presenti all’interno della struttura che si sta definendo, in particolare in caso di messaggi questi rimarranno visibili per alcuni secondi trascorsi i quali sarà visualizzata un icona di avvertimento.

La prossima sezione di cui ci occupiamo è il Content Pane, come abbiamo già scritto in precedenza rappresenta l’area di lavoro vera è propria, essa rappresenta il “contenitore” all’interno del quale posizionare i diversi elementi, chiaramente il posizionamento di quest’ultimi è funzione anche del layout che si è deciso di adottare. In particolare la scelta del layout da adottare può avvenire selezionando una delle opzioni presenti all’interno del Library Panel nella categoria denominata Containers.

All’interno del Library Panel oltre alle voci relative alla gestione del layout sono presenti tutti gli elementi con cui è possibile personalizzare l’interfaccia utente, quindi è possibile selezionare pulsanti, label, checkbox ecc. ed il loro inseriemtno avviene con l’usuale meccanismo del drag&drop. E’ importante sottolineare come l’inserimento di un nuovo elemento determinai la modifica delle opzioni presenti all’interno del container Inspector, infatti a seconda dell’elemento inserito le categorie denominate Properties, Layout, Code vedranno modificate le opzioni messe a dispozione dello sviluppatore.

Le tre immagini si riferiscono allo status di partenza in cui l’inspector si trova a seguito all’inserimento di un pulsante all’interno dell’interfaccia utente, si noti a questo proposito come nel caso della sezione denominata Code alcuni degli eventi non siano attivi, ad esempio quelli legati alla tastiera. Ricordiamo che la gestione degli eventi non è implementabile all’interno di SceneBuilder, ma va definita in file Java esterni

Nel panel Properties sono presenti tutte le voci con è possibile modificare il look&feel del componente (grandezza del font, colore, sfondo), notiamo inoltre come il layout del component possa essere personalizzato ricorrendo ai fogli stili sia inline, in questo caso si ricorre alla sezione denominata Style oppure si può selezionare uno foglio stile esterno tramite la sezione StyleSheets.

Altro elemento su cui l’inserimento di un nuovo componente ha immediate ripercussioni è lo Hierachy, ricordiamo che lo scopo di questo panello è quello di mostrare, tramiate una rappresentazione ad albero i legami padre/figlio intercorrenti tra i diversi elementi di cui consta l’interfaccia utente.

In questa immagine si mostra come una serie di componenti siano organizzati da un punto di vista logico all’interno di un container principale, il quale rappresenterà sempre la radice dell’albero.

Con quest’ultimo chiarimento concludiamo questa breve introduzione all’uso, di SceneBuilder, come già scritto in apertura di questo articolo, il nostro non vuole essere un tutorial, ma si pone come obiettivo principale quello di incuriosire il lettore