Bài giảng điện tử môn tin học: Lập giao diện người dùng mức cao pps

08/13/14
1
Võ Phương Bình – ITFAC - DLU

Mô hình giao diện người dùng MIDP

Các hàm API mức cao của MIDP
›
Làm việc với Screen

Display

Screen

Ticker

TextBox

Alert

List

Làm việc với Form

Item

ChoiceGroup

DateField

Gauge


Image and ImageItem

StringItem

TextField
08/13/14
2
Võ Phương Bình – ITFAC - DLU

Để hiển thị ra thiết bị MIDP, cần phải có
được display của thiết bị.

Thư viện lớp display:
javax.microedition.lcdui.Display

Lớp Display cung cấp các phương thức để
lấy thông tin về khả năng hiển thị của thiết
bị.

Lớp display kết hợp với lớp Screen để hiển
thị lên màn hình.
08/13/14Võ Phương Bình – ITFAC - DLU
3

Screen tổ chức các đối tượng và xem xét
việc nhập của người dùng.

Screen được trình diễn bởi đối tượng
Display bằng cách gọi phương thức

setCurrent()

Thư viện lớp Screen:
javax.microedition.lcdui.Screen

Có thể có nhiều màn hình trong trình ứng
dụng, nhưng chỉ có một màn hình có thể
nhìn thấy được tại một thời điểm
08/13/14Võ Phương Bình – ITFAC - DLU
4

Tất cả các lớp giao diện người sử dụng
MIDP được chứa trong gói
javax.microedition.lcdui

Gói này có 3 interface và 21 lớp
08/13/14Võ Phương Bình – ITFAC - DLU
5
1. Choice
›
Định nghĩa API cho thành phần giao diện người
dùng, hiện thực sự lựa chọn từ một số các lựa chọn
đã được định nghĩa trước.
1. CommandListener
›
Được sử dụng bởi các ứng dụng mà chúng cần nhận
các sự kiện từ các hiện thực.
1. ItemStateListener
›
Được sử dụng bởi các ứng dụng mà chúng cần nhận

các sự kiện chỉ ra các sự thay đổi trạng thái ở bên
trong của các item tương tác.
08/13/14Võ Phương Bình – ITFAC - DLU
6
1. Alert
›
Một màn hình nó biểu diễn dữ liệu cho người sử
dụng và đợi một khoảng thời gian trôi qua trước
khi chuyển đến màn hình kế tiếp
1. AlertType
›
Một lớp tiện ích nó chỉ ra bản chất của alert
1. Canvas
›
Lớp cơ sở cho việc viết các ứng dụng nó cần xử
lý các sự kiện mức thấp và sử dụng đồ họa
08/13/14Võ Phương Bình – ITFAC - DLU
7
4. ChoiceGroup
›
Một nhóm các thành phần phần có thể chọn
được dùng để đặt vào trong một Form
5. Command
›
Một cấu trúc nó đóng gói thông tin ngữ nghĩa
của môt hành động.
6. DateField
›
Một thành phần có thể chỉnh sửa được dùng để
biểu diễn thông tin lịch và thời gian nó có thể

dùng để đặt vào một Form.
08/13/14Võ Phương Bình – ITFAC - DLU
8
7. Display
›
Một tiện ích nó đại diện cho trình quản lý ứng
dụng trong các thiết bị nhập và hiển thị của hệ
thống.
7. Displayable
›
Một đối tượng nó có khả năng được thay thế
trên màn hình.
7. Font
›
Một tiện ích nó đại diện cho font và font metric.
08/13/14Võ Phương Bình – ITFAC - DLU
9
10. Form
›
Một màn hình màn hình mà nó chứa các mục hỗn
hợp bất kỳ(hình ảnh, text field, hoặc choice group,
vâng vâng).
10. Gauge
›
Một tiện ích nó hiện thực một màn hình đồ họa
dạng thanh của một giá trị được sử dụng trong
form.
10. Graphics
›
Một tiện ích nó cung cấp một khả năng biểu diễn

hình học hai chiều.
08/13/14Võ Phương Bình – ITFAC - DLU
10
13. Image
›
Một tiện ích nó chứa dữ liệu hình ảnh.
13. ImageItem
›
Một tiện ích nó cung cấp điều khiển sắp xếp khi
các đối tượng hình ảnh được thêm vào một
form hoặc một alert.
13. Item
›
Một lớp cha của tất cả các thành phần mà nó
có thể được thêm vào một Form hoặc một
Alert.
08/13/14Võ Phương Bình – ITFAC - DLU
11
16. List
›
Một màn hình mà nó chứa một danh sách các
lựa chọn.
16. Screen
›
Một lớp cha của tất cả các lớp giao diện người
sử dụng mức cao.
16. StringItem
›
Một mục mà nó có thể chứa một String.
08/13/14Võ Phương Bình – ITFAC - DLU

12
19. TextBox
›
Một màn hình mà nó cho phép nhập và chỉnh
sửa văn bản.
19. TextField
›
Một thành phần văn bản có thể chỉnh sửa được
nó có thể được đặt vào một Form.
19. Ticker
›
Một Ticker là một mẫu văn bản nó chạy liên tục
ngang qua màn hình. Nó có thể được gắn vào
tất cả màn hình ngoại trừ Canvas.
08/13/14Võ Phương Bình – ITFAC - DLU
13
08/13/14Võ Phương Bình – ITFAC - DLU
14

Các câu hỏi đặt ra:
›
Bằng cách nào có thể quản lý các màn hình?
›
Di chuyển giữa chúng như thế nào?
›
Làm sao quản lý các thiết bị hiển thị và nhập dữ liệu?

Trả lời:
›
Tất cả các chức năng được cài đặt bởi lớp Display.

›
Bao gồm các phương thức để yêu cầu sao cho các
đối tượng có thể được hiển thị lên trên thiết bị, và để
lấy các thuộc tính của thiết bị.
08/13/14Võ Phương Bình – ITFAC - DLU
15

Tham chiếu đến màn hình thiết bị bằng cách cung cấp
một tham chiếu MIDlet đến phương thức tĩnh
getDisplay( ).
›
public static Display getDisplay(MIDlet c);

Việc này thường được thực hiện trong phương thức
startApp( ) của MIDlet, như sau:
›
public class MyMIDlet extends MIDlet {
›
Display display = null;
›
public MyMIDlet( ) { // constructor
›
}
›
public void startApp( ) {
›
display = Display.getDisplay(this);
›
}
›

// other methods
›
}
08/13/14Võ Phương Bình – ITFAC - DLU
16

Sau khi tham chiếu đến màn hình hiển thị của thiết
bị, cần phải tạo ra một thành phần GUI để hiển thị.

Gởi một thành phần GUI cho một Display bằng một
trong hai phương thức setCurrent()
›
public void setCurrent(Displayable d);
›
public void setCurrent(Alert alert, Displayable d);

Để xem GUI nào đang được hiển thị trên màn hình thiết
bị, sử dụng phương thức getCurrent( )
›
public Displayable getCurrent( );

Các phương thức khác:
›
public void boolean inColor( );
›
public int numColors( );
08/13/14Võ Phương Bình – ITFAC - DLU
17

Tương tác giữa người dùng và thiết bị.


Có 4 loại màn hình mức cao, được biểu diễn
bởi các lớp con: TextBox, List, Alert, và
Form.

Mỗi Screen có thể có hai thành phần phụ
thêm: một tiêu đề và một ticker.
08/13/14Võ Phương Bình – ITFAC - DLU
18

4 phương thức sau của lớp Screen có thể
được sử dụng để thiết lập, lấy title và ticker:
›
public void setTitle(String title);
›
public String getTitle( );
›
public void setTicker(Ticker ticker);
›
public Ticker getTicker( );
08/13/14Võ Phương Bình – ITFAC - DLU
19

Lớp Ticker cài đặt một mẫu văn bản mà nó chạy
liên tục ngang qua màn hình.

Tạo một đối tượng Ticker:
›
public Ticker(String str);


Truy xuất chuỗi được sử dụng trong ticker:
›
public String getString( );
›
public void setString(String s);

Khi ticker đã được tạo, nó có thể được gắn vào
một màn hình bằng cách dùng phương thức
setTicker( ).
08/13/14Võ Phương Bình – ITFAC - DLU
20

Ví dụ một đoạn mã tạo một màn hình List và
gắn vào nó một Ticker:
›
Display display = Display.getDisplay( );
›
List list = new List("Trade Stocks",
Choice.EXCLUSIVE);
›
list.append("Buy", null);
›
list.append("Sell", null);
›
list.setTicker(new Ticker("Welcome to my
discount broker"));
›
display.setCurrent(list);
08/13/14Võ Phương Bình – ITFAC - DLU
21

08/13/14Võ Phương Bình – ITFAC - DLU
22

Cho phép người dùng nhập và soạn thảo văn bản: tên, số
điện thoại, địa chỉ mail, mật khẩu, …

Tạo một đối tượng TextBox
›
public TextBox(String title, String text, int maxSize, int constraints);

Tham số constraints giới hạn việc nhập của người
dùng:
›
TextField.ANY : Cho phép người dùng nhập bất kỳ kí tự nào.
›
TextField.EMAILADDR : Giá trị nhập phải là một địa chỉ email.
›
TextField.NUMBER : Giá trị nhập phải là một số nguyên.
›
TextField.PASSWD : Văn bản nhập vào bị che không nhìn thấy được.
›
TextField.PHONENUMBER : Giá trị nhập phải là một số điện thoại.
›
TextField.URL : Giá trị nhập phải là một URL.
08/13/14
23
Võ Phương Bình – ITFAC - DLU

Muốn tạo một TextBox ràng buộc giá trị nhập là một số điện thoại
và được ẩn đi?

TextBox t = new TextBox("Tel", "", 12, TextField.PHONENUMBER |
TextField.PASSWD);

Các phương thức khác
›
public int getConstraints( );
›
public void setConstrants(int c);
›
public String getString( );
›
public void setString(String s);
›
public int size( );
›
public void delete(int offset, int length);
›
public void insert(char[] data, int offset, int length, int position);
›
public void insert(String src, int position);
›
public void setChars(char[] data, int offset, int length);
›
public void getMaxSize()
08/13/14Võ Phương Bình – ITFAC - DLU
24

Ví dụ
›
TextBox tb = new

TextBox("TextBox", "This is a
textbox", 20, TextField.ANY);
›
Display display =
Display.getDisplay(this);
›
display.setCurrent(tb);
08/13/14Võ Phương Bình – ITFAC - DLU
25