Lập trình mobile - Phần 3

LẬP TRÌNH MOBILE
Lập trình giao diện người dùng mức cao
11/20/2009
1
Võ Phương Bình – ITFAC - DLU
Lập Trình Giao Diện Người Dùng Mức Cao
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
11/20/2009
2
Võ Phương Bình – ITFAC - DLU
Mô Hình Giao Diện Người Dùng MIDP
Để 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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
3
Mô Hình Giao Diện Người Dùng MIDP (2)
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
11/20/2009
Võ Phương Bình – ITFAC - DLU
4
Mô Hình Giao Diện Người Sử Dụng MIDP (3)
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
11/20/2009
Võ Phương Bình – ITFAC - DLU
5
3 Interface Lớp Lập Trình Giao Diện
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.
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.
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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
6
21 Lớp Lập Trình Giao Diện
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
AlertType
Một lớp tiện ích nó chỉ ra bản chất của alert
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
11/20/2009
Võ Phương Bình – ITFAC - DLU
7
21 Lớp Lập Trình Giao Diện (2)
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
Command
Một cấu trúc nó đóng gói thông tin ngữ nghĩa của môt hành động.
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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
8
21 Lớp Lập Trình Giao Diện (3)
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.
Displayable
Một đối tượng nó có khả năng được thay thế trên màn hình.
Font
Một tiện ích nó đại diện cho font và font metric.
11/20/2009
Võ Phương Bình – ITFAC - DLU
9
21 Lớp Lập Trình Giao Diện (4)
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).
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.
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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
10
21 Lớp Lập Trình Giao Diện (5)
Image
Một tiện ích nó chứa dữ liệu hình ảnh.
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.
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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
11
21 Lớp Lập Trình Giao Diện (6)
List
Một màn hình mà nó chứa một danh sách các lựa chọn.
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.
StringItem
Một mục mà nó có thể chứa một String.
11/20/2009
Võ Phương Bình – ITFAC - DLU
12
21 Lớp Lập Trình Giao Diện (7)
TextBox
Một màn hình mà nó cho phép nhập và chỉnh sửa văn bản.
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.
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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
13
Các Lớp Giao Diện Mức Cao
11/20/2009
Võ Phương Bình – ITFAC - DLU
14
Làm việc với Screen
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ị.
11/20/2009
Võ Phương Bình – ITFAC - DLU
15
Display
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
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
16
Display (2)
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( );
11/20/2009
Võ Phương Bình – ITFAC - DLU
17
Screen
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.
11/20/2009
Võ Phương Bình – ITFAC - DLU
18
Screen (2)
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( );
11/20/2009
Võ Phương Bình – ITFAC - DLU
19
Ticker
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( ).
11/20/2009
Võ Phương Bình – ITFAC - DLU
20
Ticker (2)
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);
11/20/2009
Võ Phương Bình – ITFAC - DLU
21
Ticker (3)
11/20/2009
Võ Phương Bình – ITFAC - DLU
22
TextBox
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.
11/20/2009
23
Võ Phương Bình – ITFAC - DLU
TextBox (2)
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()
11/20/2009
Võ Phương Bình – ITFAC - DLU
24
TextBox (3)
Ví dụ
TextBox tb = new TextBox("TextBox", "This is a textbox", 20, TextField.ANY);
Display display = Display.getDisplay(this);
display.setCurrent(tb);
11/20/2009
Võ Phương Bình – ITFAC - DLU
25
Alert
Là một màn hình gốc nó có thể chứa văn bản và hình ảnh. Có 2 loại:
Modal alert duy trì trên màn hình cho đến khi nào người dùng loại bỏ nó.
Timed alert được hiển thị trong một khoảng thời gian (thông thường một vài giây) .
Tạo một thể hiện của Alert, nó có hai constructure như sau:
public Alert(String title);
public Alert(String title, String alertText, Image alertImage, AlertType alertType);
11/20/2009
Võ Phương Bình – ITFAC - DLU
26
Alert (2)
Tạo ra một timed alert, các phương thức liên quan:
public int getDefaultTimeout( );
public int getTimeout( );
public void setTimeout(int t);
Chuyển một timed dialog thành modal dialog:
alert.setTimeout(Alert.FOREVER);
Phương thức 2 cho phép kết hợp một icon với alert và kiểu của nó.
11/20/2009
Võ Phương Bình – ITFAC - DLU
27
Alert (3)
Lớp AlertType cung cấp năm loại alert:
AlertType.ALARM
AlertType.CONFIRMATION
AlertType.ERROR
AlertType.INFO
AlertType.WARNING
Một số hoặc tất cả các đối số trong phương thức 2 có thể là null.
11/20/2009
Võ Phương Bình – ITFAC - DLU
28
Alert (4)
Mỗi thuộc tính trong cả 2 phương thức có các phương thức truy xuất tương ứng trong lớp Alert:
public Image getImage( );
public String getString( );
public AlertType getType( );
public void setImage(Image img);
public void setString(String str);
public void setType(AlertType type);
11/20/2009
Võ Phương Bình – ITFAC - DLU
29
Alert (5)
Ví dụ Modal Alert:
Image im = Image.createImage("/coffee.png");
Alert alTest = new Alert("New Alert", "Time for more Java", im, AlertType.INFO);
alTest.setTimeout(Alert.FOREVER);
11/20/2009
Võ Phương Bình – ITFAC - DLU
30
List
List là một màn hình chứa các lựa chọn.
Tạo List:
public List(String title, int listType);
public List(String title, int listType, String[] stringElements, Image[] imageElements);
Có 3 loại lựa chọn list, phụ thuộc đối số thứ 2:
EXCLUSIVE: không có nhiều hơn một lựa chọn tại một thời điểm, nó giống như một nhóm các radio button trong AWT.
IMPLICIT: là một lựa chọn EXCLUSIVE có tiêu điểm lựa chọn là hoàn toàn được lựa chọn, rất giống với drop-down menu.
MULTIPLE: là một danh sách nó có nhiều các lựa chọn tại một thời điểm, và biểu diễn chính nó như một chuỗi các checkbox.
11/20/2009
Võ Phương Bình – ITFAC - DLU
31
List (2)
Các phương thức:
public int append(String stringElement, Image imageElement);
public void insert(int index, String stringElement, Image imageElement);
public void set(int index, String stringElement, Image imageElement);
public void delete(int index);
public String getString(int index);
public Image getImage(int index);
public int getSelectedIndex( )
public boolean isSelected(int index);
public setSelectedIndex(int index, boolean selected);
public int getSelectedFlags(boolean[] selectedArray);
public void setSelectedFlags(boolean[] selectedArray);


