IdentifiantMot de passe
Mot de passe oubli� ?Je m'inscris ! (gratuit)
logo

FAQ JavaFXConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 507, derni�re mise � jour : 2 novembre 2016  Ajouter une question

 

Cette FAQ a �t� r�alis�e � partir des questions fr�quemment pos�es sur le forum JavaFX de http://java.developpez.com ainsi que l'exp�rience personnelle des auteurs.

Nous tenons � souligner que cette FAQ ne garantit en aucun cas que les informations qu'elle propose sont correctes. Les auteurs font leur maximum, mais l'erreur est humaine. Cette FAQ ne pr�tend pas non plus �tre compl�te. Si vous trouvez une erreur, ou que vous souhaitez nous aider en devenant r�dacteur, lisez ceci.

Sur ce, nous vous souhaitons une bonne lecture.

Sommaire →SceneGraph →Interface utilisateur →Contr�les →Contr�les virtualis�s →TreeTableView (7)
pr�c�dent sommaire suivant
 
HautPage
Qu'est-ce qu'un TreeTableView ?

Un TreeTableView<S> (litt�ralement, une vue sur un arbre-table) est un contr�le virtualis� qui fonctionne � la fois comme les contr�les TableView (la table) et TreeView (l'arbre) : il s'agit d'une table qui stocke ses donn�es de type S non plus dans une liste, mais dans une arborescence. Graphiquement, la table affiche un arbre dans sa premi�re colonne et il est possible de cacher ou d'afficher des lignes de la table en d�pliant des branches de l'arbre.



Ainsi, la plupart des astuces de la FAQ concernant le contr�le TreeView et applicables � la manipulation des instances de la classe TreeItem peuvent directement �tre utilis�es ici.

Mis � jour le 15 mars 2015 bouye
HautPage
Comment ajouter des valeurs dans un TreeTableView ?

Pour ajouter des valeurs dans un TreeTableView, il faut les placer dans des instances de la classe javafx.scene.control.TreeItem<S> de mani�re � former une arborescence. La racine de cette arborescence doit �tre ensuite plac�e dans la propri�t� root de l'arbre-table.

Par exemple :

Code Java : S�lectionner tout 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
final TreeItem<String> fruitItem = new TreeItem<>("Fruits"); 
fruitItem.getChildren().setAll( 
        new TreeItem("Fraise"), 
        new TreeItem("Pomme"), 
        new TreeItem("Poire") 
); 
fruitItem.setExpanded(true); 
final TreeItem<String> vegetableItem = new TreeItem<>("L�gumes"); 
vegetableItem.getChildren().setAll( 
        new TreeItem("Artichaut"), 
        new TreeItem("Laitue"), 
        new TreeItem("Radis") 
); 
vegetableItem.setExpanded(true); 
final TreeItem<String> treeRoot = new TreeItem<>("Fruits & l�gumes"); 
treeRoot.setExpanded(true); 
treeRoot.getChildren().setAll(fruitItem, vegetableItem); 
treeTableView.setRoot(treeRoot);

Ce qui nous donne :

Mis � jour le 15 mars 2015 bouye
HautPage
Comment ajouter des colonnes dans un TreeTableView ?

Initialement un TreeTableView ne contient aucune colonne. Pour ajouter des colonnes dans un arbre-table, il faut cr�er des objets de type javafx.scene.control.TreeTableColumn<S, T> et les ajouter dans la liste observable columns de l'arbre-table.

Ici :

  • S est le type des objets contenus dans l'instance de TreeTableView ;
  • T est le type des objets qui seront affich�s ou �dit�s dans la colonne.


Par exemple :

Code Java : S�lectionner tout 
1
2
final TreeTableColumn<Car, String> modelColumn = new TreeTableColumn<>("Mod�le"); 
treeTableView.getColumns().setAll(modelColumn);

Ici, nous avons ajout� dans l'arbre-table graphique une colonne nomm�e � Mod�le � qui pour chaque objet de type Car pr�sent dans la table affichera un objet de type String (le mod�le de la voiture).

Nous pouvons �galement ajouter quelques colonnes suppl�mentaires en suivant le m�me principe :

Code Java : S�lectionner tout 
1
2
3
4
5
final TreeTableColumn<Car, String> brandColumn = new TreeTableColumn<>("Marque"); 
final TreeTableColumn<Car, Color> colorColumn = new TreeTableColumn<>("Couleur"); 
final TreeTableColumn<Car, Integer> seatsColumn = new TreeTableColumn<>("Si�ges"); 
final TreeTableColumn<Car, Integer> doorsColumn = new TreeTableColumn<>("Portes"); 
tableView.getColumns().addAll(brandColumn, colorColumn, seatsColumn, doorsColumn);

ce qui nous donne :



Pour retirer des colonnes, il suffit de les retirer la liste observable columns de l'arbre-table.

Mis � jour le 15 mars 2015 bouye
HautPage
Comment faire des sous-colonnes ?

Pour faire des sous-colonnes, il suffit d'ajouter des colonnes dans la liste observable columns d'une autre colonne.

Par exemple :

Code Java : S�lectionner tout 
1
2
3
4
5
6
7
8
final TreeTableColumn<Car, String> modelColumn = new TreeTableColumn<>("Mod�le"); 
final TreeTableColumn<Car, String> brandColumn = new TreeTableColumn<>("Marque"); 
final TreeTableColumn<Car, Color> colorColumn = new TreeTableColumn<>("Couleur"); 
final TreeTableColumn<Car, Integer> seatsColumn = new TreeTableColumn<>("Si�ges"); 
final TreeTableColumn<Car, Integer> doorsColumn = new TreeTableColumn<>("Portes"); 
final TreeTableColumn<Car, ?> optionsColumn = new TreeTableColumn<>("Options"); 
optionsColumn.getColumns().setAll(colorColumn, seatsColumn, doorsColumn); 
treeTableView.getColumns().setAll(modelColumn, brandColumn, optionsColumn);

Ce qui nous donne :



Ici, les colonnes � Couleur �, � Si�ges � et � Portes � sont incluses dans la colonne � Options �.

Pour retirer des colonnes, il suffit de les retirer la liste observable columns de la colonne m�re.

Mis � jour le 15 mars 2015 bouye
HautPage
Dans quelle colonne s'affiche l'arbre ?

Par d�faut, dans un TreeTableView, l'arbre s'affiche toujours dans la premi�re colonne de la table. Cela reste le cas m�me si vous modifiez l'ordre des colonnes via l'API ou � la souris : la colonne en premi�re position est toujours celle dans laquelle s'affiche l'arbre, quelle que soit cette colonne.

Par exemple :

Code Java : S�lectionner tout 
treeTableView.getColumns().setAll(nameColumn, photoColumn, priceColumn);

Ce qui nous donne :



Ici, par d�faut c'est la colonne nameColumn qui affiche l'arbre.

Si on d�place la colonne photoColumn en premi�re position avec la souris, c'est elle qui affichera l'arbre d�sormais.



Il est cependant possible de sp�cifier la valeur de la propri�t� treeColumnde l'arbre-table en lui donnant une r�f�rence vers une colonne du TreeTableView. Dans ce cas, l'arbre sera affich� dans cette colonne, m�me si la colonne n'est pas en premi�re position. De plus, si vous d�placez la colonne � une autre position, celle-ci continuera d'afficher l'arbre o� qu'elle se trouve.

Par exemple :

Code Java : S�lectionner tout 
treeTableView.setTreeColumn(priceColumn);

Ce qui nous donne :



D�sormais c'est la troisi�me colonne, la colonne priceColumn, qui affiche l'arbre.

Si on d�place la colonne priceColumn avec la souris, elle continue � afficher l'arbre :

Mis � jour le 15 mars 2015 bouye
HautPage
Qu'est-ce qu'une fabrique � valeurs ?

Tout comme les colonnes d'une TableView, les colonnes d'un TreeTableView n�cessitent d'utiliser une fabrique � valeurs (value cell factory en anglais) de mani�re � ce qu'une colonne de type <S, T> puisse afficher, et �diter, des objets de type T � partir d'objets de type S contenus dans l'arbre-table.

Il y a deux diff�rences dont il faut tenir compte quand on cr�e une fabrique � valeurs pour les colonnes d'un TreeTableView:

  • les colonnes d'un arbre-table sont de type TreeTableColumn<S, T> alors que celles d'une table sont de type TableColumn<S, T> ;
  • l'arbre-table contient des donn�es de type TreeItem<S> tandis que la table contient directement des valeurs de type S.

Pour le reste, deux contr�les fonctionnent grosso modo de mani�re similaire et donc vous pouvez vous inspirer de ce qui est �crit dans la FAQ pour les TableView.

Ce qui nous donne, par exemple :

Code Java : S�lectionner tout 
1
2
3
4
5
6
7
8
9
modelColumn.setCellValueFactory(new Callback<TreeTableColumn.CellDataFeatures<Car, String>, ObservableValue<String>>() { 
  
    @Override 
    public ObservableValue<String> call(TreeTableColumn.CellDataFeatures<Car, String> param) { 
        final TreeItem<Car> item = param.getValue(); 
        final Car car = item.getValue(); 
        return new SimpleStringProperty(car.getModel()); 
    } 
});

Ou :

Code Java : S�lectionner tout 
1
2
3
4
5
modelColumn.setCellValueFactory(param -> { 
    final TreeItem<Car> item = param.getValue(); 
    final Car car = item.getValue(); 
    return new SimpleStringProperty(car.getModel()); 
});

Ici, nous avons cr�� une fabrique � valeur qui permettra d'afficher le mod�le de la voiture dans la colonne modelColumn.

Mis � jour le 15 mars 2015 bouye
HautPage
Comment changer l'apparence des objets contenus dans un TreeTableView ?

Pour changer l'apparence des objets contenus dans un TreeTreeView, nous avons besoin de faire appel � l'API Cell. En effet, l'affichage par d�faut n'est pas tr�s engageant :



Reprenons au d�but. Tout d'abord, nous avons dans notre arbre-table des instances de la classe TreeItem<Entity> qui vont nous permettre de stocker nos groupes ainsi que les diverses marchandises qui les composent :

Code Java : S�lectionner tout 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private abstract static class Entity { 
  
    String name; 
} 
  
private final static class Group extends Entity { 
  
    public Group(final String name) { 
        this.name = name; 
    } 
} 
  
private static class Good extends Entity { 
  
    Image photo; 
    double price; 
  
    public Good(final String name, final Image photo, double price) { 
        this.name = name; 
        this.photo = photo; 
        this.price = price; 
    } 
}

Puis, nous nous sommes arrang�s pour extraire les bonnes valeurs sur les bonnes colonnes :

Code Java : S�lectionner tout 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
final TreeTableColumn<Entity, String> nameColumn = new TreeTableColumn("Nom"); 
nameColumn.setCellValueFactory(param -> { 
    final TreeItem<Entity> item = param.getValue(); 
    final Entity data = item.getValue(); 
    return new SimpleStringProperty(data.name); 
}); 
// 
final TreeTableColumn<Entity, Image> photoColumn = new TreeTableColumn("Photo"); 
photoColumn.setCellValueFactory(param -> { 
    final TreeItem<Entity> item = param.getValue(); 
    final Entity data = item.getValue(); 
    return (data instanceof Good) ? new SimpleObjectProperty<>(((Good) data).photo) : null; 
}); 
// 
final TreeTableColumn<Entity, Double> priceColumn = new TreeTableColumn("Prix au kilo"); 
priceColumn.setCellValueFactory(param -> { 
    final TreeItem<Entity> item = param.getValue(); 
    final Entity data = item.getValue(); 
    return (data instanceof Good) ? new SimpleObjectProperty<>(((Good) data).price) : null; 
}); 
// 
treeTableView.getColumns().setAll(nameColumn, photoColumn, priceColumn);

Nous allons donc maintenant coder quelques cellules pour l'image servant d�aper�u de nos fruits et l�gumes. �tant donn� que le principe est similaire � ce que nous avons d�j� vu sur TableView et TreeView, je ne vais pas m��tendre trop longtemps sur le sujet :

Code Java : S�lectionner tout 
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
photoColumn.setCellFactory(column -> new TreeTableCell<Entity, Image>(){ 
    private final ImageView imageView1 = new ImageView();             
    private final ImageView imageView2 = new ImageView();             
    private final Tooltip tooltip = new Tooltip(); 
  
    { 
        imageView1.setFitHeight(25); 
        imageView1.setPreserveRatio(true); 
        imageView1.setSmooth(true); 
        tooltip.setText(null); 
        tooltip.setGraphic(imageView2); 
    } 
  
    @Override 
    protected void updateItem(Image item, boolean empty) { 
        super.updateItem(item, empty);  
        setGraphic(null); 
        setText(null); 
        setTooltip(null); 
        if (!empty && item != null) { 
            imageView1.setImage(item); 
            imageView2.setImage(item); 
            setGraphic(imageView1); 
            setTooltip(tooltip); 
        } 
    }             
});

Ensuite, nous faisons de m�me pour le prix :

Code Java : S�lectionner tout 
1
2
3
4
5
6
7
8
9
10
11
12
priceColumn.setCellFactory(column -> new TreeTableCell<Entity, Double>(){ 
  
    @Override 
    protected void updateItem(Double item, boolean empty) { 
        super.updateItem(item, empty); 
        setText(null); 
        if (!empty && item != null) { 
            final String text = String.format("%.2f �", item.doubleValue()); 
            setText(text); 
        } 
    }             
});

Ici, la cellule �tend TreeTableCell<Entity, Image> pour l�aper�u et TreeTableCell<Entity, Double> pour le prix.

Ce qui nous donne :



Les images des fruits et l�gumes affich�es ici proviennent directement de leur article respectif sur Wikip�dia.

Ici, d�sormais, nous affichons une image montrant notre produit et nous formatons correctement le prix pour notre utilisateur.

Mis � jour le 15 mars 2015 bouye

Proposer une nouvelle r�ponse sur la FAQ

Ce n'est pas l'endroit pour poser des questions, allez plut�t sur le forum de la rubrique pour �a


R�ponse � la question

Liens sous la question
pr�c�dent sommaire suivant
 

Les sources pr�sent�es sur cette page sont libres de droits et vous pouvez les utiliser � votre convenance. Par contre, la page de pr�sentation constitue une �uvre intellectuelle prot�g�e par les droits d'auteur. Copyright � 2025 Developpez Developpez LLC. Tous droits r�serv�s Developpez LLC. Aucune reproduction, m�me partielle, ne peut �tre faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'� trois ans de prison et jusqu'� 300 000 � de dommages et int�r�ts.