Giáo trình Java nâng cao - Bài 4: Thiết kế giao diện người dùng
BÀI 4: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
1. Giới thiệu thư viện awt.
❖ JFC là gì ? Java Foundation Classes.
➢ Tập hợp các tính năng để xây dựng giao diện người dùng đồ họa – GUI,
để tạo ra các chức năng đồ họa phong phú và tương tác với các ứng dụng
Java JFC là một dự án phối hợp giữa Netscape’s Internet Foundation.
➢ Classes(IFC) và IBM's Taligent division and Lighthouse Design JFC bao
gồm 5 thư viện:
✓ Swing GUI Components
✓ AWT
✓ Plugable Look and Feel Support
✓ Accessibility API
✓ Java 2D API
➢ Look and feel Manager: Bộ phận quản lý diện mạo nhằm làm thay đôi
bộ mặt của chương trình Java. Chẳng hạn, có thể làm cho ứng dụng
chạy trên PC với hệ điều hành Windows trông giống như chương trình
chạy trên máy với hệ điều hành Macintosh (Mac OS), hoặc của Motif
trong UNIX, v.v…
➢ Thành phần hỗ trợ người khuyết tật (Accessibility Application
Programmimg Intefrace), bằng cách làm cho ứng dụng tương tác với
các phương tiện khác như bộ đọc chữ Braille, bộ đọc chữ từ màn hình
(Screen Reader)
➢ Bộ phận hỗ trợ đồ hoạ 2 và 3 chiều
➢ Drag and Drop Support, nhằm hỗ trợ tương tác giữa người và máy trên
mọi hệ điều hành, qua đó có thể trao đổi dữ liệu giữa chương trình Java
và không phải Java.
❖ AWT (Abstract Windows Toolkit)
➢ Thư viện API cung cấp các đối tượng GUI
➢ Tạo liên kết giao diện giữa ứng dụng Java và OS
➢ Chiếm nhiều tài nguyên hệ thống (Heavy-weight component)
Package java.awt
➢ Gồm nhiều phần tử (class) để tạo GUI.
➢ Có các lớp quản lý việc bố trí các phần tử.
➢ Có (event-oriented application) mô hình ứng dụng hướng sự kiện.
➢ Có các công cụ xử lý đồ họa và hình ảnh.
➢ Các lớp sử dụng các tác vụ với clipboard (vùng nhớ đệm) như cut,
paste.
❖ Ví dụ AWT
import java.awt.*;
public class DemoAWT extends Frame {
public DemoAWT(String title) {
super(title);
this.setBounds(100,150,200,200);
this.setVisible(true);
}
public static void main (String[] args) {
new DemoAWT("First App");
}
}
2. Các khái niệm cơ bản.
❖ SWING.
➢ SWING không phải là một từ viết tắt, Swing là một sản phẩm của gia
đình lớn Java, một phần của dự án JFC Swing bắt đầu được phát triển từ
bản beta của JDK 1.1, khoảng mùa xuân năm 1997, đến tháng 3 năm
1998 thì bắt đầu được công bố rộng rãi.
➢ Khi phát hành thư viện Swing 1.0 chứa 250 class và 80 interface, đến nay
phiên bản Swing 1.4 chứa 451 class và 85 interface.
➢ Mặc dù Swing được phát triển riêng rẽ với phần lõi của Java
Development Kit, nó đòi hỏi ít nhất JDK 1.1.5 để chạy
➢ SWING là sự mở rộng AWT.
➢ Tạo giao diện nhất quán độc lập với môi trường(crossplatform GUI).
➢ Đa luồng và nhẹ(Light-weight component) với nhiều đặc điểm nâng cấp.
➢ Có khả năng tùy biến tại thời điểm runtime.
➢ Không sử dụng trộn lẫn AWT và SWING GUI component trên cùng một
giao diện.
➢ Package java.swing.
➢ Sự xuất hiện thêm Swing từ Java 1.2 nhằm giúp khắc phục sự khó khăn
của AWT khi cần bổ sung thêm các widget mới.
➢ Đặc biệt, khắc phục bộ mặt nghèo nàn của chương trình viết bằng AWT
so với các giao diện đẹp đẽ khác (chẳng hạn với MFC (Microsoft
Foundation Classes) của Microssoft
❖ So sánh AWT và SWING.
AWT
SWING
✓ Xây dựng bằng native code.
✓ Khó phát triển thêm các linh
kiện (widget) mới
✓ Xây dựng hoàn toàn bằng JAVA API.
✓ Dễ phát triển các linh kiện.
✓ Có thể thay đổi diện mạo của linh kiện
lúc runtime.
✓ Mô hình MVC (Model – View –
Controller)
✓ Có thể bổ sung thêm biểu tượng bên
cạnh dòng chữ vào Label, Button, Menu
item.
✓ Tạo đường viền và ghi tựa cho các thành
phần Swing.
✓ Có thể chọn một thành phần Swing bằng
cách dùng phím thay cho chuột.
✓ Các thành phần Swing sử dụng các nhãn
Unicode, vì vậy có thể đưa tiếng Việt
vào các thành phần này.
❖ Ví dụ về swing
package swing_Ex;
import javax.swing.JButton;
import javax.swing.JFrame;
public class FirstSwingExample {
public static void main(String[] args) {
JFrame f = new JFrame();// tạo thể hiện của JFrame
JButton b = new JButton("click");// tạo thể hiện của
JButton
b.setBounds(130, 50, 100, 40);// trục x , y , width,
height
f.setTitle("Ví dụ Java Swing");
f.add(b);// thêm button vào JFrame
f.setSize(400, 200);// thiết lập kích thước cho của sổ
f.setLayout(null);// không sử dụng trình quản lý bố cục
f.setVisible(true);// hiển thị cửa sổ
}
}
package swing_Ex;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;
public class SwingSecondExample {
public static void main(String[] args) {
JFrame frame = new JFrame("My Second Swing
Example");
frame.setSize(350, 200);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
frame.add(panel);
placeComponents(panel);
frame.setVisible(true);
}
private static void placeComponents(JPanel panel) {
panel.setLayout(null);
JLabel userLabel = new JLabel("User");
userLabel.setBounds(10,20,80,25);
panel.add(userLabel);
JTextField userText = new JTextField(20);
userText.setBounds(100,20,165,25);
panel.add(userText);
JLabel passwordLabel = new JLabel("Password");
passwordLabel.setBounds(10,50,80,25);
panel.add(passwordLabel);
JPasswordField passwordText = new
JPasswordField(20);
passwordText.setBounds(100,50,165,25);
panel.add(passwordText);
JButton loginButton = new JButton("login");
loginButton.setBounds(10, 80, 80, 25);
panel.add(loginButton);
}
}
❖ Vậy SWING là sự thay thế của AWT?
Không. Swing thực tế được xây dựng trên phần lõi của AWT, bởi vì Swing
không chứa bất kỳ mã dành cho nền tảng nào (native code)
2.1. Thành phần (Component)
Một component có thể được đặt trên giao diện người dùng, có thể được thay đổi
kích thước hay làm cho nhìn thấy, ẩn. Ví dụ được dùng phổ biến nhất là
Textfield, Label, Checkbox, Textarea v.v… Và các thành phần cao cấp khác
như Scrollbar, Scrollpane và Dialog. Tuy nhiên chúng không được sử dụng
thường xuyên.
➢ Nhãn (Label)
Lớp này được sử dụng để trình bày một String. Nó không thể được sửa đổi. Đây
là một chuỗi chỉ đọc. Sử dụng một trong những constructor sau đây để tạo một
label:
Label() Tạo một Label trống.
Label(String labeltext) Tạo một Label với nội dung được cho.
Label(String labeltext, int alignment) Tạo một Label với một chế độ canh lề
(alignment) , canh lề có thể là Label.LEFT, Label.RIGHT hay Label.CENTER.
Các phương thức được sử dụng phổ biến của label được trình bày ở bảng bên
dưới:
Phương thức
setFont(Font f)
setText(String s)
Chức năng
Thay đổi phông chữ của Label
Thiết lập nhãn cho Label
getText()
Lấy nội dung hiện tại của nhãn
Cách sử dụng của Label
import java.awt.*;
class Labeltest extends Frame
{
Label label1=new Label("This is just a label");
public Labeltest(String title)
{
super(title);
add(label1);
}
public static void main(String args[])
{
Labeltest f=new Labeltest("Label");
f.setSize(300,200);
f.show();
}
}
label1=new Label("This is just a label");
Tạo đối tượng Label
add(label1);
Label sẽ hiển thị chỉ khi nó được thêm vào container. Ở đây, Frame là container
mà thành phần Label được thêm vào. Việc này được thực hiện bằng cách sử
dụng phương thức add().
➢ Ô văn bản (TextField)
Một Textfield là một vùng chỉ chứa một dòng văn bản, trong đó văn bản có thể
được hiển thị hay được nhập vào bởi người dùng. Trong Java, một trong
những constructor sau có thể được sử dụng để tạo một Textfield:
TextField(): Tạo một textfield mới.
• TextField(int columns): Tạo một textfield mới với số cột được cho trước.
• TextField(Strings): Tạo một textfield mới với chuỗi văn bản được cho trước.
• TextField(Strings, intcolumns): Tạo một textfield mới với nội dung và số cột
được cho trước.
• Các phương thức thường được sử dụng của đối tượng TextField được tóm tắt
trong bảng sau:
Phương thức
setEchoChar(char)
setText(String s)
getText()
Chức năng
Đặt các kí tự được hiện ra thay thế ký tự nhập vào.
Gán nội dung cho TextField.
Lấy nội dung của TextField.
setEditable(boolean) Xác định TextField có soạn thảo được hay không. Nó chỉ
được soạn thảo khi giá trị tham số truyền vào là True.
isEditable()
Xác định xem trường có đang trong mode soạn thảo hay
không. Giá trị trả về kiểu Boolean.
Cách sử dụng TextField
import java.awt.*;
class TextFieldtest extends Frame
{
TextField tf1=new TextField(30);
public TextFieldtest(String title)
{
super(title);
setLayout(new FlowLayout());
add(tf1);
}
public static void main(String args[])
{
TextFieldtest f=new TextFieldtest("TextField");
f.setSize(300,200);
f.show();
}
}
Trong chương trình này, chúng ta sử dụng phương thức setLayout() để thay đổi
cách trình bày của các thành phần trên vật chứa. Layout manager có chức năng
xắp xếp các thành phần trong một vật chứa.
➢ Vùng văn bản (TextArea)
Một Textarea được sử dụng khi văn bản nhập vào có trên hai hay nhiều dòng.
Textarea có một scrollbar. TextArea là một trường văn bản có thể được soạn
thảo với nhiều dòng.
Để tạo một Textarea, làm theo các bước sau:
Tạo một đối tượng.
✓ Chỉ ra số dòng, số cột đối tượng này cần có.
✓ Bố trí phần tử này trên màn hình.
Trong Java, bạn có thể sử dụng các constructor sau để tạo TextArea:
• TextArea(): Tạo một TextArea mới.
• TextArea(int rows, int cols): Tạo một TextArea mới với số lượng cột và dòng
được cho trước.
• TextArea(String text): Tạo một TextArea mới vớớcnoij dung được cho trước.
• TextArea(String text, int rows, int cols): Tạo một TextArea mới với dung, số
dòng và số cột được cho trước.
Các phương thức thường được sử dụng nhiều nhất của TextArea:
Phương thức
setText(String)
getText()
Chức năng
Gán nội dung cho TextArea.
Trả về nội dung của TextArea.
Xác định xem TextAreacó thể được soạn thảo hay
không. TextArea có thể được soạn thảo khi giá trị
này là True.
setEdiable(boolean)
isEdiable()
Xác định xem TextArea có đang trong chế độ
soạn thảo được không. Trả về giá trị là kiểu
Boolean.
insertText(String, int)
Chèn chuỗi được vào vị trí được cho trước.
replaceText(String, int, int) Thay thế văn bản nằm giữa vị trí int, int cho
trước.
Cách sử dụng TextArea
import java.awt.*;
class TextAreatest extends Frame
{
Label lbl=new Label("Details");
TextArea ta1=new TextArea();
public TextAreatest(String title)
{
super(title);
setLayout(new FlowLayout());
add(lbl);
add(ta1);
}
public static void main(String args[])
{
TextAreatest t=new TextAreatest("TextArea");
t.setSize(300,200);
t.show();
}
}
➢ Button (nút ấn)
Nút ấn hay còn gọi là nút lệnh là một phần không thể thiếu của bất kỳ GUI nào.
Sử dụng button là cách dễ nhất để nhận các tác động của người dùng.
Để tạo một button, bạn làm theo các bước sau:
✓ Tạo phần tử Button với một nhãn chỉ ra mục đích của Button.
✓ Bố trí phần tử này trên màn hình.
✓ Hiển thị phần tử trên màn hình.
Sử dụng một trong hai constructor sau để tạo các button trong Java:
• Button()
• Button(String text)
Sử dụng setLabel() và getLabel() để thiết lập và lấy giá trị nhãn của button.
Chương trình minh họa tạo ra 3 button
import java.awt.*;
class Buttontest extends Frame
{
Button b1 = new Button("red");
Button b2 = new Button("Green");
Button b3 = new Button("Blue");
public Buttontest(String title)
{
super(title);
setLayout(new FlowLayout());
add(b1);
add(b2);
add(b3);
}
public static void main(String args[])
{
Buttontest t= new Buttontest("Button");
t.setSize(300,200);
t.show();
}
}
➢ Checkbox và RadioButton
Checkbox được sử dụng khi người dùng tiến hành chọn một hay nhiều tùy chọn.
Người dùng phải click trên các checkbox để chọn hay bỏ chọn chúng. Một
radiobutton cũng tương tự như một checkbox. Nó được sử dụng như một option
button để xác định các chọn lựa. Bạn chỉ có thể chọn một option trong nhóm các
nút radiobutton, ngược lại bạn có thể chọn nhiều hơn một checkbox tại một thời
điểm.
Làm theo các bước sau để tạo các checkbox hay radiobutton:
✓ Tạo phần tử.
✓ Xác định trạng thái khởi đầu của phần tử (chọn hay không chọn).
✓ Bố trí các phần tử trên màn hình.
✓ Hiển thị các phần tử trên màn hình.
Thành phần checkbox có thể sử dụng một lớp phụ được gọi là CheckboxGroup
để tạo ra các radiobutton.
Sử dụng các constructor sau để tạo các checkbox trong Java:
• Checkbox(): Tạo một checkbox trống.
• Checkbox(String text): Tạo một checkbox với nhãn được cho.
Để tạo các radiobutton, đầu tiên chúng ta tạo đối tượng CheckboxGroup như
sau:
CheckboxGroup cg=new CheckboxGroup();
Sau đó chúng ta tạo các đối tượng, như sau:
Checkbox male=new Checkbox("male", cg, true);
Checkbox female=new Checkbox("female", cg, false);
Chúng ta sử dụng các phương thức setState() và getState() để thiết lập và nhận
về trạng thái của checkbox.
Cách sử dụng các checkbox và các radiobutton
import java.awt.*;
class Checkboxtest extends Frame
{
Label l1=new Label("CheckBoxes");
Checkbox b1=new Checkbox("red",true);
Checkbox b2=new Checkbox("Green",false);
Checkbox b3=new Checkbox("Blue",false);
Label l2=new Label("Radiobuttons");
CheckboxGroup cb=new CheckboxGroup();
Checkbox b4=new Checkbox("small",cb,true);
Checkbox b5=new Checkbox("medium",cb,false);
Checkbox b6=new Checkbox("large",cb,false);
public Checkboxtest(String title)
{
super(title);
setLayout(new GridLayout(8,1));
add(l1);
add(b1);
add(b2);
add(b3);
add(l2);
add(b4);
add(b5);
add(b6);
}
public static void main(String args[])
{
Checkboxtest t=new Checkboxtest("Checkbox and
radiobutton");
t.setSize(300,200);
t.show();
}
}
Đầu tiên chúng ta tạo một đối tượng Frame, đối tượng này hoạt động như một
container sẽ chứa thành phần checkbox mà ta đã tạo. Sau đó ta tạo 6 checkbox,
02 checkbox được đánh dấu chọn. Để làm được điều này, ta đưa giá trị true như
một tham số cho hàm contructor Checkbox, ngoài ra còn có một tham số String
là nhãn của checkbox. Để hiển thị các điều khiển này theo dạng lưới, ta phải
thiết lập cách trình bày về dạng GridLayout có 8 dòng và 1 cột. Cuối cùng, ta
tạo một biểu hiện cho lớp Checkboxtest và thiết lập kích thước cho Frame. Để
hiển thị nó, ta cho gọi phương thức show().
➢ Danh sách chọn lựa (Choice List)
Thỉnh thoảng, rất cần thiết để trình bày một danh sách các chọn lựa đến người
dùng trên một GUI. Người dùng có thể click vào một hay nhiều mục từ danh
sách. Một danh sách chọn lựa được tạo bằng cách sử dụng một số các chuỗi
(String) hay các giá trị văn bản.
Để tạo các danh sách chọn lựa, hãy làm theo các bước được cho sau đây:
✓ Tạo danh sách các phần tử.
✓ Thêm các mục (có kiểu là String) vào danh sách, mỗi lần chỉ thêm được
một mục.
✓ Bố trí danh sách trên màn hình.
✓ Hiển thị danh sách trên màn hình.
Java hỗ trợ lớp Choice cho phép chúng ta tạo các danh sách chứa nhiều mục.
Khi danh sách vừa được tạo ra, nó sẽ rỗng.
Choice colors=new Choice();
Mỗi thời điểm chỉ thêm được một item bằng cách sử dụng phương thức addItem
như được chỉ ra bên dưới:
colors.addItem("Red");
colors.addItem("Green");
Cách tạo một danh sách chọn lựa
import java.awt.*;
class Choicetest extends Frame
{
Label l1=new Label("What is your favorite color");
Choice colors=new Choice();
public Choicetest(String title)
{
super(title);
setLayout(new FlowLayout());
add(l1);
colors.addItem("White");
colors.addItem("Red");
colors.addItem("Orange");
colors.addItem("Green");
colors.addItem("Yellow");
colors.addItem("Blue");
colors.addItem("Black");
add(colors);
}
public static void main(String args[])
{
Choicetest t=new Choicetest("Choice list");
t.setSize(300,200);
t.show();
}
}
2.2. Container
Container là vùng mà bạn có thể đặt các thành phần giao diện của bạn vào đó.
Bất cứ vật gì mà kế thừa từ lớp Container sẽ là vật chứa. Applet là một vật
chứa, applet được dẫn xuất từ Panel, lớp Panel lại được dẫn xuất từ lớp
Container.
Một vật chứa có thể chứa nhiều phần tử, các phần tử này có thể được vẽ hay
được tô màu tuỳ thích. Bạn hãy xem vật chứa như một cửa sổ. Như khung
(frame), pane, latch, hook, và các thành phần có kích thước nhỏ hơn khác.
Gói java.awt chứa một lớp gọi là Container. Lớp này trực tiếp hay gián tiếp
phái sinh ra hai vật chứa được sử dụng phổ biến nhất là Frame và Panel.
Frame và Panel là các vật chứa thường được sử dụng. Frame là cửa sổ độc lập
nhưng ngược lại Panel là vùng nằm trong cửa sổ khác. Panel không có các
đường biên, chúng được trình bày trong một cửa sổ do trình duyệt hay
appletviewer cung cấp. Appletviewer là một công cụ được JDK hỗ trợ để xem
các applet. Frame là lớp con của Window. Chúng được trình bày trong một cửa
sổ độc lập, cửa sổ này có chứa các đường biên xung quanh.
❖ Frame
Frame không phụ thuộc vào applet và trình duyệt. Frame có thể hoạt động như
một vật chứa hay như một thành phần (component). Bạn có thể sử dụng một
trong những constructor sau để tạo một frame:
✓ Frame(): Tạo một frame nhưng không hiển thị (invisible)
✓ Frame(String title): Tạo một frame không hiển thị, có tiêu đề.
Chương trình dưới đây sẽ minh hoạ cách tạo một Frame.
import java.awt.*;
class FrameDemo extends Frame
{
public FrameDemo(String title)
{
super(title);
}
public static void main(String args[])
{
FrameDemo f=new FrameDemo("I have been Frameed!!!");
f.setSize(300,200);
f.setVisible(true);
}
}
Lớp được định nghĩa Framedemo là một lớp con của lớp Frame. Lớp
FrameDemo này có một phương thức khởi tạo, trong phương thức khởi tạo này
ta cho gọi phương thức super(). Nó sẽ gọi phương thức khởi tạo của lớp cha
(trong trường hợp này là Frame). Mục đích của super() là gọi phương thức
khởi tạo của lớp cha. Nó sẽ tạo một đối tượng của lớp con, lớp con này sẽ
tạo Frame. Tuy nhiên, Frame vẫn không nhìn thấy được và không có kích
thước. Để làm được điều này, ta sử dụng hai phương thức nằm trong phương
thức main: setSize() và setVisible().
Tải về để xem bản đầy đủ
55 trang
18420
Free
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Java nâng cao - Bài 4: Thiết kế giao diện người dùng", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_java_nang_cao_bai_4_thiet_ke_giao_dien_nguoi_dung.docx
