Bài giảng Lập trình hướng đối tượng (dùng Java) Chương 5 Trần Minh Thái (2017)

Bài giảng Lập trình hướng đối tượng (dùng Java) Chương 5 Lập trình giao diện với Java cung cấp cho người học các kiến thức Giới thiệu về lập trình giao diện, nguyên lý xử lý sự kiện trong Java, các thành phần giao diện cơ bản trong AWT, tổ chức giao diện với Layout Manager,... Mời các bạn cùng tham khảo.

Nội dung

1 Giới thiệu về lập trình giao diện

2 Nguyên lý xử lý sự kiện trong Java

3 Các thành phần giao diện cơ bản trong AWT

4 Tổ chức giao diện với Layout Manager

5 Lập trình Applet

6 Lập trình ứng dụng với SWING

Giới thiệu về lập trình giao diện

Tập hợp các lớp java cung cấp hỗ trợ thiết kế, xây dựng GUI (Graphic User Interface) bao gồm 2 thư viện:

• awt (java.awt.*): lớp cơ bản lập trình GUI, được phát triển bởi IBM

• swing (javax.swing.*): dễ dàng và mềm dẻo hơn trong lập trình GUI

Giới thiệu AWT

• AWT viết tắt của Abstract Windowing Toolkit

• AWT là tập hợp các lớp Java cho phép chúng ta tạo một GUI.

• Cung cấp các mục khác nhau để tạo hoạt động và hiệu ứng GUI

– import java.awt.*;

– import java.awt.event.*;

Giới thiệu AWT

• java.awt gồm các lớp GUI cơ bản

• Các lớp Container – lớp chứa (Frame, Panel, Dialog, ScollPanel)

• Các lớp Component (như Button, TextComponent, Label)

• Các lớp quản lý layout(FlowLayout, BorderLayout, GridLayout)

• Các lớp đồ họa tùy biến(Graphics, Color, Font)

Giới thiệu AWT

• java.awt.event gồm các lớp xử lý sự kiện trên giao

AWTEvent Font

FontMetrics

Component Graphics Object Color

Choice

Container Panel Applet

Frame Dialog FileDialog

Window TextField TextArea

MenuComponent MenuItem

MenuBar

Menu Scrollbar

LayoutManager

Nguyên tắc xây dựng GUI

1 Lựa chọn một container: Frame, Window, Dialog,

Applet, …

2 Tạo các control: (buttons, text areas, list, choice,

checkbox, )

3 Đưa các control vào vùng chứa

4 Sắp xếp các control trong vùng chứa (Layout)

5 Thêm các xử lý sự kiện (Listeners)

Container và Component

• Container: chứa các component, có thể vẽ và tô màu

• Bản thân container cũng là một component

• Một container có thể chứa các container khác

• Phương thức add(Component): thêm một component vào container

• Component: là đối tượng cơ bản tạo nên giao diện

• Cho phép người dùng tương tác với chương trình

Ví dụ

width screen width

Top-level Container

• Frame: cửa sổ chính của giao diện chương trình

• Xây dựng cửa sổ chương trình bằng cách kế thừa lớp Frame hoặc kết tập 1 đối tượng Frame

• Kế thừa để sử dụng ngay các thành viên của Frame

• Dialog: cửa sổ pop-up được sử dụng để tạo ra các tương tác nằm ngoài cửa sổ chính

• Applet: sử dụng trên xây dựng chương trình chạy trên trình duyệt Web

Xử lý sự kiện

• Người dùng tương tác với chương trình qua giao diện

• Chương trình phải nghe được các sự kiện trên giao diện để thực hiện hành động tương ứng

• Ví dụ: nhập liệu, nhấn phím Enter, nhấp chuột, đóng cửa sổ,

• Mỗi nguồn sẽ đăng ký các bộ nghe sự kiện khác nhau

• Khi có sự kiện nào đó xảy ra từ nguồn, phương thức

xử lý sự kiện (event handler) trên bộ nghe sự kiện sẽ

được gọi để xử lý

Xử lý sự kiện

WindowListener

public interface WindowListener{

public void windowClosing(WindowEvent evt);

public void windowOpened(WindowEvent evt);

public void windowClosed(WindowEvent evt);

public void windowActivated(WindowEvent evt);public void windowDeactivated(WindowEvent evt);public void windowIconified(WindowEvent evt);public void windowDeiconified(WindowEvent evt);}

