Java component deployment using JPanel

Question

I wanted components deployment like this picture:

I wrote a code that makes two JPanel in a JFrame and puts components JPanel on left side. I set Frame Layout to BorderLayout and Each panel's Layout to FlowLayout. However, result was not what I wanted. Even List is not appear.

Result picture:

Can you tell me what to do?

There is a code below.

package com.java.APISearch;
import java.awt.*;
import javax.swing.*;
import javax.swing.JPanel;

public class MainFrame extends JFrame {
    JPanel search;
    JPanel result;
    JLabel ksLb;
    JTextField ksTf;
    JButton ksOK;
    JCheckBox choicePackage;
    JCheckBox choiceClass;
    JCheckBox choiceFunc;
    JTextField dsTf;
    JButton dsOK;
    JLabel rcLb;
    JList<String> rcList;
    JTextField resultTf;
    Container contentPane;

    public MainFrame(String title) {
        super(title);
        Toolkit tk = Toolkit.getDefaultToolkit();
        Dimension screenSize = tk.getScreenSize();
        setLocation(screenSize.width/2 - 300, screenSize.height/2 - 200);
        setSize(new Dimension(600, 400));
        setResizable(false);
        setLayout(new BorderLayout());
        search = new JPanel();
        result = new JPanel();
        search.setLayout(new FlowLayout(FlowLayout.LEFT));
        search.setSize(new Dimension(300,400));
        result.setLayout(new FlowLayout());
        result.setSize(new Dimension(300,400));
        contentPane = getContentPane();
        contentPane.add(search, BorderLayout.WEST);
        contentPane.add(result, BorderLayout.EAST);

        ksLb = new JLabel("키워드 검색");
        ksTf = new JTextField(20);
        ksOK = new JButton("검색");
        search.add(ksLb);
        search.add(ksTf);
        search.add(ksOK);

        choicePackage = new JCheckBox("package");
        choiceClass = new JCheckBox("class");
        choiceFunc = new JCheckBox("function");
        dsTf = new JTextField(20);
        dsOK = new JButton("검색");
        search.add(choicePackage);
        search.add(choiceClass);
        search.add(choiceFunc);
        search.add(dsTf);
        search.add(dsOK);

        rcLb = new JLabel("recent search");
        rcList = new JList<String>();
        search.add(rcLb);
        search.add(rcList);     
    }
}

The code is hard to work with because the characters do not transfer well to my IDE and the result is the 'missing character' for every one of them. The images are confusing in that while the first depicts two radio buttons, the second has three check boxes. Which is it supposed to be? — Andrew Thompson, Nov 05 '17 at 03:46
Don't do it by hands. Use some GUI with Swing support (e.g. NetBeans) where you can easily adjust layout. For tasks like this, it's very useful to use GridBagLayout where you can adjust each cell. — Oo.oO, Nov 05 '17 at 12:23
Don't do it by hands" is a good recommendation if you only want this layout done. It is a **bad** recommendation if you want to learn to build swing gui. — c0der, Nov 05 '17 at 14:04

c0der · Accepted Answer · 2020-02-13T06:26:35.370

The common strategy to solve complex computing tasks, is to break them into small, well defined manageable tasks. Divide and conquer.
This also applies to gui: break the design into small, easy to layout containers.
In this case, for example start by dividing the design into two areas:

Serach panel added to JFrame's NORTH, and a main panel added to JFrame's CENTER. The main panel is a container for all other gui components. See more info in the code.
Here is a skeleton to demonstrate the strategy. Note the comments :

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class MainFrame extends JFrame {

    public MainFrame(String title) {
        super(title);
        setSize(new Dimension(600, 400));
        setResizable(false);
        //setLayout(new BorderLayout());// no need. its the default for JFrame
        JPanel search = new JPanel();
        search.setLayout(new FlowLayout(FlowLayout.LEFT));
        //search.setSize(new Dimension(300,400)); //let layout manager set size
                                                  //set preferred size if needed
        JLabel ksLb = new JLabel("Search:");
        JTextField ksTf = new JTextField(20);
        JButton ksOK = new JButton("Click Me");
        search.add(ksLb);
        search.add(ksTf);
        search.add(ksOK);
        add(search, BorderLayout.NORTH); //add search to content pane

        //construct a container to hold all the rest
        //set border layout to it
        JPanel mainPanel = new JPanel(new BorderLayout());
        //add content to mainPanel:
        //add result to NORTH 
        //add a JPanel to hold list and label to CENTER 
        add(mainPanel, BorderLayout.CENTER);//main to content pane
        setVisible(true);
    }
}

More examples of applying this strategy: 1 2 and 3

Thank you. Your answer has been helpful. However, the components still appear in one line. — 주영준, Nov 05 '17 at 13:43
Your comment suggest that you did not study my answer. I only added `search` components which **should** appear in one line. My answer is not meant to spoon-feed you with the complete solution, but show you the way. — c0der, Nov 05 '17 at 13:59

Oo.oO · Answer 2 · 2017-11-05T14:24:59.997

0

To make thing like this, use NetBeans (or some other tool that will help you create layout).

In NetBeans, getting something like you want takes ~5 minutes. It's really easier comparing to writing code for yourself.

In my personal opinion, GridBagLayout is the best thing when it comes to most of Swing based components. You can easily take control over each and every cell (whether it should grow or not, how anchors should behave, whether components should fill cell or not, etc.).

Take a look here: https://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html

If you don't know which layout would suit you best, you can always take a look here:

https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

For NetBeans tutorial, take a look here: https://netbeans.org/kb/docs/java/quickstart-gui.html

edited Nov 05 '17 at 14:24

answered Nov 05 '17 at 12:27

Oo.oO

12,464
3
23
45

I appericate to your recommendation. – 주영준 Nov 05 '17 at 13:33
It is a good recommendation if you only want this layout done. It is a **bad** recommendation if you want to learn to build swing gui. – c0der Nov 05 '17 at 14:01
Quoting myself ;) "In my personal opinion ..." :) – Oo.oO Nov 05 '17 at 14:13

Java component deployment using JPanel

2 Answers2

Linked