formattazione

In questo capitolo prenderemo in considerazione soltanto l'aspetto grafico del nostro programma.

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);

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.

Vediamo ad esempio come si potrebbe dimensionare un pulsante a 200 punti di larghezza:

pulsante1.setPrefWidth(200.0);

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. Potrebbe ad esempio succedere che un messaggio di testo sia piuttosto lungo, si potrebbe allora volerlo sull'intera ultima riga, fare in modo cioè che occupi sia la prima che la seconda colonna (poniamo che la nostra griglia abbia due colonne). 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).

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);

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à:

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

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 il contenuto di 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 vincoliPrimaColonna = new ColumnConstraints();
vincoliPrimaColonna.setHalignment(HPos.RIGHT);
ColumnConstraints vincoliSecondaColonna = new ColumnConstraints();
vincoliSecondaColonna.setHalignment(HPos.CENTER);
griglia.getColumnConstraints().addAll(vincoliPrimaColonna, vincoliSecondaColonna);

RowConstraints vincoliRiga0 = new RowConstraints();
vincoliRiga0.setValignment(VPos.CENTER);
RowConstraints vincoliRiga1 = new RowConstraints();
vincoliRiga1.setValignment(VPos.CENTER);
RowConstraints vincoliRiga2 = new RowConstraints();
vincoliRiga2.setValignment(VPos.CENTER);
griglia.getRowConstraints().addAll(vincoliRiga0, vincoliRiga1, vincoliRiga2);

Quel che si fa è creare degli oggetti che rappresentano i vincoli (i ColumnConstraints), impostare l'allineamento ( setHalignment) per ciascuna colonna e poi tutti i vincoli vengono legati alla griglia usando getColumnConstraints().addAll() in ordine dalla colonna zero in avanti. Discorso analogo vale per le righe.

Per quanto riguarda l'allineamento è possibile utilizzare le seguenti costanti:

Miscellanea...

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

• Immagine:
  setGraphic(immagine) per le etichette e i pulsanti
  se ad esempio la mia immagine si trova nel pacchetto test l'oggetto immagine può essere costruita in questo modo: ImageView immagine = new ImageView("/test/immagine.jpg");
• Rotazione:
  setRotate(gradi) il cui argomento è un double (un angolo espresso in gradi).
• Traslazione:
  setTranslateX(punti) il cui argomento è un double. Valori positivi spostano a destra, negativi a sinistra.
  setTranslateY(punti) come sopra, ma valori positivi spostano in basso e negativi in alto.
• Scala:
  setScaleX(fattore) il cui argomento è un double e rappresenta il fattore moltiplicativo. Ad esempio se vogliamo che un controllo chiamato oggetto sia largo il doppio metteremo oggetto.setScaleX(2);
setScaleY(fattore) il cui comportamento è conforme alla riga sopra.