MouseListener

public interface MouseListener {

public void mousePressed(MouseEvent evt); public void mouseReleased(MouseEvent evt); public void mouseClicked(MouseEvent evt); public void mouseEntered(MouseEvent evt); public void mouseExited(MouseEvent evt); }

KeyListener

public interface KeyListener {

public void keyPressed(KeyEvent evt); public void keyReleased(KeyEvent evt); public void keyTyped(MouseEvent evt); }

• Xác định nguồn phát sinh sự kiện

Kiểu component tên đối tượng.getSource()

java.awt.Frame

• Frame kế thừa từ Window, nó có thể nghe các sự kiện

xảy ra trên cửa sổ khi cài đặt giao tiếp WindowListener

• Các ứng dụng độc lập thường tạo ra cửa sổ kế thừa từ lớp Frame

super("Vi du ve Frame");

• Panel có bố cục mặc định là FlowLayout

Panel(BorderLayout )

Frame(BorderLayout )

myPanel=new Panel();

this.add(myPanel);

java.awt.Dialog

• Là một cửa sổ, thường dùng để nhập hoặc hiển thị thông tin với người dung, bố cục mặc định là BorderLayout

• Hai loại hộp thoại

• Modal: Phải đóng hộp thoại trước khi chuyển sang cửa

sổ khác

• Modaless: Có thể giữ nguyên hộp thoại và chuyển sang cửa sổ khác

public static void main(String []args){

ViDuDialog vd= new ViDuDialog();

vd.setVisible(true);

}

}

Thêm đối tượng component

1 Khai báo đối tượng component cần thêm

2 Khởi tạo đối tượng với các phương thức khởi tạo phù

hợp

3 Xác định container chứa component này

4 Sử dụng phương thức add (aComponent) để thêm

component vào container

java.awt.Label

• Label dùng để trình bày một chuỗi văn bản ra màn hình

• Một số phương thức của Label:

• public Label(); // tạo nhãn

• public Label(String s); // tạo nhãn với nội dung s

• public Label(String s, int align); // tạo và canh lề

• void setText(String s); // đặt nội dung nhãn

• void setAlignment(int align); // canh lề nhãn

•

Ví dụ Label

import java.awt.Frame;

import java.awt.Label;

