Images stacking on top of eachother despite flowlayout?

First I'll admit I'm very new at coding GUIs with Swing so please keep that in mind.

I have made a GUI consisting of a JPanel on top that is supposed to display images, and one of the bottom containing several GUI components making up a chat. I have the chat all taken care of (though you are welcome to point out mistakes and improvements). My concern right now is the handling of the images in the upper JPanel.

My understanding is that when dealing with images it is wise to extend JPanel into a new class that paints images to the GUI. I've written such a class based on other answers I've found on this site:

class ImgPanel extends JPanel
{

    private URL rUrl;
    private BufferedImage img;



    public ImgPanel(String filename) {
        super();
        try {
            rUrl = getClass().getResource(filename);
            if (rUrl != null) {
                img = ImageIO.read(rUrl);
            }
        } catch (IOException ex) {
            System.out.println("Couldn't find image file: " + filename);
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        this.setSize(240, 320); //If I do not set the size of the ImgPanel manually
                                //it for some reason gets the dimension (10, 10) and
                                //all the images are shrunk to fit it. Without this 
                                //line though, the images do not stack and are
                                //displayed as would be expected from flowLayout.
        g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
    }

}

As can be seen above I have commented on the part that I suspect is the problem. My GUI class looks like this:

public class ClientGUI extends JFrame{

    private JTextArea chatwindow;
    private JList users;
    private JTextField enterChat;
    private JPanel draftMonitor;
    private JPanel chatMonitor;
    private JPanel chatLeft;
    private DefaultListModel listModel;

    public ClientGUI(){
        super("Client");
        setLayout(new BorderLayout());

        chatwindow = new JTextArea();
        chatwindow.setEditable(false);
        chatwindow.setRows(15);
        chatwindow.setWrapStyleWord(true);
        DefaultCaret caret = (DefaultCaret)chatwindow.getCaret();
        caret.setUpdatePolicy(DefaultCaret.ALWAYS_UPDATE);

        listModel = new DefaultListModel();
        users = new JList(listModel);
        users.setVisibleRowCount(15);
        users.setPrototypeCellValue("AAAAAAAAAAAAAAAAAAAA"); 
                  开发者_如何转开发  //The above line is what I used to set the width of the JList,
                    //it has nothing to do with the question at hand, but I know 
                    //there must be plenty of ways to improve this rather crude 
                    //piece of coding.

        enterChat = new JTextField();

        chatLeft = new JPanel();
        chatLeft.setLayout(new BorderLayout());
        chatLeft.add(enterChat,"South");
        chatLeft.add(new JScrollPane(chatwindow),"Center");

        chatMonitor = new JPanel();
        chatMonitor.setLayout(new BorderLayout());
        chatMonitor.add(new JScrollPane(users),"East");
        chatMonitor.add(chatLeft,"Center");

        draftMonitor = new JPanel();
        draftMonitor.setLayout(new FlowLayout());
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));
        draftMonitor.add(new ImgPanel("exampleimage.jpg"));


        getContentPane().add(chatMonitor,"South");
        getContentPane().add(draftMonitor,"Center");

    }
    public JTextArea getChatWindow(){
        return chatwindow;
    }
    public JTextField getEnterChat(){
        return enterChat;
    }
    public JList getUsers(){
        return users;
    }
    public DefaultListModel getListModel(){
        return listModel;
    }

}

This produces nine copys of the example image, each slightly more to the right than the other (ten pixels?) but stacked on top of eachother with the leftmost one on top. They're not centered, they're slightly to the right (visibly so).

Without the suspect line in the ImgPanel class it produces what I would expect, nine images in a spaced out row, centered. However they are much smaller than the actual size of the source image.

I'm thankful for all the help I can get, this GUI coding is tricky business!

The best way to handle images is to use a JLabel and createImageIcon. There is a lot of code already there for handling images, so don't reinvent the wheel.

There's a lot to comment on here but JPanel defaults to a small size. Part of this is determined by the LayoutManager that you use. In this case, by not setting a default or preferredSize, it is choosing 10,10 pixels itself. You need to specify the size, it will not figure out this itself based on the dimensions of the images.

You may want to look at the Java SwingX project which has a JXImagePanel which does essentially the same things as you ImgPanel.

I know this only answers part of the problem but like trashgod commented, simplifying this down to a smaller code problem will help solve each problem seperately