Lập trình java phần 5

Chia sẻ: Nguyễn Văn Thịnh | Ngày: | Loại File: PDF | Số trang:11

Thêm vào BST

Báo xấu

120
lượt xem 16
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG NỘI DUNG l Giới thiệu thư viện awt l Các khái niệm cơ bản l Thiết kế giao diện l Xử lý sự kiện MỤC TIÊU l Chương này cung cấp cho sinh viên những kiến thức cơ bản để xây dựng giao diện (Graphic User Interface - GUI) của chương trình ứng dụng bằng ngôn ngữ java, bao gồm: – Những nguyên tắc thiết kế giao diện. – Những thư viện, gói xây dựng giao diện: gồmnhững lớp (class), những giao tiếp (interface) quản lý sự kiện và những thành phần (components) xây dựng giao diện người dùng. – Bộ quản lý trình bày (layout managers) – Xửlý sự kiện...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lập trình java phần 5

MỤC TIÊU Chương này cung cấp cho sinh viên những kiến THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG l thức cơ bản để xây dựng giao diện (Graphic User Interface - GUI) của chương trình ứng dụng bằng ngôn ngữ java, bao gồm: Những nguyên tắc thiết kế giao diện. – Những thư viện, gói xây dựng giao diện: gồm những lớp – (class), những giao tiếp (interface) quản lý sự kiện và Th.S Nguyễn Thị Mai Trang những thành phần (components) xây dựng giao diện người dùng. Bộ quản lý trình bày (layout managers) – Xửlý sự kiện – 1 2 2/27/2012 Ch ương 5: Thiết kế giao diện người dùng NỘI DUNG Thư viện awt Giới thiệu thư viện awt Là bộ thư viện dùng để xây dựng giao diện người l l dùng cho một chương trình ứng dụng có đầy đủ Các khái niệm cơ bản l các thành phần cơ bản như: Label, Button, Thiết kế giao diện l Checkbox, Radiobutton, Choice, List, Text Field, Xử lý sự kiện l Text Area, Scrollbar, Menu, Frame 3 4 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 1
Các khái niệm cơ bản Các khái niệm cơ bản Layout Manager Component l l Component là một đối tượng có biểu diễn đồ họa được Quản lý cách trình bày các đối tượng, bao gồm – – hiển thị trên màn hình mà người dùng có thể tương tác Sắp xếp các đối tượng từ trái qua phải và l FlowLayout: được. Ví dụ: nút nhấn (button), ô nhập liệu (textbox), từ trên xuống dưới. Các đối tượng đều giữ nguyên kích danh sách (listbox),… thước của mình. Container l l BorderLayout: Các đối tượng được đặt theo các đường viền của khung chứa theo các cạnh West, East, South, Là đối tượng có thể chứa các đối tượng khác – North và Center l Panel l GridLayout: Tạo m ột khung lưới vô hình vớ i các ô bằng l Frame nhau. Các đối tượng sẽ đặt vừa kích thước vớ i từng ô đó. Thứ tự sắp xếp cũng từ trái qua phải và từ trên xuống l Dialog dưới l ScrollPanes 5 6 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng Các khái niệm cơ bản Lớp Component Thiết lập vị trí và kích thước đối tượng Layout Manager (tt) l l Tương tự như GridLayout, tuy nhiên kích void setBounds( int x, int y, int width, int height ) l GridBagLayout: – thước các đối tượng không nhất thiết phải vừa với 1 ô mà void setBounds( Rectangle rec ) – có thể là 2, 3 ô hay nhiều hơn tùy theo các ràng buộc mà void setLocation( int x, int y ) – ta chỉ định thông qua đối tượng GridBagConstraint. void setLocation( Point pt)· – l Null Layout: Cách trình bày tự do. void setSize( int width, int height) – void setSize( Dimension dim ) – Rectangle getBounds() – boolean contains( int x, int y) – boolean contains( Point pt ) – 7 8 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 2
Lớp Component Lớp Component (tt) Thiết lập vị trí và kích thước đối tượng Thiết lập bề mặt hiển thị của đối tượng l l Ví dụ void setBackground ( Color c ): màu nền – – void setForeground ( Color c ): màu khung viền l MyButton.setSize(new Dimension(20, 10)); – void setFont( Font f ): font chữ l MyButton.setLocation(new Point(10, 10)); – l MyButton.setBounds(10, 10, 20, 10); void setCursor( Cursor cr ): con trỏ chuột – Thiết lập chế độ hiển thị cho đối tượng l void setEnabled( boolean flag): vô hiệu/ hữu hiệu – void setVisible( boolean flag): ẩn / hiển thị – 9 10 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng Lớp Component (tt) NỘI DUNG Một số đối tượng thuộc lớp Component Giới thiệu thư viện awt l l Các khái niệm cơ bản Button l – Checkbox· Thiết kế giao diện – l Container – Xử lý sự kiện l Label – List· – Scrollbar· – TextComponent – l TextField l TextArea, 11 12 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 3
Tạo cửa sổ Tạo menu Thực hiện qua các bước Sử dụng các lớp MenuBar, Menu, MenuItem, l l Tạo đối tượng Frame MenuShortcut. – Xác định kích thước của Frame – Hiển thị Frame trên màn hình – 13 14 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng Thêm các component vào container Trình bày các component Sử dụng phương thức add FlowLayout: Đối với một container trình bày theo l l kiểu FlowLayout thì: 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ó kích thước như mong muốn. – Nếu chiều rộng của Container không đủ chỗ cho các – component thì chúng tự động tạo ra một dòng mới. Thường được dùng để để sắp xếp các buttontrong 1 – panel. Có thể điều chỉnh khoảng cách giữa các component. – 15 16 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 4
Trình bày các component BorderLayout Khung chứa được chia làm 5 vùng: NORTH, SOUTH, l FlowLayout (tt): l WEST, EAST và CENTER, cho phép sắp xếp và thay đổi kích thước của những components chứa trong nó sao cho vứa với 5 vùng trên Không cần phải gắn component vào cho tất cả các vùng.· l Các component ở vùng NORTH và SOUTH có chiều cao l 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 ý l 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 l rộng phụ thuộc vào các vùng xung quanh. 17 18 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng BorderLayout GridLayout Bộ trình bày tạo một khung lưới vô hình với các ô l bằng nhau. Các đối tượng sẽ đặt vừa kích thước với từng ô l đó. Thứ tự sắp xếp từ trái qua phải và từ trên xuống dưới. 19 20 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 5
GridLayout GridBagLayout Tương tự như GridLayout. Tuy nhiên các đối l tượng không nhất thiết phải vừa với 1 ô trên khung lưới mà có thể là 2, 3 ô hay nhiều hơ n tùy theo các ràng buộc mà ta chỉ định thông qua đối tượng GridBagConstraints. Lớp GridBagConstraints dẫn xuất từ lớp Object. l Lớp này dùng để chỉ định ràng buộc cho những components trình bày trong khung chứa container theo kiểu GridBagLayout. 21 22 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng GridBagLayout GridBagLayout gridx, gridy: vị trí ô của khung lưới chứa đối tượng Ví dụ l – gridwidth, gridheight: kích thước hay vùng trình bày – cho đối tượng con. Insets: là một biến đối tượng thuộc lớp Inset dùng để – qui định khoảng cách biên phân cách theo 4 chiều (trên, dưới, trái, phải). weightx, weighty: chỉ định khoảng cách lớn ra tương – đối của các đối tượng con với nhau Ví dụ l 23 24 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 6
Các đối tượng container NullLayout setLayout(null) Frame l l Panel l Dialog l ScrollPanes l 25 26 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng Panel Dialog Panel sử dụng LayoutManager mặc định là Dialog là một lớp khung chứa tựa Frame và còn l l được gọi là popup window, có hai loại dialog: FlowLayout. Modal Dialog: dừng các tiến trình khác của ứng dụng Các Panel có thể lồng vào nhau nên thường được l – khi dialog còn hiển thị. dùng để bố trí các nhóm components bên trong Non-Modal Dialog (modeless dialog): có thể thực hiện một khung chứa khác. – các tiến trình khác của ứng dụng khi dialog hiển thị. Một cửa sổ dạng Dialog luôn luôn phải gắn với một l cửa sổ ứng dụng (Frame). 27 28 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 7
Dialog (tt) Dialog (tt) Để tạo một đối tượng Dialog ta có thể dùng một Ví dụ l l trong các constructor của nó: public Dialog (Frame parentWindow, boolean isModal) – public Dialog (Frame parentWindow, String title, boolean – isModal) cửa sổ cha l parentWindow: tiêu đề của Dialog l title: l isModal: true -> là Dialog dạng modal l isModal: false -> là Dialog dạng non-modal 29 30 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng NỘI DUNG Mô hình xử lý sự kiện Khi có một tương tác xảy ra từ người dùng lên cửa Giới thiệu thư viện awt l l sổ chương trình thì một sự kiện được gởi đến Các khái niệm cơ bản l chương trình Thiết kế giao diện l Những tương tác thường gặp như: di chuyển, l nhấn chuột, nhấn một nút nhấn, chọn một Xử lý sự kiện l MenuItem trong hệ thống thực đơn, nhập dữ liệu trong một ô văn bản, đóng cửa sổ ứng dụng, … Thông tin về sự kiện thường được lưu trữ trong l một đối tượng dẫn xuất từ lớp AWTEvent. Những kiểu sự kiện xảy ra trong cửa sổ thuộc gói l java.awt.event 31 32 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 8
Mô hình xử lý sự kiện Mô hình xử lý sự kiện 3 yếu tố quan trọng trong mô hình Bộ lắng nghe sự kiện (event listener): là một đối tượng l Có – xử lý sự kiện: của một lớp hiện thực một hay nhiều interface của gói java.awt.event hay java.swing.event (đối với những Nguồn phát sinh sự kiện (event source): là – component trong thư viện JFC). thành phần của giao diện được người được thông báo, bộ lắng nghe nhận sự kiện và xử lý. l Khi dùng tác động. l Nguồn phát sinh sự kiện phải cung cấp những phương – Sựkiện (event object): thông tin về sự thức để đăng ký hoặc hủy bỏ một bộ lắng nghe. l Nguồn phát sinh sự kiện luôn phả i gắ n với m ột bộ lắng kiện, bao gồm tham chiếu đến nguồn gốc nghe, và thông báo vớ i bộ lắng nghe khi có sự kiện phát phát sinh sự kiện và thông tin sự kiện sẽ sinh gởi đến cho bộ lắng nghe xử lý. 33 34 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng Mô hình xử lý sự kiện Các bước xử lý sự kiện l Tạo và đăng ký một bộ lắng nghe cho một – component trên GUI. Cài đặt các phương thức quản lý và xử lý sự – kiện 35 36 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 9
Mô hình xử lý sự kiện Xử lý sự kiện chuột Một đối tượng Event-Listener lắng nghe những sự kiện Java cung cấp hai intefaces lắng nghe (bộ lắng l l khác nhau phát sinh từ các components của giao diện nghe sự kiện chuột) là MouseListener và chương trình. MouseMotionListener để quản lý và xử lý các sự Với mỗi sự kiện khác nhau phát sinh thì phương thức l kiện liên quan đến thiết bị chuột. tương ứng trong những Event-Listener sẽ được gọi thực hiện. Các phương thức của interface MouseListener: l Mỗi interface Event-Listener gồm một hay nhiều các l public void mousePressed(MouseEvent event): được gọi – phương thức cần được cài đặt trong các lớp hiện thực khi một nút chuột được nhấn (implements) interface đó. public void mouseClicked(MouseEvent event): được gọi Những phương thức trong các interface là trừu tượng vì – l khi một nút chuột được nhấn và nhả trên component mà vậy lớp (bộ lắng nghe) nào hiện thực các interface thì phải cài đặt tất cả những phương thức đó. không di chuyển chuột. 37 38 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng Xử lý sự kiện chuột (tt) Xử lý sự kiện chuột (tt) Các phương thức của interface Các phương thức của interface MouseListener: l l MouseMotionListener: public void mouseReleased(MouseEvent event): được – public void mouseDragged(MouseEvent even ): phương gọi khi một nút chuột nhả sau khi kéo rê. – thức này được gọi khi người dùng nhấn một nút chuột public void mouseEntered(MouseEvent event): được gọi – và kéo trên một component. khi con trỏ chuột vào trong đường biên của một public void mouseMoved(MouseEvent event): phương – component. thức này được gọi khi di chuyển chuột trên component. public void mouseExited(MouseEvent event): được gọi – Mỗi phươ ng thức xử lý sự kiện chuột có một tham l khi con trỏ chuột ra khỏi đường biên của một số MouseEvent chứa thông tin về sự kiện chuột component.. phát sinh như: tọa độ x, y nơi sự kiện chuột xảy ra Ví dụ l 39 40 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 10
Xử lý sự kiện bàn phím Xử lý sự kiện bàn phím (tt) Sử dụng bộ lắng nghe sự kiện là interface Các phương thức của interface KeyListener l l keyPressed: được gọi khi một phím bất kỳ được nhấn. KeyListener – keyTyped: được gọi thực hiện khi người dùng nhấn một Một lớp hiện thực KeyListener phải cài đặt các l – phím không phải “phím hành động” (phím mũi tên, phươ ng thức keyPressed, keyReleased và Home, End, Page Up, Page Down, các phím chức năng keyTyped như: Num Lock, Print Screen, Scroll Lock, Caps Lock, Mỗi phươ ng thức trên có một tham số là một đối l Pause). tượng kiểu KeyEvent (là lớp con của lớp keyReleased: được gọi khi nhả phím – InputEvent) Ví dụ: – 41 42 Ch ương 5: Thiết kế giao diện người dùng Ch ương 5: Thiết kế giao diện người dùng 11