css

decorazione degli oggetti nelle finestre con i fogli di stile

È possibile gestire alcune caratteristiche riguardo l'aspetto della finestra in un file separato. Il contenuto di questo file sarà nel formato CSS, tant'è che per convenzione avrà estensione 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 di sempre; in particolare se il nome della classe o dell'id è composto da più parole, si inserisce tra queste il trattino (-) senza spazi e non la maiuscola come nei programmi Java. Quindi ad esempio

.nome-classe {proprietà1: valore;
              proprietà2: valore;
              ...}
#codice-id {proprietà1: valore;
            proprietà2: valore;
            ...}

Nel file java devi indicare a quali classi appartiene ciascun oggetto della finestra di cui si vuole specificare le proprietà nel css tramite il metodo nomeOggetto.getStyleClass().add("nome-classe") oppure devi specificare qual è l'identificativo del controllo in questione tramite il metodonomeOggetto.setId("codice-id").

Per fare in modo che il foglio di stile venga associato alla finestra basterà aggiungere la seguente riga nel costruttore della classe:

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

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)). L'ambiente Java assume che il dispositivo abbia una risoluzione di 96 dpi (punti per pollice).
-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
-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.
-fx-vgap
Imposta la spaziatura verticale tra tutti i controlli figli del controllo in cui inserisci questa regola.

Esisteno molte altre proprietà elencate nel documento di riferimento dei fogli di stile per JavaFX.