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 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:

2 responses

  1. thật ít website nói chi tiết từng phần như này! Thank you

  2. Cho e hỏi setPreferredSize(new Dimesion(800,600)); có nghĩa là gì

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

%d bloggers like this: