FAQ JavaFXConsultez toutes les FAQ

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 :

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.

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

node.visible = false;

Ce code rendra notre noeud invisible.

Par défaut, visible vaut true.

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

Par exemple :

node.visible = 0.5;

Ce code rendra notre noeud semi-transparent.

Par défaut, opacity vaut 1.0.

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

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.

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

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.

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.

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.

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.

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.

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.

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,

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.

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.

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

var monTexte = Text {
    x: 10,
    y: 30
    content: "Salut le monde !\nCeci est du texte multi-ligne !"
}

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 :

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 :

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.