Alcune caratteristiche della finestra possono essere controllate tramite un file che ne specifica
le caratteristiche estetiche, il file sarà nel formato dei file che si usano per questo scopo anche sul web:
i css
.
Cominciamo col creare un file css nel nostro progetto: dalla linguetta Project Explorer che trovi a sinistra nell'ambiente di sviluppo Eclipse, srotola il progetto premendo il triangolo e vedrai il nodo src; srotola anche questo e ritroverai i pacchetti che contengono i tuoi programmi. Click con il tasto destro nel nome del pacchetto che contiene la classe con cui vogliamo lavorare e nel menu contestuale che si è aperto seleziona la voce New/Other..., si aprirà un sottomenu, dal gruppo Web scegli CSS file, click su Next e poi inserisci il nome del file.
Per poter indicare una caratteristica (anche detta proprietà) di un dato controllo o anche un gruppo di controlli bisogna creare un legame tra tali controlli della finestra e le rispettive descrizioni nel file css; questo lo si può fare in due modi:
- tramite le classi per definire in un colpo le proprietà di un insieme di oggetti. Un oggetto può appartenere a più classi contemporaneamente;
- tramite l'id per definire le proprietà di un solo oggetto.
Nel file css si adotta la sintassi usuale per specificare le proprietà di un oggetto utilizzando la sua classe o il suo id:
.nomeclasse { proprietà1: valore; proprietà2: valore; ... } #identificativo { proprietà1: valore; proprietà2: valore; ... }
Nel file java bisogna indicare a quali classi appartiene ciascun oggetto della finestra
di cui si vuole specificare le proprietà nel css tramite il metodo
nomeOggetto.getStyleClass().add("nomeclasse")
oppure puoi specificare qual è l'identificativo del controllo in questione
tramite il metodonomeOggetto.setId("identificativo")
.
Alcuni oggetti hanno già una classe preimpostata: ad esempio tutti gli oggetti di tipo TextField
hanno già la classe text-field
così come i Button
hanno la classe button
,
in generale se un oggetto è di un tipo formato da più parole per la classe corrispondente bisogna separare
le parole con un "-".
Per fare in modo che il foglio di stile venga associato alla finestra basterà aggiungere la
seguente riga al metodo start()
:
scene.getStylesheets().add("nomeCartella/nomeFile.css");
In genere il nomeCartella
appena sopra indicato corrisponde al percorso delle cartelle corrispondenti
al package. Se per esempio abbiamo realizzato il package it.aspix.esempio,
scriveremo: scene.getStylesheets().add("it/aspix/esempio/nomeFile.css");
Le proprietà nei css
Esistono molte proprietà elencate nel documento di riferimento dei fogli di stile per JavaFX, qui di seguito vediamo le cose più utili.
I colori
Esistono alcuni modi per indicare i colori. Tutte le volte che troverai la dicitura colore
, potrai applicare a tua scelta una di
queste possibilità:
nomeLetterale
usa la parola inglese che indica il colore che vuoi (es.: ,purple
,brown
);#codiceEsadecimale
sono 3 coppie di cifre esadecimali: una per la componente di rosso, una per la verde ed una per la blu;rgb(rosso, verde, blu)
per fare una tinta con le componenti in decimale;linear-gradient(colore1, colore2)
per fare una sfumatura dal primo al secondo colore. Se vuoi puoi aggiungere un'altra componente per fare una sfumatura tra 3 colori.
Gli attributi
Possono essere usati molti degli attributi (sopra indicati come proprietà) dei fogli di stile, i rispettivi nomi devono però avere il prefisso "-fx-", questi sono alcuni attributi utili:
- -fx-font-family
- Nome del carattere che si vuole, ad esempio Arial, "Times New Roman"
- -fx-font-weight
- Regola il peso ossia lo spessore del tratto che disegna il carattere. Puoi usare una tra le seguenti possibilità:
lighter
|normal
|bold
|bolder
|100
|200
|300
|400
|500
|600
|700
|800
|900
- -fx-font-size
- Imposta la misura del carattere. Può essere impostata in
px
(pixel) o inpt
(punti (tipografici), si assume un dispositivo con la risoluzione di 96 punti per pollice) o anche come percentuale. Un possibile esempio è 20px - -fx-font-style
- Ti permette di fare il carattere normale (
normal
), corsivo (italic
) o inclinato (oblique
) - -fx-font
- Contiene tutti i precedenti attributi riguardanti i font. Si può descrivere quindi l'aspetto molto più velocemente. Un esempio:
-fx-font: italic bold 16pt "Arial Black";
- -fx-background-color
- Esprime il colore dello sfondo
- -fx-text-fill
- Esprime il colore del testo.
- -fx-background-image
- Esprime un'immagine di sfondo. L'immagine la copiamo all'interno della cartella dei sorgenti (src) del progetto che stiamo costruendo. Nel foglio
di stile inseriremo poi la funzione
url("nomeFile");
. - -fx-background-repeat
- Se l'immagine di sfondo è più stretta e/o più bassa del controllo nel quale viene inserita, bisogna indicare se va ripetuta orizzontalmente e/o
verticalmente in modo da riempire l'area. Le possibilità sono:
no-repeat
per non ripetere né orizzontalmente né verticalmente;
repeat-x
ripete solo orizzontalmente in modo da riempire una riga alta quanto l'immagine;
repeat-y
ripete solo verticalmente in modo da riempire una colonna larga quanto l'immagine;
repeat
è il valore predefinito; ripete sia in orizzontale che in verticale. - -fx-background-radius
- arrotonda lo sfondo del controllo.
- -fx-border-color
- Definisce il colore del bordo
- -fx-border-radius
- Definisce il raggio del bordo, ad esempio 10px
- -fx-border-width
- Definisce lo spessore del bordo
- -fx-padding
- Imposta la spaziatura intorno al controllo tramite 4 valori numerici separati da spazio per indicare rispettivamente lo spazio sopra a destra in basso e a sinistra.
- -fx-hgap
- Imposta la spaziatura orizzontale tra tutti i controlli figli del controllo in cui inserisci questa regola, ad esempio un GridPane.
- -fx-vgap
- Imposta la spaziatura verticale tra tutti i controlli figli del controllo in cui inserisci questa regola, ad esempio un GridPane.
Proviamo a vedere un esempio di un foglio di stile che imposta 3 caratteristiche:
- i testi delle etichette sono di colore verde
- i testi dei TextField sono il doppio della grandezza degli altri
- la casella di testo cLato per cui ho impostato l'id "lato"
usando l'istruzione
cLato.setId("lato")
nel programma java ha lo sfondo rosso
.label { -fx-text-fill: green; } .text-field { -fx-font-size: 200%; } #lato { -fx-background-color: #ff0000; }