Cách tạo giao diện trong Java – phần 1 : FlowLayout


Để tạo được giao diện trong Java, trước tiên các bạn phải biết được LayoutManager trong Java, nó giống như là bản vẽ kỹ thuật cho một ngôi nhà.

Có nhiều loại LayoutManager, chẳng hạn như:

  •  FlowLayout  
  •  BoxLayout
  •  BorderLayout
  •  CardLayout
  •  GridBagLayout
  •  GridLayout
  •  GroupLayout
  •  SpringLayout

Trong phần 1 chúng ta sẽ học về FlowLayout

======================================================================

FlowLayout

======================================================================

FlowLayout cho phép add các control trên cùng một dòng, khi nào hết chỗ chứa nó sẽ tự động xuống dòng, ta cũng có thể điều chỉnh hướng xuất hiện của control. Mặc định khi một JPanel được khởi tạo thì bản thân lớp chứa này sẽ có kiểu Layout là FlowLayout. Bạn tưởng tượng rằng JPanel giống như cái thùng đựng đồ vật, từng đồ vật là các control ví dụ như trong thùng đựng đồ vật ta có thể đựng Sách, bút, giày, dép…Ta nên tạo JPanel để add các control vào JPanel để việc quản lý control được dễ dàng hơn.

Đoạn code dưới đây sẽ minh họa về FlowLayout, Tôi sẽ giải thích chi tiết từng dòng lệnh:

import java.awt.Color;import java.awt.Container;import java.awt.FlowLayout;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JPanel;

public class MyFlowLayout extends JFrame{

private static final long serialVersionUID = 1L;

public MyFlowLayout(String title)

{

setTitle(title);

JPanel pnFlow=new JPanel();

pnFlow.setLayout(new FlowLayout());

pnFlow.setBackground(Color.PINK);

JButton btn1=new JButton(“FlowLayout”);

JButton btn2=new JButton(“Add các control”);

JButton btn3=new JButton(“Trên 1 dòng”);

JButton btn4=new JButton(“Hết chỗ chứa”);

JButton btn5=new JButton(“Thì xuống dòng”);

pnFlow.add(btn1);

pnFlow.add(btn2);

pnFlow.add(btn3);

pnFlow.add(btn4);

pnFlow.add(btn5);

Container con=getContentPane();

con.add(pnFlow);

}

public static void main(String[] args)

{

MyFlowLayout myUI=new MyFlowLayout(“Demo FlowLayout”);

myUI.setSize(600, 100);

myUI.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

myUI.setLocationRelativeTo(null);

myUI.setVisible(true);

}

}

Khi chạy giao diện lên chúng ta sẽ thấy như hình bên dưới

Mặc định các control sẽ nằm trên cùng 1 dòng, nếu như không đủ chỗ chứa thì những control đó sẽ tự động rơi xuống dòng khác

Container con=getContentPane(); dùng để lấy lớp chứa của cửa sổ windows

con.add(pnFlow); dùng để add lớp chứa JPanel vào cửa sổ

Trong hàm main bạn để ý:

myUI.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); thiết lập sự kiện đóng cửa sổ windows khi người sử dụng click chọn vào dấu “X” ở góc phải trên cùng cửa sổ

myUI.setLocationRelativeTo(null); thiết lập cửa sổ xuất hiện ở giữa màn hình desktop

myUI.setVisible(true); cho phép cửa sổ hiển thị ra.

– Nếu muốn gán sự kiện click chuột cho button 5 thì bạn có nhiều cách gán sự kiện, Tôi sẽ hướng dẫn 1 cách:

ngay bên dưới dòng lệnh JButton btn5=new JButton(“Thì xuống dòng”); bạn thêm vào lệnh sau:

btn5.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent arg0) {
// TODO Auto-generated method stub
JOptionPane.showMessageDialog(null, “Button 5 được click!”);
}
});
Ở đây đơn giản Tôi hiển thị 1 messagebox thông báo là “Button 5 được click!”

9 responses

  1. Hay ghê!

  2. Ban tap chung vao chi moi nguoi cach tao giao dien di nha

  3. hay,mình đang học cái này

  4. em cảm ơn thầy ạ

  5. hay quá xá… thanks so much.. 😀

  6. Cảm ơn thầy. Bài viết của thầy bài nào cũng hay và thực tế. Cũng may la mình dc học thầy chứ thầy khác chắc giờ không biết gì luôn .
    Thầy cố gắng bỏ chút thời gian viết thêm nhiều bài nữa thầy nhé.

  7. Cảm ơn bạn, dễ hiểu, mình đang cần tìm.

  8. Thầy tao em một cáj đuơc khog ạk?

  9. Hay quá thầy. Em thấy rễ hiểu nắm. Em cám ơn thầy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s