oop 11

Bài 11: Giao diện đồ hoạ

Giảng viên: Nguyễn Thị Minh Huyề[email protected]

Đỗ Thanh Hà[email protected]

2009-2010 OOP-http://mim.hus.edu.vn/elearning 2

Tài liệu tham khảo

BigJava – chương 14


Sử dụng kế thừa để tuỳ biến khung (frame)

Sử dụng kế thừa cho các khung cửa sổ chứa nhiều thành phần phức tạp để chương trình dễ hiểu hơn Xây dựng một lớp con của Jframe

Lưu các thành phần trong khung như các trường dữ liệu

Trong hàm dựng của lớp con, khởi tạo các thành phần này

Nếu mã chương trình khởi tạo phức tạp, thêm vào 1 số phương thức trợ giúp

VD: BankAccount.java, InvestmentFrame.java, InvestmentFrameViewer.java (ch14/frame)

Quản lí sắp đặt (Layout Management) các thành phần (1)

Các thành phần đồ hoạ của giao diện người dùng được sắp đặt trong các thành phần chứa (container) Mỗi thành phần chứa được gắn với 1 bộ quản lí cách sắp đặt

(layout manager) Các ví dụ từ trước tới giờ không xét tới việc điều khiển cách

sắp đặt các thành phần trong cửa sổ: các thành phần trên 1 bảng (panel) được xếp từ trái qua phải

Có nhiều bộ sắp đặt, trong đó 3 bộ thông dụng là: Sắp theo biên (BorderLayout)

Sắp lần lượt thành dãy (FlowLayout)

Sắp thành lưới (GridLayout)



Bộ quản lí sắp đặt ngầm định được gắn với thành phần JPanel là FlowLayout: Các thành phần trên đó được sắp từ trái sang

phải, thêm dòng mới khi cần

Có thể gắn 1 bộ quản lí sắp đặt cho 1 JPanel bằng phương thức setLayout VD: panel.setLayout(new BorderLayout());


BorderLayout

Bộ sắp đặt này chia bảng JPanel thành 5 khu vực: Bắc, Nam, Đông, Tây và Trung tâm

Là bộ sắp đặt ngầm định gắn với các frame Khi thêm 1 thành phần, chỉ rõ vị trí muốn

sắp, VD: panel.add(component, BorderLayout.NORTH);

Thành phần được thêm sẽ chiếm toàn bộ vùng được cấp Nếu không muốn vậy, đặt thành phần đó vào 1

thành phần bảng khác (panel) trước khi đặt vào vùng đã định


GridLayout Sắp xếp các thành phần trong 1 lưới với số hàng và số cột định

trước Mỗi thành phần được đưa về kích thước bằng nhau

Kích thước mỗi thành phần được đưa về vừa khít với kích thước mỗi ô

Các thành phần được thêm vào từng hàng một, từ trái sang phải

VD:JPanel numberPanel = new JPanel(); numberPanel.setLayout(new GridLayout(4, 3)); numberPanel.add(button7); numberPanel.add(button8); numberPanel.add(button9); numberPanel.add(button4); . . .



Một số bộ sắp đặt khác CardLayout, GridBagLayout, BoxLayout,

OverlayLayout

Cách đơn giản để đạt được cách trình bày đẹp mà chỉ sử dụng vài bộ sắp đặt đơn giản là tạo các bảng (panel) lồng nhau, mỗi bảng áp dụng 1 bộ sắp đặt thích hợp.


Các thành phần lựa chọn

Các thành phần lựa chọn trên giao diện đồ hoạ Nút chọn (radio buttons) Hộp chọn (check boxes) Bảng chọn (combo boxes)


Nút chọn (radio buttons) Với 1 tập nhỏ các lựa chọn loại trừ lẫn nhau, sử dụng nút chọn hoặc

bảng chọn Trong hình trước, chọn 1 và chỉ 1 trong 3 kích thước font chữ

JRadioButton smallButton = new JRadioButton("Small"); JRadioButton mediumButton = new JRadioButton("Medium"); JRadioButton largeButton = new JRadioButton("Large"); // Add radio buttons into a ButtonGroup so that // only one button in group is on at any time ButtonGroup group = new ButtonGroup(); group.add(smallButton); group.add(mediumButton); group.add(largeButton);


Nút chọn (2)

Việc nhóm các nút thành nhóm như trong ví dụ chỉ có mục đích đảm bảo việc lựa chọn trong nhóm này là loại trừ lẫn nhau, còn việc sắp đặt các nút trên giao diện thế nào là do người lập trình

Để kiểm tra 1 nút có được chọn không, dùng phươngthức isSelected if (largeButton.isSelected()) size = LARGE_SIZE;

Để đặt lựa chọn cho 1 nút, áp dụngsetSelected(true) trên nút đó


Tạo đường viền khung

Để các thành phần đồ hoạ trên 1 panel được hiểnthị thành 1 nhóm, đặt đường viền cho panel Đường viền với hiệu ứng 3 chiều: EtchedBorderJPanel panel = new JPanel();

panel.setBorder(new EtchedBorder());

Có thể thêm đường viền cho bất kì thành phần nào Đường viền với tiêu đề: TitledBorderpanel.setBorder(new TitledBorder(new EtchedBorder(), "Size"));


Hộp chọn (check boxes)

2 trạng thái: được chọn hoặc không Sử dụng nhóm hộp chọn khi các hộp chọn này không loại trừ

lẫn nhau Không đặt hộp chọn vào nhóm nút

Tạo hộp chọn JCheckBox italicCheckBox = new JCheckBox("Italic");


Bảng chọn (combo boxes)

Dùng cho 1 tập nhiều lựa chọn loại trừ lẫn nhau Combo: kết hợp 1 danh sách và 1 trường văn bản

Danh sách các lựa chọn Trường văn bản hiển thị lựa chọn hiện thời VD:


Bảng chọn (2) Nếu bảng chọn cho phép người dùng tự nhập xâu chọn, gọi

phương thức setEditable

Thêm 1 xâu vào danh sách chọn: addItem JComboBox facenameCombo = new JComboBox();

facenameCombo.addItem("Serif"); facenameCombo.addItem("SansSerif"); . . .

Trả về lựa chọn của người dùng: getSelectedItem (kiểu trảvề là Object)String selectedString = (String)

facenameCombo.getSelectedItem();

Đặt lựa chọn: setSelectedItem


Nút chọn, hộp chọn, bảngchọn

Sinh ra 1 ActionEvent mỗi khi người dùng chọn 1 thành phần


VD: ChoiceFrame Tất cả các thành phần thông

báo sự kiện tới cùng 1 đốitượng nghe (listener)

Khi người dùng kích chuột vàobất kì thành phần nào, ta sẽlấy về nội dung hiện thời củathành phần đó

Sau đó, vẽ lại văn bản với font mới

Sơ đồ các lớp của chươngtrình chọn font chữ Xem chương trình

ch14/choice


Chủ đề nâng cao: quản lí sắpđặt (1)

Bước 1: Vẽ phác cách trình bàycác thành phần

Bước 2: Tìm nhóm các thànhphần kề nhau có cùng cách sắpđặt


Chủ đề nâng cao: quản lí sắpđặt (2)

Bước 3: Xác định cách sắp đặt (layout) cho mỗinhóm

Bước 4: Gộp các nhóm lại thành nhóm lớn hơn

Bước 5: Viết mã chương trình tạo các layout


Thực đơn (menus)

Các thành phần đồ hoạ: Thành phần cửa sổ (frame)

chứa thanh thực đơn (menu bar)

Thanh thực đơn chứa cácthực đơn

Thành phần thực đơn chứathực đơn con (submenus) vàcác mục chọn (menu items)


Các mục chọn (menu items) Thêm các mục chọn và thực đơn con bằng phương thức addJMenuItem fileExitItem = new JMenuItem("Exit");

fileMenu.add(fileExitItem);

1 mục chọn không có thực đơn con Các mục chọn sinh ra sự kiện ActionEvent Gắn 1 bộ nghe sự kiện cho mỗi mục chọn

fileExitItem.addActionListener(listener);

Chỉ gắn bộ nghe cho các mục chọn chứ không gắn cho thựcđơn và thực đơn con


Chương trình ví dụ

Xây dựng 1 thực đơn nhỏ nhưng đặc trưng Bắt các sự kiện từ các mục chọn Để dễ theo dõi mã chương trình, viết 1 hàm riêng

cho mỗi thực đơn hay mỗi tập thực đơn liên quan createFaceItem: tạo mục chọn để thay đổi kiểu chữ createSizeItem

