Lập Trình
Giao Điện Đồ Hoạ
Gv: Văn Thiên Hoàng 2/40
Nội dung
•
Giới thiệu về AWT
•
Cấu Trúc AWT
•
Lớp Component
•
Lớp Container
•
Một số thành phần cơ bản
•
Trình bày các thành phần
•
Xử lý sự kiện
•
Applet
•
Vẽ Trên Giao diện đồ hoạ
Gv: Văn Thiên Hoàng 3/40
1. Giới thiệu
•
Java cung cấp hai gói hỗ trợ cho lập trình giao diện đồ
hoạ là: java.awt và javax.swing.
•
AWT (Abstract Window Toolkit) là bộ công cụ lập trình
giao diện đồ hoạ trên Windows.
•
SWING là mô hình phát triển của AWT theo xu hướng
độc lập với hệ thống.
Gv: Văn Thiên Hoàng 4/40
2. Cấu trúc AWT
•
AWT bao gồm nhiều class, giao diện, gói cho
phép kế thừa, từ đó lập trình viên có thể tạo ra
nhiều loại control (thành phần giao diện) đa
dạng theo ý mình.
Gv: Văn Thiên Hoàng 5/40
Object
BorderLayout
CardLayout
CheckboxGroup
Color
Dimension
Event
Font
FlowLayout
FontMetrics
Graphics
GridBagLayout
GridLayout
Image
Insets
Point
Polygon
Rectangle
Toolkit
MenuComponent
Component
FileDialog
Button
Canvas
Checkbox
Choice
Container
ScrollBar
Label
List
Panel
Window
ScrollPane
Applet
Dialog
Frame
TextComponent
TextField
TextArea
MenuBar
MenuItem
Menu
PopupMenu
CheckboxMenuItem
AWTException
AWTError
Exception
Error
Gv: Văn Thiên Hoàng 6/40
3. Lớp Component
•
Lớp Component là lớp trừu tượng cơ sở của tất cả các
thành phần AWT.
•
Component cung cấp các chức năng để xử lý các sự
kiện, thay đổi kích thước các thành phần, điều khiển
font, màu và vẽ lên thành phần.
•
Một số phương thức:
•
Void setSize(int width, int height) : đặt kích thước cho
các thành phần.
Gv: Văn Thiên Hoàng 7/40
3. Lớp Component
•
Void setForeground(Color c): đặt màu vẽ cho thành
phần đồ hoạ.
•
Void setBackground(Color c): đặt màu nền cho thành
phần đồ hoạ.
•
Font getFont(): trả về đối tượng Font đang sử dụng cho
thành phần.
•
Void setFont(Font f): đặt lại font cho thành phần.
•
Void setEnable(boolean b): quy định thành phần có hiện
thị trên màn hình hay không.
Gv: Văn Thiên Hoàng 8/40
Object
BorderLayout
CardLayout
CheckboxGroup
Color
Dimension
Event
Font
FlowLayout
FontMetrics
Graphics
GridBagLayout
GridLayout
Image
Insets
Point
Polygon
Rectangle
Toolkit
MenuComponent
Component
FileDialog
Button
Canvas
Checkbox
Choice
Container
ScrollBar
Label
List
Panel
Window
ScrollPane
Applet
Dialog
Frame
TextComponent
TextField
TextArea
MenuBar
MenuItem
Menu
PopupMenu
CheckboxMenuItem
AWTException
AWTError
Exception
Error
Gv: Văn Thiên Hoàng 9/40
4. Lớp Container
•
Lớp Container: kế thừa từ lớp Component, là lớp chứa
các thành phần khác để xây dựng những giao diện phức
tạp.
•
Phương thức của lớp Container kế thừa từ lớp
Component, bổ sung thêm phương thức:
•
Void add(Component c): thêm một thành phần vào
Container.
Gv: Văn Thiên Hoàng 10/40
4. Lớp Container
•
Các lớp con của lớp Container:
•
Lớp Panel: là một thành phần chứa kế thừa từ
Container.
•
Lớp Window: kế thừa từ lớp Container, đai diện
cho một cửa sổ nhưng không có tiêu đề, menu.
•
ScrollPane: là tạo cửa sổ cuộn.
Gv: Văn Thiên Hoàng 11/40
Object
BorderLayout
CardLayout
CheckboxGroup
Color
Dimension
Event
Font
FlowLayout
FontMetrics
Graphics
GridBagLayout
GridLayout
Image
Insets
Point
Polygon
Rectangle
Toolkit
MenuComponent
Component
FileDialog
Button
Canvas
Checkbox
Choice
Container
ScrollBar
Label
List
Panel
Window
ScrollPane
Applet
Dialog
Frame
TextComponent
TextField
TextArea
MenuBar
MenuItem
Menu
PopupMenu
CheckboxMenuItem
AWTException
AWTError
Exception
Error
Gv: Văn Thiên Hoàng 12/40
4.1 Lớp Frame
•
Lớp Frame: kế thừa từ lớp Window, là lớp dùng để tạo
cửa sổ trong đó chứa thanh tiêu đề, menu và các đường
viền.
•
Layout Manager mặc định là: BorderLayout.
•
Phương thức khởi tạo:
•
Frame(): tạo một cửa sổ với tiêu đề trống.
•
Frame(String title): tạo một cửa sổ với tiêu đề title.
Gv: Văn Thiên Hoàng 13/40
4.1 Lớp Frame
•
Ví dụ: Tạo ra cửa sổ có kích thước 200,
200
Gv: Văn Thiên Hoàng 14/40
4.1 Lớp Frame
Gv: Văn Thiên Hoàng 15/40
4.1 Lớp Frame
•
Ví dụ: Tạo ra cửa sổ riêng có phương
phước khởi tạo có tên và kích thước.
Gv: Văn Thiên Hoàng 16/40
4.1 Lớp Frame
Gv: Văn Thiên Hoàng 17/40
Object
BorderLayout
CardLayout
CheckboxGroup
Color
Dimension
Event
Font
FlowLayout
FontMetrics
Graphics
GridBagLayout
GridLayout
Image
Insets
Point
Polygon
Rectangle
Toolkit
MenuComponent
Component
FileDialog
Button
Canvas
Checkbox
Choice
Container
ScrollBar
Label
List
Panel
Window
ScrollPane
Applet
Dialog
Frame
TextComponent
TextField
TextArea
MenuBar
MenuItem
Menu
PopupMenu
CheckboxMenuItem
AWTException
AWTError
Exception
Error
Gv: Văn Thiên Hoàng 18/40
4.2 Lớp Dialog
•
Dialog là lớp con lớp window, không có menu
và không cho phép phóng to/thu nhỏ hoặc thay
đổi kích thước bằng mouse.
•
Có hai trạng thái:
–
Là modaless (mặc định)
–
Hoặc modal (Khi được hiển thị, một modal Dialog
sẽ "khóa" hết các cửa sổ khác của ứng dụng cho
đến khi Dialog đó được đóng.
Gv: Văn Thiên Hoàng 19/40
4.2 Lớp Dialog
Ví dụ: Hiển thị dialog dạng modal
Gv: Văn Thiên Hoàng 20/40
4.2 Lớp Dialog
Ví dụ: Hiển thị dialog dạng modal
Gv: Văn Thiên Hoàng 21/40
Object
BorderLayout
CardLayout
CheckboxGroup
Color
Dimension
Event
Font
FlowLayout
FontMetrics
Graphics
GridBagLayout
GridLayout
Image
Insets
Point
Polygon
Rectangle
Toolkit
MenuComponent
Component
FileDialog
Button
Canvas
Checkbox
Choice
Container
ScrollBar
Label
List
Panel
Window
ScrollPane
Applet
Dialog
Frame
TextComponent
TextField
TextArea
MenuBar
MenuItem
Menu
PopupMenu
CheckboxMenuItem
AWTException
AWTError
Exception
Error
Gv: Văn Thiên Hoàng 22/40
4.3 Lớp Panel
•
Panel là container không thể tồn tại độc
lập mà phải thuộc về một container nào
đó.
•
Panel là một vùng hình chữ nhật để chứa
các control, và buộc phải nằm trên một
Window, hay một cửa sổ trình duyệt web
hay một Panel khác
Gv: Văn Thiên Hoàng 23/40
4.3 Lớp Panel
Frame
Panel
sub-panels
Gv: Văn Thiên Hoàng 24/40
4.3 Lớp Panel
•
Layout Manager mặc định là FlowLayout
•
Tạo Panel
–
Panel panel = new Panel();
•
Thêm các Components vào Panel
–
panel.add(someComponent);
–
panel.add(someOtherComponent);
–
•
Chú ý: Kích thước Panel được xác định bởi các
thành phần bên trong Panel.
Gv: Văn Thiên Hoàng 25/40
4.3 Lớp Panel
•
Ví dụ: Hiển thị bốn button trên Panel.