1.GUI overview
Currently, the programs we write are all console-based programs
GUI (Graphical User Interface) is a graphical user interface, which can make the application look more friendly
2.Swing concept
at javax.swing
Swing is a pure java component that enables applications to have the same appearance and behavior on different platforms
3. What are components and containers?
The basic component of the java GUI is a component, a component is an object that is graphically displayed on the screen and can interact with the user
Components cannot be displayed individually, so they must be placed in a certain container before they can be displayed.
A container can add multiple components, and you can add different components to the container by calling the container's add() method
Classification of 4 components:
Window (Frame) and panel (Panel) are called container components
The text input box (JTextField) and the button (Button) are called functional components
5. The programming steps of the graphical user interface:
When we create a graphical user interface, we first need to create a window, usually using JFrame to create a window in a Swing program
Panels can be added to the window, usually Jpanel is used to create panels in the already created window, and multiple panels can be created in one window
Different components can be added to the panel, and the layout can also be set. We generally use the nested method to achieve the layout.
Demo of creating a window, and common methods:
import javax.swing.*;
public class JFrameDemo1 extends JFrame {
public JFrameDemo1(){
this.setSize(500,300); //Set the size of the window
this.setLocationRelativeTo(null); //Center the window
this.setTitle("login interface"); //set window title
this.setIconImage(new ImageIcon("WeChat pictures_20211117191028.jpg").getImage()); //To set the window icon, you need to copy the picture directly under the project, not in the package
}
public static void main(String[] args) {
JFrame jFrame = new JFrameDemo1(); //Create a window object using JFrame
}
}
There are four layouts
Way:
FlowLayout
//Flow layout, that is, a horizontal layout, which arranges components one by one on a row basis. When a row is full, it is automatically arranged to the next row
Fluid layout example:
package javaGUI;
import javax.swing.;
import java.awt.;
public class JFrameDemo2_1 extends JFrame {
public JFrameDemo2_1(){
this.setSize(500,300);
this.setLocationRelativeTo(null);
this.setTitle("login interface");
this.setIconImage(new ImageIcon("WeChat pictures_20211117191028.jpg").getImage());
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setResizable(false);
JPanel jp = new JPanel(); //Create a panel using JPanel
jp.setLayout(new FlowLayout(FlowLayout.LEFT)); //Create an anonymous flow layout object
JButton jButton1 = new JButton("button 1"); //Create a button object using JButton
JButton jButton2 = new JButton("button 2");
JButton jButton3 = new JButton("button 3");
JButton jButton4 = new JButton("button 4");
jp.add(jButton1);
jp.add(jButton2);
jp.add(jButton3);
jp.add(jButton4);
this.add(jp);
this.setVisible(true);
}
public static void main(String[] args) {
JFrame jFrame = new JFrameDemo2_1();
}
}
BorderLayout //Border layout, a way of layout with southeast, northwest and middle
Example of border layout:
package javaGUI;
import javax.swing.;
import javax.swing.border.Border;
import java.awt.;
public class JFrameDemo2_2 extends JFrame {
public JFrameDemo2_2(){
this.setSize(500,300);
this.setLocationRelativeTo(null);
this.setTitle("login interface");
this.setIconImage(new ImageIcon("WeChat pictures_20211117191028.jpg").getImage());
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setResizable(false);
JPanel jp = new JPanel();
jp.setLayout(new BorderLayout()); //Use BorderLayout() to create an anonymous object with a border layout method
JButton jButton1 = new JButton("button 1");
JButton jButton2 = new JButton("button 2");
JButton jButton3 = new JButton("button 3");
JButton jButton4 = new JButton("button 4");
JButton jButton5 = new JButton("button 5");
jp.add(jButton1, BorderLayout.NORTH); //Set the position of each button individually
jp.add(jButton2, BorderLayout.EAST);
jp.add(jButton3, BorderLayout.SOUTH);
jp.add(jButton4, BorderLayout.WEST);
jp.add(jButton5, BorderLayout.CENTER);
this.add(jp);
this.setVisible(true);
}
public static void main(String[] args) {
JFrame jFrame = new JFrameDemo2_2();
}
}
GridLayout //Grid layout, a way to layout in grid form
Example of grid layout:
package javaGUI;
import javax.swing.;
import java.awt.;
public class JFrameDemo2_3 extends JFrame {
public JFrameDemo2_3(){
this.setSize(500,300);
this.setLocationRelativeTo(null);
this.setTitle("login interface");
this.setIconImage(new ImageIcon("WeChat pictures_20211117191028.jpg").getImage());
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setResizable(false);
JPanel jp = new JPanel(new GridLayout(2,2)); //Use GridLayout() to create a grid layout with the desired number of rows and columns in parentheses
JButton jButton1 = new JButton("button 1");
JButton jButton2 = new JButton("button 2");
JButton jButton3 = new JButton("button 3");
JButton jButton4 = new JButton("button 4");
jp.add(jButton1);
jp.add(jButton2);
jp.add(jButton3);
jp.add(jButton4);
this.add(jp);
this.setVisible(true);
}
public static void main(String[] args) {
JFrame jFrame = new JFrameDemo2_3();
}
}
setLayout(null); //Custom position, that is, define the position of the component yourself
Example of custom layout:
package javaGUI;
import javax.swing.;
import java.awt.;
public class JFrameDemo2_4 extends JFrame {
public JFrameDemo2_4(){
this.setSize(500,300);
this.setLocationRelativeTo(null);
this.setTitle("login interface");
this.setIconImage(new ImageIcon("WeChat pictures_20211117191028.jpg").getImage());
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setResizable(false);
this.setLayout(null);
//To customize the layout, you need to use the original window for layout
Container container = this.getContentPane();
JButton jButton2 = new JButton("button 2");
//Two sides and two lines is how the original window was created
jButton2.setLocation(100,50);
jButton2.setSize(80,50);
container.add(jButton2);
this.setVisible(true);
}
public static void main(String[] args) {
JFrame jFrame = new JFrameDemo2_4();
}
}
Introduction to common components of Java GUI
Notice:
All components must be used after they are created and set up add()method added to the window,Otherwise it cannot be displayed
jp.add(jButton4); //Add the set button to the window
this.add(jp);
JLable( label) //Used to display text or pictures
JPanel jp = new JPanel();
jp.setLayout(new FlowLayout(FlowLayout.CENTER));
JLabel accountLabel = new JLabel("account");
accountLabel.setFont(new Font("Song Dynasty",Font.BOLD,20));
// accountLabel.setIcon(new ImageIcon("WeChat picture_20211117191028.jpg"));
jp.add(accountLabel);
The effect diagram is as follows:
JtextField (text box) // used to enter text
JTextField accountText = new JTextField(20);
jp.add(accountText);
The effect diagram is as follows:
JPasswordField (password box) // used to enter the password
JLabel passwordLabel = new JLabel("password");
passwordLabel.setFont(new Font("Song Ti",Font.BOLD,20));
jp.add(passwordLabel);
JPasswordField jPasswordField = new JPasswordField(20);
jp.add(jPasswordField);
The effect diagram is as follows:
JTextArea (multi-line text box) / used to enter multi-line text
JTextArea jTextArea = new JTextArea(5,20);
/ / Scroll the panel, a scroll bar can appear, so that the size of the multi-line text box does not change
JScrollPane jScrollPane = new JScrollPane(jTextArea);
jp.add(jScrollPane);
The effect diagram is as follows:
JMenuBar( menu bar) //Used to create a menu bar
JMenuBar jMenuBar = new JMenuBar();
JMenu( menu) //Used to create a menu
JMenu jMenu1 = new JMenu("File");
JMenu jMenu2 = new JMenu("Edit");
jMenuBar.add(jMenu1);
jMenuBar.add(jMenu2);
JMenuItem( menu item) //Used to create a menu item
JMenuItem jMenuItem = new JMenuItem("New");
jMenu1.add(jMenuItem);
Java GUI event handling
What we have written so far is only a graphical user interface, and there are no special functions. To achieve certain functions, event processing must be performed.
When the user interacts with GUI components, events are generated, such as: pressing a button, clicking the mouse, etc.
1. Event handling ideas:
A source (event source) produces an event (event object) and sends it to a listener, the listener simply waits until it receives an event, and once the event is accepted, the listener will process the events
An event source must register listeners so that listeners can receive notifications about a specific event
2. Common event handling methods:
Add event listener to button
jButton1.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
String account = jButton1.getText();
String password = new String(jPasswordField.getPassword());
System.out.println(account);
System.out.println(password);
}
});
Add event listener for mouse
//add mouse event
jButton1.addMouseListener(new MouseAdapter() { //Adapter is the adapter for you. Using this method, you can choose the event type that needs to be rewritten without overriding all the methods.
@Override
public void mouseClicked(MouseEvent e) {
System.out.println("mouse click");
}
@Override
public void mousePressed(MouseEvent e) {
System.out.println("mouse down");
}
@Override
public void mouseReleased(MouseEvent e) {
System.out.println("mouse release");
}
@Override
public void mouseEntered(MouseEvent e) {
System.out.println("mouse in");
}
@Override
public void mouseExited(MouseEvent e) {
System.out.println("mouse out");
}
});
Add event listener for keyboard
//add keyboard event
jTextField.addKeyListener(new KeyAdapter() {
@Override
public void keyTyped(KeyEvent e) {
System.out.println("Keyboard input"+e.getKeyCode());
}
@Override
public void keyPressed(KeyEvent e) {
System.out.println("keyboard pressed");
}
@Override
public void keyReleased(KeyEvent e) {
System.out.println("keyboard release");
}
});
Add event listener for reset button
//Add event listener for reset button
jButton2.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
jTextField.setText("");
jPasswordField.setText("");
}
})