Java GUI Layout Exercise for Layout Control

Keywords: Java JDK Attribute html5

Try to build a login dialog box, which contains two text labels (username, server IP), two text input bars (username, server IP), and a button (login), and layout according to the way you think is appropriate. 
I compare and try three kinds of layout: GridLayout (grid layout), Border Layout (boundary layout), Flow Layout (flow layout). 
It's finally time to use it. Java Get the result of graphical feedback, there is still a little excitement in my heart. Although it only completed the display of the interface, there is no functional implementation, but the sense of accomplishment is still considerable, and querying JDK documents is really very fruitful.

package gui;
import java.awt.*;
import javax.swing.*;
public class Dialog {

    public static void main(String[] args) {
        JDialog dialog=new JDialog();
        dialog.setTitle("Sign in");

        TextField text1 = new TextField(10);
        TextField text2 = new TextField(15);

        JLabel label1 = new JLabel("Nickname?");
        JLabel label2 = new JLabel("The server");

        JButton button1 = new JButton("Sign in");

        JPanel panel1 = new JPanel();
        JPanel panel2 = new JPanel();
        JPanel panel3 = new JPanel();

        GridLayout gl = new GridLayout(3, 1);

        dialog.setLayout(gl);

        panel1.add(label1);
        panel1.add(text1);
        panel2.add(label2);
        panel2.add(text2);
        panel3.add(button1);

        dialog.add(panel1);
        dialog.add(panel2);
        dialog.add(panel3);

        dialog.setSize(300, 200);
        dialog.setLocationRelativeTo(null);
        dialog.setVisible(true);

    }

}

This is the login interface part of our chat software. Under the gui package, this part is used to display the graphical interface. First, import the corresponding Java package, and use the "written" containers and components. 
In fact, the design of GUI is also the relationship between classes, which is why Java is object-oriented. Swing class extends the AWT class. Layout manager is divided into container class and component class. What we need to do is add different components to the container to complete the layout. 
Create a new Dialog class. In the main method, use the JDialog class to create a Dialog object, which actually creates a dialog box. After that, just add the corresponding components to it. Set the size of the dialog box. Set Size to 300 PX in length and 200 PX in width. 
The dialog box is available and three containers are added with the JDialog class. 
Create two labels, label named "user name" and label 2 named "IP", create two input bars, test1, test2 according to the demand for maximum capacity of 10, 15. Finally, create a button, button1 button corresponding name "login". 
Place the corresponding components in the specified container. 
Since GridLayout is a class, we find a method to construct Gridlayout(), and then construct a three-row, one-column layout object g1. Layout is also an object. It's wonderful to have wood. Then the corresponding setLayout method is found, and the layout is set. 
Containers are added to the dialog box in an add method, depending on the order. 
After the dialog box is set, the desired display position is in the middle of the screen, and the setter method is set to null. 
At present, the interface is laid out, but the frame can not be displayed, so the visibility setVisible method is set to true value, such as the fake package exchange chat tool interface. 
There is also a layout format that mainly uses boundary layouts.

package gui;
import java.awt.*;
import javax.swing.*;
public class LoginDialogDemo {

    public static void main(String[] args) {
        JDialog loginDialog=new JDialog();
        loginDialog.setTitle("Sign in");

        JLabel usernameLabel=new JLabel("Nickname?");
        JLabel ipLabel=new JLabel("The server");

        JTextField usernameField=new JTextField(10);
        JTextField ipField=new JTextField(10);

        JButton loginButton=new JButton("Sign in");

        JPanel centerPanel=new JPanel(new GridLayout(2, 1));

        JPanel upPanel=new JPanel(new FlowLayout());
        upPanel.add(usernameLabel);
        upPanel.add(usernameField);

        JPanel downPanel=new JPanel();//JPanel defaults to FlowLayout
        downPanel.add(ipLabel);
        downPanel.add(ipField);

        centerPanel.add(upPanel);
        centerPanel.add(downPanel);

        loginDialog.add(centerPanel,BorderLayout.CENTER);

        JPanel southPanel =new JPanel();
        southPanel.add(loginButton);

        loginDialog.add(southPanel, BorderLayout.SOUTH);

        loginDialog.setSize(300, 200);
        loginDialog.setLocationRelativeTo(null);
        loginDialog.setVisible(true);

    }

}

Components are much the same, the layout needs CETER and SOUTH parts. CETER part establishes a central panel container nested with a grid layout of two rows and columns. Two containers are added to the grid layout, upPanel and downPanel. The first line upPanel uses a streaming layout, adds corresponding labels and text input bars, and the second line downPanel is not expressed, but it uses downPanel. The default streaming layout is added as well. 
The center panel is placed in the middle of the border layout by default, so the BorderLayout.CENTER function is the same without setting the following attribute. Because only the central and southern regions are set up, the unused areas will be occupied by the central region, while the western, northern and eastern regions will be occupied by the central region. 
Add southPanel components to the southern region and loginButton buttons to make it work. 
Both approaches have achieved the same results, but in practice there are different gains. I'm familiar with FlowLayout, GridLayout and BorderLayout layout styles, just like I learned before.< HTML5 and CSS3 In Basic Tutorial, we learned how to match layout, how to query JDK documents efficiently, and, more importantly, how to understand the class relationship of layout manager, which is a step to understand Java's object-oriented concept.


Posted by kamsmartx on Thu, 27 Jun 2019 12:18:00 -0700