css

decorazione degli oggetti nelle finestre con i fogli di stile

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:

  1. tramite le classi per definire in un colpo le proprietà di un insieme di oggetti. Un oggetto può appartenere a più classi contemporaneamente;
  2. 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à:

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 in pt (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:

  1. i testi delle etichette sono di colore verde
  2. i testi dei TextField sono il doppio della grandezza degli altri
  3. 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;
}