Java Swing – Các component cơ bản – phần 1

Leave a reply
3/5 - (2 votes)

Trong phần này chúng ta tìm hiểu một số component cơ bản gồm có JLabel, JCheckBox, JSlider, JComboBox, JProgressBar, và JToggleButton.

JLabel

JLabel được dùng để hiển thị text và ảnh, không thể bắt được sự kiện.

import java.awt.Color;
import java.awt.Container;
import java.awt.EventQueue;
import java.awt.Font;
import javax.swing.GroupLayout;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;


public class LabelEx extends JFrame {

    public LabelEx() {
        
        initUI();
    }
    
    private void initUI() {

        String lyrics =  "<html>It's way too late to think of" + 
        "<br>Someone I would call now" + 
        "<br>And neon signs got tired" + 
        "<br>Red eye flights help the stars out" + 
        "<br>I'm safe in a corner" + 
        "<br>Just hours before me" + 
        "</html>";
 
        JLabel label = new JLabel(lyrics);
        label.setFont(new Font("Serif", Font.PLAIN, 14));
        label.setForeground(new Color(50, 50, 25));

        Container pane = getContentPane();
        GroupLayout gl = new GroupLayout(pane);
        pane.setLayout(gl); 
        gl.setAutoCreateContainerGaps(true);

        gl.setHorizontalGroup(gl.createSequentialGroup()
                             .addComponent(label));

        gl.setVerticalGroup(gl.createParallelGroup()
                            .addComponent(label));

        pack();

        setTitle("Component Example");
        setLocationRelativeTo(null);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }
       
    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                LabelEx ex = new LabelEx();
                ex.setVisible(true);
            }
        });
    }
}

Chúng ta in lời bài hát lên cửa sổ, có một điều thú vị là chúng ta có thể dùng các tag trong HTML để tùy chỉnh phần text trong JLabel.

JLabel label = new JLabel(lyrics);
label.setFont(new Font("Serif", Font.PLAIN, 14));

Chúng ta tạo đối tượng JLabel, bạn có thể thiết lập kiểu font thông qua phương thức setFont() như trên.

pack();

Phương thức pack() thiết lập kích thước màn hình vừa đủ bao phủ các component.

Capture

JCheckBox

JCheckBox là lớp hỗ trợ tạo các checkbox. Chúng ta có thể dùng ActionListener hoặc ItemListener để lắng nghe sự kiện của JCheckBox, nhưng trong ví dụ này chúng ta sẽ dùng ItemListener.

import java.awt.Container;
import java.awt.EventQueue;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;
import javax.swing.GroupLayout;
import javax.swing.JCheckBox;
import javax.swing.JComponent;
import javax.swing.JFrame;

public class CheckBoxEx extends JFrame
        implements ItemListener {

    public CheckBoxEx() {
        
        initUI();
    }

    private void initUI() {

        JCheckBox cb = new JCheckBox("Show title", true);
        cb.addItemListener(this);

        Container pane = getContentPane();
        GroupLayout gl = new GroupLayout(pane);
        pane.setLayout(gl);
        gl.setAutoCreateContainerGaps(true);

        gl.setHorizontalGroup(gl.createParallelGroup()
                             .addComponent(cb));

        gl.setVerticalGroup(gl.createSequentialGroup()
                             .addComponent(cb));
        
        setSize(280, 200);
        setTitle("Component Example");
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
    
    @Override
    public void itemStateChanged(ItemEvent e) {
        
        int sel = e.getStateChange();
        
        if (sel==ItemEvent.SELECTED) {
            
            setTitle("Component Example");
        } else {
            
            setTitle("");
        }
    }           

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                CheckBoxEx ex = new CheckBoxEx();
                ex.setVisible(true);
            }
        });
    }
}

Chúng ta sẽ cho ẩn hoặc hiện tiêu đề cửa sổ tùy vào trạng thái của checkbox.

JCheckBox checkbox = new JCheckBox("Show title", true);

Đầu tiên chúng ta tạo đối tượng JCheckBox. Tham số true tức là mặc định checkbox sẽ được check.

cb.addItemListener(this);

Chúng ta gọi phương thức addItemListener() để gắn listener vào checkbox, ở đây listener chính là lớp chứa phương thức main() vì lớp này đã cài đặt giao diện ItemListener.

