formattazione

formattazione degli elementi della finestra

Spaziature

Quando visualizzeremo la finestra dell'esempio Un saluto personalizzato tutti gli oggetti risulteranno attaccati gli uni agli altri. Per avere un po' di spazio basta impostare il numero di pixel (cioè di punti) che devono esserci per separare i due oggetti. Lo spazio sarà indicato col metodo setHgapper quello orizzontale e con setVgapper quello verticale. Per aumentare invece lo spazio che c'è tra gli oggetti ed il bordo della finestra (specificamente tra gli oggetti ed il bordo del pannello) si va ad usare il metodo setPadding(new Insets(pxSu, pxDestra, pxGiù, pxSinistra)). Un esempio: vogliamo che orizzontalmente ci siano 20 pixel di spazio tra i controlli e ce ne siano 40 verticalmente; vogliamo poi che ci siano 10 pixel di spazio tra ogni lato del bordo della finestra ed i controlli all'interno. Scriveremo:

griglia.setPadding(new Insets(10, 10, 10, 10));
griglia.setHgap(20); 
griglia.setVgap(40);
Esempio di pagging e gap

Posizionamento del contenuto del pannello

Andiamo ad ingrandire la finestra, ad esempio portiamola a 600x300 e vediamo che succede.

Ora lo spazio tra il bordo della finestra e tra i controlli è come si voleva ma tutto rimane in alto a sinistra dando l'idea di una non buona distribuzione degli oggetti. Puoi chiedere allo StackPane o al GridPane di allineare il suo contenuto sia in verticale che in orizzontale tramite il metodo setAlignment(posizione). La posizione deve essere esattamente una tra le seguenti possibilità:

Posizionamento di un pannello
Codice Tipo di allienamento
Pos.TOP_LEFT In alto a sinistra
Pos.TOP_RIGHT In alto a destra
Pos.TOP_CENTER In alto centrato orizzontalmente
Pos.BOTTOM_LEFT In basso a sinistra
Pos.BOTTOM_RIGHT In basso a destra
Pos.BOTTOM_CENTER In basso centrato orizzontalmente
Pos.CENTER_LEFT Centrato verticalmente e a sinistra
Pos.CENTER_RIGHT Centrato verticalmente e a destra
Pos.CENTER Centrato verticalmente e centrato orizzontalmente

Applicando quanto visto, se vogliamo centrare (in entrambi i sensi) tutti i controlli dell'esempio, andremo semplicemente a scrivere:
griglia.setAlignment(Pos.CENTER);

Dimensionamento di un controllo

Stabilire la misura

Nel momento in cui poni un oggetto sul pannello, verrà calcolata la dimensione (larghezza ed altezza) ottimale; tale misura dipende - tra le altre cose - anche da quanto testo vi è contenuto. Se dovessi inserire in un pannello 3 pulsanti il cui testo mostrato è "Salva", "Annulla" e "Esci senza salvare", ti troveresti un pulsante molto stretto (Salva), uno medio (Annulla) ed uno particolarmente lungo ("Esci senza salvare"). Puoi indicare le misure da te desiderate tramite i metodi che seguono. Tali metodi verranno ovviamente applicati all'oggetto di cui vuoi impostare la dimensione. In tutti i casi l'argomento o gli argomenti forniti sono numeri (costanti o variabili) di tipo double sebbene da noi verranno usati interi.

Metodo Risultato ottenuto
setMinWidth(larghezza) Larghezza minima
setPrefWidth(larghezza) Larghezza desiderata
setMaxWidth(larghezza) Larghezza massima
setMinHeight(altezza) Altezza minima
setPrefHeight(altezza) Altezza desiderata
setMaxHeight(altezza) Altezza massima
setMinSize(larghezza, altezza) Dimensione (larghezza ed altezza) minima
setPrefSize(larghezza, altezza) Dimensione (larghezza ed altezza) desiderata
setMaxSize(larghezza, altezza) Dimensione (larghezza ed altezza) massima

Dimensioniamo orizzontalmente a questo punto la casella di testo ed il pulsante del nostro esempio a 200 punti:

pulsante1.setPrefWidth(200.0);
pulsante3.setPrefWidth(200.0);
Dimensioni degli oggetti

Un controllo in più celle

Nel momento in cui progetti un'interfaccia grafica può esserti utile la possibilità di far occupare ad un dato controllo più celle della griglia. Nell'esempio che stiamo adottanto il messaggio di saluto finale è piuttosto lungo e non ha bisogno di un controllo di tipo Text che lo spieghi. Si potrebbe allora volerlo sull'intera ultima riga, che occupi sia la prima che la seconda colonna. Questo vuol dire che userà 2 colonne a partire da quella in cui è posizionato.

In realtà a tutti i controlli viene impostato il numero di celle orizzontali e verticali che andrà ad occupare in modo predefinito ad 1. Se si vuole un valore diverso questo deve essere esplicitato dal programmatore, cioè da te. Per far questo riprendiamo il metodo della griglia che conosci già molto bene: add(nomeControllo, posX, posY). Ne esiste una variante in cui oltre a fornire tali informazioni si esplicita appunto il numero di righe e colonne: add(nomeControllo, posX, posY, numColonne, numRighe).

Oggetti su più celle

Per far occupare allora al messaggio di saluto due colonne basterà sostituire la riga
griglia.add(pulsante, 0, 1);
con la riga
griglia.add(pulsante, 0, 1, 2, 1);

Allineamento

Abbiamo già detto che il GridPane inserisce i vari controlli all'interno di una griglia mettendo in una casella un solo controllo. Si verranno a creare così un certo numero di righe e di colonne. Il GridPane ci offre la possibilità di allineare ciascuna colonna e ciascuna riga. Iniziamo con l'esempio che permette di allineare a destra la prima colonna ed a sinistra la seconda, al centro tutte le righe:

ColumnConstraints colonna0 = new ColumnConstraints();
colonna0.setHalignment(HPos.RIGHT);
griglia.getColumnConstraints().add(colonna0);

ColumnConstraints colonna1 = new ColumnConstraints();
colonna1.setHalignment(HPos.LEFT);
griglia.getColumnConstraints().add(colonna1);

RowConstraints riga0 = new RowConstraints();
riga0.setValignment(VPos.CENTER);
griglia.getRowConstraints().add(riga0);

RowConstraints riga1 = new RowConstraints();
riga1.setValignment(VPos.CENTER);
griglia.getRowConstraints().add(riga1);

RowConstraints riga2 = new RowConstraints();
riga2.setValignment(VPos.CENTER);
griglia.getRowConstraints().add(riga2);
Allineamento nelle righe e nelle colonne

A prima vista sembra complicato ma poi guardandolo meglio risultano 3 righe ripetute tante volte, dobbiamo cioè creare dei vincoli al GridPane:

  1. Creare l'oggetto dei vincoli orizzontali o verticali tramite ColumnConstraints oppure RowConstraints
  2. Impostare l'allineamento orizzontale sul ColumnConstraints o l'allineamento verticale sul RowConstraints scegliendo tra le seguenti possibilità:
    Codice per colonne Tipo di allienamento
    HPos.LEFT Allinea a sinistra
    HPos.CENTER Allinea al centro
    HPos.RIGHT Allinea a destra
    Codice per righe Tipo di allienamento
    VPos.TOP Allinea in alto
    VPos.CENTER Allinea al centro
    VPos.BOTTOM Allinea in basso
  3. Legare il vincolo creato alla griglia col metodo getRowConstraints().add(vincolo) per la riga e col metodo getColumnConstraints().add(vincolo) per le colonne.

Miscellanea...

Alcune operazioni che si possono fare sui controlli per alterarne l'aspetto. Si tratta in tutti i casi di metodi dei controlli stessi: