Lap Trinh java bai giang chuong 4

Lập trình cơ bản với Java Tác giả: PGS.TS Trần Văn Lăng, Ths. Chu Nguyên Hoàng Minh Giúp các bạn tiếp cần gần hơn với bộ môn lập trình để trở thành một Lập trình viên suất sắc Lập trình cơ bản với Java Tác giả: PGS.TS Trần Văn Lăng, Ths. Chu Nguyên Hoàng Minh Giúp các bạn tiếp cần gần hơn với bộ môn lập trình để trở thành một Lập trình viên suất sắc

Bảng phân chia thờ lượng:

157

4.1 Mở ầu

Chương n ng ấp cho sinh viên những ki n thứ ơ n để xây d ng giao di n (Graphic User Interface - GUI) củ hương nh ứng dụng bằng ngôn ngữ java:

 Những nguyên tắc thi t k giao di n

 Những hư 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à những thành phần (components) xây d ng nên giao

di n người dùng

 B qu n lý trình bày (layout managers)

 X lý s ki n

Trong khuôn khổ giáo trình lập nh j ăn n này chúng tôi trình bày vi c thi t

k GUI ùng hư n awt (abstract windows toolkit) Vi c thi t k t GUI sẽ tr c quan, uyển chuyển hơn h húng dụng hư n JFC (Java Foundation Class) sẽ giớ được giới thi ng h n đề java nâng cao

4.2 Giới thi u ư v n awt ([1] trang 82, [2] trang 367)

Thư n awt là b hư n ùng để xây d ng giao di n người dùng cho m t hương nh ứng dụng đầ đủ các thành phần ơ n như: L e n Che

java.lang.Object

java.awt.Component 4.3.2 Container

C n ne đố ượng vật chứa hay những đố ượng có kh năng n lý và nhóm

đố ượng khác lại Những đố ượng con thu c thành phần w như: n

he n … hỉ s dụng đượ h đư n h ng hứa (container)

M t số đố ượng container trong Java:

Panel: Đố ượng khung chứ đơn g n nhấ ùng để nhóm đố ượng, thành phần

con lại M t Panel có thể chứa bên trong m t Panel khác

java.lang.Object + java.awt.Component + java.awt.Container

+ java.awt.Panel Frame: khung chứa Frame là m t c a số window hẳn hoi ở mức trên cùng bao gồm m t

đều và m đường n ( e ) như ứng dụng w n w hông hường khác Khung chứ F me hường được s dụng để tạo ra c a sổ chính của các ứng dụng

159

java.lang.Object + java.awt.Component + java.awt.Container + java.awt.Window

+ java.awt.Frame Dialogs: đ y là m t c a sổ dạng h p h i thoại (c a sổ dạng n òn được gọi là pop-up

window), c a sổ dạng n hường đượ ùng để đư hông h ùng để lấy dữ

li u nhập từ ng hông đố ượng, thành phần n g như Te F e chẳng hạn Dia g ũng m t c a sổ nhưng hông đầ đủ chứ năng như đố ượng khung chứa Frame

java.lang.Object + java.awt.Component + java.awt.Container + java.awt.Window

+ java.awt.Dialog ScrollPanes: là m t khung chứ ương khung chứ P ne nhưng h m 2 h nh ượt

giúp ta tổ chứ em đượ đố ượng lớn choán nhiều chỗ n m n h nh như những hình nh h ăn n nhiều dòng

java.lang.Object + java.awt.Component + java.awt.Container

+ java.awt.ScrollPane 4.3.3 Layout Manager ([1] trang 180, [2] trang 378)

Khung chứa container nhận đố ượng từ n ng đư n ph i bi t làm

th n để tổ chức sắp x p “ hỗ ở” h đố ượng đ Mỗ đố ượng khung chứ đều

có m t b qu n lý chịu trách nhi m th c hi n công vi đấ đ qu n lý trình bày (Layout Manager) Các b qu n nh m hư n AWT cung cấp cho ta bao gồm: FlowLayout: Sắp x p đố ượng từ trái qua ph i và từ trên xuống ướ C đố ượng đều giữ ng n í h hước của mình

BorderLayout: C đố ượng đượ đặt the đường viền của khung chứa theo

các cạnh West, East, South, North và Center tứ Đông T m ắc và Trung tâm hay Trái, Ph T n Dưới và Giữa tùy theo cách nhìn của chúng ta

160

GridLayout: Tạo m h ng ưới vô hình với các ô bằng nh C đối ượng sẽ đặt

vừ í h hước với từng ô đ Thứ t sắp x p ũng ừ trái qua ph i và từ trên xuống ưới

GridBagLayout: Tương như G L đố ượng khung chứ ũng được

đư m ướ ô h nh T nh n í h hướ đố ượng không nhất thi t ph i vừa với 1 ô mà có thể là 2, 3 ô hay nhiề hơn ù he ng c mà ta chỉ định thông qua

đố ượng GridBagConstraint

Null Layout: Cách trình bày t Đối vớ h nh n người lập trình ph i

t đ ng làm tất c từ vi định í h hước củ đố ượng ũng như định vị trí của

nó trên màn hình Ta không phụ thu c vào những ràng bu đông n m ắc gì c

4.4.Thiết kế GUI c c ươ

4.4.1.Tạo khung chứa cửa sổ c ươ

Thông hường để tạo c a sổ hính h hương nh ứng dụng ta ti n h nh ước:

public static void main(String args[]){

// Tạ đố ượng khung chứaFrame

Frame fr = new Frame("My First Window");

// định í h hước, vị trí của Frame

private static void createMenu(){

// Tao Frame ung dung final Frame fr = new Frame();

fr.setLayout(new BorderLayout());

// Tao cac menu bar MenuBar menu = new MenuBar();

Menu menuFile = new Menu("Edit");

MenuItem copyItem = new MenuItem("Copy Ctrl+C");

MenuItem pasteItem = new MenuItem("Paste Ctrl+V");

162

menuFile.add(copyItem);

menuFile.add(pasteItem);

Menu menuHelp = new Menu("Help");

MenuItem hTopicItem = new MenuItem("Help Topics"); MenuItem hAboutItem = new MenuItem("About Calculator"); menuHelp.add(hTopicItem);

163

4.4.3 Gắn Component vào khung chứa

Để gắn m t thành phần, m đố ượng component vào m t c a số (khung chứa) húng ùng phương hức add củ đố ượng khung chứa container

Ví dụ:

import java.awt.*;

class AddDemo{

public static void main(String args[]){

// Tạ đố ượng khung chứaFrame

Frame fr = new Frame("AddDemo App");

164

4.4.4 Trình bày các Component trong khung chứa ([1] trang 180, [2] trang 378)

hư húng đã t khung chứa container nhận đố ượng từ n ng đư

và nó ph i bi t làm th n để tổ chức sắp x p “ hỗ ở” h đố ượng đ Mỗ đối ượng khung chứ đều có m t b qu n lý chịu trách nhi m th c hi n công vi đấ đ

b qu n lý trình bày (Layout Manager) Chúng ta sẽ tìm hiểu chi ti t về các kiểu trình bày

củ hư n AWT

In e f e L M n ge định nghĩ giao ti p cho những lớp bi được làm th nào

để trình bày những trong những containers

C mp nen í h hướ như m ng m ốn

N u chiều r ng củ C n ne hông đủ chỗ cho các component thì chúng t đ ng tạo ra m t dòng mớ F wL hường đượ ùng để để sắp x p các button trong 1 panel

Chúng ta có thể đ ều chỉnh kho ng cách giữa các component

Ví dụ:

import java.awt.*;

import java.lang.Integer;

class FlowLayoutDemo{

public static void main(String args[]){

Frame fr = new Frame("FlowLayout Demo");

List li = new List();

for (int i=0; i<5; i++){

li.add(Integer.toString(i));

} fr.add(li);

fr.add(new Checkbox("Pick me", true));

fr.add(new Label("Enter your name:"));

fr.add(new TextField(20));

// phương hứ p () được gọi sẽ làm cho c a sổ // hi n hành sẽ í h hước vừa vớ í h hước // trình bày bố trí những thành phần con của nó

166

B trình bày khung chứ được chia làm 4 vùng:NORTH, SOUTH, WEST, EAST và

CE TER (Đông T m ắc và trung tâm) B trình bày loại này cho phép sắp x p

h đổ í h hước của những components chứa trong nó sao cho vứa với 5 vùng

ĐÔ G TÂY AM ẮC, TRUNG TÂM

Không cần ph i gắn component vào cho tất c các vùng Các component ở vùng NORTH và SOUTH có chiều cao tùy ý nhưng h ều r ng đúng ằng chiều r ng vùng chứa

Các component ở vùng EAST và WEST có chiều r ng ù nhưng h ều cao đúng ằng chiều cao vùng chứa

Các component ở vùng CENTER có chiều cao và chiều r ng phụ thu c vào các vùng xung quanh

Ví dụ:

import java.awt.*;

class BorderLayoutDemo extends Frame{

private Button north, south, east, west, center;

public BorderLayoutDemo(String sTitle){

super(sTitle);

north = new Button("North");

south = new Button("South");

east = new Button("East");

west = new Button("West");

center = new Button("Center");

public class GridLayout extends Object implements LayoutManager

Đối với m t container trình bày theo kiểu GridLayout thì:

B trình bày tạo m h ng ưới vô hình với các ô bằng nhau

C đố ượng sẽ đặt vừ í h hước với từng ô đ Thứ t sắp x p từ trái qua ph i

và từ trên xuống ưới

Ví dụ:

import java.awt.*;

public class GridLayoutDemo{

public static void main(String arg[]){

Frame f = new Frame("GridLayout Demo");

f.setLayout(new GridLayout(3,2));

f.add(new Button("Red"));

f.add(new Button("Green"));

f.add(new Button("Blue"));

f.add(new Checkbox("Pick me", true));

f.add(new Label("Enter name here:"));

public class GridBagLayout extends Object implements LayoutManager2

(public interface LayoutManager2 extends LayoutManager)

Đối với m t container trình bày theo kiểu GridBagLayout thì: Các componets khi đượ đư h ng hứa sẽ đượ nh n 1 h ng ướ ô h nh ương như GridLayout Tuy nhiên khác vớ G L í h hướ đố ượng không nhất thi t

ph i vừa vớ 1 ô n h ng ưới mà có thể là 2, 3 ô hay nhiề hơn ù he ng c

mà ta chỉ định hông đố ượng GridBagConstraints

Lớp GridBagConstraints dẫn xuất từ lớp Object Lớp G gC n n ùng để chỉ định ràng bu c cho những components trình bày trong khung chứa container theo kiểu GridBagLayout

 gridx, gridy: vị trí ô củ h ng ưới vô hình mà ta sẽ đư đố ượng con vào

 gridwidth, gridheight: í h hướ h ùng nh h đố ượng con

 Insets: là m t bi n đố ượng thu c lớp In e ùng để định kho ng cách biên

phân cách theo 4 chiề ( n ưới, trái, ph i)

 weightx, weighty: chỉ định kho ng cách lớn ương đối củ đố ượng con

với nhau

í ụ:

169

import java.awt.*;

public class GridBagLayoutDemo{

public static void main(String arg[]){

Frame f = new Frame("GridBagLayout Demo");

// Thiet lap layout manager // Tao doi tuong rang buoc cho cach trinh bay // GridBagLayout

GridBagLayout layout = new GridBagLayout();

GridBagConstraints constraints = new GridBagConstraints();

// Qui dinh cac nut nhan se thay doi kich thuoc // theo ca 2 chieu

171

// Tu nut thu 7 tro di khong can rang buoc // thay vi doi kich thuoc

constraints.fill = GridBagConstraints.NONE; // Rang buoc cho nut nhan thu 7

f.add(buttons[i]);

f.pack();

f.setVisible(true);

M t khung chứ được trình bày theo kiể L nghĩ người lập trình

ph i t làm tất c từ vi định í h hước của khung chứ ũng như í h hước và vị trí của từng đố ượng component trong khung chứa

Để thi t lập cách trình bày là Null Layout cho m t container ta chỉ vi c gọ phương thức setLayout(null) với tham số là null

M t số phương hức của lớp trừ ượng C mp nen ùng để định vị định kích hước củ mp nen h đư húng h ng hứa trình bày theo kiểu kiểu t do:

 Public void setLocation(Point p)

 Public void setSize(Dimension p)

 Public void setBounds(Rectangle r)

List li = new List();

for(int i=0; i<5; i++){

li.add(Integer.toString(i));

} li.setBounds(200, 50, 50, 50);

174

4.4.5 Các ố ượng khung chứa Container

hư húng đã n ne đố ượng khung chứa có kh năng n lý và chứ đố ượng (components) khác trong nó

Các components chỉ có thể s dụng đượ h đư n 1 đố ượng khung chứa là container

Mỗ n ne hường gắn với m t LayoutManager (FlowLayout, BorderLayout, GridLayout, GridBagLayout, Null Layout) qu định cách trình bày và bố trí các components trong m t container

Các lọai container trong java: Frame, Panel, Dialog, ScrollPanes

4.4.5.1 Khung chứa Frame

java.lang.Object + java.awt.Component + java.awt.Container + java.awt.Window

+ java.awt.Frame

Khung chứa Frame là m t c a số window hẳn hoi ở mức trên cùng bao gồm m t đều và m đường n ( e ) như ứng dụng w n w hông hường khác Khung chứ F me hường được s dụng để tạo ra c a sổ chính của các ứng dụng

Khung chứa Panel có b qu n lý trình bày (LayoutManager)mặ định là FlowLayout

4.4.5.2 Khung chứa Panel

java.lang.Object + java.awt.Component + java.awt.Container

+ java.awt.Panel

Khung chứa Panel có b qu n lý trình bày (LayoutManager) mặ định là FlowLayout

Đối với khung chứa Panel thì các Panel có thể lồng vào nhau, vì vậy khung chứa

P ne hường đượ ùng để bố trí các nhóm components bên trong m t khung chứa khác

Ví dụ:

import java.awt.*;

public class PanelDemo extends Frame{

private Button next, prev, first;

175

private List li;

public PanelDemo(String sTitle){

super(sTitle);

next = new Button("Next >>");

prev = new Button("<< Prev");

first = new Button("First");

Panel southPanel = new Panel();

southPanel.add(next);

southPanel.add(prev);

southPanel.add(first);

// BorderLayout.SOUTH: vùng ưới this.add(southPanel, BorderLayout.SOUTH); Panel northPanel = new Panel();

northPanel.add(new Label("Make a Selection")); // BorderLayout.NORTH: vùng trên

}

public static void main(String arg[]){

Container f = new PanelDemo("Panel Demo"); f.setSize(300, 200);

f.setVisible(true);

}

}

Kết quả thực c ươ :

176

4.4.5.2 Khung chứa Dialog

java.lang.Object

+ java.awt.Component + java.awt.Container + java.awt.Window +- java.awt.Dialog

Dialog là m t lớp khung chứa t F me òn được gọi là popup window Có hai loại dialog phổ bi n:

Modal Dialog: sẽ khóa tất c các c a số khác của ứng dụng khi dialog dạng này còn hiển

thị

Non-Modal Dialog: vẫn có thể đ n các c a số khác của ứng dụng khi dialog dạng này

hiển thị

M t c a sổ dạng Dialog luôn luôn ph i gắn với m t c a sổ ứng dụng (Frame)

Để tạo m đố ượng khung chứa Dialog ta có thể dùng m t trong các constructor của nó:

public Dialog (Frame parentWindow, boolean isModal)

public Dialog (Frame parentWindow, String title,boolean isModal)

parentWindow: c a sổ h e: đề của Dialog

isModal: true -> là Dialog dạng modal

isModal: false -> là Dialog không ph i dạng modal(hay non-modal)

4.5 Xử lý biến cố/sự ki n ([2] trang 405)

4.5.1 Mô hình xử lý sự ki n (Event-Handling Model)

Ở trên chúng ta chỉ đề cập đ n vấn đề thi t k giao di n hương nh ứng dụng mà

hư đề cập đ n vấn đề x lý s ki n Những s ki n đượ ph nh h người dùng ương ới giao di n hương nh (GUI) hững ương hường gặp như: h ển,

177

nhấn chu t, nhấn m t nút nhấn, chọn m t MenuItem trong h thống th đơn nhập dữ

li u trong m ô ăn b n đ ng a sổ ứng dụng … Kh m ương y ra thì m t

s ki n được gở đ n hương nh Thông n ề s ki n hường đượ ư ữ trong m t

đố ượng dẫn xuất từ lớp AWTEvent Những kiểu s ki n trong gói java.awt.event có thể dùng cho c những mp nen AWT JFC Đối vớ hư n JFC thì có thêm những kiểu s ki n mới trong gói java.swing.event

Những lớp sự ki n của gói java.awt.event

Có 3 y u tố quan trọng trong mô hình x lý s ki n:

 Nguồn phát sinh s ki n (event source)

 S ki n (event object)

 B lắng nghe s ki n (event listener)

Nguồn phát sinh s ki n: là thành phần của giao di n m ngườ ùng đ ng

S ki n: Tóm tắt thông tin về x ki n x y ra, bao gồm tham chi đ n nguồn gốc phát sinh s ki n và thông tin s ki n sẽ gởi đ n cho b lắng nghe x lý

B lắng nghe: M t b lắng nghe là m đố ượng của m t lớp hi n th c m t hay nhiều interface củ g j w e en h j w ng e en (đối với những component

ng hư n JFC) Kh được thông báo, b lắng nghe nhận s ki n và x lý Nguồn phát sinh s ki n ph i cung cấp những phương hứ để đăng h ặc hủy bỏ m t b lắng nghe Nguồn phát sinh s ki n luôn ph i gắn với m t b lắng nghe, và nó sẽ thông báo với b lắng nghe đ h ki n ph nh đ

hư ậ người lập trình cần làm hai vi c:

178

Tạ đăng m t b lắng nghe cho m t component trên GUI

C đặ phương hức qu n lý và x lý s ki n

Những interfaces lắng nghe của gói java.awt.event:

M đố ượng Event-Listener lắng nghe những s ki n khác nhau phát sinh từ các components của giao di n hương nh Với mỗi s ki n h nh ph nh h phương thứ ương ứng trong những Event-Listener sẽ được gọi th c hi n

Mỗi interface Event-Listener gồm m t hay nhiề phương hức mà chúng cần cài đặt trong các lớp hi n th ( mp emen ) n e f e đ hững phương hức trong các interface là trừ ượng vì 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 hứ đ u không thì các b lắng nghe sẽ trở thành các lớp trừ ượng

179

public void mousePressed(MouseEvent event): được gọi khi m t nút chu được

nhấnvà con trỏ chu t ở trên component

public void mouseClicked(MouseEvent event): được gọi khi m t nút chu được nhấn

và nh trên component mà không di chuyển chu t

public void mouseReleased(MouseEvent event): được gọi khi m t nút chu t nh sa khi

kéo rê

public void mouseEntered(MouseEvent event): được gọi khi con trỏ chu t vào trong

đường biên của m t component

public void mouseExited(MouseEvent event): được gọi khi con trỏ chu t ra khỏ đường

biên của m t component

C phương hức của interface MouseMotionListener:

public void mouseDragged(MouseEvent even ): phương hứ n được gọi khi người

dùng nhấn m t nút chu t và kéo trên m t component

public void mouseMoved(MouseEvent event): phương hứ n được gọi khi di chuyển

chu t trên component

Mỗ phương hức x lý s ki n chu t có m t tham số MouseEvent chứa thông tin về

s ki n chu t phát sinh chẳng hạn như: ọ đ nơ ki n chu t x y ra Những phương hứ ương ứng trong các interfaces sẽ t đ ng được gọi khi chu ương ới

180

// set up GUI and register mouse event handlers

public MouseTracker(){

super( "Demonstrating Mouse Events" );

statusBar = new Label();

this.add( statusBar, BorderLayout.SOUTH );

// application listens to its own mouse events addMouseListener( this );

addMouseMotionListener( this );

setSize( 275, 100 );

setVisible( true );

}

// MouseListener event handlers

// handle event when mouse released immediately

// after press

public void mouseClicked( MouseEvent event ){

statusBar.setText( "Clicked at [" + event.getX() + ", " + event.getY() + "]" ); }

// handle event when mouse pressed

public void mousePressed( MouseEvent event ){

statusBar.setText( "Pressed at [" + event.getX() + ", " + event.getY() + "]" ); }

// handle event when mouse released after dragging

public void mouseReleased( MouseEvent event ){

statusBar.setText( "Released at [" + event.getX() + ", " + event.getY() + "]" );

}

// handle event when mouse enters area

public void mouseEntered( MouseEvent event ){

statusBar.setText( "Mouse in window" );

181

}

// handle event when mouse exits area

public void mouseExited( MouseEvent event ){

statusBar.setText( "Mouse outside window" );

}

// MouseMotionListener event handlers

// handle event when user drags mouse with button pressed

public void mouseDragged( MouseEvent event ){

statusBar.setText( "Dragged at [" + event.getX() + ", " + event.getY() + "]" );

}

// handle event when user moves mouse

public void mouseMoved( MouseEvent event ){

statusBar.setText( "Moved at [" + event.getX() + ", " + event.getY() + "]" ); }

// execute application

public static void main( String args[] ){

MouseTracker application = new MouseTracker();

}

} // end class MouseTracker

Kết quả thực c ươ :

182

4.5.3 Xử lý sự ki n bàn phím

Để x lý s ki n bàn phím java hỗ trợ m t b lắng nghe s ki n đ n e f e KeyListener M t s ki n n phím đượ ph nh h người dùng nhấn và nh m t phím trên bàn phím M t lớp hi n th c KeyListener ph đặ phương hức keyPressed, keyReleased và keyTyped Mỗ phương hức này có m t tham số là m đố ượng kiểu KeyEvent KeyEvent là lớp con của lớp InputEvent

C phương hức của interface KeyListener:

Phương hức keyPressed được gọi khi m t phím bất kỳ được nhấn

Phương hức keyTyped được gọi th c hi n h người dùng nhấn m t phím không ph i

“phím h nh đ ng” (như phím mũ n phím H me En P ge Up P ge D wn phím chứ năng như: m L P n S een S Lock, Caps Lock, Pause)

Phương hứ e Re e e được gọi th c hi n khi nh phím nhấn sau khi s ki n keyPressed hoặc keyTyped

Ví dụ: minh họa vi c x lý s ki n chu hông phương hức của interface

KeyListener Lớp Ke Dem n ưới hi n th c interface KeyListener, vì vậy tất c 3 phương hức trong KeyListener ph đượ đặ ng hương nh

// KeyDemo.java

// Demonstrating keystroke events

// Java core packages

import java.awt.*;

import java.awt.event.*;

public class KeyDemo extends Frame implements KeyListener{

private String line1 = "", line2 = "";

private String line3 = "";

private TextArea textArea;