Cách tạo giao diện trong Java pot

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 n

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.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() {

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!”

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

Để 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 2 chúng ta sẽ học về BoxLayout

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

BoxLayout : X_AXIS & Y_AXIS

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

BoxLayout cho phép add các control trên mỗi dòng hoặc mỗi cột, tại mỗi vị trí add nó chỉ chấp nhận 1 control, do đó muốn xuất hiện nhiều control tại một vị trí thì bạn nên add vị trí đó là 1 JPanel rồi sau đó add các control khác vào JPanel này, BoxLayout có 2 hằng số để xác định hướng xuất hiện của

control: BoxLayout.X_AXIS cho phép add các control theo hướng từ trái qua phải, BoxLayout.Y_AXIS cho phép add các control theo hướng từ trên xuống dưới BoxLayout khác biệt FlowLayout ở chỗ là nó sẽ không tự động xuống dòng khi hết chỗ chứa, tức là các control sẽ bị che khuất nếu như thiếu không gian chứa nó

importjava.awt.*;import javax.swing.*;

public class MyBoxLayout extends JFrame

{

private static final long serialVersionUID = 1L;

public MyBoxLayout(String title)

{

super(title);

}

public void doShow()

{

setSize(400,200);

setLocationRelativeTo(null);

setDefaultCloseOperation(EXIT_ON_CLOSE);

addControl(); //gọi hàm AddControl

setVisible(true);

}

public void addControl()

{

JPanel pnBox=new JPanel();

pnBox.setLayout(new BoxLayout(pnBox, BoxLayout.X_AXIS));

JButton btn1=new JButton(“BoxLayout”);

btn1.setForeground(Color.RED);

Font font=new Font(“Arial”,Font.BOLD | Font.ITALIC,25);

btn1.setFont(font);

pnBox.add(btn1);

JButton btn2=new JButton(“X_AXIS”);

btn2.setForeground(Color.BLUE);

btn2.setFont(font);

pnBox.add(btn2);

JButton btn3=new JButton(“Y_AXIS”);

btn3.setForeground(Color.ORANGE);

btn3.setFont(font);

pnBox.add(btn3);

Container con=getContentPane();

con.add(pnBox);

}

public static void main(String[] args) {

MyBoxLayout box=new MyBoxLayout(“Học BoxLayout”);

box.doShow();

}

}

pnBox.setLayout(new BoxLayout(pnBox, BoxLayout.X_AXIS)); dùng để thiết lập layout cho JPanel, ở đây

ta thiết lập BoxLayout.X_AXIS tức là các control xuất hiện theo chiều từ trái qua phải

Font font=new Font(“Arial”,Font.BOLD | Font.ITALIC,25); tạo đối tượng font với Font chữ là Arial, vừa in đâm và in nghiêng và kích thước là 25px

btn1.setFont(font); thiết lập font chữ cho button btn1

btn2.setForeground(Color.BLUE); thiết lập màu chữ cho btn2

Như đã nói BoxLayout sẽ không tự động xuống dòng khi hết khoảng không gian chứa control, nên các bạn có thể thấy trong hình dưới đây khi Tôi thu hẹp kích thước cửa sổ lại:

Trong đoạn lệnh pnBox.setLayout(new BoxLayout(pnBox, BoxLayout.X_AXIS)); nếu như bạn

đổi BoxLayout.X_AXIS thành BoxLayout.Y_AXIS thì các control sẽ được hiển thị như sau:

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

Để 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 3 chúng ta sẽ học về BorderLayout

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

BorderLayout

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

BorderLayout giúp chúng ta hiển thị các control theo 5 vùng chính theo hình dưới đây:

Nếu như không có 4 vùng : North, West, South, East Thì vùng Center sẽ tràn đầy cửa sổ, thông thường khi đưa các control JTable, JTree, ListView, JScrollpane… ta thường đưa vào vùng Center để nó có thể tự

co giãn theo kích thước cửa sổ giúp giao diện đẹp hơn

import java.awt.BorderLayout;

import java.awt.Color;

import java.awt.Container;

import java.awt.Dimension;

import java.awt.Font;

import javax.swing.JFrame;

import javax.swing.JLabel;

import javax.swing.JPanel;

public class MyBorderLayout extends JFrame

{

private static final long serialVersionUID = 1L;

public MyBorderLayout(String title)

{

setTitle(title);

}

public void doShow()

{

setSize(400,300);

setLocationRelativeTo(null);

setDefaultCloseOperation(EXIT_ON_CLOSE);

addControl();

setVisible(true);

}

public void addControl()

{

JPanel pnBorder=new JPanel();

pnBorder.setLayout(new BorderLayout());

Font ft=new Font(“Arial”, Font.BOLD|Font.ITALIC, 25); JPanel pnNorth=new JPanel();

pnNorth.setPreferredSize(new Dimension(0, 50)); JLabel lblTitleNorth=new JLabel(“North”);

pnNorth.add(lblTitleNorth);

lblTitleNorth.setForeground(Color.WHITE);

lblTitleNorth.setFont(ft);

pnBorder.add(pnNorth,BorderLayout.NORTH);

JPanel pnSouth=new JPanel();

pnSouth.setBackground(Color.RED);

pnSouth.setPreferredSize(pnNorth.getPreferredSize()); JLabel lblTitleSouth=new JLabel(“South”);

pnSouth.add(lblTitleSouth);

lblTitleSouth.setForeground(Color.WHITE);

lblTitleSouth.setFont(ft);

pnBorder.add(pnSouth,BorderLayout.SOUTH);

JPanel pnWest=new JPanel();

pnWest.setBackground(Color.BLUE);

pnWest.setPreferredSize(new Dimension(70, 0)); JLabel lblTitleWest=new JLabel(“West”,JLabel.CENTER); lblTitleWest.setFont(ft);

lblTitleWest.setForeground(Color.WHITE);

pnWest.setLayout(new BorderLayout());

pnWest.add(lblTitleWest,BorderLayout.CENTER); pnBorder.add(pnWest,BorderLayout.WEST);

JPanel pnEast=new JPanel();

pnEast.setPreferredSize(new Dimension(70, 0));

JLabel lblTitleEast=new JLabel(“East”,JLabel.CENTER);

lblTitleEast.setFont(ft);

lblTitleEast.setForeground(Color.WHITE);

pnEast.setLayout(new BorderLayout());

pnEast.add(lblTitleEast,BorderLayout.CENTER);

pnBorder.add(pnEast,BorderLayout.EAST);

JPanel pnCenter=new JPanel();

pnCenter.setBackground(Color.YELLOW);

pnCenter.setLayout(new BorderLayout());

JLabel lblTitleCenter=new JLabel(“Center”,JLabel.CENTER);

lblTitleCenter.setFont(ft);

pnCenter.add(lblTitleCenter,BorderLayout.CENTER);

pnBorder.add(pnCenter,BorderLayout.CENTER);

Container con=getContentPane();

con.add(pnBorder);

}

public static void main(String[] args) {

MyBorderLayout bor=new MyBorderLayout(“BorderLayout”);

bor.doShow();

}

}

Chúng ta có thể kết hợp FlowLayout , BoxLayout, BorderLayout để thiết kế giao diện, theo kinh nghiệm của Tôi thì chúng ta chỉ cần biết 3 Layout này là có thể thiết kế giao diện đẹp mắt được

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

Để 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 4 chúng ta sẽ học về CardLayout

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

CardLayout

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

CardLayout cho phép chia sẻ vị trí hiển thị của các control, tức là ứng với cùng 1 vị trí hiển thị đó thì ta có thể cho các control khác hiển thị tại những thời điểm khác nhau, mặc định control được add đầu tiên sẽ hiển thị

importjava.awt.*;import java.awt.event.*;

import javax.swing.*;

public class MyCardLayout extends JFrame{

private static final long serialVersionUID = 1L;

public MyCardLayout(String title)

{

super(title);

}

public void doShow()

{

setSize(400,300);

setLocationRelativeTo(null);

setDefaultCloseOperation(EXIT_ON_CLOSE);

addControl();

setVisible(true);

}

public void addControl()

{

JPanel pnBorder=new JPanel();

pnBorder.setLayout(new BorderLayout());

JPanel pnNorth=new JPanel();

JButton btnShowCard1=new JButton(“Show Card1″); JButton btnShowCard2=new JButton(“Show Card2″); pnNorth.add(btnShowCard1);

pnNorth.add(btnShowCard2);

pnBorder.add(pnNorth,BorderLayout.NORTH); final JPanel pnCenter=new JPanel();

pnCenter.setLayout(new CardLayout());

pnCenter.setBackground(Color.LIGHT_GRAY);

final JPanel pnCard1=new JPanel();

pnCard1.setBackground(Color.LIGHT_GRAY);

pnCard1.add(new JButton(“Hello “));

pnCard1.add(new JButton(“I’m Card1″));

final JPanel pnCard2=new JPanel();

pnCard2.setBackground(Color.PINK);

pnCard2.add(new JButton(“Hi “));

pnCard2.add(new JCheckBox(“CardLayout”));

pnCard2.add(new JButton(“I’m Card2″));

pnCenter.add(pnCard1,”mycard1″);

pnCenter.add(pnCard2,”mycard2″);

pnBorder.add(pnCenter,BorderLayout.CENTER);

Container con=getContentPane();

con.add(pnBorder);

btnShowCard1.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent arg0) {

CardLayout cl=(CardLayout)pnCenter.getLayout(); cl.show(pnCenter, “mycard1″);

}

});

