Tổng quan về Java UI pptx

public static void mainString args[] { MenuWindow window = new MenuWindow; • Sử dụng Labels Là thành phần đơn giản nhất của UI Components, là một chuỗi kí tự có thể đượ

Trang 1

1. TỔNG QUAN VỀ JAVA UI

UI(User Interface) là giới hạn rộng đề cập các loại giao tiếp giữa chương trình và người sử dụng UI

không chỉ là những thứ mà người dùng thấy, mà bao gồm cả những thứ người sử dụng nghe và cảmnhận Ngay cả tốc độ la một phần quan trọng của UI trong một chương trình

Giới thiệu GUI

Đây là một UI được ưa chuộng hơn đối với hầu hết các chương trình JAVA

Sử dụng âm thanh

Ứng dụng sẽ chơi được âm thanh mà các ứng dụng khác không thể làm được

Nhận thông tin về cấu hình

Người sử dụng có thể chỉ định thông tin cấu hình tới ứng dụng bằng cách sử dụng command-line arguments và parameters

Lưu trữ độ ưu tiên của người sử dụng bằng việc sử dụng các thuộc tính

Đối với những thông tin mà ứng dụng cần ngay cả khi ứng dụng không chạy, bạn có thể sử dụng các

thuộc tính Những ứng dụng gg kí sinh(Applets) thường không thể viết các thuộc tính cho hệ thống các file

cục bộ vì những hạn chế về bảo mật thông tin

Nhận và hiển thị thông tin đầu vào, đầu ra và các dòng lỗi

Các thông tin dầu vào, đầu ra và các lỗi chuẩn là một cách cũ vẫn còn hiện hữu đối với một giao diệnngười dùng Nó vẫn còn hữu ích cho việc kiểm tra và gỡ lỗi các chương trình

a CÁC THÀNH PHẦN CỦA AWT

Các điều khiển cơ bản: Buttons, Checkboxes, Choices, Lists, Menus, and Text Fields

Các lớp Button, Checkbox, Choice, List, MenuItem, and TextField cung cấp những công cụ điều khiển

cơ bản Đây là những các phổ biến nhất để người sử dụng xây dựng một chương trình JAVA Khingười sử dụng kích hoạt một trong những điều khiển trên, ví dụ như khi nhắp chuột vào một nút haykhi nhấn phím trong một hộp Text thì nó sẽ thông báo một sự kiện (ACTION_EVENT) Một đối tượngchứa điều khiển đó có thể đáp trả sự kiện bằng việc sử dụng phương thức action()

Các công cụ khác để lấy thông tin đầu vào của người sử dụng: Sliders, Scrollbars, and Text Areas

Khi những điều khiển cơ bản không còn thích hợp nữa, bạn có thể sử dụng các lớp Scrollbar andTextArea để lấp dữ liều người sử dụng nhập vào Lớp Scrollbar được sử dụng cho cả hai chức năng:thanh cuộn và con trược Scrollbars không được tự động nằm trong Lists, Text Areas và trong nhữngđối tượng ScrollPane

Lớp TextArea chỉ đơn giản cung cấp vùng để hiển thị hay cho phép sửa một vài dòng văn bản

Tạo một thành phần theo ý muốn: Canvases

Lớp Canvas cho phép bạn viết một thanh phần theo ý mình Với các lớp con của Canvas, bạn có thể vẽcác hình ảnh như ý mình ra màn hình

Thành phần Labels

Label chỉ đơn giản để hiển thị một di₫òng văn bản không thể chọn lựa

Các đối tượng chứa: Windows, Panels, and Scroll Panes

AWT cung cấp 3 kiểu đối tượng chứa, tất cả được thực hiện như các lớp con của lớp Cotainer Lớp conWindow (Dialog, FileDialog, và Frame) cung cấp những cửa sổ dùng để chứa các thành phần Panel ddùng để nhóm các thành phần trong một vùng của cửa sổ ScrollPane cũng giống như Panel, nhưng nóđặc biệt hơn: nó hiển thị một thành phần lớn không có giới hạn về không gian, thông thường dùngthanh cuộn để điều khiển hiển thị một phần nào đó của thành phần

Frames tạo một cửa sổ khá mạnh, khác với các cửa sổ do Dialogs tạo ra, các cửa sổ do Dialogs tạo ra sẽphụ thuộc trên cửa sổ do Frames tạo ra

B CÁC LỚP AWT KHÁC

AWT chứa nhiều thành phần khác Nó chứa các lớp có liên quan đến việc vẽ và nắm bắt sự kiện Phầnnày chúng ta thảo luận về các lớp của AWT có trong gói java.awt AWT chứa hai gói khác làjava.awt.image và java.awt.peer mà hầu hết các chương trình không sử dụng nó Lớp và giao diện trongnhững gói này sẽ được đề cập đến khi cần thiết

Gói java.awt một vài lớp layout manager Gói java.awt cung cấp vài lớp về kích thước và hình dạng.

Lớp Shape bao gồm Point, Rectangle, and Polygon

Lớp Color class rất thích hợp cho việc miêu tả và thao các màu sắc Nó định nghĩa các hằng số cho cácmàu được dùng phổ biến như Color.black Trong khi màu sử dụng phổ biến theo địng dạng RGB (red-green-blue), thì nó cũng có thể hiểu được màu đinh dang theo HSB (hue-saturation-brightness)

Trang 2

Lớp Image cung cấp cách trình diễn dữ liệu ảnh Một ứng dụng có thể lấy những đối tượng Image chocác ảnh GIF và JPEG bằng cách dùng phương thức getImage()

2. SỬ DỤNG CÁC THÀNH PHẦN, CÁC KHỐI XÂY DỰNG MỘT GUI

a. Sử dụng các thành phần của AWT

Hình vẽ sau cho thấy hệ thống phân cấp có tính thừa kế cho các lớp thành phần của AWT

Các quy tắc chung khi sử dụng các thành phần

Làm thế nào để thêm một thành phần vào một đối tượng chứa

Khi bạn đọc bài này, nên chú ý Bởi không có thành phần nào ngoại trừ cửa sổ tự hiển thị trên màn hìnhđược Trước hết bạn phải thêm nó vào một đối tượng chứa Bản thân đối tượng chứa này là một thànhphần, cũng có thể được thêm vào đối tượng chứa khác Windows cũng như Frames and Dialogs nó lànhững đối tượng chứa mức cao nhất; đó là những thành phần không thêm vào được đối tượng chứakhác

Lớp Container địng nghĩa 3 phương thức cho việc thêm thành phần vào trong no: một phương thức

add() một thông số và 2 phương thức add() có hai thông số Nó phụ thuộc vào cách bố trí của một đối

tượng chứa đang dùng

Phương thức add() một thông số thông thường chỉ yêu cầu chỉ định thành phần thêm vào Phương thứcadd() 2 thông số Phương thức 2 thông số đầu tiên cho phép bạn thêm một thông số chỉ định vị trí màthành thành phần được thêm vào Thông số thứ 2 của phương thức add() 2 thông số thứ 2 chỉ địnhthành phần được thêm vào Container Thông số đầu là chuỗi phụ thuộc

Chú ý: Thêm một thành phần vào Container là chuyển thành phần đó từ Container đang chứa nó sang

Container khác Vì thế không thể có một thành phần trong 2 Container, ngay cả khi 2 Container đókhông xuất hiện cùng một lúc trên màn hình

Các lớp thành phần cung cấp cái gì

Tất cả các thành phần ngoại trừ Menus được thực thi như những lớp con của lớp Component Nó thừakế phần lớn các chức năng của lớp này

Các hổ trợ cơ bản cho việc ve

Lớp Component cung cấp các phương thức paint(), update(), và repaint()để hổ trợ cho việc vẽ

Các sự kiện

Lớp Component định nghĩa một phương thức handleEvent() cho mục đích chung và một nhóm cácphương thức như action() nắm bắt các sự kiện xác định Lớp Component cũng nhận sự điều khiển từbàn phím

Trang 3

Điều khiển hình thức: font

Lớp Component cung cấp các phương thức để lấy và xác lập font, và lấy thông tin về Font hiện tại

Điều khiển hình thức: màu

Lớp Component cung cấp các phương thức sau để lấy và xác lập màu nền và màu chữ:setForeground(Color), getForeground(), setBackground(Color), and getBackground() Màu chữ là màudùng cho tất cả văn bản có trong thành phần màu nền là màu đằng sau văn bản hoặc ảnh

Nắm bắt ảnh

Lớp Component cung cấp nền tảng cho việc hiển thị ảnh Lưu ý rằng phần lớn các thành phần khônghiển thị được ảnh Canvases và hầu hết các Container có thể hiển thị được ảnh

Điều khiển kích thước và vị trí trên màn hình

Phương thức preferredSize() và minimumSize() cho phép một thành phần thiết kế các thành phần vớikích thước thích hợp và nhỏ nhất

Làm thế nào để thay đổi hình thức và cách thức tác động của một thành phần

Hình thức của hầu hết các thành phần đều phụ thuộc vào Platform Buttons ở hệ thống Motif khác sovới Buttons ở hệ thống Macintosh

Bạn không thể dễ dàng thay đổi hoàn toàn hình thức của các thành phần bạn chỉ có thể thay đổi mộtphần nhỏ hình thức của các thành phần đó mà thôi như là thay đổi Font và màu nền

Mặc dù bạn không thể thay đổi hoàn toàn hình thức của các thành phần, nhưng bạn có thể thay đổi cách

cư xử của nó Ví dụ, nếu chỉ có giá trị số mới phù hợp với Textfied, thì bạn có thể thực thi lớp conTextField kiểm tra mọi giá trị nhập vào của bàn phím, không nhận những giá trị không phải là sô

• Sử dụng Buttons

Button là một công cụ điều khiển đơn giản để phát ra một sự kiện hành động khi người sử dụng nhấnvào đó

Hình thức của Buttons trên màn hình phụ thuộc vào nền mà nó đang chạy và nó có nhận được sự tácđộng hay không Nếu bạn muốn các Button của chương trình giống nhau ở mọi nền hoặc cho thật đặcbiệt, bạn nên tạo một lớp con Canvas để làm được ngoại hình của các nút theo ý muốn; bạn không thểdùng lớp con Button để thay đổi ngoại hình của các nút những nét của hình thức của một Button có thểthay đổi được là Font và chuỗi hiển thị , màu nền và màu chữ của nó, và và nó có thể được tác động haykhông

Sau đây là một Applet hiển thị 3 Button Khi bạn kích chuột vào nút bên trái, nó sẽ làm cho nút giữakhông nhận được sự tác động (và nó làm cho nó không thể nhận sự tác động) và làm cho nút phải nhậnđược sự tác động Khi kích chuột vào nút bên phải, nó kích hoạt sự hoạt động của nút giữa và nút tráivà làm cho nó sẽ không nhận được sự tác động

//In initialization code:

b1 = new Button();

b1.setLabel("Disable middle button");

b2 = new Button("Middle button");

b3 = new Button("Enable middle button");

b3.disable();

.

public boolean action(Event e, Object arg) {

Object target = e.target;

Trang 4

return true;

}

return false;

}

• Sử dụng Canvases

Lớp Canvas tòn tại như là một lớp con Nó không làm gì cho bản thân nó; nó chỉ cung cấp cho bạn cáchthực thi các thành phần tự tạo Ví dụ, Canvases rất thuận lợi cho việc hiển thị các vùng của hình ảnh,trong bất cứ trường hợp nào bạn cùng có thể nắm bắt được các sự kiện xảy ra trong suốt thời gian hiểnthị ảnh

Canvases cũng thuận tiên khi điều khiển Button, for example – nó không giống như sự thực thị mặcđịnh của một điều khiển Vì lẽ rằng bạn không thể thay đổi hình thức của các điều khiển chuẩn bằngcác lớp con mà các thành phần tương ứng với no (ví dụ chư Button), do đó bạn phải thực thi lớp conCanvas để bạn có thể có hình thức như ý muốn và cách cư xử tương tự như sự thực thi mặc định củađiều khiển

Khi thực thi một lớp con Canvas , cẩn thận khi thực thi những phương thức minimumSize() vàpreferredSize() để mang lại kích thước đúng đắn cho các Canva Mặc khác, phù thuộc vào cách bố tricủa các đối tượng chứa các Canva, các Canva có thể có kích thước quá nhỏ, có khi không thấy cùngnên

Sau đây là một Applet sử dụng 2 trường hợp của lớp con Canvas subclass: ImageCanvas

Sau đây là một đoạn mã lệnh của ImageCanvas Bởi vì dữ liệi ảnh được tải về không đồng bộ nênImageCanvas không cho biết đựơc độ lớn của nó cho đến vài giây sau khi nó tạo được Vì lý do này,ImageCanvas dùng độ rộng và độ cao ban đầu để tạo ảnh cho đến khi kích thước của ảnh hoàn toàn xácđịnh được thì nó mới thay đổi kích thước của nó

class ImageCanvas extends Canvas {

public ImageCanvas(Image image, Container parent,

int initialWidth, int initialHeight) {

Trang 5

if (!trueSizeKnown) {

int imageWidth = image.getWidth(this);

int imageHeight = image.getHeight(this);

if ((imageWidth > 0) && (imageHeight > 0)) {

• Sử dụng Checkboxes

Lớp Checkbox cung cấp những checkbox – 2 trạng thái của Checkbox có thể là “on” hoặc “off” Khi

người sử dụng nhấn chuột vào Checkbox, trạng thái của Checkbox sẽ thay đổi và trả về một sự kiện.Mặc khác, nó cũng nhóm các thành phần để người dùng có thể chọn như là Choices, Lists, và Menus Nếu bạn muốn tạo một nhóm Checkbox mà chỉ có một Checkbox trong một thời điểm ở trạng thái “on”thì bạn có thể thêm vào một đối tượng CheckboxGroup để giám sát các Checkbox đó

Ví dụ :

Panel p1, p2;

Checkbox cb1, cb2, cb3; //These are independent checkboxes.

Checkbox cb4, cb5, cb6; //These checkboxes are part of a group.

cb4 = new Checkbox("Checkbox 4", cbg, false); //initial state: off (false)

cb5 = new Checkbox("Checkbox 5", cbg, false); //initial state: off

cb6 = new Checkbox("Checkbox 6", cbg, false); //initial state: off

• Sử dụng Choices

Lớp Choice cung cấp một thực đơn để lựa chọn, truy nhập bằng một nút đặc biệt người sử dụng nhấnnút đó và nó sẽ liệt ra một menu và bạn có thể chọn một thứ trong menu đó Khi người dùng chọn, nósẽ phản hồi một sự kiện

Ví dụ :

// Where instance variables are defined:

Choice choice; //pop-up list of choices

// Where initialization occurs:

choice = new Choice();

choice.addItem("ichi");

choice.addItem("ni");

Trang 6

if (e.target instanceof Choice) {

• Sử dụng Dialogs

AWT cung cấp những hổ trợ cho dialogs – là những cửa sổ phụ thuộc vào những cửa sổ khác—với lớp

Dialog Nó cung cấp những lớp con hữu ích như : FileDialog, cung cấp một cửa sổ mà bạn có thể mởhoặc lưu file

Một yếu tố để phân biệt Dialog và các cửa sổ thông thường khác là Dialog phụ thuộc vào các cửa sổkhác (Frame) Khi cửa sổ đóng thì các Dialog phụ thộc nó cũng biến mất Khi những cửa sổ đó đượcthu nhỏ các Dialog phụ thuộc nó sẽ không xuất hiện trên màn hình Khi cửa sổ được trở về kích thướcthông thường thì các Dialog đó sẽ hiển thị ra màn hình AWT tự động cung cấp các hình thức này chobạn

Dialogs có thể là modal Modal dialogs đòi hỏi sự chăm sóc kỹ lưỡng của người sử dụng, chống lại việc

người sử dụng làm bất cứ cái gì khác trên ứng dụng cho đến khi Dialog đã được gạt bỏ

SimpleDialog(Frame dw, String title) {

super(dw, title, false);

parent = (DialogWindow)dw;

//Create and add components, such as the set button.

//Initialize this dialog to its preferred size.

• Sử dụng Frames

Lớp Frame cung cấp những cửa sổ cho applets và applications Mỗi ứng dụng phải có ít nhất 1 Frame.Nếu một ứng dụng có 1 cửa sổ phụ thuộc vào cửa sổ khác thì bạn nên dùng Dialog thay vì dùng Frame

Trang 7

cho cửa sổ phụ thuộc đó Đáng tiếc là applets không thể dùng tốt dialogs, vì vậy người sử dụng thườngdùng Frame

Ví dụ:

public class MenuWindow extends Frame {

boolean inAnApplet = true;

TextArea output;

public MenuWindow() {

//This constructor implicitly calls the Frame no-argument

//constructor and then adds components to the window.

public static void main(String args[]) {

MenuWindow window = new MenuWindow();

• Sử dụng Labels

Là thành phần đơn giản nhất của UI Components, là một chuỗi kí tự có thể được dùng làm nhãn cho các

UI Components khác Labels không sửa được, nó chỉ làm nhãn cho các UI Components khác trên mànhình

Lợi điểm của Lables so vớI các chuỗI kí tự thông thường khác là:

Bạn không phảI tự vẽ lạI Labels Labels là những thành phần của AWT và AWT theo dõi và làm việcđó

Labels tuân theo sự sắp xếp của Panel chứa nó và có thể căn chỉnh với các UI Components khác

Labels chứa chuỗi không thể sửa đổi được mà chỉ dùng để mô tả các thành phần khác của AWT

Để tạo một Label, sử dụng một trong các cấu trúc sau:

Label() tạo một nhãn rỗng, với chuỗi được canh chỉnh bên trái

Label(String) tạo một chuỗi có nội dung là String cũung được canh chỉnh bên trái

Label(String,int) tạo một nhãn có nội dung là String

Tham số Int bao gồm:

Label.RIGHT: chuỗi được canh chỉnh bên phải

Label.LEFT : chuỗi được canh chỉnh bên trái

Label.CENTER: chuỗi được canh chỉnh giữa

Bạn có thể thay đổi font của Label bằng phương thức setFont()

Sau đây là một ví dụ minh hoạ sử dụng Label

import java.awt.*;

public class LabelTest extends java.applet.Applet { public void init() {

Trang 8

setFont(new Font ("Helvetica", Font.BOLD, 14));

setLayout(new GridLayout(3,1));

add(new Label("aligned left", Label.LEFT));

add(new Label("aligned center", Label.CENTER));

add(new Label("aligned right", Label.RIGHT));

}

• Sử dụng Lists

Lớp List cung cấp một vùng có thể cuộn được mà trong đó nó chứa các chuỗi văn bản có thể chọn được(một dòng một chuỗi) Người sử dụng có thể chọn bạn cách kích chuột Lists có thể cho phép chọnnhiều hay chỉ có một sự lựa chộn trong một thời điểm

Ví dụ :

//Where instance variables are declared:

TextArea output;

List spanish, italian;

//Where initialization occurs:

//Build first list, which allows multiple selections.

spanish = new List(4, true); //prefer 4 items visible

//Build second list, which allows one selection at a time.

italian = new List(); //Defaults to none visible, only one selectable

if (e.target instanceof List) {

String language = (e.target == spanish) ?

public boolean handleEvent(Event e) {

if (e.target instanceof List) {

List list = (List)(e.target);

String language = (list == spanish) ?

"Spanish" : "Italian";

Trang 9

switch (e.id) {

case Event.LIST_SELECT:

int sIndex = ((Integer)e.arg).intValue();

output.appendText("Select event occurred on item #"

int dIndex = ((Integer)e.arg).intValue();

output.appendText("Deselect event occurred on item #"

• Sử dụng Menus

Applet sau cho thấy nhiều nét đặc trưng của menu giống như menu bạn đã sử dụng Cửa sổ đưa ra mộtthanh menu (Menu Bar) chứa năm menu Mỗi menu chứa một hoặc nhiều menu con

Menu chỉ tồn tại trên Menu Bar và Menu Bar chỉ tồn tại khi nó gắn với những cửa sổ ( Đặc biệt làFrame)

AWT cung cấp những lớp con MenuComponent sau để hổ trợ menu:

MenuItem

CheckboxMenuItem

Menu

MenuBar

Đây là đoạn mã chỉ ra các phương thức, cư xử của menu:

public class MenuWindow extends Frame {

.

public MenuWindow() {

MenuBar mb;

Menu m1, m2, m3, m4, m4_1, m5;

MenuItem mi1_1, mi1_2, mi3_1, mi3_2, mi3_3, mi3_4,

mi4_1_1, mi5_1, mi5_2;

CheckboxMenuItem mi2_1;

//Add the output displayer to this window

//Build the menu bar.

mb = new MenuBar();

setMenuBar(mb);

//Build first menu in the menu bar.

//Specifying the second argument as true

//makes this a tear-off menu.

m1 = new Menu("Menu 1", true);

Trang 10

mb.add(m5); //just setting the help menu doesn't work; must add it

public boolean action(Event event, Object arg) {

String str = "Action detected";

if (event.target instanceof MenuItem) {

MenuContainer parent = mi.getParent();

if (parent instanceof Menu) {

Trang 11

return false;

}

• Sử dụng Panels

Lớp Panel là một lớp con Container Bạn có thể sử dụng nó đẻ nắm bắt các Component, hoặc bạn có thểđịnh nghĩa một lớp con để điều khiển các chức năng đặc biệt

Lớp Applet là một lớp con Panel với sự móc nối đặc biệt cho các Browser hoặc khung nhìn cho Applet.Sau đây là một ví dụ dùng Panel để chứa một vài Component :

Panel p1 = new Panel();

p1.add(new Button("Button 1"));

Sau đây là một ví dụ của lớp con Panel dùng để vẽ một khung.

class FramedArea extends Panel {

public FramedArea(CoordinatesDemo controller) {

//Set the layout manager.

//Add any Components this Panel contains

}

//Ensure that no Component is placed on top of the frame.

//The inset values were determined by trail and error.

public Insets insets() {

return new Insets(4,4,5,5);

}

//Draw the frame at this Panel's edges.

public void paint(Graphics g) {

Dimension d = size();

Color bg = getBackground();

g.setColor(bg);

g.draw3DRect(0, 0, d.width - 1, d.height - 1, true);

g.draw3DRect(3, 3, d.width - 7, d.height - 7, false);

}

• Sử dụng Scrollbars

Scrollbars có hai cách sử dụng:

Scrollbar có thể hoạt động như một con trượt cho người dùng lôi kéo để xác lập giá trị

Như điều khiển cuộn một ô vuông(Scroll pane) Scrollbars trong Scroll panes cho người dùng chọnchính xác vùng cần hiển thị

Để tạo một scrollbar, bạn cần tạo một thành phần của lớp Scrollbar Bạn phải xác lập các giá trị ban đầucủa Scrollbar bằng việc gọi phương thức setValues() trước khi Scrollbar hiển thị lên màn hình

Giá trị lớn nhất của scrollbar

Sau đây là hình vẽ minh hoạ ý nghĩa của các giá trị trên:

Trang 12

Sau đây là đoạn mã cho Aplet trên.

public Dimension minimumSize() {

return new Dimension(10, 10);

Trang 13

boolean inAnApplet = true;

String imageFile = " /images/people.gif";

Dimension imageSize = new Dimension(600, 320);

Dimension preferredImageSize = new Dimension(300, 100);

//This method assumes this Applet is visible.

public void init() {

canvas = new ScrollableCanvas(img, preferredImageSize);

//Create horizontal scrollbar.

horz = new Scrollbar(Scrollbar.HORIZONTAL);

//Create vertical scrollbar.

vert = new Scrollbar(Scrollbar.VERTICAL);

//Add Components to the Applet.

//Now that we've validated, then assuming this Applet is

//visible, the canvas size is valid and we can adjust the

//scrollbars to match the image area [CHECK]

Trang 14

//Don't call this until the canvas size is valid.

//Shift everything to the right if we're displaying empty space

//on the right side.

if ((canvas.tx + canvasWidth) > imageSize.width) {

int newtx = imageSize.width - canvasWidth;

//Shift everything downward if we're displaying empty space

//on the bottom.

if ((canvas.ty + canvasHeight) > imageSize.height) {

int newty = imageSize.height - canvasHeight;

Trang 15

public void paint(Graphics g) {

//This method probably was called due to applet being resized.

• Sử dụng Scroll Panes

ScrollPane quản lí thành phần con đơn lẻ, chỉ hiển thị phần mà không gian cho phép

Mặc định, thanh cuộn của Scroll pane chỉ hiển thị khi cần thiết Ví dụ, nếu Scoll pane đủ rộng để hiểnthị thành phần con của nó theo bề ngang thì thyanh cuộn ngang của Scoll pane sẽ không cần thiết vàmặc định thanh cuộn ngang của Scoll pane sẽ không xuất hiện Hình sau cho thấy một Aplet có mộtScoll pane, nó có cả hai thanh cuộn

Sau đây là đoạn mã tạo một Scoll pane và đặt thành phần con vào trong đó:

ScrollPane sp1 = new ScrollPane();

Đây là một ví dụ xác lập quyền hiển thị thanh cuộn:

ScrollPane sp2 = new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS);

• Sử dụng TextAreas and TextFields

Lớp TextArea và TextField hiển thị văn bản có thể lựa chọn và thay thể được Bạn có thể dùng lớp conTextArea và TextField để thi hành các thao tác như kiểnt ra lỗi nhập liệu Như với mọi Component, bạncó thể xác lập màu nền và màu chữ của TextAreas and TextFields Tuy nhiên bạn không thể thay đổihình thức cơ bản của nó

TextArea và TextField là các lớp con của TextComponent Từ TextComponent nó có thể thừa kế cácphương thức cho phép chúng xác lập và lấy giá trị được chọn

Ví dụ :

//Where instance variables are defined:

TextField textField;

TextArea textArea;

Trang 16

public void init() {

textField = new TextField(20);

textArea = new TextArea(5, 20);

textArea.setEditable(false);

//Add the two components to the panel

}

public boolean action(Event evt, Object arg) {

String text = textField.getText();

Lớp TextField có 4 cấu trúc: TextField(), TextField(int), TextField(String), and TextField(String, int).giá trị int xác lập số cột trong TextField Giá trị String xác lập chuỗi mà xuất hiện ban đàu trongTextField Lớp TextField cũng cung cấp các phương thức sau:

các phương thức trên cho biết thông tin về kí tự hiển thị

Giống như lớp TextField, lớp TextArea cũng có 4 cấu trúc: TextArea(), TextArea(int, int),TextArea(String), and TextArea(String, int, int) Giá trị Int xác lập số hàng và số cột trong TextArea.Giá trị String xác lập chuỗi ban đàu cho TextArea

Lớp TextArea cung cấp phương thức appendText() dùng trong đoạn mã trên Nó cũng cung cấp cácphương thức sau:

int getRows(), int getColumns()

Trả về số hàng và số cột trong TextArrea

void insertText(String, int)

Chèn một chuỗi vào vịt trí Int

void replaceText(String, int, int)

Thay thế đoạn văn bảng từ vị trí int đến vị trí int bằng chuỗi String

b. Các kiểu sự kiện mới của AWT

• Giới thiệu các kiểu sự kiện mới của AWT

Các sự kiện (events) được phát ra bởi nguồn sự kiện Một hoặc nhiều listeners có thể đăng kí các thông báo về các Event Đôi khi các kiểu này còn được gọi là delegatio

Một ví dụ đơn giản

Sau đây là đoạn mã thực thi sự nắm bẳ sự kiện cho một Button:

public class Beeper implements ActionListener {

//where initialization occurs:

button.addActionListener(this);

public void actionPerformed(ActionEvent e) {

//Make a beep sound

}

Một ví dụ về các kiểu sự kiện khác

Trang 17

Aplet sau hiển thị một một vùng hình chữ nhật và một vùng văn bản

//Register for mouse events on blankArea and applet (panel).

blankArea.addMouseListener(this);

addMouseListener(this);

}

public void mousePressed(MouseEvent e) {

saySomething("Mouse button press", e);

}

public void mouseReleased(MouseEvent e) {

saySomething("Mouse button release", e);

}

public void mouseEntered(MouseEvent e) {

saySomething("Cursor enter", e);

}

public void mouseExited(MouseEvent e) {

saySomething("Cursor exit", e);

}

public void mouseClicked(MouseEvent e) {

saySomething("Mouse button click", e);

• Sử dụng Adapters and Inner Classes để nắm bắt các sự kiện

Phần này hướng dẫn bạn sử dụng các lớp adapters và inner để làm giảm bớt sự lộn xộn trong đoạn mãcủa chương trình bạn

Hầu hết các giao diện AWT listener, không như ActionListener, chứa nhiều hoặc một phương thức Vídụ, giao diện MouseListener chứa năm phương thức: mousePressed, mouseReleased, mouseEntered,mouseExited, và mouseClicked Dù là bạn chỉ quan tâm về nhấn chuột, nếu lớp bạn đang sử dụng thựcthi MouseListener thì bạn phải thực thi tất cả 5 phương thức

/* Empty method definition */

public void mousePressed(MouseEvent e) {

}

public void mouseReleased(MouseEvent e) {

}

Trang 18

public void mouseEntered(MouseEvent e) {

}

public void mouseExited(MouseEvent e) {

}

//Event handler implementation goes here

}

Đáng tiếc là kết quả của sự lựa chọn các phương thức rỗng có thể khó đọc và duy trì Để giúp bạn tránh

được các lộn xộn với những phương thức rỗng trong chương trình, AWT cung cấp lớp adapter class cho mỗi listener interface với nhiều hơn một phương thức

Để sử dụng adapter, bạn tạo một lớp con cho nó, thay vì phải thực thi một listener interface

/*

* An example of extending an adapter class instead of

* directly implementing a listener interface.

//Event handler implementation goes here

}

Giả dụ bạn muốn viết một applet, và bạn muốn Applet của bạn chứa vài đoạn mã để nắm bắt các sựkiện của chuột Từ khi ngôn ngữ Java khhong cho phép đa thừa kế thì bạn không thể mở rộng cả 2 lớp

Applet and MouseAdapter Giải pháp là định nghĩa một lớp inner một lớp nằm trong Aplet that

extends the MouseAdapter class,

//An example of using an inner class

MyClass extends Applet {

someObject.addMouseListener(new MyAdapter());

class MyAdapter extends MouseAdapter {

//Event handler implementation goes here

}

• Năm bắt các sự kiện của AWT chuẩn

Listener Interface Adapter Class Methods

AdjustmentListener none adjustmentValueChanged

ComponentListener ComponentAdapter

componentHiddencomponentMovedcomponentResizedcomponentShown ContainerListener ContainerAdapter componentAdded componentRemoved

FocusListener FocusAdapter focusGained

Trang 19

focusLost

keyPressed keyReleased keyTyped

MouseListener MouseAdapter

mouseClicked mouseEntered mouseExited mousePressed mouseReleased MouseMotionListener MouseMotionAdapter mouseDragged mouseMoved

WindowListener WindowAdapter

windowActivated windowClosed windowClosing windowDeactivated windowDeiconified windowIconified windowOpened

• Các sự kiện được tạo ra bởi các thành phần của AWT

AWT Component

Types of Events It Can Generate

actionadjustment component container focus item key mouse mouse motion

Trang 20

List X X X X X X X MenuItem

Note: This is not a

Viết một Action Listener

Khi người sử dụng kich chuột vào Button, đúp chuột vào ListItem, chọn MenuItem, hoặc nhấn phím

trong TextField, một sự kiện sẽ xảy ra Kết quả đó là một thông báo actionPerformed được gởi đi đến

tất cả các action listener và nó đăng kí với các thành phần có liên quan

Các phương thức, sự kiện của hành động

Giao diện ActionListener chứa một phương thức đơn, và do đó nó không có lớp adapter tương ứng.Đây là phương thức ActionListener cô độc:

void actionPerformed(ActionEvent)

Một ví dụ về nắm bắt các sự kiện của hành động

Một ví dụ đơn giản

public class Beeper implements ActionListener {

button.addActionListener(this);

public void actionPerformed(ActionEvent e) {

//Make a beep sound

}

Viết một Adjustment Listener

Các sự kiện Adjustment thông báo cho bạn biết sự thay đổi giá trị trong các thành phần Đối tượngAdjustable có một giá trị nguyên, và nó trả về các các sự kiện adjustment bất cứ khi nào giá trị đó thayđổi Chỉ có một lớp của AWT thực thi Adjustable là lớp Scrollbar

Có 5 loại sự kiện adjustment:

track

người sử dụng hoàn toàn thay đổi giá trị của thành phần

unit increment, unit decrement

người sử dụng chỉ biểu thị sự thay dổi nhỏ về giá trị của thành phần

block increment, block decrement

người sử dụng biểu thị sự thay đổi giá trị của thành phần với số lượng lớn

Các phương thức sự kiện của Adjustment

Giao diện Adjustment Listener chứa một phương thức đơn, và vì thế nó không có lớp mô phỏng tươngứng Sau đây là phương thức đó:

Trang 21

void adjustmentValueChanged(AdjustmentEvent)

Được gọi bởi AWT vừa sau khi thay đổi giá trị của thành phần

Ví dụ về Handling Adjustment Events

class ConversionPanel implements AdjustmentListener {

/** Respond to the slider */

public void adjustmentValueChanged(AdjustmentEvent e) {

int getValue()

Trả về giá trị của thành phần ngay sau khi adjustment được tìm thấy

• Viết một Component Listener

là một trong những sự kịen của thành phần được phát ra bởi đối tượng Component ngay sau khi thànhphần đó mất đi, làm ẩn đi, chuyển vị trí hoặc thay đổi kích thước

Các phương thức, sự kiện của thành phần

Giao diện ComponentListener và lớp mô phỏng tương ứng, ComponentAdapter, chứa 4 phương thức:void componentHidden(ComponentEvent)

được gọi bởi AWT sau khi thành phần biến mất bởi phương thức setVisible

được gọi bởi AWT sau khi thành phần xuất hiện bởi phương thức setVisible.

Ví dụ về Handling Component Events

public class ComponentEventDemo implements ComponentListener {

aFrame = new Frame("A Frame");

ComponentPanel p = new ComponentPanel(this);

aFrame.addComponentListener(this);

p.addComponentListener(this);

public void componentHidden(ComponentEvent e) {

displayMessage("componentHidden event from "

+ e.getComponent().getClass().getName());

Trang 22

}

public void componentMoved(ComponentEvent e) {

displayMessage("componentMoved event from "

}

public void componentResized(ComponentEvent e) {

displayMessage("componentResized event from "

}

public void componentShown(ComponentEvent e) {

displayMessage("componentShown event from "

Mỗi một phương thức của sự kiện các thành phần có một thông số đơn: đối tượng ComponentEvent

lớp ComponentEvent định nghĩa một phương thức hay dùng, getComponent, trả về thành phần mà

phát ra sự kiện

• Viết một Container Listener

Những sự kiện của Container được phát ra ngay sau khi một thành phần được thêm vào Container hoặcchuyển đi khỏi Container

Các phương thức, sự kiện của Container

Giao diện ContainerListener và lớp mô phỏng tương ứng, ContainerAdapter chứa hai phương thức: void componentAdded(ContainerEvent)

được gọi sau khi một thành phần được thêm vào Container

void componentRemoved(ContainerEvent)

được gọi sau khi một thành phần được chuyển đi khỏi Container

Ví dụ về Handling Container Events

public class ContainerEventDemo implements ContainerListener {

buttonPanel = new Panel();

buttonPanel.addContainerListener(this);

public void componentAdded(ContainerEvent e) {

displayMessage(" added to ", e);

}

public void componentRemoved(ContainerEvent e) {

displayMessage(" removed from ", e);

}

void displayMessage(String action, ContainerEvent e) {

Trang 23

+ " was"

+ action + e.getContainer().getClass().getName() + "\n");

Tar về Container sinh ra sự kiện này

• Viết một Focus Listener

Các sự kiện Focus được phát ra khi một thành phần có hoặc mất đi sự tập trung vào nó

Các phương thức, sự kiện của Focus

Gaio diện FocusListener và lớp mô phỏng tương ứng, FocusAdapter, chứa hai phương thức:

void focusGained(FocusEvent)

được gọi sau khi thành phần có sự tập trung

void focusLost(FocusEvent)

được gọi sau khi thành phần mất sự tập trung

Ví dụ về Handling Focus Events

public class FocusEventDemo implements FocusListener {

//where initialization occurs

window = new FocusWindow(this);

public void focusGained(FocusEvent e) {

displayMessage("Focus gained", e);

}

public void focusLost(FocusEvent e) {

displayMessage("Focus lost", e);

public FocusWindow(FocusListener listener) {

super("Focus Demo Window");

Trang 24

• Viết một Item Listener

Các sự kiện của Item được phát ra khi thực thi giao diện ItemSelectable

Các phương thức, sự kiện của Item

Giao diện ItemListener vhỉ có một phương thức, vì vậy nó không có lớp mô phỏng tương ứng:

void itemStateChanged(ItemEvent)

được gọi sau khi thay đổi trạng thái của thành phần

Ví dụ về Handling Item Events

public void itemStateChanged(ItemEvent e) {

• Viết một Key Listener

Đựoc phát ra khi người sử dụng đánh phím Đặc biệt Key events phát ra bởi đối tượng mà dang đượctập trung khi người dùng nhấn hoặc nhả phím

Các phương thức sự kiện của Key

Giao diện KeyListener và lớp mô phỏng tương ứng, KeyAdapter, chứa ba phương thức:

được gọi sau khi một phím được nhả

Ví dụ về Handling Key Events

public class KeyEventDemo implements KeyListener {

typingArea = new TextField(20);

typingArea.addKeyListener(this);

Tiêu đề	Tổng quan về Java UI
Tác giả	Nhóm tác giả
Trường học	Đại học Bách Khoa Hà Nội
Chuyên ngành	Khoa học máy tính và công nghệ thông tin
Thể loại	Báo cáo môn học
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	49
Dung lượng	501 KB

Tổng quan về Java UI pptx

Tạo một LayoutManager

Làm việc với đồ hoạ