custom Node avec fichier FXML

Version imprimable

04/05/2013, 02h12
miltone

custom Node avec fichier FXML

D'après-vous comment peut-on lier ou gérer des Node créé nous même par des classes et méthode standard Java avec des fichiers FXML ?

Doit-on forcement passer par un noeud root de type Group pour pouvoir ajouter un noeud à une scene (pas de methode getChildren().add() disponible quand root est un BorderPane FXML).

Les attributs des objets FXML seront-ils des champs des classes de ces mêmes objets custom ?

Merci pour vos éclairages ;)

3 pièce(s) jointe(s)

Le nœud :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package test;
 
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.layout.Region;
 
/**
 *
 * @author Fabrice
 */
public class Foo extends Region {
 
    public Foo() {
        setStyle("-fx-background-color: red;");
    }
    private final IntegerProperty toto = new SimpleIntegerProperty(this, "toto", 0);
 
    public final void setToto(final int value) {
        toto.set(value);
    }
 
    public final int getToto() {
        return toto.get();
    }
 
    public final IntegerProperty totoProperty() {
        return toto;
    }
}

Noter la présence de la propriété toto.

Le FXML :

Code:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import test.*?>
 
<Foo id="AnchorPane" prefHeight="100" prefWidth="100" xmlns:fx="http://javafx.com/fxml" toto="3">
</Foo>

Noter l'accès à la propriété toto.

Le test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package test;
 
import com.javafx.experiments.scenicview.ScenicView;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.AnchorPaneBuilder;
import javafx.stage.Stage;
 
