Java Swing Thumbnail View of Images to select image

Question

How To Generate or Show thumbnail view of images in a tab of JTabbedPane in java and allow user to click on that image to be display in other tab of a JTabbedpane ?

---

    import javax.swing.*;
    import java.awt.*;
    import java.awt.Event.*;
    import java.io.File;
    import java.awt.image.BufferedImage;
    import javax.imageio.ImageIO;
    import java.io.IOException;

    public class SwindDesign {
    public static void main(String[] args) throws IOException {
        JFrame frame = new JFrame("Split Pain");
        frame.setSize(700, 500);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new GridLayout());

        //panel
        JPanel panel = new JPanel();
        panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
        panel.add(new PicturePanel());

       JTabbedPane jtp = new JTabbedPane();

         jtp.addTab("Set Image", panel);
          jtp.addTab("Compare Image", new JButton());
          frame.add(jtp);

    }
}
class PicturePanel extends JPanel {

    File folder = new File("C:/Documents and Settings/All Users/Documents/My      Pictures/Sample Pictures");
    File[] listOfFiles = folder.listFiles();
    ImageIcon[] img ;
    JComponent lblimg;
    JTabbedPane jtp = new JTabbedPane();
    private BufferedImage[] b = new BufferedImage[10];

    public PicturePanel() throws IOException {
        for (int i = 0; i < listOfFiles.length; i++) {
            System.out.println("chek panth"+listOfFiles[i].getName().toString());
            b[i] = ImageIO.read(new File("C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/" + listOfFiles[i].getName().toString()));
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponents(g);
        Graphics2D g2 = (Graphics2D) g;
        int k = 10;
        for (int j = 0; j < listOfFiles.length - 1; j++) {
            g2.drawImage(b[j], k, 0, 100, 100, null);
            k = k + 75;
            }
    }
}

well this what i am trying here instated of drawing image i want to actully load and show the image so dat i can click on image and open it in another tab to edit the image i some how able to know that it can be done by using jlist but how that i dont know. please suggest me the way

Answer 1

Here are some hints to help you:

1. Create a panel with GridLayout to display images in thumbnail view.
2. Set images as image icon in JLabel and add that labels to above panel.
3. Add this panel to JTabbedPane as a tab.
4. Implement onclick listeners of image labels. And event occurs get that image and display it in some other tab than this.

To display image in other tab:

1. Create a panel with one label in it.
2. Add this new panel to JTabbedPane.
3. When someone clicks on an image from image thumbnail view, get that image in it's listener and set that image in JLabel of new panel.

---

_{For more help show us what you have tried and better if you can post a short working code example which demonstrate your problem.}

---

---

EDIT

For another requirement described in comment:

boolean isSelected = false;
JButton jButton;
void imageClickTest() throws MalformedURLException, IOException {
    final JFrame frame = new JFrame("Demo");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(400, 400);
    frame.setLayout(new BorderLayout());

    final JTabbedPane tabbedPane = new JTabbedPane();

    JPanel pane = new JPanel();
    JButton button;
    pane.setLayout(new BorderLayout());

    button = new JButton("I'm second button");
    button.setIcon(new ImageIcon(ImageIO.read(new URL("http://cdn5.iconfinder.com/data/icons/ie_Financial_set/24/26.png"))));
    button.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            JButton button = (JButton) e.getSource();
            if(isSelected) {
                System.out.println("two selected");
                button.setBorder(BorderFactory.createEtchedBorder());
                isSelected = false;
                JSplitPane jSplitPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT);
                jSplitPane.add(button);
                jButton.setBorder(BorderFactory.createEtchedBorder());
                jButton.setText("First click me");
                jSplitPane.add(jButton);
                jSplitPane.setDividerLocation(150);
                tabbedPane.addTab("Image Comparision", jSplitPane);
            }
        }
    });
    pane.add(button, BorderLayout.SOUTH);

    button = new JButton("First click me");
    button.setIcon(new ImageIcon(ImageIO.read(new URL("http://cdn4.iconfinder.com/data/icons/REALVISTA/web_design/png/24/testimonials.png"))));
    button.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            JButton button = (JButton) e.getSource();
            button.setBorder(BorderFactory.createLineBorder(Color.RED, 5));
            button.setText("Now Click on second button.");
            jButton = button;
            isSelected = true;
        }
    });
    pane.add(button, BorderLayout.NORTH);

    button = new JButton("I'm just extra button");
    button.setIcon(new ImageIcon(ImageIO.read(new URL("http://cdn2.iconfinder.com/data/icons/crystalproject/64x64/apps/kservices.png"))));
    button.setEnabled(false);
    pane.add(button, BorderLayout.CENTER);

    tabbedPane.addTab("ImagePane", pane);
    frame.add(tabbedPane, BorderLayout.CENTER);
    frame.setVisible(true);
}

This is just demo code, you might need to modify it based on your requirements. This is just to show you how you can monitor click on 2 components and get them in another tab.

_{Wish you have asked a different question for this I might have got some upvotes/accepted answer or the best some bounty or the worst down votes.}