@Override
public void itemStateChanged(ItemEvent e) {
    
    int sel = e.getStateChange();
    
    if (sel==ItemEvent.SELECTED) {
        
        setTitle("JCheckBox");
    } else {
        
        setTitle("");
    }
}

Lớp cài đặt giao diện ItemListener sẽ phải override phương thức ảo  getStateChange(), ở đây chúng ta thiết lập lại tiêu đề cửa sổ tùy thuộc vào trạng thái của checkbox.

Capture

JSlider

JSlider hỗ trợ tạo slider, đây là một thanh trượt biểu diễn giá trị. Slider sử dụng listener là lớp ChangeListener với phương thức stateChanged().

import java.awt.Container;
import java.awt.EventQueue;
import javax.swing.GroupLayout;
import static javax.swing.GroupLayout.Alignment.CENTER;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class SliderEx extends JFrame {

    private JSlider slider;
    private JLabel lbl;
   
    public SliderEx() {
        
        initUI();
    }

    private void initUI() {                      
        
        slider = new JSlider(0, 100, 0);

        slider.addChangeListener(new ChangeListener() {
 
            @Override
            public void stateChanged(ChangeEvent event) { 
                lbl.setText(String.valueOf(slider.getValue()));
            }
        });

        lbl = new JLabel("0", JLabel.CENTER);

        Container pane = getContentPane();
        GroupLayout gl = new GroupLayout(pane);
        pane.setLayout(gl); 
 
        gl.setAutoCreateContainerGaps(true);
        gl.setAutoCreateGaps(true);
 
        gl.setHorizontalGroup(gl.createSequentialGroup()
            .addComponent(slider)
            .addComponent(lbl));

        gl.setVerticalGroup(gl.createParallelGroup(CENTER)
            .addComponent(slider)
            .addComponent(lbl)); 

        pack();
 
        setTitle("Example Component");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
    }    

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                SliderEx ex = new SliderEx();
                ex.setVisible(true);
            }
        });
    }
}

Chúng ta hiển thị một slider biểu diễn giá trị từ 0 đến 100 và 1 label để in giá trị hiện tại lên cửa sổ.

slider = new JSlider(0, 100, 0);

Đầu tiên chúng ta khởi tạo đối tượng JSlider, hai tham số đầu tiên là giá trị min và max, tham số thứ 3 là giá trị khởi tạo của slider.

slider.addChangeListener(new ChangeListener() {
...
});

Chúng ta gắn listener vào slider, listener này sẽ lắng nghe sự thay đổi của slider và cập nhật lại giá trị lên label.

Capture

JComboBox

Java Swing cung cấp lớp JComboBox hỗ trợ tạo combo box.

import java.awt.Container;
import java.awt.EventQueue;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;
import javax.swing.GroupLayout;
import static javax.swing.GroupLayout.Alignment.BASELINE;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JSlider;

public class ComboBoxEx extends JFrame
        implements ItemListener {

    private JLabel display;
    private JComboBox<String> box;
    private String[] distros;

    public ComboBoxEx() {

        initUI();        
    }

    private void initUI() {

        distros = new String[]{"Ubuntu", "Redhat", "Arch",
            "Debian", "Mint"};

        box = new JComboBox<>(distros);
        box.addItemListener(this);

        display = new JLabel("Ubuntu");
        
        Container pane = getContentPane();
        GroupLayout gl = new GroupLayout(pane);
        pane.setLayout(gl); 

        gl.setAutoCreateContainerGaps(true);
        gl.setAutoCreateGaps(true);

        gl.setHorizontalGroup(gl.createSequentialGroup()
            .addComponent(box)
            .addComponent(display));

        gl.setVerticalGroup(gl.createParallelGroup(BASELINE)
            .addComponent(box)
            .addComponent(display));

        pack();

        setTitle("Component Example"); 
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
        setLocationRelativeTo(null);
    }
    
    @Override
    public void itemStateChanged(ItemEvent e) {

        if (e.getStateChange() == ItemEvent.SELECTED) {
            display.setText(e.getItem().toString());
        }
    }

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                ComboBoxEx ex = new ComboBoxEx();
                ex.setVisible(true);
            }
        });
    }
}

Chúng ta hiển thị một combo box bao gồm các item là tên của một số bản phân phối khác nhau của hệ điều hành linux, một label hiển thị tên tùy theo item đang được chọn trong combo box.

distros = new String[] {"Ubuntu", "Redhat", "Arch", 
    "Debian", "Mint"};

Các item trong JComboBox được lưu trong một mảng string, tuy nhiên bạn có thể dùng các phương thức riêng của JComboBox để thêm các item vào.

box = new JComboBox<>(distros);
box.addItemListener(this);

Chúng ta khởi tạo một đối tượng JComboBox và gắn listener vào nó.

@Override
public void itemStateChanged(ItemEvent e) {
    
    if (e.getStateChange() == ItemEvent.SELECTED) {
        display.setText(e.getItem().toString());
    }
}

Phương thức itemStateChanged() sẽ được gọi mỗi khi một item khác được chọn trong combobox, bên trong chúng ta sẽ cho thay đổi giá trị của label tùy thuộc vào item trong combobox.Capture

JProgressBar

“Progress Bar” được dùng để biểu diễn tiến trình hoạt động của một công việc nào đó. Java Swing cung cấp lớp JProgressBar để tạo các progress bar.

import java.awt.Container;
import java.awt.EventQueue;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.AbstractAction;
import javax.swing.GroupLayout;
import static javax.swing.GroupLayout.Alignment.CENTER;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JProgressBar;
import javax.swing.Timer;
public class ProgressBarEx extends JFrame {

    private Timer timer;
    private JProgressBar progressBar;
    private JButton button;

    public ProgressBarEx() {
        
        initUI();
    }

    private void initUI() {

        progressBar= new JProgressBar();
        progressBar.setStringPainted(true);
        
        button= new JButton("Start");
        button.addActionListener(new ClickAction());

        timer = new Timer(50, new UpdateBarListener());

        Container pane = getContentPane();
        GroupLayout gl = new GroupLayout(pane);
        pane.setLayout(gl); 

        gl.setAutoCreateContainerGaps(true);
        gl.setAutoCreateGaps(true);

        gl.setHorizontalGroup(gl.createSequentialGroup()
            .addComponent(progressBar)
            .addComponent(button));

        gl.setVerticalGroup(gl.createParallelGroup(CENTER)
            .addComponent(progressBar)
            .addComponent(button)); 

        pack();
        
        setTitle("Component Example");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
    }       
    
    private class UpdateBarListener implements ActionListener {

        @Override
        public void actionPerformed(ActionEvent e) {
            
                int val = progressBar.getValue();
                
                if (val >= 100) {
                    
                    timer.stop();
                    button.setText("End");
                    return;
                }

                progressBar.setValue(++val);           
        }
    }
    
    private class ClickAction extends AbstractAction {

        @Override
        public void actionPerformed(ActionEvent e) {
            
                if (timer.isRunning()) {
                    
                    timer.stop();
                    button.setText("Start");

                } else if (!"End".equals(button.getText())) {
                    
                    timer.start();
                    button.setText("Stop");
                }       
        }
    }

    public static void main(String[] args) {
        
        EventQueue.invokeLater(new Runnable() {
            
            @Override
            public void run() {
                ProgressBarEx ex = new ProgressBarEx();
                ex.setVisible(true);
            }
        });
    }
}

Chúng ta hiển thị một progress bar và một button. Button có tác dụng kích hoạt hoặc dừng progress bar.

progressBar = new JProgressBar();
progressBar.setStringPainted(true);

Chúng ta khởi tạo đối tượng JProgressBar, mặc định thì giá trị khởi tạo là từ 0 đến 100. Phương thức setStringPainted(true) có tác dụng hiển thị số % trong progressbar.

timer = new Timer(50, new UpdateBarListener());

Chúng ta tạo một đối tượng Timer có delay là 50ms và gắn một ActionListener vào timer này,

private class UpdateBarListener implements ActionListener {

    @Override
    public void actionPerformed(ActionEvent e) {
        
            int val = progressBar.getValue();
            
            if (val >= 100) {
                
                timer.stop();
                button.setText("End");
                return;
            }

            progressBar.setValue(++val);           
    }
}

Bên trong listener chúng ta lấy giá trị hiện tại và tăng lên trong progress bar. Nếu giá trị đạt đến 100 thì dừng timer và thay đổi text bên trong button.

private class ClickAction extends AbstractAction {

    @Override
    public void actionPerformed(ActionEvent e) {
    
        if (timer.isRunning()) {
        
            timer.stop();
            button.setText("Start");

        } else if (!"End".equals(button.getText())) {
        
            timer.start();
            button.setText("Stop");
        }       
    }
}

Button cũng được gắn một listener làm công việc dừng hoặc chạy tiếp timer đồng thời thay đổi giá trị trên button.

Untitled

JToggleButton

JToggleButton cho phép tạo các nút button có 2 trạng thái là bật hoặc tắt, giống như chech box vậy nhưng có hình dạng như button.

import java.awt.Color;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.GroupLayout;
import static javax.swing.GroupLayout.Alignment.CENTER;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JToggleButton;
import static javax.swing.LayoutStyle.ComponentPlacement.UNRELATED;
import javax.swing.border.LineBorder;

public class ToggleButtonEx extends JFrame
        implements ActionListener {

    private JToggleButton redButton;
    private JToggleButton greenButton;
    private JToggleButton blueButton;
    private JPanel display;

    public ToggleButtonEx() {

        initUI();
    }

    private void initUI() {

        redButton = new JToggleButton("red");
        redButton.addActionListener(this);

        greenButton = new JToggleButton("green");
        greenButton.addActionListener(this);

        blueButton = new JToggleButton("blue");
        blueButton.addActionListener(this);

        display = new JPanel();
        display.setPreferredSize(new Dimension(120, 120));
        display.setBorder(LineBorder.createGrayLineBorder());
        display.setBackground(Color.black);

        Container pane = getContentPane();
        GroupLayout gl = new GroupLayout(pane);
        pane.setLayout(gl); 
 
        gl.setAutoCreateContainerGaps(true);
        gl.setAutoCreateGaps(true);
 
        gl.setHorizontalGroup(gl.createSequentialGroup()
            .addGroup(gl.createParallelGroup()
            .addComponent(redButton)
            .addComponent(greenButton)
            .addComponent(blueButton))
            .addPreferredGap(UNRELATED)
            .addComponent(display));

        gl.setVerticalGroup(gl.createParallelGroup(CENTER)
            .addGroup(gl.createSequentialGroup()
            .addComponent(redButton)
            .addComponent(greenButton)
            .addComponent(blueButton)) 
            .addComponent(display)); 
 
        gl.linkSize(redButton, greenButton, blueButton);

        pack(); 
 
        setTitle("Component Example");
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }    

    @Override
    public void actionPerformed(ActionEvent e) {

        Color color = display.getBackground();
        int red = color.getRed();
        int green = color.getGreen();
        int blue = color.getBlue();

        if (e.getActionCommand().equals("red")) {
            if (red == 0) {
                red = 255;
            } else {
                red = 0;
            }
        }

        if (e.getActionCommand().equals("green")) {
            if (green == 0) {
                green = 255;
            } else {
                green = 0;
            }
        }

        if (e.getActionCommand().equals("blue")) {
            if (blue == 0) {
                blue = 255;
            } else {
                blue = 0;
            }
        }

        Color setCol = new Color(red, green, blue);
        display.setBackground(setCol);
    }

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                ToggleButtonEx ex = new ToggleButtonEx();
                ex.setVisible(true);
            }
        });
    }
}

Chúng ta tạo 3 JToggleButton đại diện cho 3 màu đỏ, xanh lá, xanh lam và một JPanel để hiển thị màu. Button nào được bật thì màu tương ứng sẽ tham gia vào quá trình trộn màu để hiển thị trên panel.

redButton = new JToggleButton("red");
redButton.addActionListener(this);

Chúng ta tạo từng đối tượng JToggleButton, thiết lập text cho chúng và gắn listener vào.

Color color = display.getBackground();
int red = color.getRed();
int green = color.getGreen();
int blue = color.getBlue();

Lấy giá trị RGB từ JPanel.

if (e.getActionCommand().equals("red")) {
    if (red == 0) {
        red = 255;
    } else {
        red = 0;
    }
}

Bên trong listener, chúng ta xác định xem button nào đang được bật để thiết lập giá trị màu tương ứng.

Color setCol = new Color(red, green, blue);
display.setBackground(setCol);

Sau đó trộn chúng lại trong một đối tượng Color và đưa vào JPanel thông qua phương thức setBackground().

Capture
0 0 votes
Article Rating
Subscribe
Thông báo cho tôi qua email khi
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments