Phần 5: GUI – Graphic User Interface in Java



Phần này có lẽ sẽ hấp dẫn hơn các phần trên, đây là phần hướng dẫn các bạn tạo giao diện. Tuy nhiên, sau phần này các bạn chỉ có thể tạo giao diện tương đốI thui, để có một giao diện sắc sảo thì các bạn phảI học Advance Java. Advance Java chắc phảI nhờ BabyWolf thui hi hi.

Để có thể xây dựng được ứng dụng với giao diện thân thiện, trong java bạn cần phải tìm hiểu gói java.awt với các nội dung chính:

- Các phần tử (Component)
- Phần tử chứa (Container)
- Chế độ hiển thị (Layout)
- Hệ thống menu (Menu)
- Điều khiển sự kiện (Event)

I - Các phần tử (Component)

Các phần tử tham gia vào quá trình xây dựng ứng dụng GUI gồm :

Label : Nhãn
TextField : Ô nhập 1 dòng
TextArea : Ô nhập nhiều dòng
Button : Nút nhấn
Choice : Combo Box – chỉ cho phép chọn 1
List : List Box – có thể chọn nhiều
Checkbox : Check Box hoặc radio
ScrollBar : Thanh cuộn
Canvas : Phần tử trống dùng tuỳ biến
CheckboxGroup : Cùng với Checkbox để tạo radio group

1. Phần tử Label (Nhãn).

- Là phần tử chứa nhãn, thường đi kèm với 1 phần tử khác để làm rõ nghĩa phần tử đó.
- Phương thức khởi dựng:

Label()
Label(String text)
Label(String text, int align) 

Với align=Label.LEFT|Label.RIGHT|Label.CENTER

- Phương thức:

String getText() : Nhận chuỗi nhãn
void setText(String text) : Thay đổi chuỗi nhãn

2. Phần tử TextField

- TextField là phần tử thể hiện ô nhập 1 dòng
- Phương thức khởi dựng:

TextField(), TextField(int cols), TextField(String text), TextField(String text, int cols)

- Phương thức:

void setEchoChar(char c) 
char getEchoChar() 
void addActionListener(ActionListener l) 
void removeActionListener(ActionListener l) 

3. Phần tử TextArea

- TextArea là phần tử thể hiện ô nhập nhiều dòng
- Phương thức khởi dựng:

TextArea()
TextArea(int rows, int cols)
TextArea(String text)
TextArea(String text, int rows, int cols)

- Phương thức:

void append(String str) 
void insert(String str, int pos) 
void replaceRange(String str, int start, int end)

4. Phần tử Button

- Là phần tử được sử dụng để tạo các nút nhấn.
- Phương thức khởi dựng:

Button()
Button(String text) 

- Phương thức:

String getLabel() 
void setLabel(String label)
void addActionListener(ActionListener l) 
void removeActionListener(ActionListener l)
void setActionCommand(String command) 
String getActionCommand() 

5. Phần tử Choice

- Là phần tử chỉ cho phép lựa chọn 1.

- Phương thức khởi dựng: Choice()

- Phương thức:

void insert(String item, int index) 
void addItem(String item) 
String getItem(int index) 
int getItemCount() 
void select(int pos), select(String str) 
int getSelectedIndex(), String getSelectedItem() 
void remove(int index), remove(String item),removeAll() 
void addItemListener(ItemListener l) 
void removeItemListener(ItemListener l)

6. Phần tử List

- Là phần tử chỉ cho phép lựa chọn 1.
- Phương thức khởi dựng:

List()
List(int rows)
List(int rows, boolean multiple)

- Phương thức:

void setMultipleMode(boolean cool.gif 
void add(String item), add(String item, int index) 
String getItem(int index), int getItemCount() 
void select(int index), deselect(int index) 
boolean isIndexSelected(int index) 
int[] getSelectedIndexes(), String[] getSelectedItems() 
void remove(int index), remove(String item), removeAll() 

7. Phần tử Checkbox

- Là phần tử được sử dụng trong việc đánh dấu trạng thái.
- Phương thức khởi dựng:

Checkbox() 
Checkbox(String label) 
Checkbox(String label, boolean state) 
Checkbox(String label, boolean state, CheckboxGroup group) 
Checkbox(String label, CheckboxGroup, boolean state) 

- Phương thức

void setLabel(String label), String getLabel() 
boolean getState(), void setState(boolean state) 
void setCheckboxGroup(CheckboxGroup g) 
CheckboxGroup getCheckboxGroup() 
void addItemListener(ItemListener l) 
void removeItemListener(ItemListener l) 

8. Phần tử CheckboxGroup

- Là class được sử dụng kết hợp cùng checkbox để tạo nhóm radio button.
- Phương thức khởi dựng: CheckboxGroup() 
- Phương thức:
Checkbox getSelectedCheckbox() 
void setSelectedCheckbox(Checkbox box)

9. Phần tử Canvas

- Là phần tử trống chỉ cung cấp môi trường đồ hoạ để bạn có thể tuỳ biến sinh ra các phần tử có mức độ đồ họa tuỳ thích.
- Phương thức khởi dựng: Canvas () 
- Phương thức : thường sử dụng các phương thức thừa kế từ Component sau:

void setSize(int width, int height)
void addMouseListener(MouseEvent e)
void addMouseMotionListener(MouseEvent e)

II – Phần Tử Chứa (Container)
Container là các component có thể chứa các phần tử khác. Chúng còn cung cấp một môi trường đồ hoạ để bạn có thể vẽ lên đó. Java cung cấp các container các mục đích khác nhau sau:

Frame : Cửa sổ gồm tiêu đề, icon và border
Panel : Chỉ để nhóm các component khác
Applet : Chứa các phần tử hiển thị trên trang web
Dialog : Cửa sổ đàm thoại
FileDialog : Cửa sổ giao tiếp file trên đĩa
ScrollPane : Chứa phần tử có kích thước lớn

1. Frame
Khái niệm:
Là các cửa sổ độc lập gồm tiêu đề, icon và border. Là container duy nhất cho phép chứa menu. Layout mặc định là BorderLayout.

Phương thức khởi dựng:
Frame( )
Frame(String title)

Phương thức:
Image getIconImage(), void setIconImage(Image image) 
String getTitle(), void setTitle(String title) 
MenuBar getMenuBar(), void setMenuBar(MenuBar mb) 
void remove(MenuComponent m) 
boolean isResizable(), void setResizable(boolean resizable)

2. Panel
Khai niem:
Là một container với mục địch chỉ để nhóm các component. Bạn không thể nhìn thấy container này một cách trực tiếp. 

Phương thức khởi dựng : Panel()

Phương thức : sử dụng lại các phương thức của lớp cha (Container).
add(Component)
remove(Component)
validate(),…

3. Dialog
Khai niem:
Là của sổ đàm thoại không chứa menu, được sinh ra từ một của sổ chủ.

Phương thức khởi dựng:
Dialog(Frame owner) 
Dialog(Frame owner, boolean modal) 
Dialog(Frame owner, String title) 
Dialog(Frame owner, String title, boolean modal) 

Phương thức:
void setTitle(String title), String getTitle() 
void show(), void hide() 
void setModal(boolean b), boolean isModal() 
void setResizable(boolean resizable), boolean isResizable()

4. FileDialog
Khai niem: Là của sổ giao tiếp file trên đĩa, con của class Dialog.

Phương thức khởi dựng :
FileDialog(Frame owner) 
FileDialog(Frame owner, String title) 
FileDialog(Frame owner, String title, int mode) 
Trong đó mode = FileDialog.LOAD|FileDialog.SAVE

Phương thức:
void setMode(int mode), int getMode() 
void setDirectory(String dir), String getDirectory() 
String getFile(), void setFile(String file)


[b]5. CrollPane
Khai niem:
Là container với các thanh cuộn nó cho phép chứa được các phần tử lớn hơn phạm vi của nó.

Phương thức khởi dựng: ScrollPane()

Phương thức:
void setScrollPosition(int x, int y) 
void setScrollPosition(Point p) 
Point getScrollPosition()

III – Các Chế Độ Hiện Thị
Bao gồm các chế độ hiện thị sau:
- FlowLayout
- BorderLayout
- GridLayout
- GridBagLayout (*)
- CardLayout
(*) : Tương đốI khó so vớI các chế độ khác.

1. FlowLayout
Khái niệm: Các component được thêm vào nối tiếp nhau khi container dùng chế độ hiển thị này.

Khởi dựng :
FlowLayout(int align, int hgap, int vgap)
FlowLayout(int align) 
FlowLayout()

Các tham số :
align : canh lề (mặc định FlowLayout.CENTER) . Có giá trị : FlowLayout.LEFT, FlowLayout.RIGHT, FlowLayout.CENTER
vgap : k/c đứng giữa các component (mặc định 5)
hgap : k/c ngang giữa các component (mặc định 5)

Ví dụ : new FlowLayout(FlowLayout.LEFT, 8, 8)

2. BorderLayout
Khai niem:
Các component được thêm vào 5 vị trí cố định khi container dùng chế độ hiển thị này. 5 vị trí đó gồm:
- BorderLayout.NORTH hay “North”
- BorderLayout.SOUTH hay “South”
- BorderLayout.EAST hay “East”
- BorderLayout.WEST hay “West”
- BorderLayout.CENTER hay “Center”

Khởi dựng :
BorderLayout(int hgap, int vgap)
BorderLayout() 

Các tham số :
vgap : k/c đứng giữa các component (mặc định 0)
hgap : k/c ngang giữa các component (mặc định 0)
Ví dụ : Panel p = new Panel();
p.setLayout(new BorderLayout(8, 8))
p.add(new Label(“Password”), BorderLayout.NORTH)

3. GridLayout
Khái niệm:
Mỗi component được thêm vào sẻ chứa trong 1 ô lưới khi container dùng chế độ hiển thị này. Kích thước của các component trong các ô luôn luôn bằng nhau:
Khởi dựng :
GridLayout(int rows, int cols, int hgap, int vgap)
GridLayout(int rows, int cols) 

Các tham số :
vgap : k/c đứng giữa các component (mặc định 0)
hgap : k/c ngang giữa các component (mặc định 0)

Ví dụ : Panel p = new Panel();
p.setLayout(new GridLayout(3, 5));
p.add(com1); p.add(com2); p.add(com3);

4. CardLayout
Khai niệm: Container dùng chế độ hiển thị này để điều khiển sắp lớp của các container khác.

Khởi dựng : CardLayout()

Các phương thức :
show(Container parent, String name)
first(Container parent)
previous(Container parent)
next(Container parent)
last(Container parent)

Ví dụ : 
CardLayout cl = new CardLayout()
Panel p = new Panel();p.setLayout(cl);
p.add(“c1”, con1); p.add(“c2”, con2); p.add(“c3”, con3);
cl.show(p, “c3”); // hiển thị container con3

5. GridBagLayout
Khái niệm:
Là chế độ hiển thị ô lưới với các đặc tính mạnh.
- Mỗi component trong 1 ô
- Cho phép thêm component vào ô bất kỳ
- Cho phép gộp các ô lại với nhau,…

Khởi dựng : GridBagLayout()

Ví dụ : 
GridBagLayout gb = new GridBagLayout()
Panel p = new Panel();p.setLayout(gb);
p.add(“c1”, constraints); 
Trong đó : constraints là đối tượng của GridBagConstraints

GridBagConstraints:
Là đối tượng được sử dụng để định nghĩa các ràng buộc đối với component được thêm vào container sử dụng chế độ hiển thị GridBagLayout.
Khởi dựng : GridBagConstraints() 

IV – Điều khiển sự kiên & Menu.
1. Sự kiện xảy ra do
- Người sử dụng tác động lên các conponent của giao diện
- Hệ thống phát sinh.
- Mục tiêu của bài học là khai thác các sự kiện 
+ ActionEvent là sự kiện xảy ra khi Click vào button, Chọn mục menu, Nháy kép vào List
+ ItemEvent là sự kiện xảy ra khi chọn vào các mục của các component: Choice, List, Checkbox, Radio
+ MouseEvent xảy ra khi phát sinh các hành động của chuột : click, press, release, move, drag, nter, exit
+ KeyEvent xảy ra khi phát sinh các hành động của bàn phím
Để điều khiển một sự kiện nào dó cần tuân thủ các bước sau:
- Thực hiện các listener interface phù hợp
- Đăng ký xử lý sự kiện cho các component
- Viết code điều khiển sự kiện của các phương được khai báo bởi các listener interfac

2. Menu.
<Frame>.setMenuBar(MenuBar)
MenuBar class
<MenuBar>.add(Menu)
Menu class
<Menu>.add(MenuItem)
<Menu>.addSeparator()
MenuItem class
<MenuItem>.addActionListener(ActionListener)

Post a Comment

Mới hơn Cũ hơn