createStyleItem

Chương trình: ch14/menu


Vùng văn bản (Text Areas) Dùng JTextArea để tạo vùng văn bản gồm nhiều dòng

Có thể xác định số dòng và số cộtfinal int ROWS = 10; final int COLUMNS = 30; JTextArea textArea = new JTextArea(ROWS, COLUMNS);

setText: Đặt 1 xâu vào trường hoặc vùng văn bản

append: Thêm 1 xâu vào cuối xâu trong vùng văn bản

Dùng "\n" để xuống dòng

Bật/tắt chế độ soạn thảo trong vùng văn bản: setEditabletextArea.setEditable(false); // program can call setText and append to change it


Vùng văn bản (2)

Có thể thêm thanh cuốn cho vùng văn bản:JTextArea textArea = new JTextArea(ROWS, COLUMNS);

JScrollPane scrollPane = new JScrollPane(textArea);

Xem chương trình ch14/textarea


Khai thác tài liệu Swing

Khai thác tài liệu Swing cho các hiệuứng đồ hoạ phức tạp hơn Thoạt nhìn tài liệu này tương đối phức tạp Ví dụ sau sẽ minh hoạ một cách tốt để khai

thác Swing docs


Ví dụ: bộ pha màu (colormixer) Mục đích: tự pha màu nhờ

các thanh trượt cho trọn giátrị rgb (đỏ, xanh ve, xanh lơ)


Ví dụ: bộ pha màu (2) Làm sao để biết Swing có thành phần thanh trượt (slider)?

Mua 1 cuốn sách minh hoạ tất cả các thành phần Swing

Chạy chương trình ví dụ đi kèm JDK có chỉ ra tất cả các thành phầnSwing

Xem tên của tất cả các lớp bắt đầu bằng chữ J: JSlider có vẻ là cái cần tìm

Tiếp theo, đặt 1 số câu hỏi: Làm thế nào để tạo 1 JSlider?

Làm thế nào để bắt sự kiện dịch chuyển thanh trượt?

Làm sao biết được giá trị mà người dùng đặt trên thanh trượt?

Sau khi làm chủ được thanh trượt, có thể tìm cách đặtdấu kiểm (tick marks), v.v.


SwingSet Demo

Thư mục demo/jfc/SwingSet2/SwingSet2.html trong thư mục jdk

Ví dụ: bộ pha màu (3) Trong API docs, lớp JSlider có trên 50 phương thức riêng và trên 250

phương thức thừa kế từ lớp cha

Có những mô tả phương thức trông rất khó hiểu

cần phát triển khả năng phân biệt giữa khái niệm cơ bản và các chi tiết mang tính phù du 29

Làm thế nào để tạo 1 JSlider?

Xem API docs của lớp này: có 6 hàm dựng Tìm hiểu 1 số trong đó, chọn 1 hàm dựng dễ hiểu và

hữu dụng public JSlider(int min, int max, int value) Creates a horizontal slider using the specified min, max, and value.


Làm thế nào để được thông báokhi người dùng dịch thanh trượt

Không có phương thức addActionListener Có phương thức

public void addChangeListener(ChangeListener l)

Kích vào liên kết ChangeListener để có thêm thông tin: Lớp này chỉ có 1 phương thứcvoid stateChanged(ChangeEvent e)

Có vẻ như phương thức này được gọi khi người dùng dịch thanhtrượt.

ChangeEvent là gì? Thừa kế phương thức getSource (cho biết thành phần nào sinh ra sự kiện) từ

lớp cha EventObject


Làm thế nào lấy giá trị ngườidùng đặt trên thanh trượt?

Bây giờ ta đã có dự định: Gắn 1 bộ nghe thay đổi sự kiện vào mỗi thanh trượt

Khi điểm đánh dấu trên thanh trượt thay đổi, phương thứcstateChanged được gọi

Tìm giá trị mới trên các thanh trượt

Tính giá trị màu, vẽ lại bảng màu

Cần lấy được giá trị hiện thời trên thanh trượt Xem tất cả các phương thức bắt đầu bằng get, ta tìm đượcpublic int getValue()

Returns the slider's value.


Các thành phần củaSliderFrame


Các lớp trong chương trìnhSliderFrameViewer

Xem chương trình trong ch14/slider


Môi trường lập trình trực quan(visual programming)

35

oop 11

Sports