Bài giảng Lập trình hướng đối tượng: Lập trình giao diện với Java - TS. Nguyễn Mạnh Hùng

Nội dung cần nắm trong Bài giảng Lập trình hướng đối tượng: Lập trình giao diện với Java gồm: tạo giao diện với các đối tượng cơ bản, xử lí sự kiện giao diện, các đối tượng multimedia, java swing, table và cách bố trí giao diện, bài tập.

Lập trình hướng đối tượng

Lập trình giao diện với Java

Giảng viên: TS Nguyễn Mạnh Hùng

Học viện Công nghệ Bưu chính Viễn thông (PTIT)

Nội dung

 Tạo giao diện với các đối tượng cơ bản

 Xử lí sự kiện giao diện

 Các đối tượng multimedia

 Java swing

 Table và cách bố trí giao diện

 Bài tập

Giao diện cơ bản

Các loại khung chứa

 Frame: khung cửa sổ

 Panel: khung chứa các vùng trong cửa sổ

 Dialog: cửa sổ con của một cửa sổ chính

import java.awt.*;

public class FrameDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“This is my Frame!”);

myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setVisible(true); // Hiển thị frame

}

}

import java.awt.*;

public class PanelDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a panel!”);

myFrame.setSize(300,150); // Định kích cỡ frame

Panel myPanel = new Panel();// Khai báo panel myFrame.add(myPanel); // Thêm panel vào frame myFrame.setVisible(true); // Hiển thị frame }

}

import java.awt.*;

public class DialogDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a dialog!”);

myFrame.setSize(300,150); // Định kích cỡ frame

// Khai báo và khởi tạo dialog Dialog myDialog =

new Dialog(myFrame, “An empty dialog!”, true);

myFrame.add(myDialog); // Thêm dialog vào frame myFrame.setVisible(true); // Hiển thị frame

Các loại component cơ bản

 Label: dùng để hiển thị nhãn text, không edit

được khi chạy

 TextField và textArea: dùng để nhập text vào

và hiển thị text ra

 Button: nút lệnh, dùng để thực thi nhiệm vụ

nào đó

import java.awt.*;

public class LabelDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has some labels!”);

import java.awt.*;

public class TextFieldDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a panel!”);

}

import java.awt.*;

public class TextAreaDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a panel!”);

myFrame.setSize(300,150); // Định kích cỡ frame

// Khai báo và khởi tạo textArea TextArea myTextArea = new TextArea(5, 40);

String str=“The TextField’s columns is: ”

+ myTextField.getColumns()+ “The TextArea’s size is: ” + myTextArea.getRows() + “*” + myTextArea.getColumns(); myTextArea.setText(str); // Thiết lập nội dung

myFrame.add(myTextArea); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame }

import java.awt.*;

public class ButtonDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a button!”);

Các sự kiện (event) cơ bản

 ActionEvent: Xuất hiện khi một nút bị click vào, một danh sách

(list) được chọn, một menu được chọn.

 ComponentEvent: Xuất hiện khi một component bị thay đổi

kích cỡ, vị trí, trạng thái.

 FocusEvent: Xuất hiện khi một component có hoặc mất focus.

 ItemEvent: Xuất hiện khi một menu item được chọn hoặc bỏ,

khi checkbox hoặc list item được click vào.

 WindowEvent: Xuất hiện khi một của sổ được mở ra, kích hoạt,

đóng lại hoặc thoát ra.

 TextEvent: Xuất hiện khi giá trị văn bản của các đối tượng

TextField và TextArea bị thay đổi.

 MouseEvent: Xuất hiện khi chuột được click, di chuyển qua,

Các giao tiếp bắt sự kiện

/* Phương thức xử lí sự kiện nút được nhấn */

