Search code examples
javaswinglayout-managerflowlayout

FlowLayout() of JPanel not displaying JLabels in a flowlayout

I'm a second year CS student (on winter break) and I'm trying to teach myself Swing. Ultimately, this is just a project to add to my portfolio of code and to reinforce what I learned in Data Structures & Algorithms over the semester.

However, diving into Swing, I have hit a blockade (perhaps biting off a little too much at once). I am stuck on trying to get my two JLabels: heading & dets, to appear underneath each other in the JPanel tbdItem.

I've searched around and tried a solution here (the solution using GridLayout()) but that didn't work either.

If you check my code bellow, I believe I have correctly used the FlowLayout() layout manager, but in actuality the output looks like it's ignoring my JPanel and is instead using the layout manager of my JFrame? An image of (wrong) output here:

http://i.imgur.com/k6RrYHU.png

Here is my code for reference. I really don't understand why it isn't working as the JPanel I'm inserting into is a FlowLayout():

    super("To Be Done");
    setLocationRelativeTo(null); //Center window on open
    setSize(WIDTH, HEIGHT);
    setDefaultCloseOperation( JFrame.DO_NOTHING_ON_CLOSE );
    getContentPane().setBackground(Color.LIGHT_GRAY);
    addWindowListener( new CheckOnExit() );
    setLayout( new BorderLayout() );

    JPanel buttonPanel = new JPanel();
    buttonPanel.setBackground(Color.LIGHT_GRAY);

    JButton newTask = new JButton("New Task");
    newTask.addActionListener( new NewTask() );
    newTask.setPreferredSize(new Dimension(130, 40));
    buttonPanel.add(newTask);

    JButton editTask = new JButton("Edit Task");
    editTask.addActionListener( new EditTask() );
    editTask.setPreferredSize(new Dimension(130, 40));
    buttonPanel.add(editTask);

    JButton deleteTask = new JButton("Delete Task");
    deleteTask.addActionListener( new DeleteTask() );
    deleteTask.setPreferredSize(new Dimension(130, 40));
    buttonPanel.add(deleteTask);

    add(buttonPanel, BorderLayout.SOUTH);


    /* TBD Box to display matters TBD */
    JPanel tbdPanel = new JPanel( new FlowLayout() );


    JPanel tbdItem = new JPanel( new FlowLayout() ); //

    JLabel heading = new JLabel("Heading");
    JLabel dets = new JLabel("The Body of the text goes here");

    // Make heading bold -- find out if there's a better way to do this
    Font font = heading.getFont();
    Font boldFont = new Font(font.getFontName(), Font.BOLD, font.getSize());
    heading.setFont(boldFont);      

    tbdItem.add(heading);   
    tbdItem.add(dets);      
    tbdPanel.add(tbdItem);

    add( tbdPanel, BorderLayout.CENTER ); // Add TBD Panel to CENTER of JFrame

Many thanks. And I apologise if the solutions is on this site somewhere. I honestly couldn't find it if it is.

Solution

  • The cause of your problem is that tbdItem is being given a new FlowLayout() and this will layout items horizontally if there is space (which there is)

    Layout managers in Swing can be a painful learning curve - especially the most configurable of them; GridBagLayout.

    I would suggest starting with learning how BorderLayout works first and use lots of them (in a hierarchy) to wrap the items you need. So instead, you will need to do something like...

    JPanel tbdItem = new JPanel( new BorderLayout() );
...
tbdItem.add(heading, BorderLayout.NORTH);
tbdItem.add(dets, BorderLayout.SOUTH);