btnShowCard2.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent arg0) {

CardLayout cl=(CardLayout)pnCenter.getLayout(); cl.show(pnCenter, “mycard2″);

}

});

}

public static void main(String[] args) {

MyCardLayout card=new MyCardLayout(“Demo CardLayout”);

card.doShow();

}

}

pnCenter.setLayout(new CardLayout()); để thiết lập pnCenter có layout là CardLayout

pnCenter.add(pnCard1,”mycard1″); thêm pnCard1 vào pnCenter

pnCenter.add(pnCard2,”mycard2″); them pnCard2 vào pnCenter

Mặc định thì pnCard1 sẽ được hiển thị, mỗi một card Tôi đặt tên lần lượt là mycard1 và mycard2, ta sẽ dựa vào 2 tên kiểu chuỗi này để hiển thị hay không hiển thị

Các bạn nhìn vào sự kiện lệnh cho nút btnShowCard1 và btnShowCard2:

CardLayout cl=(CardLayout)pnCenter.getLayout(); hàm getLayout để lấy về Layout sau đó ta ép qua kiểu CardLayout

cl.show(pnCenter, “mycard2″); gọi phương thức show của đối tượng CardLayout để hiển thị theo tên, ở đây ta muốn hiển thị card2 thì truyền tên mycard2 vào

