Ajouter des images dans un flowLayout de gauche à droite en allant du haut vers le bas

Bonjour,

je souhaiterais placer dynamiquement des composants dans un JPanel utilisant un FlowLayout pour positionner les composants de gauche à droite, en allant du haut vers le bas.
Comme gestionnaire de mise en page, j'utilise FlowLayout pour supprimer et redimensionner automatiquement les composants ajoutés dynamiquement afin d'éviter de replacer tous les autres composants placés avant ou après au moment de la suppression.


-> L'idée est de permettre à l'utilisateur de sélectionner une ou plusieurs images via un fileChooser, et d'afficher dans ce panel le nom du ou des fichier(s) sélectionnés associés à un bouton permettant de le(s) supprimer/désélectionner.


-> Voici le code ci-dessous pour illustrer cet exemple :

Le lanceur Main.java :

Code:

---

1 2 3 4 5 6 7 8 9 10

public class Main {   public static void main(String[] args) {   AjouterImage ajouterImage = new AjouterImage(); ajouterImage.setVisible(true); } }

---

La classe MesImages.java :

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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

import javax.swing.*; import java.awt.*;     public class MesImages extends JFrame {   private int nb_total_images = 0; private int separateur_vertical = 15;   MesImages() {   this.setSize(new Dimension(500, 400)); this.setLocationRelativeTo(null);   JPanel p_conteneur = new JPanel(); p_conteneur.setLayout(new GridBagLayout()); GridBagConstraints gbc_conteneur = new GridBagConstraints(); p_conteneur.setBorder(BorderFactory.createLineBorder(Color.black)); p_conteneur.setSize(new Dimension(500, 400));   // On délcare le panel des futures images sélectionnées ici pour l'utiliser dans btn_ajouter_image JPanel p_flowLayout_images = new JPanel();   // On ajoute un bouton pour sélectionner les images gbc_conteneur.gridy = 0;   JButton btn_ajouter_image = new JButton("Ajouter image"); btn_ajouter_image.addActionListener( f -> { JFileChooser dialogue = new JFileChooser();   // on ajoute le fichier séléctionné if (dialogue.showOpenDialog(null) == JFileChooser.APPROVE_OPTION) {   ajouter_image( p_conteneur, p_flowLayout_images, dialogue.getSelectedFile().getName() ); } } ); p_conteneur.add(btn_ajouter_image, gbc_conteneur);   // On ajoute le panel p_images vide pour y positionner les futures images sélectionnées gbc_conteneur.gridy = 1;   int largeur = 300, hauteur = 2; p_flowLayout_images.setBorder(BorderFactory.createLineBorder(Color.blue)); p_flowLayout_images.setPreferredSize(new Dimension(largeur, hauteur)); int separateur_horizontal = 20; p_flowLayout_images.setLayout(new FlowLayout(FlowLayout.LEFT, separateur_horizontal, this.separateur_vertical)); p_conteneur.add(p_flowLayout_images, gbc_conteneur);   // On ajoute le tout et on affiche le tout. this.setContentPane(p_conteneur); }     public void ajouter_image(JPanel p_conteneur, JPanel p_flowLayout_images, String nom_image) {   JPanel p_nouvelle_image = new JPanel(); p_nouvelle_image.setLayout(new GridBagLayout());   GridBagConstraints gbc_nouvelle_image = new GridBagConstraints();   gbc_nouvelle_image.gridx = 0; JLabel l_nom_image = new JLabel(nom_image); p_nouvelle_image.add(l_nom_image, gbc_nouvelle_image);   int espace_horizontal_label_bouton = 15; gbc_nouvelle_image.gridx = 1; gbc_nouvelle_image.insets = new Insets(0, espace_horizontal_label_bouton, 0, 0);   JButton btn_supprimer_image = new JButton("-"); btn_supprimer_image.setPreferredSize(new Dimension(25, 25)); btn_supprimer_image.addActionListener( f -> { // Update screen components   // TODO gérer la suppression d'une ligne dans le flowLayout   p_flowLayout_images.remove(p_nouvelle_image);   p_flowLayout_images.revalidate(); p_flowLayout_images.repaint();   p_conteneur.revalidate(); p_conteneur.repaint(); } );   p_nouvelle_image.add(btn_supprimer_image, gbc_nouvelle_image);     // TODO gérer la création d'une ligne dans le flowLayout this.nb_total_images++;   int hauteur_ligne = 25 + this.separateur_vertical;   p_flowLayout_images.setPreferredSize(new Dimension(p_flowLayout_images.getWidth(), p_flowLayout_images.getHeight()+hauteur_ligne)); p_flowLayout_images.revalidate(); p_flowLayout_images.repaint();   p_conteneur.setPreferredSize(new Dimension(p_conteneur.getWidth(), p_conteneur.getHeight()+hauteur_ligne)); p_flowLayout_images.revalidate(); p_flowLayout_images.repaint();   p_flowLayout_images.add(p_nouvelle_image); }   }

---

-> Exemple :
Imaginons que l'utilisateur sélectionne 3 fichiers, le JPanel p_flowLayout_images qui a une largeur limitée contiendrait alors 2 lignes :
ligne 1 : "Nom du fichier 1" [x] "Fichier 2" [x]
ligne 2 : "Fichier 3" [x]

C'est là que vos idées pourront m'aider à avancer.
Comment gérer au mieux la création ou la suppression d'une ligne dans le flowlayout ? (voir les 2 TODO dans le code)

J'espère que mon exemple vous paraîtra assez complet.

Berni.

Salut,

Tu feras ce que tu veux faire beaucoup plus facilement avec une JList, en HORIZONTAL_WRAP.

Bonjour joel,

et merci de ta réponse.
Une JList pourrait être la bonne solution, mais apparemment elle ne gère pas les actions des JButtons ajoutés.

J'ai trouvé un message sur un forum qui souligne ce problème :
https://stackoverflow.com/questions/...panel-to-jlist.

Oui, mais on peut le simuler :

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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371

import java.awt.BorderLayout; import java.awt.Color; import java.awt.Component; import java.awt.FlowLayout; import java.awt.Point; import java.awt.Rectangle; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.nio.file.DirectoryStream; import java.nio.file.DirectoryStream.Filter; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.Collection; import java.util.Objects;   import javax.activation.MimetypesFileTypeMap; import javax.swing.DefaultListCellRenderer; import javax.swing.DefaultListModel; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.swing.JFileChooser; import javax.swing.JFrame; import javax.swing.JList; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.SwingConstants; import javax.swing.SwingUtilities; import javax.swing.filechooser.FileFilter;   public class FileSelectorPanel extends JPanel {   private static final long serialVersionUID = 1L;   private static final byte[] CROSS = { 0x00,0x00,0x00,0x00,0x50,0x00,0x00,0x05,(byte)0xa4,0x01,0x40,0x1a,(byte)0xa4,0x06,(byte)0x90,0x1a,(byte)0x90,0x1a,(byte)0xa4,0x06,0x40,0x6a,0x69,0x00,0x00,(byte)0xa9,0x6a,0x00,0x00,(byte)0xa4,0x1a,0x00,0x00,(byte)0xa4,0x1a,0x00,0x00,(byte)0xa9,0x6a,0x00,0x40,0x6a,(byte)0xa9,0x01,(byte)0x90,0x1a,(byte)0xa4,0x06,(byte)0xa4,0x06,(byte)0x90,0x1a,(byte)0xa4,0x01,0x40,0x1a,0x50,0x00,0x00,0x05,0x00,0x00,0x00,0x00 };   private static final ImageIcon ICON = new ImageIcon(createCrossImage(Color.BLACK, Color.WHITE)); private static final ImageIcon ICON_HOVER = new ImageIcon(createCrossImage(Color.BLACK, Color.LIGHT_GRAY)); private static final ImageIcon ICON_CLICK = new ImageIcon(createCrossImage(Color.BLACK, Color.DARK_GRAY));   private final JList<Path> jlist; private final JButton button; private final DefaultListModel<Path> listModel; private final FileSelectorRenderer cellRenderer;   private String dialogTitle = "Choose file..."; private String approveButtonText = null;   private Path lastDir; private FileFilter fileFilter; private Point lastPoint; private int clickedIndex=-1; private int hoverIndex=-1;   public FileSelectorPanel(String lastDir, FileFilter fileFilter) { this(lastDir==null?null:Paths.get(lastDir), fileFilter); }   public FileSelectorPanel(File lastDir, FileFilter fileFilter) { this(lastDir==null?null:lastDir.toPath(), fileFilter); }   public FileSelectorPanel(Path lastDir, FileFilter fileFilter) { super(new BorderLayout()); this.lastDir = lastDir==null?Paths.get(System.getProperty("user.home")):lastDir; if ( !Files.isDirectory(lastDir) ) { lastDir = lastDir.getParent(); if ( lastDir==null ) { lastDir = Paths.get(System.getProperty("user.home")); } } this.fileFilter = fileFilter; listModel = new DefaultListModel<>(); jlist = new JList<>(listModel); jlist.setLayoutOrientation(JList.HORIZONTAL_WRAP); //jlist.setFixedCellWidth(100); jlist.setVisibleRowCount(-1); cellRenderer = new FileSelectorRenderer(); jlist.setCellRenderer(cellRenderer); MouseAdapter mouseAdapter = new MouseAdapter() { @Override public void mousePressed(MouseEvent event) { if ( event.getButton()==MouseEvent.BUTTON1 ) { armclick(event.getPoint()); } } @Override public void mouseReleased(MouseEvent event) { if ( event.getButton()==MouseEvent.BUTTON1 ) { click(event.getPoint()); } }   @Override public void mouseMoved(MouseEvent e) { mouseHover(e.getPoint()); } @Override public void mouseDragged(MouseEvent e) { mouseHover(e.getPoint()); }   @Override public void mouseExited(MouseEvent e) { endHover(); }   }; jlist.addMouseListener(mouseAdapter); jlist.addMouseMotionListener(mouseAdapter); JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT)); button = new JButton("Choose file"); button.addActionListener(e->chooseFile(fileFilter)); buttonPanel.add(button); add(new JScrollPane(jlist, JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED, JScrollPane.HORIZONTAL_SCROLLBAR_NEVER)); add(buttonPanel, BorderLayout.SOUTH); }   private void mouseHover(Point point) { int index = jlist.locationToIndex(point); Path item = (Path) jlist.getModel().getElementAt(index); if ( iconIntersects(index, point, item) ) { if ( hoverIndex!=index ) { hoverIndex = index; jlist.repaint(); } } else { endHover(); } } private void endHover() { if ( hoverIndex!=-1 ) { hoverIndex = -1; jlist.repaint(); } }   private void armclick(Point point) { lastPoint = point; int index = jlist.locationToIndex(point); Path item = (Path) jlist.getModel().getElementAt(index); if ( iconIntersects(index, point, item) ) { if ( clickedIndex!=index ) { clickedIndex = index; jlist.repaint(); } } }   private void click(Point point) { if ( lastPoint==null || !jlist.getBounds().contains(point) || point.distance(lastPoint)>5 ) { clickedIndex = -1; return; } int index = jlist.locationToIndex(point); Path item = (Path) jlist.getModel().getElementAt(index); if ( iconIntersects(index, point, item) ) { listModel.removeElement(item); } clickedIndex = -1; }   private boolean iconIntersects(int index, Point point, Path item) { Rectangle viewR = new Rectangle(); viewR.setFrame(jlist.getCellBounds(index, index)); Rectangle iconR = new Rectangle(); Rectangle textR = new Rectangle(); SwingUtilities.layoutCompoundLabel(cellRenderer, cellRenderer.getFontMetrics(cellRenderer.getFont()), item.getFileName().toString(), cellRenderer.getIcon(), cellRenderer.getVerticalAlignment(), cellRenderer.getHorizontalAlignment(), cellRenderer.getVerticalTextPosition(), cellRenderer.getHorizontalTextPosition(), viewR, iconR, textR, cellRenderer.getIconTextGap()); return iconR.contains(point); }   public void setDialogTitle(String dialogTitle) { this.dialogTitle = dialogTitle; }   public void setApproveButtonText(String approveButtonText) { this.approveButtonText = approveButtonText; }   public void setChooseButtonText(String buttonText) { this.button.setText(buttonText); }   private void chooseFile(FileFilter fileFilter) { JFileChooser chooser = new JFileChooser(lastDir.toFile()); if ( dialogTitle!=null ) chooser.setDialogTitle(dialogTitle); chooser.setFileFilter(fileFilter); chooser.setFileSelectionMode(JFileChooser.FILES_ONLY); chooser.setMultiSelectionEnabled(true); if ( chooser.showDialog(this, approveButtonText)==JFileChooser.APPROVE_OPTION ) { add(chooser.getSelectedFiles()); lastDir = chooser.getCurrentDirectory().toPath(); } }   public void add(Collection<?> objects) { for(Object object : objects) { if ( object instanceof Path) { add((Path)object); } else if ( object instanceof File ) { add((File)object); } } }   public void add(Path...paths) { for(Path path : paths ) { add(path); } }   public void add(File...files) { for(File file : files ) { add(file); } }   public void add(File file) { add(file.toPath()); }   public void add(Path path) { Objects.requireNonNull(path); listModel.addElement(path); }   public Path getDirectory() { return lastDir; }   public void setDirectory(File file) { setDirectory(file.toPath()); }   public void setDirectory(Path dir) { listModel.removeAllElements(); if ( dir!=null && Files.isDirectory(dir)) { try(DirectoryStream<Path> ds = Files.newDirectoryStream(dir, new Filter<Path>() {   @Override public boolean accept(Path entry) throws IOException { if ( Files.isRegularFile(entry) ) { if ( fileFilter==null ) { return true; } else { return fileFilter.accept(entry.toFile()); } } else { return false; } }     })) { for(Path path : dir) { add(path); } } catch (IOException e) { } } }   public void setDirectory(String path) { setDirectory(Paths.get(path)); }   private class FileSelectorRenderer extends DefaultListCellRenderer {   private static final long serialVersionUID = 1L;   public FileSelectorRenderer() { setIconTextGap(5); setHorizontalTextPosition(SwingConstants.LEFT); }   @Override public Component getListCellRendererComponent(@SuppressWarnings("rawtypes") JList list, Object obj, int index, boolean isSelected, boolean cellHasFocus) { Path path = (Path)obj; Component comp = super.getListCellRendererComponent(list, path.getFileName().toString(), index, false, cellHasFocus); if ( clickedIndex!=-1 ) { if ( index==clickedIndex && index==hoverIndex ) { setIcon(ICON_CLICK); } else { setIcon(ICON); } } else if ( index==hoverIndex ) { setIcon(ICON_HOVER); } else { setIcon(ICON); } return comp; }   }   public static void main(String[] args) {   JFrame frame = new JFrame("Démo"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);   FileSelectorPanel flowPanel = new FileSelectorPanel(System.getProperty("user.dir"), new FileFilter() {   @Override public String getDescription() { return "Images"; }   @Override public boolean accept(File f) { return f.isDirectory() || isImage(f.getName()); }   private boolean isImage(String name) { return MimetypesFileTypeMap.getDefaultFileTypeMap().getContentType(name).startsWith("image/"); }   }); flowPanel.setDirectory(flowPanel.getDirectory()); frame.add(flowPanel);   frame.setSize(300, 300); frame.setLocationRelativeTo(null); frame.setVisible(true);   }   private static BufferedImage createCrossImage(Color border, Color main) { BufferedImage image = new BufferedImage(16,16,BufferedImage.TYPE_INT_ARGB); for(int i=0; i<CROSS.length; i++) { int b=CROSS[i]; for(int j=0; j<4; j++) { int x=(i*4+j)%16; int y=(i*4+j)/16; switch(b&3) { case 1: image.setRGB(x, y, border.getRGB()); break; case 2: image.setRGB(x, y, main.getRGB()); break; } b>>=2; }   } return image; }   }

---

Sinon, à lire rapidement ton code, je pense que le souci est là :

Code:

---

1 2 3 4 5 6 7

p_flowLayout_images.setPreferredSize(new Dimension(p_flowLayout_images.getWidth(), p_flowLayout_images.getHeight()+hauteur_ligne)); p_flowLayout_images.revalidate(); p_flowLayout_images.repaint();   p_conteneur.setPreferredSize(new Dimension(p_conteneur.getWidth(), p_conteneur.getHeight()+hauteur_ligne)); p_flowLayout_images.revalidate(); p_flowLayout_images.repaint();

---

Ceci s'exécute dans l'Event Dispatch Thread. Le revalidate() change juste un état, et les dimensions seront calculées seulement en fin d'itération de la boucle évenementielle. Essaye un doLayout() à la place.

Les multiples repaint() n'ont aucun intérêt pour la même raison (un seul à la fin est suffisant).

C'est bizarre, cela paraît simple et pourtant ça a l'air compliqué :fou:

Par rapport à ma solution,
l'unique problème est que je n'arrive pas à déterminer la hauteur du panel pour redimensionner le Jpanel p_flowLayout_images en cas d'ajout ou de suppression d'une image.


Joel, la solution avec la List est quand même limitée. On contourne plus la solution plutôt que de résoudre le problème à la racine.
Dans l'idéal, je souhaiterais avoir une zone de sélection de fichier(s) avec une largeur fixe et une hauteur qui est flexible par rapport au nombre d'éléments ajoutés.

Par rapport à ta remarque, si je ne met pas de revalidate, les dimensions des panels se retrouvent inchangées. Le fait de mettre doLayout ne permet pas de les redimensionner.
J'ai remarqué que le fait de faire un repaint ne sert à rien car revalidate suffit.
D'ailleurs il y a une erreur dans mon bout de code :

Code:

---

1 2 3 4 5 6 7 8

p_flowLayout_images.setPreferredSize(new Dimension(p_flowLayout_images.getWidth(), p_flowLayout_images.getHeight()+hauteur_ligne)); p_flowLayout_images.revalidate(); // p_flowLayout_images.repaint(); // inutile, cela fonctionne sans   p_conteneur.setPreferredSize(new Dimension(p_conteneur.getWidth(), p_conteneur.getHeight()+hauteur_ligne)); p_conteneur.revalidate(); // p_conteneur.repaint(); // inutile, cela fonctionne sans

---

Je n'ai pas trouvé de solution à mettre en place ...
L'utilisation d'un gridbagLayout pourrait faire l'affaire car cela laisserait des espaces vides en cas de suppression !

Citation:

---

Envoyé par bernidupont

Joel, la solution avec la List est quand même limitée. On contourne plus la solution plutôt que de résoudre le problème à la racine.

---

C'est plutôt l'inverse : tu as une liste d'éléments, tu veux en choisir certains, et ce n'est pas un menu, donc c'est une JList. C'est le composant Swing pour faire des listes de sélection. Y'a pas à tortiller. Malheureusement, une JList ne sait pas gérer de CellEditor.
Ton désir d'avoir un zone "flexible", qui varie en hauteur selon le nombre d'élément alors qu'elle est affichée, et bah, ça n'existe pas vraiment. Donc pour faire ça, soit on s'appuie sur des composants fait à la base pour une UI sandardisée, qu'on bidouiille, soit on bidouille avec les layouts, qui est encore plus de la bidouile. C'est comme si l'éditeur de texte ne te convenait pas, alors tu développais un JPanel avec un layout de pleins de label de une lettre et que tu me disais ta solution avec JEditorPane super customisée c'est un coutournement plutôt que de résoudre le problème à la racine. Je dis non.

Citation:

---

Envoyé par bernidupont

Dans l'idéal, je souhaiterais avoir une zone de sélection de fichier(s) avec une largeur fixe et une hauteur qui est flexible par rapport au nombre d'éléments ajoutés.
[...]

Par rapport à ta remarque, si je ne met pas de revalidate, les dimensions des panels se retrouvent inchangées. Le fait de mettre doLayout ne permet pas de les redimensionner.

---

Le revalidate ne fait qu'un changement d'état, qui n'aura d'effet que à la fin de la boucle évenementiel, le doLayout fait un calcul. Alors peut-être que le doLayout ne change rien parce que tu as d'autres changements d'états faits avant qui n'ont pas encore eu l'effet suffisant pour que l'état au moment du doLayout soit suffisament à jour pour que le calcul résultat soit correct.
La seule autre solution est de forcé un post sur la boucle évenementiel pour chaque action susceptible de produire un changement dans le "layout".

Citation:

---

Envoyé par bernidupont

C'est bizarre, cela paraît simple et pourtant ça a l'air compliqué :fou:
Par rapport à ma solution,
l'unique problème est que je n'arrive pas à déterminer la hauteur du panel pour redimensionner le Jpanel p_flowLayout_images en cas d'ajout ou de suppression d'une image.

---

Oui, c'est bien ça le problème. Ce n'est pas que c'est simple ou compliqué, c'est que ce n'est pas quelque chose de standard par rapport au fonctionnement du FlowLayout : le flowlayout ne sait pas s'adapter automatiquement en hauteur à postériori. C'est dommage, mais c'est comme ça. Maintenant, il existe aussi un WrapLayout qui ajouterait au comportement du FlowLayout ce comportement là. Je n'ai pas testé en ce qui me concerne.