Part 4: CSS Styling

Screenshot AddressApp Part 4

Argomenti nella parte 4

Stili con i CSS
Aggiungere un’ Icona per l’applicazione

Stile con i CSS

Con le JavaFX puoi impostare lo stile della tua interfaccia utente usando i Cascading Style Sheets (CSS). Una cosa fantastica! Non è mai stato così facile personalizzare l’aspetto di una applicazione Java.

In questo tutorial creeremo un DarkTheme ispirato dal design metro di windows 8. Il css per il pulsante è basato sul post JMetro - Windows 8 Metro controls on Java di Pedro Duque Vieira.

Prendere familiarità con i CSS

Se vuoi personalizzare lo stule della tua applicazione JavaFX dovresti possedere almeno una conoscenza basilare dei CSS. Un buon posto per incominciare è questo CSS tutorial.

Per informazioni più specifiche su JavaFX riguardo i CSS:

Skinning JavaFX Applications with CSS - Tutorial da Oracle
JavaFX CSS Reference - Documentazione ufficiale

I CSS di default in JavaFX

Il sorgente di default per i css in JavaFX 8 è il file chiamato modena.css. Questo file può essere trovato all’inteno del file Jar delle Java FX, jfxrt.jar che puoi trovare all’interno della cartella Java in /jdk1.8.x/jre/lib/ext/jfxrt.jar.

Scoppatta il file jfxrt.jar. Dovresti poter trovare il file modena.css sotto com/sun/javafx/scene/control/skin/modena/

Questo file css è sempre apllicato di default alle applicazioni Java FX. Aggiungendo un css personalizzato possiamo sovrascrivere quello di default modena.css.

Hint: Può essere di aiuto guardare il file css di default per vedere quali parametri hai la necessità di modificare.

Utilizzare il file CSS

Aggiungi il seguente file CSS chiamato DarkTheme.css nel package view.

DarkTheme.css

.background {
    -fx-background-color: #1d1d1d;
}

.label {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 0.6;
}

.label-bright {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.label-header {
    -fx-font-size: 32pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.table-view {
    -fx-base: #1d1d1d;
    -fx-control-inner-background: #1d1d1d;
    -fx-background-color: #1d1d1d;
    -fx-table-cell-border-color: transparent;
    -fx-table-header-border-color: transparent;
    -fx-padding: 5;
}

.table-view .column-header-background {
    -fx-background-color: transparent;
}

.table-view .column-header, .table-view .filler {
    -fx-size: 35;
    -fx-border-width: 0 0 1 0;
    -fx-background-color: transparent;
    -fx-border-color: 
        transparent
        transparent
        derive(-fx-base, 80%) 
        transparent;
    -fx-border-insets: 0 10 1 0;
}

.table-view .column-header .label {
    -fx-font-size: 20pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-alignment: center-left;
    -fx-opacity: 1;
}

.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color;
}

.split-pane:horizontal > .split-pane-divider {
    -fx-border-color: transparent #1d1d1d transparent #1d1d1d;
    -fx-background-color: transparent, derive(#1d1d1d,20%);
}

.split-pane {
    -fx-padding: 1 0 0 0;
}

.menu-bar {
    -fx-background-color: derive(#1d1d1d,20%);
}

.context-menu {
    -fx-background-color: derive(#1d1d1d,50%);
}

.menu-bar .label {
    -fx-font-size: 14pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 0.9;
}

.menu .left-container {
    -fx-background-color: black;
}

.text-field {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
}

/* 
 * Metro style Push Button
 * Author: Pedro Duque Vieira
 * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
 */
.button {
    -fx-padding: 5 22 5 22;   
    -fx-border-color: #e2e2e2;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

.button:hover {
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused {
    -fx-border-color: white, white;
    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 1);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}

.button:default:hover {
    -fx-background-color: derive(-fx-focus-color,30%);
}

Adesso dobbiamo collegare il CSS all nostro oggetto Scene. Potremmo farlo direttamente dal codice Java, useremo invece Scene Builder per aggiungerlo al nostro file fxml:

Collegare il CSS a RootLayout.fxml

Apri il file RootLayout.fxml nel Scene Builder.
Seleziona la root BorderPane nella vista gerarchica. Sotto il gruppo Properties aggiugni il file DarkTheme.css come stylesheet.

Collegare il CSS a PersonEditDialog.fxml

Apri il file PersonEditDialog.fxml in Scene Builder. Seleziona la radice AnchorPane e scegli DarkTheme.css nel gruppo Properties come stylesheet.
Lo sfondo rimane bianco, quindi aggiungi la Style Class background alla radice AnchorPane.
Seleziona il pulsante OK e scegli Default Button nella vista Properties. Questo cambierà il suo colore e lo setterà come pulsante di default quando la key invio sulla tastiera viene premuta dall’utente.

Collegare il CSS a PersonOverview.fxml

Apri il file PersonOverview.fxml in Scene Builder. Seleziona la radice AnchorPane nel gruppo Hierarchy. Sotto properties aggiungi il file DarkTheme.css come stylesheet.
A questo punto dovresti vedere qualche cambiamento: La tabella ed i pulsanti sono neri. Tutte le classi di stile .table-view e.button dal file modena.css applicate alla tabella ed ai pulsanti. Dal momento che abbiamo ridefinito (e quindi sovrascritto) alcuni di questi stili nel nostro CSS personalizzato, i nuovi stili sono applicati automaticamente.
Potresti dover aggiustare la dimensione dei pulsanti affinché tutti i testi tornino ad essere visibili.
Seleziona sulla destra l’AnchorPane che si trova dentro allo SplitPane.
Vai nel gruppo Properties e seleziona background come style class. Lo sfondo dovrebbe diventare nero.

Label con Style diversi

Ora, tutti i labels sul lato destro hanno la stessa dimensione. Nel file css ci sono già alcuni stili definiti come .label-header e .label-bright che useremo per un ulteriore personalizzaizone dei label.

Select the Person Details label and add label-header as a Style Class.
Per ogni label nella colonna di destra (dove i dettagli della persona attuale sono visualizzati), aggiungi lo Style Class del css label-bright.

Aggiungere un’Icona per l’applicazione

Adesso la nostra applicazione ha l’icona di default nella title bar e nella task bar:

Apparirebbe molto migliore con un’icona personalizzata:

Il file Icon

Un possibile posto in cui reperire icone gratuitamente è Icon Finder. Ho scaricato una semplice icona rubrica.

Creare una cartella (normale) dentro alla progetto AddressApp chiamata resources ed una sottocartella chiamata images al suo interno. Mettete l’icona che avete scelto all’interno della sottocartella. La tua struttura di cartelle dovrebbe apparire in questo modo adesso:

Impostare l’icona nell’oggetto Scene

Per impostare l’icona nel nostro oggetto scene aggiungi la seguente linea nel metodo start(...) in MainApp.java

MainApp.java

this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

L’intero metodo start(...) dovrebbe apparire in questo modo adesso:

public void start(Stage primaryStage) {
    this.primaryStage = primaryStage;
    this.primaryStage.setTitle("AddressApp");

    // Set the application icon.
    this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

    initRootLayout();

    showPersonOverview();
}

Puoi anche aggiungere un’icona all’oggetto stage del Dialog di modifica della persona se lo desideri.

Qual’è il prossimo?

Nella parte 5 del tutorial aggiungeremo una memorizzazione su file XML per i nostri dati.

code.makery