Interfaces graphiques - JavaFX

responsable : Wies law Zielonkazielonka@liafa.univ-paris-diderot.fr

http://liafa.univ-paris-diderot.fr/∼zielonka

March 2, 2016

Filtres et handlers

Stage

Scene

BorderPane

MenuBar

Pane

ToolBar

Rectangle Circle

Rectangle

event c

aptu

ring

event b

ubblin

g

EventHandler

EventHandler

ltres

EventHandler

EventHandler

handle

rs

addEventFilter

addEventHandler

Construire, enregistrer et desenregistrer EventFilters

EventHandler<MouseEvent> f i l t r e =new EventHandler<MouseEvent>(){

pub l i c vo id hand l e (MouseEvent even t ){// imp lemente r l e f i l t r e// even t . consume ( ) ;

}} ;// e n r e g i s t r e rnode . a d dE v e n t F i l t e r ( MouseEvent .MOUSE CLICKED , f i l t r e ) ;

// d e s e n r e g i s t r e rnode . remove (MouseEvent .MOUSE CLICKED , f i l t r e ) ;

Construire, enregistrer/desenregistrer EventHandlers

EventHandler<KeyEvent> hand l e r =new EventHandler<KeyEvent>(){

pub l i c vo id hand l e ( KeyEvent even t ){// imp lemente r l e f i l t r e// even t . consume ( ) ;

}} ;

// e n r e g i s t r e rnode . addEventHad le r ( KeyEvent .KEY TAPED, hand l e r ) ;

// d e s e n r e g i s t r e rnode . removeEventHad le r ( KeyEvent .KEY TAPED, hand l e r ) ;

Methodes de commodite pour enregistrer un (seul)EventHadler

Au lieu d’enregistrer un handler avec

node . addEventHand le r (MouseEvent .MOUSE PRESSED,new EventHandler<MousePressed >(){

pub l i c vo id hand l e (MouseEvent even t ){ . . . }} ) ;

on peut utiliser une methode de commodite :

node . setOnMousePressed ( new EventHandler<MousePressed >(){pub l i c vo id hand l e (MouseEvent even t ){ . . . }

} ) ;

Les methodes de commodite ont le nom setOnTypeEvenement.

Proprietes et ChangeListeners

CheckBox

BooleanProperty selected

ChangeListener<Boolean>

changed

checkBox . s e l e c t e dP r o p e r t y ( ) . a d dL i s t e n e r (new ChangeL i s t ene r<Boolean >(){

@Over r idepub l i c vo id changed (

Obse rvab l eVa lue<? extends Boolean> ob s e r v ab l e ,Boolean o l d v a l ,Boolean new va l ) {

. . . . . . .}

} ) ;

La liste d’enfant d’un noeud

Si on a un noeud (par exemple Pane) de type Parent on lui ajouteun enfant avec add applique a la liste d’enfants :

pane . g e tCh i l d r e n ( ) . add ( en f an t ) ;

ObservableList<Node> getChildren() retourne la listed’enfants d’un noeud. La methode add() ajoute enfant a la finde la liste.

Quand le parent est rendu sur l’ecran les enfants sont rendus dansl’ordre de leur apparition sur la liste des enfants, le premier celui entete de la liste jusqu’au dernier, celui a la fin de la liste.

La liste d’enfants

La liste obtenue par l’appel getChidren() est une vraie liste,toutes les operations habituelles sur les listes sont disponibles.Par exemple : supprimer le dernier element de la liste d’enfants :

L i s t l = pane . g e tCh i l d r e n ( ) ;l . remove ( l . s i z e ( ) − 1 ) ;

L’ordre d’affichage d’enfants

Quand le parent est rendu sur l’ecran les enfants sont rendus dansl’ordre de leur apparition sur la liste des enfants, le premier celui entete de la liste jusqu’au dernier, celui a la fin de la liste.

Systemes de coordonnees en JavaFX

Trois types de coordonnees :

I locales par rapport au noeud,

I scene - coordonnees par rapport a la scene,

I screen – coordonnees par rapport a l’ecran.

Systemes de coordoonnees

x

y

loca

l de

Rect

angl

e

scre

en

scen

e

Les systemes de coordonneesMouseEvent possede les methodes

I double getX(), double getY(),

I double getSceneX(), double getSceneY(),

I double getScreenX(), double getScreenY(),

qui donnent les coordonnees de l’evenement dans

I le systeme de coordonnees locales d’un noeud source del’evenement,

I par rapport au systeme de coordonnees de la scene,

I par rapport au systeme de coordonnees de l’ecran.

La classe Node possede les methodes

localToParent()

localToScene()

localToScreen()

qui permettent d’obtenir les coordonnees dans le systeme parent,scene, l’ecran a partir de coordonnees locaux d’un point.

Fabriquer un noeud ”draggable”

p r i v a t e Node makeDraggable (Node node ) {c l a s s T {

double i n i t i a l T r a n s l a t e X , i n i t i a l T r a n s l a t e Y ,anchorX , anchorY ;

}

f i n a l T t = new T( ) ;

node . setOnMousePressed (new EventHandler<MouseEvent>() {@Over r idepub l i c vo id hand l e ( f i n a l MouseEvent even t ) {

t . i n i t i a l T r a n s l a t e X = node . g e tT ran s l a t eX ( ) ;t . i n i t i a l T r a n s l a t e Y = node . g e tT ran s l a t eY ( ) ;Point2D po i n t = node . l o c a lToPa r en t ( even t . getX ( ) ,

even t . getY ( ) ) ;t . anchorX = po i n t . getX ( ) ;t . anchorY = po i n t . getY ( ) ;}

} ) ;

Fabriquer un noeud ”draggable” (suite)

node . setOnMouseDragged (new EventHandler<MouseEvent>() {@Over r idepub l i c vo id hand l e ( f i n a l MouseEvent even t ) {

Point2D po i n t = node . l o c a lToPa r en t ( even t . getX ( ) ,even t . getY ( ) ) ;

node . s e tT r an s l a t eX ( t . i n i t i a l T r a n s l a t e X −t . anchorX + po i n t . getX ( ) ) ;

node . s e tT r an s l a t eY ( t . i n i t i a l T r a n s l a t e Y −t . anchorY + po i n t . getY ( ) ) ;

}} ) ;re tu rn node ;}

Propriete de translation

Proprietes de transltion d’un noeud dans les coordonnees locales :

Doub lePrope r ty t r a n s l a t eX , t r a n s l a t eY , t r a n s l a t e Z

que son parent utilise pour determiner ou dessiner le noeud.

Utiliser ColorPicker

Co lo r shapeCo lo r = Co lo r .BLACK;

Co l o rP i c k e r p i c k e r = new Co l o rP i c k e r ( shapeCo lo r ) ;p i c k e r . se tOnAct ion (new EventHandler<Act ionEvent >() {

@Over r idepub l i c vo id hand l e ( Act ionEvent e ) {

Co lo r c = p i c k e r . ge tVa lue ( ) ;i f ( c != nu l l ) {

shapeCo lo r = c ;}

}} ) ;

Faire un bord autour de Pane

pane . s e tBo rd e r (new Border (new Borde rS t roke (Co lo r .RED,Bo r d e r S t r o k eS t y l e . SOLID ,Co rn e rRad i i .EMPTY,

new BorderWidths ( 3 ) ) ) ) ;

Clipping region

Un Rectangle mis dans Pane est dessine meme s’il sort de ce Pane!!!

Solution : definir ”clip” region dans Pane en utilisant la propriete :

Objec tPrope r ty<Node> c l i p

Par exemple :

pane . s e t P r e f S i z e (400 , 400 ) ;Rec tang l e c l i p = new Rec tang l e ( 400 , 400 ) ;pane . s e t C l i p ( c l i p ) ;

Clipping region (suite)

Probleme : on veut que la taille de clipping region soit toujours lameme que la taille de Pane, c’est-a-dire les proprietes height etwidth du Rectangle soit toujours egales aux memes proprietes dePane.

Premiere solution : utiliser ChangeListener attaches aux proprieteswidth et height de Pane et modifie width et height de Rectangle.

Mais on peu bien mieux avec bind:

c l i p . h e i g h tP r op e r t y ( ) . b ind ( pane . h e i g h tP r o p e r t y ( ) ) ;c l i p . w i d thP rope r t y ( ) . b ind ( pane . w id thP rope r t y ( ) ) ;

Les changements de proprietes de clip suivent automatiquement leschangements de proprietes de pane.

Creer un Text

Text t = new Text ( ) ;t . s e tFon t ( Font . f o n t ( ”Verdana” , 2 0 ) ) ;t . s e t F i l l ( s hapeCo lo r ) ; // c o l o rt . setX ( cx ) ; t . setY ( cy ) ; // p o s i t i o nt . s e tTex t ( s t r i n g ) ;pane . g e tCh i l d r e n ( ) . add ( t ) ;

Recuperer KeyEvents

// i n s t a l l e r un f i l t r e ( ou un hand l e r )pane . a d dE v e n t F i l t e r ( KeyEvent .KEY TYPED, k e y F i l t e r ) ;pane . s e t F o c u sT r a v e r s a b l e ( t rue ) ;

Le controle qui possede un filtre ou handler pour l’evenementKeyEvent doit posseder le focus pour recevoir ces evenements.Mais Pane ne peut pas avoir de focus sauf si on le rend ”focustraversable” par

pane.setFocusTraversable(true);

Une fois pane est ”focus traversable” on peut demander le focusavec

pane.requestFocus()

Definir un filtre ou handler pour le clavier

EventHandler<KeyEvent> keyEventHand l e r= new EventHandler<KeyEvent>() {

pub l i c vo id hand l e ( f i n a l KeyEvent keyEvent ) {// r e c u p e r e r l e c a r a c t e r e tape su r l e c l a v i e rS t r i n g s = even t . g e tCha r a c t e r ( ) ;

i f ( even t . i sCont ro lDown ( ) ) {System . e r r . p r i n t l n ( ”CONTROL DOWN” ) ;

}} } ;

Si l’evenement est de type keyEvent.KEY TYPED alors la methodeKeyEvent.getCharacter() retourne un String contenant lecaractere tape par l’utilisateur sur le clavier.

Pour les evenements KEY PRESSED et KEY RELEASED cettemethode retourne toujours CHAR UNDEFINED, donc elle est inutilepour ces deux evenements.

La classe KeyEvent possede les methodes booleennesisControlDown(), isAltDown(), isShiftDown(),isMetaDown() qui permettent de tester si on a appuye sur une deces touches.

KeyEvent possede aussi la methode

KeyCode getCode()

qui retourne le code de la touche tape par l’utilisateur.

Mais cela ne concerne que les evenementsKeyEvent.KEY PRESSED et KeyEvent.KEY RELEASED. Pourl’evenement KeyEvent.KEY TYPED cette methode retournetoujours KeyCode.UNDEFINED.

les effets visuels

I Blend Effect

I Bloom Effect

I Blur Effects

I Drop Shadow Effect

I Inner Shadow Effect

I Reflection

I Lighting Effect

I Perspective Effect

Mis en oeuvre

Text t = new Text ( ) ;t . s e tTex t ( ” B l u r r y Text ! ” ) ;t . s e t F i l l ( Co l o r .RED) ;t . s e tFon t ( Font . f o n t ( ” n u l l ” , FontWeight .BOLD, 3 6 ) ) ;// p r e p a r e r l ’ e f f e tBoxBlur bb = new BoxBlur ( ) ;bb . setWidth ( 5 ) ;bb . s e tHe i g h t ( 5 ) ;bb . s e t I t e r a t i o n s ( 3 ) ;// s e t E f f e c tt . s e t E f f e c t ( bb ) ;