/**
 *
 * @author Fabrice
 */
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) throws Exception {
        AnchorPane root = AnchorPaneBuilder.create().build();        
        Foo foo = (Foo) new FXMLLoader(getClass().getResource("Test.fxml")).load();
        root.getChildren().add(foo);        
        Scene scene = new Scene(root, 500, 500);        
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
        ScenicView.show(scene);
    }
 
    /**
     * The main() method is ignored in correctly deployed JavaFX 
     * application. main() serves only as fallback in case the 
     * application can not be launched through deployment artifacts,
     * e.g., in IDEs with limited FX support. NetBeans ignores main().
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Le résultat :
Pièce jointe 117794
Note : le noeud est orange car sélectionné dans ScenicView (orange = rouge surligné de jaune)

Dans SceneBuilder :
Pièce jointe 117795
Il faut configurer le classpath pour ajouter un lien vers une version compilée du nœud.

Et ensuite :
Pièce jointe 117796
Même la propriété toto apparaît et est éditable (tant qu'elle reste d'un type connu par SceneBuilder j'imagine).

04/05/2013, 14h40
miltone

Ce que j'ai finalement du mal à comprendre n'est pas tant l'aspect static de la conception du code mais plutot l'aspect dynamique.

A savoir si il est possible d'agir directement sur le FXML charger en mémoire par le loader ? J'aimerais pouvoir ajouter ou supprimer des noeuds à l'aide d'évènement d'autres noeuds capté par mon controller attaché à mon fichier FXML.

Cela impliquerait une réécriture dynamique de fichier de base FXML qu'on re-soumettrait au FXMLLoader non ? Cela est-il possible ?

Sinon il y a un mécanisme de hierarchy entre FXML chargé en mémoire ?
05/05/2013, 01h34
bouye

La structure est décrite statiquement dans le FXML ou statiquement/dynamiquement dans le code de la classe du nœud ou dans le code de son contrôleur (que je n'ai pas mis dans cet exemple unitaire car ça faisait redondant) au choix.

Le FXML, c'est statique. Tout ce qu'il a a connaitre, c'est le type du noeud custom et ses propriété publiques, pas comment il est fait dedans.

Dans la classe du nœud, tu peux rajouter ce que tu veux dans ton nouveau type pour créer le contenu statiquement ou dynamiquement. Si tu regardes des nœuds comme les graphes, ils créent dynamiquement une grande quantité de sous-nœuds via la méthode layoutPlotChildren() (que tu peux surcharger d'ailleurs pour ajouter des trucs dans un graphe), pour les autres type de nœud c'est plutôt dans layoutChildren().

Tu peux aussi modifier cette structure à volonté une fois chargée en mémoire via le contrôleur (qui de fait connait le contenu du FXML via ses inclusions @FXML) ou n'importe quelle classe qui a accès au nœud racine (qui peut se permettre de faire des suppositions sur le contenu ou explorer cette même arborescence à la recherche d'ID précises) pour modifier/ajouter/retirer des nœuds/faire ce que tu veux/y compris rajouter de nouveaux listeners ici ou là.

Tout ça, ça ne modifie pas le FXML pour autant : une fois chargée la structure arborescente n'a plus aucun lien direct avec son fichier d'origine.

A noter que pour des nœud de contrôles UI, c'est plus pratique de dériver de Region quand tu veux en créer des nouveaux si tu ne veux pas avoir à gérer une partie du layout et de la gestion des sous-nœuds a mano. De plus, j'ai volontairement éviter de dériver de Control car une partie de l'API Skin / Behavior est encore privée et mal décrite (dans mon cas je n'ai jamais réussi à faire un contrôle qui fonctionne de manière correcte, entre autre quand il est redimensionnable, même si tu peux te baser sur ce qu'à fait Gerrit Grunwald dans ce domaine sur des contrôles de taille fixe).

A noter que j'aurait très bien pu écrire le contenu de la structure du nœud custom Foo dans un FXML privé séparé (ex : FooUI.fxml), chargé par la classe Foo avec ou pas un contrôleur privé (ex : FooUIController) plutôt que dans le code de la classe. Ce FXML n'aurai eut aucun rapport direct avec le FXML principal de l'application de test, il est privé à mon nœud custom et sert en quelques sorte de Skin (et Behavior si on rajouter un contrôleur) sans passer par l'API idoine. Je ne l'ai pas fait ici pour garder le test simple.
12/05/2013, 15h16
miltone

OK donc pas d’édition dynamique du FXML chargé en mémoire.
La modification des nœuds et de la structure peut se faire en direct uniquement à travers le code et non du FXML.

Ainsi je serais bien amené à développer graphiquement avec du code java au lieu d'avoir tout mon code graphique codé en FXML. Je pensais qu'il y avait 2 philosophies de codage mais qu'on n'en n'utilisait qu'une pour un projet.

Je vais donc me tourner vers la gestion d'un Pane (ajout, suppression et modification de nœud contenu dans le Pane) de façon dynamique et donc à travers le code java dans mes contrôleurs ou autres classes.

Je ne clos pas encore le sujet. Je vais traficoter un peu et reviendrai vers toi si j'ai des soucis avec un custom node utilisé ou ajouter de façon dynamique à mon Parent dans ma scene.
27/05/2015, 15h04
coaut898

Bonjour,

Je me permets poser une question concernant le sujet de "Custom Node" au lieu de d'ouvrir une nouvelle discussion, vous dites comment changer le class path pour le scene builder 1.1 (associé avec le JDK 1.7 maximum). Je travaille avec le scene builder 2.0 et le JDK 1.8, mais je n'arrive pas à savoir ou dois-je préciser le class path ?

La solution que je trouvée est de le mettre dans le FXML avec la commande suivante, mais celle-ci ne fonctionne pas :

<?scenebuilder-classpath-element ../../build/classes?>

Cordialement
27/05/2015, 21h27
bouye

C'est différent dans SceneBuilder 2.0 : il faut empaqueter le nœud dans un fichier JAR et rajouter ce JAR dans la bibliothèque de SceneBuilder. Voir mon article Tutoriel sur une introduction au langage FXML. Par contre j'ai trouvé qu'au niveau des propriétés dans l'éditeur ça marche encore moins bien qu'avec SceneBuilder 1.1
27/05/2015, 21h53
coaut898

Bonsoir, merci de votre réponse.

Ça marche encore moins bien que Scene Builder 1.1, c'est à dire ?

Mon objectif du custom personnalisé, est de créer une cellule qui va hériter de "Region" et dans mon objet cellule je vais ajouter un "Text".

Je vais vouloir modifier le texte dans ma cellule à des moments précis, est-ce possible ?
27/05/2015, 22h02
bouye

Je ne parle pas du composant en lui-même mais de ses propriétés customs (celles que tu as ajouté, pas celles dont il hérite) dans l'onglet inspector. Y en a qui n'apparaissent pas ou qui ne sont pas éditable et je n'ai franchement pas compris pourquoi. Pour le reste ça passe dans la même mesure que précédemment (souvent on a juste un carré tout gris qui s'affiche mais c'est suffisant pour le placer ou le redimensionner).
27/05/2015, 23h07
coaut898

On parfait.

Merci beacoup