public class ViDuLabel {

public static void main(String []args) {

Frame myFrame = new Frame("Frame co chua Label"); myFrame.setSize(300, 200);

Label myLabel = new Label();

myLabel.setText(“Day la Label");

java.awt.Button

• Một số phương thức của Button

• Button(); // tạo nút nhấn

• Button(String s); // tạo nút nhấn có tên s

• void setLabel(String s); // đổi tên nút

• String getLabel(); // lấy tên nút nhấn

• Để lắng nghe sự kiện nhấn nút ta cần cài đặt giao tiếp

ActionListener

this.add(myButton);

this.setVisible(true);

myButton.addActionListener(this);

}

public static void main(String[] args) {

ViDuButton vd = new ViDuButton();

vd.setVisible(true);

}

}

– void setEchoChar(char c); // đặt kí tự hiển thị

• Đối tượng nghe cần cài đặt 2 giao tiếp

– ActionListener

– TextListener

• Cài đặt phương thức textValueChanged();

public class ViDuTextField extends Frame

implements ActionListener, TextListener { TextField myTextField;

public ViDuTextField(){

super("Frame co Text Field");

this.setSize(300, 200);

myTextField = new TextField(30);

this.add(myTextField);

myTextField.addTextListener(this);

myTextField.addActionListener(this);

}

Ví dụ Text Field

public static void main(String []args) {

ViDuTextField vd = new ViDuTextField(); vd.setVisible(true);

• Choice(); // khởi tạo

• void addItem(String s); // thêm item là s

• String getItem(int index);// lấy item có chỉ số index

• String getSeclectedItem(); // trả về item được chọn

• int getSelectedIndex(); // trả về index của item được chọn

• Lớp nghe cài đặt giao tiếp ItemListener

• Cài đặt phương thức itemStateChanged( )

public ViDuChoice() {

super("Frame co lua chon");

this.setSize(300, 200);

myChoice = new Choice();

myChoice.addItem("Item1");

myChoice.addItem("Item2");

myChoice.addItem("Item3");

myChoice.addItemListener(this);

this.add(myChoice);

}

Ví dụ Choice

public static void main(String[] args) {

ViDuChoice vd = new ViDuChoice();

• Checkbox( ); // khởi tạo

• void setLabel(Strings); // đặt nhãn mới

• booleangetState(); // lấy trạng thái hiện tại

• Lớp nghe cài đặt giao tiếp ItemListener

• Cài đặt phương thức itemStateChanged( )

Ví dụ Checkbox

public static void main(String []args) {

ViDuCheckBox vd = new ViDuCheckBox(); vd.setVisible(true);

Radio Button

• Các Checkbox có thể được đặt trong một CheckboxGroup

để tạo ra các Radio Button

• Chỉ cho phép chọn 1 tuỳ chọn trong nhóm

this.myGroup = new CheckboxGroup();

this.myRadio1 = new Checkbox("Nam",myGroup, true); this.myRadio2 = new Checkbox("Nu",myGroup, false); this.add(myRadio1);

this.add(myRadio2);

myRadio1.addItemListener(this);

myRadio2.addItemListener(this);

this.setLayout(new GridLayout(1, 2));

}

public static void main(String[] args) {

ViDuRadioButton vd = new ViDuRadioButton(); vd.setVisible(true);

}

@Override

public void itemStateChanged(ItemEvent e) {

//Định nghĩa xử lý thay đổi lựa chọn

}

}

– List(); // khởi tạo

– List(int items, boolean ms); // cấu tử mở rộng

– String getSeclectedItem(); // lấy lại thành phần được chọn

• Lớp nghe cài đặt giao tiếp ItemListener và/hoặc

ActionListener

public class ViDuList extends Frame

implements ItemListener, ActionListener { List myList;

public ViDuList(){

super("Frame co chua list");

this.setSize(300, 200);

myList = new List(3);

myList.add("List 1");

myList.add("List 2");

myList.add("List 3");

this.add(myList);

myList.addItemListener(this);

myList.addActionListener(this);

}

public static void main(String []args){

ViDuList vd=new ViDuList();

vd.setVisible(true);

}

}

FlowLayout

• Các component được sắp xếp theo thứ tự từ trái sang phải và từ trên xuống dưới

• Các component có kích thước tuỳ chỉnh

• Nếu chiều rộng của Container không đủ chỗ cho các component thì tự động tạo ra một dòng mới

• Thường được dùng để sắp xếp các button trong 1 Panel

• Có thể điều chỉnh khoảng cách giữa các component

Ví dụ

this.setLayout(new FlowLayout(FlowLayout.CENTER,

20, 10));//Canh giữa, cách ngang 20, dọc 10 myButton = new Button[10];

for (int i = 0; i < 10; i++) {

myButton[i] = new Button("Button " + (i + 1)); this.add(myButton[i]);

}

}

public static void main(String[] args) {

ViDuFlowLayout vd = new ViDuFlowLayout();

vd.setVisible(true);

}

}

• Không cần phải gắn component vào cho tất cả các vùng

BorderLayout

• Các component ở vùng NORTH và SOUTH có chiều cao tùy ý nhưng có chiều rộng đúng bằng chiều rộng vùng chứa

• Các component ở vùng EAST và WEST có chiều rộng tùy ý nhưng có chiều cao đúng bằng chiều cao vùng chứa.

• Các component ở vùng CENTER có chiều cao và chiều rộng phụ thuộc vào các vùng xung quanh

Ví dụ BorderLayout

Button leftButton, rightButton, topButton, bottomButton,

centerButton;

super("Vi du Border Layout");

this.setSize( 500 , 300 );

this.setLayout(new BorderLayout( 20 , 10 ));

topButton = new Button("Top");

bottomButton = new Button("Bottom");

leftButton = new Button("Left");

rightButton = new Button("Right");

centerButton = new Button("Center");

this.add("North", topButton);

this.add("South", bottomButton);

this.add("West", leftButton);

this.add("East", rightButton);

this.add("Center", centerButton);

}

ViDuBorderLayout vd = new ViDuBorderLayout();

vd.setVisible(true);

}

}

GridLayout

• Bộ trình bày tạo một khung lưới vô hình với các ô bằng nhau

• Các đối tượng sẽ đặt vừa kích thước với từng ô

• Thứ tự sắp xếp từ trái qua phải và từ trên xuống dưới

Ví dụ GridLayout

for(int i=0; i<5; i++){

myButton[i]=new Button("Button " + (i+1)); this.add(myButton[i]);

}