Tôi có capture hình ảnh cho 2 trường hợp này:

Mặc định các bạn sẽ thấy Card1 hiển thị như hình bên dưới:

Bây giờ bạn click chuột vào nút Show Card2 bạn sẽ nhận được hình như bên dưới:

Ngoài ra các bạn có thể dùng JTabbedPane để thay thế cho CardLayout, JTabbedPane có giao diện đẹp mắt và thân thiện với người sử dụng, đoạn code dưới đây Tôi sẽ minh họa cho JTabbedPane:

import java.awt.*;

import javax.swing.*;

public class MytabbedControl extends JFrame {

private static final long serialVersionUID = 1L;

public MytabbedControl(String title)

{

super(title);

}

public void doShow()

{

setSize(400,300);

setLocationRelativeTo(null);

setDefaultCloseOperation(EXIT_ON_CLOSE);

addControl();

setVisible(true);

}

public void addControl()

JTabbedPane myTabled=new JTabbedPane();

JPanel pnTab1=new JPanel();

pnTab1.setBackground(Color.BLUE);

pnTab1.add(new JButton(“Tabbed 1″));

JPanel pnTab2=new JPanel();

pnTab2.setBackground(Color.ORANGE);

pnTab2.add(new JButton(“Tabbed 2″));

myTabled.add(pnTab1,”Tab1″);

myTabled.add(pnTab2,”Tab2″);

Container con=getContentPane();

con.add(myTabled);

}

public static void main(String[] args) {

MytabbedControl ui=new MytabbedControl(“My Tabbled”);

ui.doShow();

}

}

JTabbedPane myTabled=new JTabbedPane(); khai báo đối tượng JTabbedPane myTabled.add(pnTab1,”Tab1″); thêm 1 tab mới với tên là Tab1

myTabled.add(pnTab2,”Tab2″); thêm 1 tab mới với tên là Tab2

Các bạn xem hình ảnh minh họa JTabbedPane bên dưới:

Click qua Tab2 bạn sẽ thấy: