Les FAQs Java :
FAQ JAVA FAQ Java EE FAQ Java ME FAQ Java XML FAQ JavaFX FAQ Java GUI FAQ Struts FAQ JSF FAQ JDBC JDO FAQ Hibernate FAQ Spring FAQ Eclipse FAQ NetBeans FAQ JCreator FAQ Maven 2

FAQ JavaFXConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 86, dernière mise à jour : 2 juillet 2013 

 
OuvrirSommaireSceneGraphNoeuds

Un noeud est un objet qui hérite de la classe javafx.scene.Node. Il s'agit des éléments de base de l'API SceneGraph.
Ce sont ces éléments qui permettent de dessiner et de créer des interfaces graphiques en JavaFX.
En effet la scène peut être vue comme une arborescence de noeuds affichée à l'écran.

Un noeud peut être :

  • Une forme géométrique, voir le package javafx.scene.shape.
  • du texte, voir la classe javafx.scene.text.Text.
  • Une image, voir la classe javafx.scene.image.ImageView.
  • Un composant Swing, voir le package javafx.ext.swing.
  • Un contrôle (un composant skinnable JavaFX), voir le package javafx.scene.control.
  • Une vue sur un media (vidéo, son), voir la classe javafx.scene.media.MediaView.
  • Un groupement de noeuds, voir la classe javafx.scene.Group et le package javafx.scene.layout.
  • Un noeud personnalisé, voir la classe javafx.scene.CustomNode. Il s'agit le plus souvent de contrôles personnalisés ou de groupements d'autres noeuds.
  • Un stub créé à partir d'un design via le JavaFX Production Suite (Project Nile), voir la classe javafx.fxd.UiStub.

Par exemple :

 
Sélectionnez
var node = Rectangle {
  x: 150;
  y: 150;
  width: 100;
  height: 50;
  fill: Color.RED;
}
Stage {
   title: "Exemple de noeud" ;
   width: 800;
   height: 600;
   scene: Scene {
    content: node 
   }
}

La variable node est ici un Rectangle rouge, et nous plaçons ce noeud dans une scène que nous affichons.

Les noeuds ont ceci en commun qu'il est possible de leur appliquer des transformations (par exemple de les déplacer) dans la scène. Les noeuds utilisent un système d'événement identique pour la gestion de la souris et du clavier; ceci se fait par la surcharge de fonctions callback en écrivant des closures.
On peut également les rendre invisible, faire varier leur opacité, spécifier leur zone de clip, leur donner un effet ou encore leur appliquer des transformations basiques directement via les champs translateX, translateY, scaleX, scaleY et rotate.

Ils disposent d'une boite également englobante rectangulaire, consultable selon 4 systèmes de coordonnées :

  • boudsInLocal représente les coordonnées de la boite englobante du noeud dans son repère à lui sans qu'aucune transformation ne soit appliquée.
  • layoutBounds représente les coordonnées de la boite englobante locale sur lesquelles sont appliquées les transformation placées sur le noeud via le champ transform. Cela n'inclus PAS les modifications des champs translateX, translateY, scaleX, scaleY et rotate du noeud.
  • boundsInParent représente les coordonnées de la boite englobante locale sur lesquelles sont appliquées TOUTES les transformation placées sur le noeud (y compris les modifications des champs translateX, translateY, scaleX, scaleY et rotate du noeud) dans le repère de son noeud parent.
  • boundsInScene représente les coordonnées de la boite englobante locale sur lesquelles sont appliquées les transformation placées sur le noeud (y compris les modifications des champs translateX, translateY, scaleX, scaleY et rotate du noeud) dans le repère de la scène.
Créé le 29 janvier 2009  par bouye

Il suffit de modifier l'état de sa variable visible. Par exemple :

 
Sélectionnez
node.visible = false;

Ce code rendra notre noeud invisible.

Par défaut, visible vaut true.

Créé le 29 janvier 2009  par bouye

Il suffit de modifier l'état de sa variable opacity entre 0 (complètement transparent) et 1 (complètement opaque).

Par exemple :

 
Sélectionnez
node.visible = 0.5;

Ce code rendra notre noeud semi-transparent.

Par défaut, opacity vaut 1.0.

Créé le 29 janvier 2009  par bouye

Nous pouvons le déplacer en modifiant directement ses champs translateX et translateY :

 
Sélectionnez
node.translateX = 100;

Ce code déplacera notre rectangle de 100 pixels vers la droite.
Ceci ne modifiera pas le champ layoutBounds du noeud.

Par défaut, translateX et translateY valent tous les deux 0.0.

Créé le 29 janvier 2009  par bouye

Nous pouvons faire tourner le noeud sur lui-même en modifiant son champ rotate, en lui affectant une valeur en degrés :

 
Sélectionnez
node.rotate  = 90;

Ce code fera tourner le noeud (imaginer un rectangle) de 90° autour de son centre. Ceci ne modifiera pas le champ layoutBounds du noeud.

Par défaut, rotate vaut 0.0.

Créé le 29 janvier 2009  par bouye

Généralement, dans le cas de noeuds qui sont des formes géométriques, des groupements de noeuds ou des composants Swing, les parties du noeud qui sont complètement transparentes (avec un alpha égal à 0) sont considérées comme étant hors de la surface du noeud.

Par exemple : les coins évidés dans un rectangle avec des coins arrondis.

De même, la plupart des effets graphiques tels que les ombres portées, ou les reflets, sont généralement considérés comme étant hors du noeud.

Toutes les parties complètements opaques ainsi que les parties semi-transparentes des formes et groupements sont considérées comme faisant partie de la surface du noeud.

Créé le 27 janvier 2009  par bouye

Il existe plusieurs moyens de grouper des noeuds.

Note : les groupements sont eux-mêmes des noeuds. Il est donc possible de les mettre dans d'autres groupements.

 
Sélectionnez
var monGroupe = Group {
  content : [momRectangle, monCercle, monComposantSwing]
}

Dans un groupe, les composants sont dessinés dans leur ordre d'insertion.
Il est possible de modifier cet ordre soit en agissant directement sur le contenu de la séquence content, soit en utilisant les méthodes toBack() ou toFront() sur un des noeuds qu'il contient.
Ces deux méthodes changeront donc la profondeur du noeud en question.

Il est possible de spécifier via le champ blendMode l'effet graphique à utiliser lorsque deux noeuds se chevauchent.
Par défaut un Group a une boite englobante égale à l'union des boites englobantes des noeuds qu'il contient.

Il est également possible d'utiliser la classe javafx.scene.layout.HBox qui est une classe dérivée de Group.

 
Sélectionnez
var maBoiteHorizontale = HBox {
  content : [momRectangle, monCercle, monComposantSwing]
}

Dans ce cas, les noeuds sont groupés sur une même ligne, de la gauche vers la droite.
L'appel à toBack() ou toFront() déplacera un noeud vers l'extrémité gauche ou droite selon la méthode appelée.
En cas de chevauchement, par défaut le noeud le plus à droite chevauche le noeud le plus à gauche.

Il est également possible d'utiliser la classe javafx.scene.layout.VBox qui est une classe dérivée de Group.

 
Sélectionnez
var maBoiteVerticale = VBox {
  content : [momRectangle, monCercle, monComposantSwing]
}

Dans ce cas, les noeuds sont groupés sur une même colonne, du haut vers le bas.
L'appel à toBack() ou toFront() déplacera un noeud vers l'extrémité supérieure ou inférieure selon la méthode appelée.
En cas de chevauchement, par défaut le noeud le plus bas chevauche le noeud le plus haut.

Enfin il est possible d'utiliser une classe dérivée de la classe abstraite javafx.scene.layout.Container.

Un conteneur est un groupe dont l'agencement interne est laissé à la charge de son implémentation concrète. Un conteneur a une taille fixée explicitement par le programmeur et tous les noeuds qui sortent de sa boite englobante seront coupés à l'affichage. Il n'existe pas, actuellement, d'implémentation concrète fournie dans l'API JavaFX 1.0; vous devez donc programmer votre propre mise en page si vous choisissez cette solution.

Créé le 27 janvier 2009  par bouye

Nous pouvons agrandir ou rétrécir un noeud en modifiant ses champs scaleX ou scaleY et en lui donnant une valeur représentant un multiplicateur d'échelle.
Cette multiplication d'échelle s'effectue par rapport à des axes passant au centre de la boite englobante du noeud.

  • 1 est la valeur par défaut et signifie que le noeud est affiché à l'échelle 1/1.
  • 2 signifie que le noeud est affiché à l'échelle 2/1 soit deux fois plus grand.
  • 0.5 signifie que le noeud est affiché à l'échelle 1/2 soit deux fois plus petit.
  • -1 signifie que le noeud est affiché à l'échelle 1/1 mais souffre d'une symétrie par rapport à l'axe sur lequel cette valeur est appliquée.

Ainsi,

 
Sélectionnez
node.scaleX = 2;
node.scaleY = 2;

Ce code affichera notre rectangle 2 fois plus grand qu'il ne l'est vraiment.
Ceci ne modifiera pas le champ layoutBounds du noeud.

Créé le 29 janvier 2009  par bouye

Vous devez utiliser la classe javafx.scene.text.Text.
Text est une classe qui hérite de Node et cet objet peut donc être placé dans une scène et manipulé comme n'importe quel autre noeud.

 
Sélectionnez
var monTexte = Text {
    x: 10,
    y: 30
    content: "Salut le monde !"
}

Contrairement aux nœuds de formes géométriques, les champs x et y sont ici non pas les coordonnées du coin supérieur gauche du noeud, mais celles de l'extrémité de la ligne de base (baseline) sur laquelle repose le texte.

Il est possible de spécifier du texte sur plusieurs lignes en séparant chaque ligne de texte par un caractère \n. Par exemple

 
Sélectionnez
var monTexte = Text {
    x: 10,
    y: 30
    content: "Salut le monde !\nCeci est du texte multi-ligne !"
}
Créé le 27 janvier 2009  par bouye

l est possible de modifier le champ font d'un objet Text en lui donnant une valeur de type javafx.scene.text.Font.
Une police peut être crée directement en initialisant ses différents champs de manière similaire au code suivant :

 
Sélectionnez
var font =  Font {
    name: "Dialog"
    size: 24
    }

Mais il est également possible d'utiliser les méthodes de fabrique qui sont présentes dans cette classe :

 
Sélectionnez
var font = Font.font("Dialog", FontWeight.BOLD, FontPosture.ITALIC, 24);

Ce dernier code créera une police Dialog grasse et italique de taille 24 points.

Créé le 27 janvier 2009  par bouye
Les codes sources sont, sauf mention spéciale, libres de droits, et vous pouvez les utiliser à votre convenance. Pour le reste, ce document constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2009 Developpez LLC : Tous droits réservés Developpez LLC. Aucune reproduction, ne peux en être faite sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.