Upload
thai-hoc-vu
View
1.405
Download
3
Embed Size (px)
DESCRIPTION
slide java o lop
Citation preview
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 3
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)
2009-2010 OOP-http://mim.hus.edu.vn/elearning 4
Quản lí sắp đặt (Layout Management) các thành phần (2)
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());
2009-2010 OOP-http://mim.hus.edu.vn/elearning 5
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 6
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); . . .
2009-2010 OOP-http://mim.hus.edu.vn/elearning 7
Quản lí sắp đặt (Layout Management) các thành phần (3)
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.
2009-2010 OOP-http://mim.hus.edu.vn/elearning 8
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)
2009-2010 OOP-http://mim.hus.edu.vn/elearning 9
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);
2009-2010 OOP-http://mim.hus.edu.vn/elearning 10
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 đó
2009-2010 OOP-http://mim.hus.edu.vn/elearning 11
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"));
2009-2010 OOP-http://mim.hus.edu.vn/elearning 12
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");
2009-2010 OOP-http://mim.hus.edu.vn/elearning 13
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:
2009-2010 OOP-http://mim.hus.edu.vn/elearning 14
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 15
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 16
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 17
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 18
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 19
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)
2009-2010 OOP-http://mim.hus.edu.vn/elearning 20
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 21
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 22
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 23
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 24
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 25
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ơ)
2009-2010 OOP-http://mim.hus.edu.vn/elearning 26
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.
2009-2010 OOP-http://mim.hus.edu.vn/elearning 27
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.
2009-2010 OOP-http://mim.hus.edu.vn/elearning 30
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
2009-2010 OOP-http://mim.hus.edu.vn/elearning 31
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.
2009-2010 OOP-http://mim.hus.edu.vn/elearning 32
Các thành phần củaSliderFrame
2009-2010 OOP-http://mim.hus.edu.vn/elearning 33
Các lớp trong chương trìnhSliderFrameViewer
Xem chương trình trong ch14/slider
2009-2010 OOP-http://mim.hus.edu.vn/elearning 34
Môi trường lập trình trực quan(visual programming)
35