this.add(myCheckbox);

this.add(myText);

this.add(myList);

}

public static void main(String[] args) {

ViDuGridLayout vd = new ViDuGridLayout();

vd.setVisible(true);

}

}

GridBagLayout

• Các componet sẽ được trình bày trên 1 khung lưới vô hình

• Các đối tượng có thể là 2, 3, … ô hay nhiều hơn tùy theo các

ràng buộc được chỉ định thông qua đối tượng GridBagConstraints

• gridx, gridy: vị trí ô sẽ đưa đối tượng con vào

• gridwidth, gridheight: xác định số ô cho đối tượng

• Insets: khoảng cách biên phân cách theo 4 chiều (trên, dưới,

trái, phải)

• weightx, weighty: kích thước của đối tượng

Ví dụ GridBagLayout

myButton = new Button[6];

for(int i=0; i<6; i++){

myButton[i]=new Button("Button " + (i+1));

cst.gridx = 2; cst.gridy= 0;

cst.gridx =0; cst.gridy=1;

for(int i=0; i<6; i++){

this.add(myButton[i]);

}

}

public static void main(String[] args) {

ViDuGridBagLayout vd = new ViDuGridBagLayout(); vd.setVisible(true);

}

}

• Định vị và kích thước cho component

• public void setLocation(Point p)

• public void setSize(Dimension p)

• public void setBounds(Rectangle r)

Ví dụ NullLayout

public class ViDuNullLayout extends Frame {

Button myButton1, myButton2;

myButton2 = new Button("Button 2");

myButton2.setSize(new Dimension(200, 30)); myButton2.setBounds(50, 200, 200, 30);

this.add(myButton1);

this.add(myButton2);

}

public static void main(String[] args) {

ViDuNullLayout vd = new ViDuNullLayout(); vd.setVisible(true);

}

}

• 1 ô xuất kết quả (không cho phép nhập)

• Các nút nhấn: cộng, trừ, nhân, chia và thoát chương trình

!!!Đối với phép chia: nếu số chia = 0 thì hiển thị hộp thoại

thông báo lỗi

Bài tập về nhà

Thiết kế giao diện và viết chương trình giả lập phần mềm calculator

Menubar

Dùng để chứa menu, các phương thức

• Menubar(): khởi tạo

• Add(Menu): thêm menu vào menubar

Gắn menu vào frame

• Đối tượng frame.setMenuBar(đối tượng menu);

Menu và PopupMenu

Các phương thức:

• Menu(String): khởi tạo menu

• add(MenuItem): thêm một item vào menu

• add(Menu): thêm một menu con vào menu đã có

• addSeparator(): thêm đường ngăn cách menu

Xử lý sự kiện: ActionEvent, ActionListioner

MenuItem

Các phương thức:

• MenuItem(String): khởi tạo

• CheckboxMenuItem(String): khởi tạo menu dạng checkbox

• getState(): trạng thái checkbox menu

• enable()

• disable(): làm mờ

Xử lý sự kiện: ActionEvent, ActionListener

Ví dụ MenuBar

myMenuBar = new MenuBar();

myMenu = new Menu("File");

this.setMenuBar(myMenuBar);

myMenuBar.add(myMenu);

myMenu.add(new MenuItem("Open "));

myMenu.add(new MenuItem("Save "));

myMenu.addSeparator();

myMenu.add(new MenuItem(("Exit")));

myMenu.addActionListener(this);

public static void main(String []args){

ViDuMenuBar vd = new ViDuMenuBar();

vd.setVisible(true);

}

}

Ví dụ PopupMenu

myMenu = new PopupMenu("Popup menu");

myMenu.add(new MenuItem("Copy "));

myMenu.add(new MenuItem("Cut "));

myMenu.addSeparator();

myMenu.add(new MenuItem(("Paste")));

this.add(myMenu);

this.addMouseListener(this);

this.addWindowListener(new WindowAdapter() { @Override

public void windowClosing(WindowEvent e) {

System.exit(0);

}

});

}

public void mouseExited(MouseEvent e) {}

public static void main(String []args){

ViDuPopupMenu vd = new ViDuPopupMenu(); vd.setVisible(true);

}

}

Applet

• Là một chương trình Java được gọi trong ứng dụng khác

• Thường là trình duyệt Web có hỗ trợ Java

• Applet có thể thể hiện multimedia, tạo được sự tương tác với user