JavaFX 8: il Layout di una Scena

3 aprile 2017

La progettazione di una interfaccia grafica, o Scena in linea con la terminologia JavaFX, inizia con l’organizzazione dei componenti al suo interno, il Layout di una Scena. JavaFX fornisce dei Layout predefiniti ed in questo capitolo cercheremo di presentare i più comuni.

HBox e VBox

Iniziamo con il dire che la classe javafx.layout.Pane rappresenta la classe base dalla quale derivano tutte le classi di Layout, HBox è, ad esempio, ci consente di posizionare i nodi della Scena su una singola fila orizzontale:

         ....
         HBox hBox = new HBox();
         hBox.setSpacing(20);
         hBox.getChildren().add(new Label("Label1"));
         hBox.getChildren().add(new Label("Label2"));
         hBox.getChildren().add(new Label("Label3"));
         Scene scene = new Scene(hbox);
         stage.setScene(scene);
         stage.show();
         ....
        

Eseguendo il codice all’interno del metodo start() di una applicazione JavaFX, vedremo le tre label disposte orizzontalmente e distanziate di 20 px.

Un Layout simile al precedente, ma che organizza i nodi verticalmente, è VBox, la modifica del codice precedente con VBox al posto di HBox consente di verificarne il funzionamento.

BorderPane e StackPane

Un Layout particolarmente utile è il BorderPane che definisce le posizioni superiore, sinistra, destra, inferiore e centrale all’interno della sua area; nelle posizioni di un BorderPane è possibile collocare nodi che possono contenere a loro volta altri Layout:

         ....
         BorderPane borderPane = new BorderPane();
         borderPane.setTop(new Label("Top"));
         borderPane.setLeft(new Label("Left"));
         borderPane.setCenter(new Label("Center"));
         borderPane.setRight(new Label("Right"));
         borderPane.setBottom(new Label("Bottom"));
         Scene scene = new Scene(borderPane);
         stage.setScene(scene);
         stage.show();
         .....
         

Uno StackPane consente invece di disporre i nodi uno sopra l’altro come in una pila. Il nodo aggiunto per primo viene posizionato sul fondo della pila e il nodo successivo al di sopra di essa, si prosegue quindi con l’aggiunta di altri nodi. L’utilizzo di StackPane segue la falsa riga di quelli precedenti risultando quindi abbastanza semplice.

AnchorPane

Un AnchorPane consente di ancorare i nodi al suo interno specificando le distanze dal contorno. Cosi, ad esempio, possiamo collocare un pulsante ad una distanza di 10 px dal bordo destro dell’AnchorPane e una label a 20 px dal bordo sinistro e di 10 px dal bordo superiore.

Vediamo un esempio e collochiamo 4 nodi in un AnchorPane. Il primo nodo sia una label distanziata dal bordo sinistro e dal bordo superiore, la seconda una label collocata specificando distanza da bordo destro e superiore. Aggiungiamo poi due aree di testo con le stesse distanze dai bordi laterali e leggermente più in basso rispetto al bordo superiore:

         AnchorPane anchorPane = new AnchorPane();
         
         Label label1 = new Label("Label1");
         Label label2 = new Label("Label2");
         
         TextField text1 = new TextField("Text1");
         TextField text2 = new TextField("Text2");
         
         AnchorPane.setLeftAnchor(label1,20d);
         AnchorPane.setTopAnchor(label1,10d);
         AnchorPane.setLeftAnchor(text1,20d);
         AnchorPane.setTopAnchor(text1,40d);
         
         AnchorPane.setRightAnchor(label2,165d);
         AnchorPane.setTopAnchor(label2,10d);
         AnchorPane.setRightAnchor(text2,50d);
         AnchorPane.setTopAnchor(text2,40d);
         
         anchorPane.setPrefSize(400, 100);
         anchorPane.getChildren().addAll(label1, label2, text1, text2);
         
         Scene scene = new Scene(anchorPane);
         stage.setScene(scene);
         stage.setResizable(false);
         stage.show();
        

Ecco il form risultante:

Figura 1. AnchorPane

AnchorPane

GridPane

Il layout GridPane dispone i nodi della Scena in una griglia di righe e colonne in modo simile ad una tabella HTML. Gli elementi della griglia sono numerati con indici di riga e colonna che iniziano dal valore 0. Alcune proprietà ne consentono la personalizzazione attraverso i metodi della classe:

ProprietàDescrizione
alignmentAllineamento di un nodo in una cella (Top, Left, Right, Center).
hgapDistanza orizzontale tra colonne.
vgapDistanza verticale tra righe.

TilePane

Un altro interessante Layout è TilePane. I nodi aggiunti sono disposti in forma di piastrelle (tiles) di dimensioni uniformi. Proprietà fondamentali sono:

ProprietàDescrizione
alignmentAllineamento di un nodo in una tile.
hgapDistanza orizzontale tra tiles.
vgapDistanza verticale tra tiles.
orientationmodalità con cui aggiungere tiles (orizzontale, da sinistra a destra o verticale, dall’alto al basso).

Vediamo un esempio:

      ....
      TilePane tilePane = new TilePane() ;   
      tilePane.setOrientation(Orientation.HORIZONTAL) ; 
      tilePane.setTileAlignment(Pos.CENTER_LEFT) ; 
      tilePane.setHgap(10);
      tilePane.setVgap(10);
      
      tilePane.getChildren().addAll(new Label("Label1"), new Label("Label2"), 
               new Label("Label3"), new Label("Label4"),
               new Label("Label5"), new TextField("Text1"), 
               new TextField("Text2"), new TextField("Text3"),
               new TextField("Text4"), new TextField("Text5"));
       ....
        

Risultato:

Figura 2. TilePane

TilePane

Tutte le lezioni

1 ... 48 49 50 ... 118

Se vuoi aggiornamenti su JavaFX 8: il Layout di una Scena inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su JavaFX 8: il Layout di una Scena

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy