Lập trình Java căn bản - Chương 5 Tạo giao tiếp người dùng

Hiểu mục đích của gói AWT và cấu trúc của gói này. Biết cách sử dụng các đối tượng của gói AWT. Biết cách thiết kế một GUI.. Chúc các bạn học tốt.

GUI Slide 3/57

N ộ i dung

5.1- Ôn tập

5.2- GUI là gì?

5.3- Gói AWT của Java

5.4- Đưa 1 component vào GUI

• Exception = Run-time error

• Có thể bẫy 1 exception bằng cấu trúc

nhau: VB, VC++ dùng d ạ ng drag and

drop, C++ ñ òi h ỏ i programmer vi ế t toàn b ộ

code ñể t ạ o GUI, Java h ỗ tr ợ s ẵ n các l ớ p

t ạ o GUI cho Programmer s ử d ụ ng.

GUI là gì?

• GUI= Container + Components

Container

Components

GUI Slide 7/57

5.3- Gói AWT c ủ a Java

• AWT : abstract windowing toolkit - bộ công cụ

chứa các lớp ñể tạo cửa sổ.

• AWT là 1 phần của JFC- Java Foundation

GUI Slide 9/57

GUI Slide 11/57

Yêu c ầ u c ủ a GUI

• Thân thi ệ n v ớ i user.

• S ố ph ầ n t ử ( element, component) trên

GUI thay ñổ i tùy thu ộ c vào ứ ng d ụ ng.

• Khi user t ươ ng tác v ớ i ph ầ n t ử c ủ a GUI,

ứ ng d ụ ng ph ả i có ph ả n ứ ng.

• L ậ p trình s ự ki ệ n s ẽ bàn ñế n trong

ch ươ ng sau.

Các b ướ c ñể ñưa 1 component vào GUI

( vi ế t code )

• T ạ o 1 ñố i t ượ ng component phù h ợ p.

• Xác ñị nh hình th ứ c bên ngoài lúc ñầ u

c ủ a component.

• Đị nh v ị component này trên GUI.

•4 button

5.6- S ử d ụ ng các l ớ p c ủ a awt

Container: Đố i t ượ ng ch ứ a các element,

cho phép v ẽ , tô màu lên container.

Frame và Panel là các class th ườ ng dùng.

Panel th ườ ng dùng ñể ch ứ a các element

trong 1 GUI ph ứ c t ạ p, 1 Frame có th ể

ch ứ a nhi ề u Panel.

Panel, Applet th ườ ng dùng ñể t ạ o 1 ứ ng

d ụ ng nhúng vào Browser.

GUI Slide 17/57

5.6.2- Frame

Constructors:

Frame()
Make invisible frame

Frame(String)
Make a visible frame with title

Frame

Common methods

void setSize( int width, int Height)

public String getTitle();

public void setTitle(String title);

public void setResizable(boolean resizable)

public boolean isResizable()

public void setVisible(boolean)

public boolean isShowing()

void show(boolean)

void add ( ) // add component

add (component) // thêm 1 component vào panel

setLayout(LayoutManager layout) //ch ọ n ki ể u b ố trí components

Panel phải ñược ñưa

vào Frame khi viết

Label() : t ạo label trống

Label(String) : t ạo label có chuỗi

Label (String, int Align) T ạo label có gióng hàng:

Align=LEFT,RIGHT,CENTER

Common Methods:

void setFont (Font f)

void setText (String S)

String getText ()

TextField() : tạo text field trống

TextField(int cols) : tạo text field trống có n cột chữ

TextField(String S) : tạo text field có chuỗi S

TextField (String S, int cols) : text có chuỗi S, n cột

Common Methods:

void setEchoChar (char c) -ấ n ñị nh ký t ự th ể hi ệ n (password)

void setText (String S)

TextArea(String S, int rows, int cols)

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

vois insert(String S, int Index)

void replaceRange(String S, int begin, int end)

void setLabel (String) - ñổ i nhãn

String getLabel () - l ấ y n ộ i dung nhãn

GUI Slide 25/57

Checkbox/CheckboxGroup

Checkbox constructors

Checkbox() T o checkbox không nhãn

Checkbox(String) T o text box có nhãn

T ạ o 1 checkbox có nhãn, có ấ n ñị nh tr ị ch ọ n l ự a ñư a vào 1

void setLabel (String); String getLabel();

void setState (boolean); boolean getState();

void add (String) ; void addItem(String);

void insert (String item, int index)

int CountItems (); int getItemCount(); - lấy sốphần tử

String getItem (int Index);

GUI Slide 27/57

5.6.10- Scrollbar- Thanh cu ộ n

• Công cụnhập 1 trịtrong 1 khoảng số( biểu diễn bằng

Maximum, Minimum) bằng cách kéo con trượt

• Tại 1 thời ñiểm, con trượt ởtại vi trí mô tảcho trịhiện

hành (Value)

• Có thểcó hướng ngang hoặc dọc (Orientation)

Kích ñ ây s ẽ thay

ñổ i t ă ng gi ả m theo t ừ ng UNIT ñ ã

Scrollbar() - tạo thanh cuộn dọc

Scrollbar(int orientation) // VERTICAL|HORIZONTAL

Scrollbar(int orientation, int value, int visible, int minimum, int

maximum)

Common methods

void setMaximum (int v) int getMaximum () ;

void setMinimum (int v) int getMinimum ()

int getOrientation ()

void setUnitIncrement (int v) int getUnitIncrement ()

void setBlockIncrement (int v) int getBlockIncrement ()

void setValue (int v) int getValue ()

void setVisibleAmount (int newAmount)

int getVisibleAmount ()

GUI Slide 29/57

Click for Demonstration

Minh h ọ a

• Layout : Cách b ố trí các components lên

container.

• Không d ễ dàng gì ñể t ự qu ả n lý v ị trí c ủ a

các components trên GUI.

• LayoutManager là interface mô t ả v ề các

layout.

• Trong gói AWT có hi ệ n th ứ c s ẵ n m ộ t s ố

layout, các l ớ p layout này ñề u implement

GUI Slide 31/57

java.awt FlowLayout (bốtrí dạng dòng chảy)

java.awt BorderLayout (bốtrí vềbiên khung)

java.awt GridLayout (bốtrí dạng lưới ñều nhau)

java.awt GridBagLayout(bố trí dạng lưới không

• Bố trí các component theo dạng chảy xuôi theo

thứ tự mà phần tử này ñược add vào container.

• Đây là layout mặc ñịnh của Panel.

• Nếu có nhiều component trên container
Các

component có thể ñược ñặt trên nhiều dòng 

Vấn ñề gióng hàng (Align)

• Giữa các component, chúng hở nhau theo chiều

dọc (vgap) bao nhiêu, theo chiều ngang (hgap)

bao nhiêu?

Tr ị c ủ a align: các d ữ li ệ u static c ủ a class FlowLayout

LEFT CENTER RIGHT

LEADING (phía ñầu, tương tựLEFT)

TRAILING (phía ñuôi, tương tựRIGHT) Click for Demo

5.7.3- BorderLayout

• Bốtrí các component theo dạng ra biên của khung tạo ra

5 vịtrí: EAST, WEST, SOUTH,NORTH, CENTER

• Đây là layout MẶC ĐỊNH của Frame

• Nếu container chỉcó 1 component và ñặt nóởvịtrí

CENTER thì component này phủkín container

• Cú pháp thêm 1 component vào container tại 1 vịtrí:

Container.add("East", componentName); // hoặc

Container.add(BorderLayout.EAST, componentName);

• Tương tự cho “West”, “South”, “North”, “Center”

Click for Demo

GridLayout(int rows, int cols)

T ạ o grid layout rows x cols

.GridLayout(int rows, int cols, int hgap,

int vgap)

Click for Demo

GUI Slide 37/57

5.7.5- GridBagLayout

• Layout dạng lưới cho phép 1 component chiếm

1 số ô kề nhau theo cả 2 chiều.

• Hình Empoyee Info sau là GridBagLayout 6x4,

các label bên trái chiếm 1ô, các textbox chiếm 3

ô ngang Dòng “Sex” chiếm 4 ô ngang, 2

checkbox chiếm 2 ô ngang.

Các thí d ụ khác

Class java.awt.GridBagLayout

• Constructors : GridBagLayout()

• Áp ñặ t GridBagLayout cho 1 container:

GridBagLayout gb= new GridBagLayout();

GUI Slide 39/57

class GridBagConstraints

• Làm sao ñể có th ể ñưa 1 component vào

1 v ị trí nhưng trả i dài trên nhi ề u ô k ề

nhau?

• 1 component vào 1 v ị trí nhưng trả i dài

trên nhi ề u ô k ề nhau là 1 s ự “ràng bu ộ c” 1

component vào các ô này M ộ t ñố i t ượ ng

thu ộ c l ớ p GridBagConstraints s ẽ ñả m

nhi ệ m vi ệ c này.

class GridBagConstraints

• Properties – Đa số là static data

int gridx, gridy : ô sẽ ñặt component vào

int gridwidth, gridheight : số ô sẽ phủ theo 2 chiều khi thêm 1

component vào ô <gridx,gridy>

double weightx, weighty : Khoảng hở của lưới, mặc ñịnh là 0.

int anchor : Vị trí ñặt component, mặc ñi6nh là CENTER, các

static int ñược khai báo sẵn: GridBagConstraints.NORTH,

EAST,WEST, SOUTH, NORTHEAST, SOUTHEAST,

NORTHWEST, SOUTHWEST.

int fill : Xác ñịnh kiểu ñặt khi component có kích thước lớn hơm ô

sẽ ñược ñặt vào Các hằng ñược dùng:

GridBagConstraints.NONE, HORIZONTAL, VERTICAL, BOTH.

Insets insets : Đặc tả khoảng hở <top, bottom,left, right> giữa

các phần tử ñược ñưa vào, mặc ñịnh là 0.

int ipadx, ipady : Khoảng ñộn (số pixel trống) bên trong của phần

tử theo 2 chiều Mặc ñịnh là 0 Khi vẽ phần tử, sẽ thêm 2*ipadx

và 2*ipady vào chiều rộng tối thiểu và chiều cao tối thiểu của

phần tử.

GridBagConstraints(int gridx, int gridy, int gridwidth,

int gridheight, double weightx, double weighty,

int anchor, int fill, Insets insets, int ipadx, int ipady)

• Thao tác vớ i GridBagConstraint object b ằ ng static

data

• Làm sao k ế t h ợ p GridBagConstraints v ớ i

GridBagLayout?

GridBagLayout gbLayout = new GridBagLayout();

GridBagConstraints gbc = new GridBagConstraints();

gbLayout.setConstraints(gbc);

class GridBagConstraints

Method sau ñây sẽthêm component cvào vịtrí ô (row,col)

kéo tràn dọc nrowô và tràn ngang ncol ô Trong ñógbclà

GridBagConstraints vàgbclà GridBagLayout

void addComponent(Component c,int row, int col,

int nrow, int ncol){ gbc.gridx= col; gbc.gridy=row; // ñịnh vịô sẽthao tác

GUI Slide 43/57

5.7.6- CardLayout

• Bố trí các component thành từng lớp như lưng

các quân bài (card).

• Thường dùng Panel ñể chứa các component.

• Tại 1 thời ñiểm chỉ có 1 panel hiện hành (quân

GUI Slide 45/57

CardLayout

• CardLayout Constructors :

CardLayout()

CardLayout(int hgap, int vgap)

• Đư a 1 panel con vào panel cha

Card.show( FatherPanel, “Alias_of_sonPanel”);

Click for Demo

5.7.7- Layout ph ứ c t ạ p

• Có thểphải kết hợp nhiều Layout trên 1 GUI

• Chia GUI thành nhiều Panel, mỗi panel 1 Layout riêng

Panel p1, l ướ i 3x2 Panel p2, l ướ i 1x4 Panel p3, l ướ i 1x4 Panel p4

Click for Demo

GUI Slide 47/57

5.8- Hướ ng d ẫ n t ạ o GUI cho ứ ng d ụ ng

• GUI là khuynh hướ ng c ủ a các ứ ng d ụ ng

hi ệ n nay Nh ờ GUI, giao di ệ n v ớ i ng ườ i

TextFieldChuỗi nhập 1 dòng

Đối tượng

Dữliệu

Tr ậ t t ự nh ậ p li ệ u t ự nhiên c ủ a bài toán.

N ế u GUI ph ứ c t ạ p thì phân b ổ các component vào

nhi ề u panel, m ỗ i panel có m ộ t layout khác nhau.

• Thói quen t ố t khi ñặ t tên ñố i t ượ ng

Button, tên btnAdd, btnSub, btnMul, btnDiv

• 3 l ờ i thuy ế t minh: Label, tên lbl1, lbl2, lbl3

GUI Slide 53/57

5.9- Tóm t ắ t

• GUI- Graphic User Interface

• GUI là khuynh hướng của các ứng dụng hiện nay

• Nhờ GUI, người lập trình tách ñược ñiều khiển của

chương trình và dữliệu của chương trình

• Gói AWT của Java bao gồm một tập các lớp cho phép

người lập trình tạo ra GUI của ứng dụng

• Một component ñặt trên GUI có thể ñược user nhìn thấy

(visible) hoâc không nhìn thấy (invisible) và có thể ñược

thay ñổi kích thước (resize)

• Frame và Panel là các container thường ñược dùng ñể

• Trong gói awt, có 5 loại layout khác nhau: FlowLayout,

BorderLayout, GridLayout, GridBagLayout,CardLayout

• Thiết lập layout cho 1 container bằng hành vi

setLayout(aLayout) của lớp container này

• FlowLayout là bốcục mặc ñịnh của Panel, Applet Các

component ñược thêm vào tuần tựtừtrên xuống dưới,

từ trái sang phải

• BorderLayout là bốcục mặc ñịnh của Frame Cửa sổsẽ

ñược chia thành các phần: “East”, “West”, “South”,

“North”, “Center”

• GridLayout là cách bốtrí các component vào container

dạng 1 lưới rows hàng cols cột Các component cũng

GUI Slide 55/57

Tóm t ắ t

• GridBagLayout là cách bốtrí cho phép 1 component trải rộng

trên nhiều ô kềnhau.Các component có thểcó kích thước

khác nhau

GridBagConstraint ñể“ràng buộc” 1 component vào lưới

• CardLayout là cách bốtrí các component trên 1 sốPanel

Các panel hình thành 1 chồng (stack) Tại 1 thời ñiểm chỉcó

1 panel hiện hành

nhiều thành phần, mỗi thành phần là 1 panel có layout riêng

• BorderLayout là bốcục mặc ñịnh của Frame Cửa sổsẽ

ñược chia thành các phần: “East”, “West”, “South”, “North”,

“Center”

• GridLayout là cách bốtrí các component vào container dạng

1 lưới rows hàng cols cột Các component cũng ñược ñưa

vào các ô theo thứtự: trên
dưới, trái
phải

(4) Xác ñịnh các nội dung thuyết minh, mỗi lời

thuyết minh là 1 label.

(6) Phân tích hình dáng GUI ñể xác ñịnh số nhóm

panel.