How do I add JPanel/JSplitPane components side by side in a Frame?

Question

I'm new to Java GUI and in need of some help. I'm developing an application which loads an image from the HDD and displays it in the first window shown in the output below (desired output). I'm not quite sure about the layout to be used in this scenario. Tried GridBagLayout but I don't seem to get the exact output. I need a 2x3 layout where the first row with 3 columns consists of 3 labels with name IMAGE and the first cell of the second row consists of the image. My questions are:

• Which of the layouts is suitable for this scenario and how do I create it?
• Which one do I use? JPanel or JSplitPane?

• How do I make the image get displayed in the first cell of the second column alone

• I have included a MenuItem called 'Transform' in the 'Option1' Menu. How do I write code such that when the 'Transform' MenuItem is clicked, the image in the first cell (2x1) gets cleared and gets displayed in the second cell (2x2).

• I've used File class to deal with the Image load and save options. Is it okay? I had read that there's an 'Image' class in the AWT package to deal with image data but I'm not quite sure about it's implementation.

I've included my code below... Please Help!

import javax.swing.*;
import javax.swing.filechooser.FileNameExtensionFilter;
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.io.File;

class WorkingImage extends JFrame implements ActionListener

{

    JMenuItem Open, Close, Save1, Save2, Save3, Transform1, Transform2;
    JFileChooser choose;
    JPanel panel;
    Label l1, l2, l3;


    /*public void myLayout()
    {
        panel.setLayout(new GridBagLayout());

        GridBagConstraints gc = new GridBagConstraints();
    }*/



    WorkingImage(String title)
    {
        super(title);

        //myLayout();

        JMenuBar mbar = new JMenuBar();
        setJMenuBar(mbar);

        //File Menu, Open, Save, Close Menu Items

        JMenu file = new JMenu("File");
        mbar.add(file);

        Open = new JMenuItem("Open");
        Open.setMnemonic('O');
        Open.addActionListener(this);

        Close = new JMenuItem("Close");
        Close.setMnemonic('E');
        Close.addActionListener(this);

        Save1 = new JMenuItem("Save");
        Save1.setMnemonic('A');
        Save1.addActionListener(this);

        file.add(Open);
        file.add(Save1);
        file.add(Close);

        //Creation of Option 1 and Option 2 Menus

        JMenu opt1 = new JMenu("Option1");
        mbar.add(opt1);
        Transform1 = new JMenuItem("Transform");
        Transform1.addActionListener(this);
        Save2 = new JMenuItem("Save");
        Save2.addActionListener(this);
        opt1.add(Transform1);
        opt1.add(Save2);

        JMenu opt2 = new JMenu("Option2");
        mbar.add(opt2);
        Transform2 = new JMenuItem("Transform");
        Transform2.addActionListener(this);
        Save3 = new JMenuItem("Save");
        Save3.addActionListener(this);
        opt2.add(Transform2);
        opt2.add(Save3);


        //Set Frame Size

        setSize(800, 600);
        setVisible(true);

        // Get the size of the screen

        Dimension dim = Toolkit.getDefaultToolkit().getScreenSize();

        // Determine the new location of the window

        int w = getSize().width;
        int h = getSize().height;
        int x = (dim.width-w)/2;
        int y = (dim.height-h)/2;

        // Move the window

        setLocation(x, y);


        addWindowListener(new WindowAdapter()
        {
            @Override
            public void windowClosing(WindowEvent we)
            {
                System.exit(0);
            }
        });
    }


    @Override
    public void actionPerformed(java.awt.event.ActionEvent e)
    {
        if(e.getSource() == Close)
        {
            System.out.println("\nApplication Terminated...");
            System.exit(0);
        }

        else if(e.getSource() == Open)
        {
            choose = new JFileChooser();
            choose.setDialogTitle("Specify a file to Open");

            //Set File Extension filter
            choose.setFileSelectionMode(JFileChooser.FILES_ONLY);
            FileNameExtensionFilter filter = new FileNameExtensionFilter("jpeg, jpg, png files", "jpeg", "jpg", "png");
            choose.setFileFilter(filter);

            int userSelection = choose.showOpenDialog(this);

            if(userSelection == JFileChooser.APPROVE_OPTION)
            {
                File fileToOpen = choose.getSelectedFile();
            }
        }

        else if(e.getSource() == Save1)
        {
            choose = new JFileChooser();
            choose.setDialogTitle("Specify a file to save");

            //Set file extension filter

            choose.setFileSelectionMode(JFileChooser.FILES_ONLY);
            FileNameExtensionFilter filter = new FileNameExtensionFilter(".jpeg, .jpg and .png files", "jpeg", "jpg", "png");
            choose.setFileFilter(filter);

            int userSelection = choose.showSaveDialog(this);

            if (userSelection == JFileChooser.APPROVE_OPTION)
            {
                File fileToSave = choose.getSelectedFile();
                System.out.println("Save as file: " + fileToSave.getAbsolutePath());
            }

        }

        else
        {

        }
    }
}

class JavaImage
{
    public static void main(String args[])
    {
        new WorkingImage("Image Display");
    }
}

Answer 1

Take a look at this implementation. It will make use of 2 Layout Managers. I used different components.

public class SOAnswer extends JFrame{

     private void initComponents(){
          JPanel topPanel = new JPanel(new GridLayout(1, 3, 10, 10));// 1 row, 3 columns

          topPanel.add(new JButton("IMAGE"));
          topPanel.add(new JButton("IMAGE"));
          topPanel.add(new JButton("IMAGE"));

          JPanel bottomPanel = new JPanel(new GridLayout(1, 3, 10, 10));
          bottomPanel.add(new JButton("CLICK ME"));
          bottomPanel.add(new JButton("CLICK ME"));
          bottomPanel.add(new JButton("CLICK ME"));

          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          setExtendedState(getExtendedState() | JFrame.MAXIMIZED_BOTH);
          setLayout(new BorderLayout(10, 10));
          add(topPanel, BorderLayout.NORTH);
          add(bottomPanel, BorderLayout.CENTER);
          setVisible(true);

     }

     public static void main(String[]args){
          SOAnswer go = new SOAnswer();
          go.initComponents();
     }
}

Here's the output

It's all about experimentation of the Layouts.