11/20/2009
Võ Phương Bình – ITFAC - DLU
32
List (2)
Ví du
Image images[] = { Image.createImage("/coffee.png"), Image.createImage("/check.png"), Image.createImage("/coffee.png") };
String options[] = {" Next", " Previous", " New"};
list = new List("Document Option:", List.IMPLICIT, options, images); ̣
11/20/2009
Võ Phương Bình – ITFAC - DLU
33
Làm việc với Form
Sử dụng Form để kết hợp nhiều thành phần vào trong một màn hình.
Form có thể chứa:
Textfield
Image
Datefield
Gause
Choicegroup
Tạo Form:
public Form(String title);
public Form(String title, Item[] items);
Ví dụ: Form form = new Form("Choose an Item");
11/20/2009
Võ Phương Bình – ITFAC - DLU
34
Làm việc với Form (2)
Các phương thức:
public int append(Image img);
public int append(Item item);
public int append(String str);
public void delete(int itemNum):
public Item get(int itemNum);
public void insert(int itemNum, Item item);
public int size( );
11/20/2009
Võ Phương Bình – ITFAC - DLU
35
Item
Lớp trừu tượng Item là lớp cơ sở cho tất cả các thành phần mà chúng có thể được đặt vào Form hoặc Alert.
Tất cả các đối tượng có một nhãn có thể được truy xuất bằng cách dùng các phương thức sau:
public String getLabel( );
public void setLabel(String s);
11/20/2009
Võ Phương Bình – ITFAC - DLU
36
ChoiceGroup
Tạo ChoiceGroup.
public ChoiceGroup(String label, int choiceType);
public ChoiceGroup(String label, int choiceType, String[] stringElements, Image[] imageElements);
Các phương thức :
public int append(String stringElement, Image imageElement);
public void insert(int index, String stringElement, Image imageElement);
public void set(int index, String stringElement, Image imageElement);
public void delete(int index);
public String getString(int index);
public Image getImage(int index);
public int getSelectedIndex( )
public boolean isSelected(int index);
public setSelectedIndex(int index, boolean selected);
public int getSelectedFlags(boolean[] selectedArray);
public void setSelectedFlags(boolean[] selectedArray);
11/20/2009
Võ Phương Bình – ITFAC - DLU
37
DateField
DateField là một thành phần có thể chỉnh sửa được để biểu diễn lịch ngày tháng và thông tin thời gian.
Tạo DateField:
public DateField(String label, int mode);
public DateField(String label, int mode, TimeZone timeZone);
11/20/2009
Võ Phương Bình – ITFAC - DLU
38
DateField
Ví dụ
DateField date = new DateField("Today`s date", DateField.DATE);
Form form = new Form("Date Info");
form.append(date);
11/20/2009
Võ Phương Bình – ITFAC - DLU
39
Gauge
Gauge biểu diễn một thanh đồ họa trên màn hình, có thể được sử dụng với một form.
Tạo Gause:
public Gauge(String label, boolean interactive, int maxValue, int initialValue);
Các phương thức
public boolean isInteractive( );
public int getMaxValue( );
public int getValue( );
public void setMaxValue(int maxValue);
public void setValue(int value);
11/20/2009
Võ Phương Bình – ITFAC - DLU
40
Gauge (2)
Ví dụ
Gauge gaVolume = new Gauge("Sound Level", true, 30, 4);
Form form = new Form("");
form.append(gaVolume);
11/20/2009
Võ Phương Bình – ITFAC - DLU
41
Image and ImageItem
ImageItem là một thành phần hình ảnh mà nó chứa một tham chiếu đến một đối tượng Image.
Lớp Image được dùng như một bộ chứa dữ liệu ảnh đồ họa.
Tạo Image
public static Image createImage(int width, int height);
public static Image createImage(Image image);
public static Image createImage(String name);
public static Image createImage(byte[] imageData, int imageOffset, int imageLength);
11/20/2009
Võ Phương Bình – ITFAC - DLU
42
Image and ImageItem (2)
File ảnh thường được hỗ trợ tốt có phần mở rộng png (Portable Network Graphics).
Các phương thức:
public int getHeight( );
public int getWidth( );
public boolean isMutable( );
public Graphics getGraphics( );
ImageItem cung cấp sự điều khiển và sắp xếp khi một đối tượng image được thêm vào form hoặc alert.