public void actionPerformed(ActionEvent ae){

Bài tập

Viết chương trình giao diện chát đơn giản:

 Giao diện gồm một ô textField để nhập

dòng chát, một ô textArea để hiển thị nội

dung chát, một nút nhấn send để gửi nội

dung chát lên cửa sổ

 Mỗi khi click vào nút send, nội dung trong ô

nhập chát sẽ được thêm vào một dòng mới

ở cuối phần hiển thị nội dung chát

Các đối tượng multimedia

Các đối tượng multimedia

 Ô đánh dấu (Checkbox) và Nút chọn (Radio

button)

 Lựa chọn (Choice)

 Danh sách (List)

 Trình đơn (Menu)

Checkbox/Radio button (1)

import java.awt.*;

import java.awt.event.*;

public class RadioDemo extends Frame implements ItemListener{

Checkbox cbxRed, cbxBlue, cbxGreen;

public RadioDemo(){

super(“Radio demo!”);

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

CheckboxGroup cbxg = new CheckboxGroup(); // Nhóm radio

cbxRed = new Checkbox(“Red”, cbxg, true); // Nút red cbxRed.addItemListener(this); // Bắt sự kiện

Checkbox/Radio button (2)

/* Phương thức xử lí sự kiện thay đổi trạng thái nút */

public void itemStateChange(ItemEvent ie){

if(ie.getStateChanged() == ItemEvent.SELECTED){

String item = (String)ie.getItem();

if(item.equals(“Red”)) // Đổi màu red

/* Phương thức xử lí sự kiện thay đổi trạng thái item */

public void itemStateChange(ItemEvent ie){

if(ie.getStateChanged() == ItemEvent.SELECTED){

String item = (String)ie.getItem();

if(item.equals(“Red”)) // Đổi màu red

lbl = new Label(); // Khởi tạo nhãn this.add(lbl); // Gắn vào frame

}

/* Phương thức xử lí sự kiện thay đổi trạng thái item */

public void itemStateChange(ItemEvent ie){

if(ie.getStateChanged() == ItemEvent.SELECTED){

String kq = “Cac mau duoc chon:”;

String[] items = myList.getSelectedItems();

for(int i=0; i<items.length; i++)

Các loại trình đơn

Các loại trình đơn

 Menubar: Thanh trình đơn

 Menu: Trình đơn đổ xuống

 PopupMenu: Trình đơn xuất hiện khi click

chuột phải

 MenuItem: Các mục chọn của trình đơn.

myBar.add(myMenu); // Gắn menu vào thanh tr.nh đơn myMenu.addActionListener(this);// Bắt sự kiện

myMenu.add(new MenuItem(“New”));

myMenu.add(new MenuItem(“Open”));

myMenu.addSeparator(); // Thêm dấu nhóm item myMenu.add(new MenuItem(“Save”));

lbl = new Label(); // Khởi tạo nh.n

this.add(lbl); // Gắn vào frame

public void mouseClicked(MouseEvent me){

myPopup.show(this, me.getX(), me.getY());// Hiện menu popup

Các kĩ thuật tạo layout

Các loại layout

 Cách trình bày theo dòng (Flow layout)

 Cách trình bày theo mảng (Grid layout)

 Cách trình bày theo Border (Border layout)

 Cách trình bày theo GridBag (GridBag layout)

 Cách trình bày tự do (Null layout)

Flow layout

import java.awt.*;

public class FlowLayoutDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”);

myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(new FlowLayout( ));// Cách trình bày

// Khai báo và khởi tạo button for(int i=0; i<10; i++)

myFrame.add(new Button(“Click”+i));// Gắn vào frame myFrame.setVisible(true); // Hiển thị frame

}

}

Grid layout

import java.awt.*;

public class GridLayoutDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”);

myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(new GridLayout(0,2));//Cách trình bày

// Khai báo và khởi tạo button for(int i=0; i<10; i++)

myFrame.add(new Button(“Click”+i));// Gắn vào frame myFrame.setVisible(true); // Hiển thị frame

}

}

Border layout

import java.awt.*;

public class BorderLayoutDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”);

myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(new BorderLayout()); // Định cách trình bày

// Khai báo và khởi tạo button myFrame.add(“West”, new Button(“West”)); // Gắn vào vùng west myFrame.add(“East”, new Button(“East”)); // Gắn vào vùng east myFrame.add(“North”, new Button(“North”)); // Gắn vào vùng north myFrame.add(“South”, new Button(“South”)); // Gắn vào vùng south myFrame.add(“Center”, new Button(“Center”));// Gắn vào vùng center myFrame.setVisible(true); // Hiển thị frame

}

}

GridBag layout

import java.awt.*;

public class GridBagLayoutDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”);

myFrame.setSize(300,150); // Định kích cỡ frame GridBagLayout layout = new GridBagLayout();

myFrame.setLayout(layout); // Định cách trình bày

// Khai báo đối tượng ràng buộc GridBagConstraints cts = new GridBagConstraints();

// Button1: vị trí (1,1), kích thước (2,1) Button btn1 = new Button(“Click1”);

Null layout

import java.awt.*;

public class NullLayoutDemo{

public static void main(String[] args) {

// Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”);

myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(null); // Định cách tr.nh bày

// Button1: vị trí (10,10), kích thước (20,10) Button btn1 = new Button(“Click1”);

btn1.setSize(20, 10);

btn1.setLocation(new Point(10, 10));

myFrame.add(btn1); // Gắn vào frame

// Button2: vị trí (20,20), kích thước (10,20) Button btn2 = new Button(“Click2”);

btn2.setBounds(20, 20, 10, 20);

myFrame.add(btn2); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame

swing

Mở rộng các đối tượng thành swing

JFC mở rộng các đối tượng cơ bản của java

thành các lớp tương ứng, ngoài trừ việc có

thêm chữ “J” ở đầu mỗi tên lớp:

Bài tập (1)

Tạo giao diện ô số sudoku:

 Tạo ma trận 9*9 ô số của sudoku

 Mỗi ô số là một đối tượng đồ họa

 Các ô số đã có số theo đề bài thì không click vào

được nữa

 Các ô số còn lại, khi click vào, sẽ hiện ra một cửa

sổ con chứa một bảng các số từ 1-9 Người dùng click chọn vào số nào thì cửa sổ con đóng lại, và

số được chọn sẽ điền vào ô số tương ứng trong

cửa sổ chính

Bài tập (2)

Tạo giao diện ô số sudoku:

 Tạo thanh menubar bao gồm 3 menu con: file,

option và ranking

 Trong menu file, có các menu item: new game,

save game, load game, back, quit Khi click vào sẽ gọi các chức năng tương ứng

 Trong menu option, có các menu item: easy,

medium, hard, hardest Khi click vào sẽ tạo ra

game mới với độ khó tương ứng

 Trong menu ranking, cũng có các menu item:

easy, medium, hard, hardest Khi click vào sẽ hiện

Câu hỏi?