Display using JPanels/JFrames?

Question

I have code done, but still have not managed to get what I am working for. My current code shows this:

with this code:

/*
 */
package reader;

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.text.SimpleAttributeSet;
import javax.swing.text.StyleConstants;
import javax.swing.text.StyledDocument;
//import java.lang.Process;


/**
 */
class readerGUI extends JFrame 
{
    JMenuBar menuBar; 
    JMenu menu1, menu2, menu3, menu4;
    JMenuItem menuItem, menuItem1, menuItem2, menuItem3, menuItem4;
    ImageIcon logo;
    JLabel loguin1, loguin2, title;
    JTextArea readerArea;
    JPanel rightSide, leftSide, bottomSide, middleSide;
    String text;
    JButton importBook, removeBook, listBook, searchBook;
    JTextField searchField;


    readerGUI()
    { 
        super("Text \n");       
        String cad = "logo.png";
        //setBackground(Color.blue);
        setLayout(new FlowLayout());


        menuBar = new JMenuBar(); 
title = new JLabel(" Text ");
        add(title);

        menu1 = new JMenu("Link");  
        menuItem = new JMenuItem("Option"); 
        menu2 = new JMenu("Link");
        menuItem1 = new JMenuItem("Option In");
        menuItem2 = new JMenuItem("Option Out");    
        menu3 = new JMenu("Link");
        menuItem3 = new JMenuItem("Option");
        menuBar.add(menu1);
        menuBar.add(menu2);
        menuBar.add(menu3);
        menu1.add(menuItem);
        menu2.add(menuItem1);
        menu2.add(menuItem2);
        menu3.add(menuItem3);
        add(menuBar);



        logo = new ImageIcon(cad);//create icon
        loguin1 = new JLabel(logo);//create label
        loguin2 = new JLabel(logo);//create label
        //loguin.setBounds(150,30,100,100);//where?
        add(loguin1); //add
        add(loguin2);

        rightSide = new JPanel(); //PANEL for buttons  
                rightSide.add(new JLabel("Text:"));
                DefaultComboBoxModel model = new DefaultComboBoxModel();
                model.addElement("Text1");
                model.addElement("Text2");
                model.addElement("Text3");
                JComboBox comboBox = new JComboBox(model);
                rightSide.add(comboBox);

                searchField = new JTextField("", 10);
                rightSide.add(searchField);
                searchBook = new JButton("Search");
                rightSide.add(searchBook);
                add(rightSide);


                text = "\n\t\t LORE IPSUM \n\n"
                        + "commodo nisi. In hac habitasse platea dictumst.\n";

         middleSide = new JPanel(); //PANEL for buttons  



                add(middleSide);

                SimpleAttributeSet sas = new SimpleAttributeSet();
                StyleConstants.setBackground(sas, Color.RED);
                StyledDocument doc;



/* --------- SIDE Menu Panel for Options ----------*/   
        title = new JLabel("Options ");
        add(title);
                leftSide = new JPanel(); //PANEL for buttons  
                importBook = new JButton("Button1");
                leftSide.add(importBook);
                removeBook = new JButton("Button2");
                leftSide.add(removeBook);
                add(leftSide);
        JPanel main = new JPanel(new FlowLayout(FlowLayout.RIGHT));
        JPanel child = new JPanel();
        child.add(new JLabel("Options \n"));
        //main.add(child);

        main.add(leftSide);
        add(main); 


        ActionEventHandler manejador = new ActionEventHandler();

        menuItem.addActionListener(manejador);

    }

      private class ActionEventHandler implements ActionListener
        {
                @Override
                public void actionPerformed( ActionEvent evento)
                {

                        if (evento.getSource() == menuItem)
                                System.exit(0);
                }


      }

}

And would like my code to display something along these lines:

I know im not that far from obtaining it, but I get confused with JPanels and JFrames.. help?

Answer 1

Generally speaking, FlowLayout probably isn't the best choice of layout manager in this case.

You're off to a good start by separating each area into separate components, but you should be focusing on their layout requirements as well.

To start with, I see the base layout as a BorderLayout . This will allow you to place the "title" in the BorderLayout.NORTH position, the "menu" in the BorderLayout.WEST position and the content into the BorderLayout.CENTER position

For the title, I see the use of GridBagLayout , as this will allow you to give the "Title" more weight (space) then the other components.

The menu is a little more complex, you might be able to do this with a GridBagLayout or, by separating the "Menu Options" from the buttons (in separate containers), use a BorderLayout as the base (placing "Menu Options" in the BorderLayout.NORTH and the buttons in the BorderLayout.CENTER position) and using something like a GridLayout for the buttons, for example...

For the "main content", you could use either a GridLayout or GridBagLayout depending on your needs

Take a look through Laying Out Components Within a Container for more ideas...