JavaFX® con stile – Breve guida ai fogli stile 2/2

di admin - 22 Settembre 2012 in Programmazione

Tratto dalla JavaFX CSS reference Guide

Nel corso di questo nuovo appuntamento continueremo la disamina della reference guide in cui sono descritti gli aspetti principali legati alla definizione degli fogli stile per un’applicazione JavaFX®, in particolare il primo argomento su cui appunteremo la nostra attenzione riguarda i tipi di dati utilizzabili all’interno di una specifica css, ricordiamo ancora una volta che la specifiche estetiche dei diversi componenti possono essere fornite sia attraverso un foglio stile esterno che andrà poi incluso con i meccanismi descritti nel precedente articolo, oppure possono essere fornite come specifiche inline.

Dopo aver ribadito nuovamente in che modo definire/fornire le specifiche per gli stili osserviamo come i vari attributi possano essere valorizzati utilizzando i seguenti tipi di dato:

• Booleani <boolean> gli unici valori ammessi sono true e false;
• Stringhe <string> per la loro specifica è possibile utilizzabili sia gli apici doppi che quelli singoli;
• Numeri interi e reali <number>|<integer>, si tenga presente che per molte proprietà è possibile utilizzare solo valori in determinati intervalli oppure solo valori maggiori di 0.

I tipi appena indicati possono essere utilizzati nella definizione delle seguenti proprietà:

• <size>:  una size è un numero (number) a cui è associato un’unità di misura (length) o una percentuale (percentage) nel caso in cui non sia specificata si assume che l’unità di misura siano i pixel (px), in merito alle specifiche utilizzabili per la proprietà size sono ammesse le seguenti scritture:
  • <number>[px|mm|cm|in|pt|pc|em|ex] si ricorda che la parentesi quadra indica un elemento opzionale, inoltre giova ricordare che, così come avviene con i file CSS, non è possibile inserire spazi bianchi tra il valore numerico e l’unità di misura, pena la visualizzazione di un messaggio di warning. La specifica appena indicata sarà indicata nel seguito con la scrittura <length>
  • <number>[%] , nel seguito faremo riferimento a questa scrittura per mezzo della label <percentage>
  • <angle>:  un angolo non è altro che un numero seguito da una delle seguenti unità di misura:
    • deg: angolo in gradi
    • Rad: angolo in radianti
    • Grad: angolo in gradianti
    • Turn: angolo espresso come tipo di rotazione
    • <point>: si tratta di un punto nell’area di lavoro identificato mediante una coppia di valori che possono essere di tipo <length> o <percentage>
    • <font>: la specifica 2.0 consente di indicare contemporaneamente più font sulla falsariga di quanto già avviene nel caso dei fogli stile HTML, è inoltre possibile valorizzare attributi quali
      • size: per la sua specifica si utilizza la notazione descritta in precedenza ;
      • font-style: sono ammessi i seguenti valori:
        • normal
        • italic
        • oblique
• font-weight: sono possibili i seguenti valori:
  • normal
  • bold
  • bolder
  • lighter
  • 100|200|300|400|500|600|700|800|900

E’ possibile una versione compatta della specifica per i font utilizzando la seguente scrittura:

