Desktop profile

Parte finale della prima lezione del corso Oracle a introduzione su come scrivere gui con javaFX.

Per il "desktop", ovvero per gli ambienti che prevedano l'utilizzo di una periferica di output di dimensioni superiori a quelle dei pochi pollici dell'"handy", sono diponibili in ambiente javaFX un altro paio di caratteristiche interessanti: effetti e cursori.

Effetti

Per vedere gli effetti in azione, si scarichi lo script effects.fx.

Dal codice javaFX vediamo che per dare un effetto a un gruppo di oggetti usiamo classi del package javafx.scene.effect e javafx.scene.effect.light semplicemente specificando la proprietà effect dell'oggetto grafico che vogliamo modificare.

L'ombreggiatura applicata ad un elemento grafico gli dà un effetto tridimensionale, come se si librasse, o sprofondasse nel piano su cui é rappresentato.

Si usano due classi per generare una ombreggiatura: DropShadow e InnerShadow

Vediamo ad esempio il primo oggetto ombreggiato definito nello script, un gruppo comprendente un cerchio rosso con due linee che si incrociano al suo interno.

Al gruppo possiamo aggiungere l'effetto ombreggiatura, che possiamo variare in molti modi, ad esempio specificando il suo colore.

Group {
 content: [
   Circle{centerX: 30  centerY:40 radius:20  fill: Color.RED opacity: 0.8 cursor: Cursor.HAND},
   Line {startX: 20 startY: 30  endX: 40  endY: 50 stroke: Color.WHITE strokeWidth: 2},
   Line {startX: 20 startY: 50  endX: 40  endY: 30 stroke: Color.WHITE strokeWidth: 2}
 ]
 effect: DropShadow{offsetX:5 offsetY:5 color: Color.BLACKS}
};

E' possibile creare ombreggiature più complesse mescolando diversi oggetti Shadow, usando la classe Blend

L'illuminazione gli dà anch'essa un effetto tridimensionale, ma paragonabile all'agire sull'elemento grafico come per pigiarlo nel piano o farlo saltar fuori.

Per creare l'effetto illuminazione usiamo la classe Lighting specificando il tipo di luce utilizzata nel suo parametro light.

Group {
 content:[
   Circle{centerX: 30  centerY:20 radius:20  fill: Color.RED opacity: 0.9},
   Line {startX: 20 startY: 10  endX: 40  endY: 30 stroke: Color.WHITE strokeWidth: 2},
   Line {startX: 20 startY: 30  endX: 40  endY: 10 stroke: Color.WHITE strokeWidth: 2}
 ]
 effect: Lighting {light: DistantLight{azimuth: 90}}
};

E' possibile poi creare un effetto sfocamento usando le classi della famiglia Blur (BoxBlur, GaussianBlur, MotionBlur). Questo esempio mostra un rettangolo riempito con cerchi concentrici bianchi e verde scuro a cui viene applicato l'effetto GaussianBlur:

Rectangle {
 x:5 y:25 width: 100 height: 50
 fill: RadialGradient {
   centerX: 55, centerY: 50, radius: 10, proportional: false
   cycleMethod: CycleMethod.REFLECT
   stops: [
     Stop{offset: 0.3 color: Color.DARKGREEN},
     Stop{offset: 1.0 color: Color.WHITE}
   ]
 }
 effect: GaussianBlur{radius: 5 }
};

Si può creare un riflesso dell'oggetto grafico, usando la classe Reflection. Nell'esempio lo si applica ad un testo:

Text {
 x: 10 y: 42 content: "Reflection"
 fill: Color.SEAGREEN
 font: Font{size:20 name: "Verdana"}
 effect:  Reflection { fraction: 0.9  topOpacity: 0.9 topOffset: 0.1}
};

Per cambiare la luminescenza di una immagine si usa la classe Glow, come mostrato qui:

ImageView {
 image: Image{url:"http://java.sun.com/docs/books/tutorial/images/penduke.gif"}
 effect: Glow{level: 1}
};

Per virare in seppia un immagine usiamo l'effetto SepiaTone:

ImageView {
 image: Image{url:"http://java.sun.com/docs/books/tutorial/images/penduke.gif"}
 effect:  SepiaTone {level: 0.8}
};

Si possono cambiare gli attributi del colore di un oggetto grafico con ColorAdjust:

ImageView {
 image: Image{url:"http://java.sun.com/im/logo_sun_small_sdn.gif"}
 effect:  ColorAdjust{brightness: -0.2}
};

O, infine, trasformarlo mettendolo in prospettiva con PerspectiveTransform:

var transformed = ImageView {
 image: Image{url: "http://java.sun.com/docs/books/tutorial/images/penduke.gif"}
 effect: PerspectiveTransform {
   ulx: 40   uly: 20
   urx: 104  ury: 20
   lrx: 134  lry: 115
   llx: 10   lly: 105
 }
}

Cursori

E' possibile specificare che forma abbia il cursore sopra una certa regione della finestra di visualizzazione. Vedi lo script cursor.fx per un esempio.

Il cursore é un attributo di un oggetto grafico, quindi lo settiamo come vediamo in questo esempio:

Group {
 content:[
   Circle{centerX: 30  centerY:40 radius:20  fill: Color.RED opacity: 0.8 cursor: Cursor.HAND},
   Line {startX: 20 startY: 30  endX: 40  endY: 50 stroke: Color.WHITE strokeWidth: 2},
   Line {startX: 20 startY: 50  endX: 40  endY: 30 stroke: Color.WHITE strokeWidth: 2}
 ]
 effect: DropShadow{offsetX:5 offsetY:5 color: Color.BLACK}
};

I cursori a disposizione sono indicati nella classe javafx.scene.Cursor, e usati come visto sopra (Cursor.HAND).