Sintassi dichiarativa

Vediamo la seconda lezione del corso sun introduttorio alla costruzione di applicazioni GUI con javaFX.

Per spiegare l'approccio dichiarativo in questo contesto, si scrive un semplice applicazione javaFX che visualizza un cerchio con un rettangolo smussato sopra.

Dato che usiamo il common profile, l'applicazione funziona in entrambi i contesti desktop e mobile.

Creiamo dunque uno script fx nel file declaring.fx, che riempiremo passo dopo passo per realizzare la nostra applicazione.

Per creare la finestra principale della nostra applicazione dobbiamo semplicemente dichiarare l'oggetto letterale Stage.

Per personalizzare il nostro Stage, assegnamo un valore alla sua variabile - per iniziare gli assegnamo un titolo.

import javafx.stage.Stage;

Stage {
 title: "Declaring Is Easy!"
}

Con questo codice abbiamo usato l'approccio dichiarativo per creare il palcoscenico (stage) della nostra applicazione, ovvero la sua finestra principale, e abbiamo assegnato un valore ad una sua proprietà (chiamata instance variable).

La documentazione di Stage ci mostra tutte le sue variabili disponibili, tra cui, oltre al titolo, vediamo che ci sono anche la sua altezza (height) e ampiezza (width). Possiamo modificare il nostro script per vederle in uso:

import javafx.stage.Stage;

Stage {
 title: "Declaring Is Easy!"
 height: 150
 width: 300
}

Tra le proprietà dello stage c'é anche la scena, che é il "posto" dove avverranno le cose, ovvero dove metteremo i nostri oggetti che vogliamo visualizzare. Riscriviamo perciò il nostro script per includere una scena che, inizialmente, non conterrà alcunché.

import javafx.stage.Stage;
import javafx.scene.Scene;

Stage {
 title: "Declaring Is Easy!"
 scene: Scene {
   width: 300
   height: 250
   content: [ ]
 }
}

Abbiamo aggiunto l'import per la scena, e abbiamo assegnato alla proprietà relativa del nostro stage l'oggetto scena che abbiamo costruito al volo.
Notiamo che non é necessario definire le dimensioni dello stage, dato che abbiamo definito quelle della scena che é contenuta nello stage. Inoltre, se l'applicazione fosse per mobile, non dovremmo definire la dimensione, visto che si assumerebbe che venga usata tutta la (modesta) area a disposizione del dispositivo.

La scena é in pratica il nodo originario (root node) dell'albero di oggetti che sono posti sullo stage.
Nel suo contenuto (content) mettiamo i nodi che desideriamo presentare all'utente, che saranno, ad esempio, oggetti grafici, testo, o componenti di interfaccia.

Mettiamo ora qualcosa nel contenuto della scena, creiamo un cerchio in content:

...
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
...
   content: [
     Circle {
       centerX: 150
       centerY: 120
       radius: 80
       fill: Color.MAROON
       stroke: Color.INDIANRED
       strokeWidth: 10.0
     }
   ]
...

Abbiamo modificato il nostro script aggiungendo due import e dichiarando un oggetto di tipo Circle all'interno del contenuto della scena.
Il nostro cerchio ha centro nel punto (150, 120), un raggio di 80, é riempito col colore marrone, e ha un bordo (stroke) di ampiezza 10 e colore rosso indiano.

Aggiungiamo ora un rettangolo al nostro stage.

...
import javafx.scene.shape.Rectangle;
...
   content: [
     Circle { ... }
     Rectangle {
       x: 25, y: 80, width: 250, height: 80
       arcWidth: 20 arcHeight: 20
       fill: Color.web("#6699ff")
       stroke: Color.web("#003399")
       strokeWidth: 5.0
       opacity: 0.5
     }
   ]

Abbiamo aggiunto l'import per la classe Rectangle e abbiamo aggiunto una sua istanza al contenuto della scena.
Nota che abbiamo utilizzato una sintassi leggermente diversa (le virgole tra le proprietà sono opzionali e risultano comode per migliorare la leggibilità quando se ne scrivono diverse sulla stessa riga) e che abbiamo definito qui i colori usando, invece che una costante letterale, il metodo statico pubblico web() della classe Color, che converte in colore RGB una stringa che lo rappresenta in notazione esadecimale.
Abbiamo definito l'opacità (opacity) del nostro rettangolo a 0.5 in modo da lasciar vedere il cerchio sottostante - per default i colori definiti via Color.web() hanno una opacità pari a 1.
Gli angoli del rettangolo sono smussati in accordo alla definizione di arcWidth e arcHeight.

Notiamo infine che il primo oggetto messo nella scena resti sullo sfondo e venga coperto, nel caso di sovrapposizioni da chi viene dopo. Infatti permutando l'ordine degli oggetti posti in content, mettendo come primo nodo il rettangolo e come secondo il cerchio, otteniamo che il cerchio sia in primo piano (e dato che l'opacità é settata come default a 1, nasconde completamente il rettangolo nell'area di sovrapposizione).