[[<font-style>|<font-weight>]? <font-size> <font-family>

In genere il prefisso utilizzato per i font è: –fx-font-(family|size|style|weight) oltre alla notazione compatta a cui abbiamo appena fatto cenno, esistono però componenti che però non rispettano questa dicitura

• <color-stop> sono simili alle linee di gradiente e vengono utilizzati in tutte quelle circostanze in cui si ha la necessità di costruire delle transizioni di colore, per la loro specifica si utilizza la notazione definita dal W3C la quel prevede la seguente notazione: <color> [<percentage>!<length>], è importante osservare che nel caso nella specifica si utilizzassero attributi di tipo <length> si renderebbe necessario specificare sia il valore inziale sia quello finale nella serie dei colo-stop.
• <paint>: in questo caso è possibile specificare sia valori solidi sia gradienti (lineari o radiali), nel caso dei gradienti sono possibili le suguenti alternative di specifica:
  • linear-gradient([[from point to point]|to [left|right]||[top|bottom].]?[[repeat|reflect],]?<color-stop>[,<color-stop>]+): un gradiente lineare crea una transizione di colori deifnita sulla base dei color-stop il secondo una direzione specificabile mediante i valori left, rgiht ecc,; a tal proposito si consideri il seguente esempio: linear-gradient(to bottom right, white,blue) la quale genererà una transizione di colore dal bianco al blu partendo dall’angolo in alto a destra del componente;
  • radial-gradient([angolo-focale <angle>,]?[distanza-focale <percentage>,]?[centro,]? Raggio [<lenght>|<percentage>][[repaet|reflect],}? <color-stop>[,<color-stop>]+)
  • <color>: nella specifica dei colori sono ammessi le seguenti alternative:
    • <named-color> esempio (-fx-background-color:red;) es
    • <looked-up-clolor>: nel caso di questa specifica è possbile riferirsi alla specifica di colore adottata in un altro componente semplicemente utilizzando li nome scelta nella specifica “padre”, si tratta di una feature molto utilie in quanto consente la ridefinizione dell’aspetto estetico dell’intera applicazione agendo su un ristretto numero di elementi, a questo rigurado si consideri questa semplice specifica

.root { abc: #f00 }

.button { -fx-background-color: abc }

• <rgb-color>: si tratta della classica specifica in cui un color e viene definito mediante l’indicazione di tre valori di tipo numerico associati ai canali (R,G,B) , in particolare sono possibili le seguenti notazioni:
  • #<numeber><number><number>  si tratta della notazione esadecimale compatta tipica dei fogli stile (esempio:  –fx-text-fill:#f00 )
  • #<number><number><number><number><number><number>  notazione esadecimale estesa (esempio : -fx-text-fill:#ff0000 )
  • rgb(#,#,#) per questo tipo di specifica sono possibili due alternative:
    • rgb(<number><number>,<number>)  ad esempio è possibile scrivere:          -fx-fill-text: rgb(145,23,100)  
    • rgb(<percentage>,<percentage>,<percentage>): è possible fare uso della seguente notazione:  -fx-fill-text: rgb(100%,43%,25%)
    • rgba(#,#,#,#): simile al precedente solo che in questo caso è possibile specificare la componente alpha, anche in questo caso cono possibili sia specifiche numeriche che percentuali quindi risultano valide le seguenti specifiche:
      • rgba(<number>,<number>,<number>,<number>)
      • rgba(<percentage>,<percentage>,<percentage>,<percentage>)
• <hsb-color>: i colori possono essere specificati utilizzando la specifica HSB, nota anche come HSV seguendo una delle seguenti notazioni:
  • hsb (<number>,<percentage>,<percentage>) [colore,saturazione,luminosità]
  • hsba(<number>,<percentage>,<percentage>,<percentage>) [colore,saturazione,luminosità.canale alpha]
• <color-function>: si tratta di funzioni mediante le quali è possibile derivare u nuovo colore partendo da una serie di parametri, sono possibili le seguenti alternative:
  • derive(<color>,<percentage>) questa funzione schiarisce o scurisce il colore fornito tramite il primo parametro in base al valore percentuale indicato dal secondo valore, questo in particolare è compreso nell’intervallo [-100%,+100%], chiaramente il valore -100% genererà il nero e per contro il valore +100% il bianco
  • ladder(<color>,<color-stop>,[<color-stop>….]): consente di mutare il colore utilizzato da uno specifico componente sulla base della luminosità e del gradiente del colore fornito come primo parametro, il quale in genere è riferito ad un elemento “contenitore”, utilizzando questa informazione ed i valori dei <color –step> si generà il colore che meglio si adatta allo status dei componenti .
  • <url>: consente di specificare un indirizzo web;
  • <effect>:al momento la specifica 2.0 supporta gli effetti:
    • Inner Shadow:

innershadow(<blur-type>,<color>,<number>,<number>,<number>,<number>)

• <blur-type> possibili valori sono:
  • gaussian
  • one-pass-box
  • three-pass-box
  • two-pass-box
  • <color>: colore dell’ombra;
  • <number>:>: rappresenta il raggio dell’ombra, si tratta di un valore appartenente all’intervallo 0.0 – 127.0, generalmente il valore utilizzato è dieci;
  • <number>: definisce il modo in cui l’ombra sarà rappresentata nel suo percorso dal limite esterno, determinato dal raggio verso l’oggetto cui risulta associato, i valori possibili sono compresi nell’intervallo 0.0 ed 1.0, in particolare nel caso in cui si utilizzi il valore 0.0 l’intero processo sarà determinato esclusivamente dall’algoritmo di blur, mentre all’opposto (1.0) si osserverà un crescita costante dell’ombra dall’esterno verso l’interno,
  • <number>: x-offset dell’ombra, è espresso in pixel;
  • <number>: y-offset dell’ombra, è espresso in pixel
• Drop Shadow:

dropshadow(<blur-style>,<color>,<number>,<number>,<number>,<number>)

• <blur-type> stessi valori utilizzati per l’innershadow
• <color>: rappresenta il colore utilizzato per disegnare l’ombra;
• <number>: rappresenta il raggio dell’ombra, si tratta di un valore appartenente all’intervallo [0.0 – 127.0], generalmente il valore utilizzato è dieci;
•  <number>: rappresenta la distribuzione dell’ombra si tratta di un valore appartenente all’intervallo [0.0 – 1.0], nel caso in cui si utilizzi l’estremo inferiore, la distribuzione dell’ombra è determinata completamente dall’algoritmo di blur, mentre nel caso opposto determinerà una crescita costante verso, l’esterno fino al valore del raggio.
• <number>: x-offset dell’ombra, è espresso in pixel
• <number>: y-offset dell’ombra, è espresso in pixel

In conclusione di questo nuovo appuntamento presentiamo un esempio  in cui si mostra l’uso dei fogli stile:

ButtonDemo.css (fonte introjava)

ButtonDemo.java (fonte introjava)

package ui.layouts.buttons;

import javafx.application.Application;

import javafx.geometry.Pos;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.VBox;

import javafx.stage.Stage;

public class ButtonDemo extends Application {

    private VBox layout; // This is the root node.

    /**

     * start. Build and show the JavaFX application.

     * @param stage

     */

    @Override

    public void start(Stage stage) {

        layout = new VBox();

        //Set CSS ID

        layout.setId("app");

        //Center in VBox.

        layout.setAlignment(Pos.CENTER);

        //Set Spacing b/n each button.

        layout.setSpacing(10);

        Button b1 = new Button("Example 1");

        b1.setId("b1");

        Button b2 = new Button("Example 2");

        b2.setId("b2");

        Button b3 = new Button("Example 3");

        b3.setId("b3");

        Button b4 = new Button("Example 4");

        b4.setId("b4");

        Button b5 = new Button("Example 5");

        b5.setId("b5");

        layout.getChildren().addAll(b1, b2, b3, b4, b5);

        //Create Scene, add css stylesheet.

        Scene scene = new Scene(layout, 250, 325);

        String cssURL = "ButtonsDemo.css";

        String css = this.getClass().getResource(cssURL).toExternalForm();

        scene.getStylesheets().add(css);

        //Set stage properties.

        stage.setScene(scene);

        stage.setTitle("CSS Buttons");

        stage.show();

    }

    /**

     * Application Entry Point.

     * @param args

     */

    public static void main(String[] args) {

        launch();

    }

}

L’outuput prodotto dal codice sarà il seguente:

Con questo esempio si conclude il nostro secondo appuntamento con la gestione degli stili in JavaFX®, nel prossimo e ultimo articolo di questa trilogia svilupperemo un’applicazione completa in cui oltre alla gestione degli stili mostreremo in che modo associare i gestori degli eventi ai diversi componenti utilizzabili all’interno di una GUI. Stay tuned.

Alessandro Grande

Promozioni

Potrebbe interessarti

Come gestire JSON in PHP

12 Dicembre 2016

Partita Iva Regime dei minimi, conviene?

14 Novembre 2016

Come Gestire la localizzazione in PHP

27 Ottobre 2016