11/20/2009
Võ Phương Bình – ITFAC - DLU
43
Image and ImageItem (2)
Để tạo một đối tượng ImageItem, hãy sử dụng constructor sau:
public ImageItem(String label, Image img, int layout, String altText);
Tham số layout:
ImageItem.LAYOUT_CENTER
ImageItem.LAYOUT_DEFAULT
ImageItem.LAYOUT_LEFT
ImageItem.LAYOUT_NEWLINE_AFTER
ImageItem.LAYOUT_NEWLINE_BEFORE
ImageItem.LAYOUT_RIGHT
11/20/2009
Võ Phương Bình – ITFAC - DLU
44
StringItem
Tạo StringItem:
public StringItem(String label, String contents);
Các phương thức:
public void setText(String s);
public void setLabel(String l);
public String getText( );
public String getLabel( );
11/20/2009
Võ Phương Bình – ITFAC - DLU
45
TextField
Tạo TextField:
public TextField(String label, String text, int maxSize, int constraints);
Ràng buộc constraint:
TextField.EMAILADDR,
TextField.NUMBER,
TextField.PASSWD,
TextField.PHONENUMBER,
TextField.URL.
11/20/2009
Võ Phương Bình – ITFAC - DLU
46
TextField (2)
Các phương thức:
public int getConstraints( );
public void setConstrants(int c);
public int getMaxSize( );
public void setMaxSize(int size);
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 int getCaretPosition( );

11/20/2009
Võ Phương Bình – ITFAC - DLU
47
TextField (3)
Ví dụ
TextField userName = new TextField("LoginID:", "", 10, TextField.ANY);
TextField password = new TextField("Password:", "", 10, TextField.PASSWORD);
Form form = new Form("Sign in");
form.append(userName);
form.append(password);
11/20/2009
Võ Phương Bình – ITFAC - DLU
48