![Page 1: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/1.jpg)
Licence Informatique
Gestion des tableaux et des arbres
Mathieu [email protected]
http://www.irit.fr/~Mathieu.Raynal
![Page 2: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/2.jpg)
Les tableaux
![Page 3: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/3.jpg)
Les tableaux
• Un objet graphique : JTable
– Permet d’afficher un tableau
– Permet l’édition de son contenu
• Présenter une vision structurée d’un grand nombre de
données et permettre leur manipulation
Interface utilisateur graphique et programmation évènementielle 3
![Page 4: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/4.jpg)
Interface utilisateur graphique et programmation évènementielle
Un composant graphique : JTable
• Création d’un tableau à partir d’une matrice d’éléments
– Constructeurs
– Principales méthodes
4
JTable(Object[][] rowData, Object[] columnNames) JTable(Vector rowData, Vector columnNames)
void setValueAt(Object aValue, int row, int column)Void revalidate()
![Page 5: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/5.jpg)
Librairie Swing & Programmation événementielle
Liaison avec une structure de données dynamique
5
Quelles données à afficher ? Dans quelle cellule ?
Structurede
données non
matricielle
Modèle
![Page 6: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/6.jpg)
Librairie Swing & Programmation événementielle
Utilisation d’un modèle de données
• Constructeur de JTable avec un modèle
• Le modèle indique comment afficher un ensemble de
données provenant d’une structure de données
– Lors de sa création, la JTable interroge le modèle pour savoir
• le nombre de lignes et de colonnes à créer ;
• Quelle information mettre dans chaque cellule ;
• La nature de chaque information à afficher;
• Etc.
– L’interface TableModel définit les méthodes nécessaires pour
assurer la liaison avec la JTable
– Toute JTable a un modèle par défaut : une instance de
DefaultTableModel
6
JTable(TableModel modele)
![Page 7: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/7.jpg)
Librairie Swing & Programmation événementielle
L’interface TableModel
• Elle contient 9 méthodes pour
– Connaitre le nombre de colonnes à afficher
– Connaitre le nombre de lignes à afficher
– Connaitre l’élément à mettre dans une cellule
– Connaitre le titre des colonnes
7
int getColumnCount()
int getRowCount()
String getColumnName(int columnIndex)
Object getValueAt(int rowIndex, int columnIndex)
![Page 8: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/8.jpg)
Librairie Swing & Programmation événementielle
L’interface TableModel
– Connaitre le type d’élément dans une colonne
– Savoir si une cellule est éditable ou non
– Modifier l’élément contenu dans une cellule
– Gérer la liste des listeners du modèle
8
Class<?> getColumnClass(int columnIndex)
boolean isCellEditable(int rowIndex, int columnIndex)
void setValueAt(Object aValue, int rowIndex, int columnIndex)
void addTableModelListener(TableModelListener l)
void removeTableModelListener(TableModelListener l)
![Page 9: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/9.jpg)
Librairie Swing & Programmation événementielle
La classe abstraite AbstractTableModel
• Implémente TableModel
• Nécessité de définir les méthodes abstraites
9
int getColumnCount()
int getRowCount()
Object getValueAt(int rowIndex, int columnIndex)
![Page 10: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/10.jpg)
Prévenir des changements dans le modèle
• Mise à jour d’une cellule
• Mise à jour d’une ligne
• Mise à jour de la table
• Modification de la structure de la table
• Insertion d’une ligne
• Suppression d’une ligne
Interface utilisateur graphique et programmation évènementielle 10
void fireTableCellUpdated(int row, int column)
void fireTableRowsUpdated(int firstRow, int lastRow)
void fireTableDataChanged()
void fireTableStructureChanged()
void fireTableRowsInserted(int firstRow, int lastRow)
void fireTableRowsDeleted(int firstRow, int lastRow)
![Page 11: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/11.jpg)
Librairie Swing & Programmation événementielle
Exercice 1
• A partir de la structure de données ci-dessous, créez le modèle
permettant d’afficher les données comme sur ce tableau
11
![Page 12: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/12.jpg)
Exercice 1
Interface utilisateur graphique et programmation évènementielle 12
![Page 13: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/13.jpg)
Librairie Swing & Programmation événementielle
Correction
13
![Page 14: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/14.jpg)
Librairie Swing & Programmation événementielle
Correction
14
![Page 15: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/15.jpg)
Librairie Swing & Programmation événementielle
Correction
15
![Page 16: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/16.jpg)
Librairie Swing & Programmation événementielle
Modifier la taille des lignes et colonnes
• Hauteur des lignes
• Longueur des colonnes
– Accéder au modèle de colonnes dans la classe JTable
– Accéder à une colonne dans la classe TableColumnModel
– Changer sa taille dans la classe TableColumn
16
void setRowHeight(int row, int rowHeight)
void setRowHeight(int rowHeight)
TableColumn getColumn(int indice)
TableColumnModel getColumnModel()
void setPreferredWidth(int longueur)
![Page 17: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/17.jpg)
Interface utilisateur graphique et programmation évènementielle
Rendu des cellules
• Comment afficher les données dans une cellule ?
– En fonction du type d’Objet
• Des rendus par défaut
– Boolean : case à cocher
– Number : label aligné à droite
– Object : chaîne de caractères correspondante à l’objet
• Si modèle de données personnalisé, pensez à définir le type
d’objet présent dans chaque cellule
17
public Class getColumnClass(int c) { return getValueAt(0, c).getClass();
}
![Page 18: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/18.jpg)
Interface utilisateur graphique et programmation évènementielle
Personnalisation du rendu des cellules
• Implémenter l’interface TableCellRenderer
• ou étendre de la classe DefaultTableCellRenderer
– Qui étend de JLabel
18
public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column)
![Page 19: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/19.jpg)
Interface utilisateur graphique et programmation évènementielle
Personnalisation du rendu des cellules
• Associer le nouveau rendu aux cellules
– Des colonnes souhaitées
– Des cellules ayant ce type d’objet
19
void setCellRenderer(TableCellRenderer cellRenderer)
void setDefaultRenderer(Class<?> columnClass,TableCellRenderer renderer)
![Page 20: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/20.jpg)
Exercice 2
Interface utilisateur graphique et programmation évènementielle 20
• Ecrire la classe permettant
d’avoir le même rendu que
sur le tableau :
– Les fruits & legumes en vert
– Les viandes & poissons en rouge
![Page 21: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/21.jpg)
Librairie Swing & Programmation événementielle
Correction
21
![Page 22: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/22.jpg)
Librairie Swing & Programmation événementielle
Correction
22
![Page 23: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/23.jpg)
Editeur
• Différentes manières de saisir une donnée dans une cellule
– Champ texte
– Case à cocher
– Liste déroulante
– Color picker
– ...
Interface utilisateur graphique et programmation évènementielle 23
![Page 24: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/24.jpg)
Editeur par défaut
• DefaultCellEditor
– JTextField, JCheckBox, JComboBox
Interface utilisateur graphique et programmation évènementielle 24
![Page 25: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/25.jpg)
Edition par liste déroulante - exemple
Interface utilisateur graphique et programmation évènementielle 25
TableColumn sportColumn = table.getColumnModel().getColumn(2); ... JComboBox comboBox = new JComboBox(); comboBox.addItem("Snowboarding"); comboBox.addItem("Rowing");comboBox.addItem("Chasing toddlers"); comboBox.addItem("Speed reading"); comboBox.addItem("Teaching high school"); comboBox.addItem("None");sportColumn.setCellEditor(new DefaultCellEditor(comboBox));
![Page 26: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/26.jpg)
Personnalisation de l’édition des cellules
• Définir une classe qui
– met en oeuvre l’interface TableCellEditor
– et étend la classe AbstractCellEditor
• Configurer l’éditeur
– JTable
– TableColumn
Interface utilisateur graphique et programmation évènementielle 26
Component getTableCellEditorComponent(JTable table, Object value, boolean isSelected, int row, int column)
Object getCellEditorValue()
void setDefaultEditor(Class<?> columnClass, TableCellEditor editor)
void setCellEditor(TableCellEditor cellEditor)
![Page 27: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/27.jpg)
Exercice 3
Interface utilisateur graphique et programmation évènementielle 27
• Ecrire la classe qui permet de modifier les cellules liées à
la quantité
– Au moyen d’un JSpinner
![Page 28: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/28.jpg)
Récap. model/rendu/edition
Classe utilisée par défaut Personnalisation
Modèle de données
Classe concrèteDefaultTableModel
Extension de la classe abstraiteAbstractTableModel
Rendu Classe concrèteDefaultCellRenderer
Extension d’un élémentgraphique (héritant de Jcomponent) + mise en oeuvre de l’interface TableCellRenderer
Edition Classe concrèteDefaultCellEditor
Extension de la classe abstraiteAbstractCellEditor + mise en oeuvre de l’interfaceTableCellEditor
Interface utilisateur graphique et programmation évènementielle 28
![Page 29: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/29.jpg)
Arbres
![Page 30: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/30.jpg)
Arbre: utilité et composition
• Hiérarchisation des éléments
• Composition d’un arbre
– Racine
– Branches
– Feuilles
Interface utilisateur graphique et programmation évènementielle 31
![Page 31: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/31.jpg)
Création simple d’un JTree
• Composant graphique – JTree
• Noeuds/Données – DefaultMutableTreeNode
• Ajout d’un sous-noeud
Interface utilisateur graphique et programmation évènementielle 32
public JTree(TreeNode root)
public DefaultMutableTreeNode(Object userObject)
void add(MutableTreeNode newChild)
![Page 32: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/32.jpg)
Librairie Swing & Programmation événementielle
Exercice 4
• Créer cet arbre
33
![Page 33: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/33.jpg)
Librairie Swing & Programmation événementielle
Correction
34
![Page 34: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/34.jpg)
Librairie Swing & Programmation événementielle
Création d’un JTree associé à un modèle
• Constructeur JTree
• DefaultTreeModel
– associé par défaut à une instance de classe JTree
35
public JTree(TreeModel modele)
DefaultTreeModel(TreeNode root)
![Page 35: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/35.jpg)
Création d’un JTree associé à un modèle
• Implémentation de l’interface TreeModel
Interface utilisateur graphique et programmation évènementielle 36
void addTreeModelListener(TreeModelListener l)
Object getChild(Object parent, int index)
int getChildCount(Object parent)
int getIndexOfChild(Object parent, Object child)
Object getRoot()
boolean isLeaf(Object node)
void removeTreeModelListener(TreeModelListener l)
void valueForPathChanged(TreePath path, Object newValue)
![Page 36: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/36.jpg)
Interface utilisateur graphique et programmation évènementielle
Exercice 4
• Toujours à partir de la même
structure de données, réalisez
le modèle qui permet
d’afficher l’arbre ci-contre
37
![Page 37: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/37.jpg)
Personnalisation du rendu (simple)
• Affichage de l’élément racine
public void setRootVisible(boolean rootVisible)
• Affichage des “poignées de dépliage/repliage”
public void setShowsRootHandles(boolean newValue)
Interface utilisateur graphique et programmation évènementielle 38
![Page 38: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/38.jpg)
Personnalisation du rendu
• Reconfiguration du renderer associé par défaut
DefaultTreeCellRenderer :
– public DefaultTreeCellRenderer()
• Ou extension de la classe DefaultTreeCellRenderer
– Implémentation de l’interface de rendu TreeCellRenderer
public void setCellRenderer(TreeCellRenderer x)
Interface utilisateur graphique et programmation évènementielle 39
![Page 39: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/39.jpg)
DefaultTreeCellRenderer
• Icône associée aux feuilles
void setLeafIcon(Icon newIcon)
• Icône associée nœuds repliés
void setClosedIcon(Icon newIcon)
• Icône associée aux nœuds dépliés
void setOpenIcon(Icon newIcon)
Interface utilisateur graphique et programmation évènementielle 40
![Page 40: Licence InformatiqueMathieu.Raynal/docs/ens/L3info/2018_12... · 2019-06-25 · Interface utilisateur graphique et programmation évènementielle Un composant graphique : JTable •](https://reader034.vdocuments.pub/reader034/viewer/2022042807/5f8108adc668c159ae6d4f64/html5/thumbnails/40.jpg)
Mise en oeuvre d’une classe de rendu
• Extension de la classe DefaultTreeCellRenderer
• Surcharge de la méthode
public Component getTreeCellRendererComponent(
JTree tree,
Object value,
boolean sel,
boolean expanded,
boolean leaf,
int row,
boolean hasFocus)
Interface utilisateur graphique et programmation évènementielle 41