›
›

Lập trình giao diện cấp cao - ThS. Trần Minh Triết

ppt 61 trang phuongnguyen 2430
Download
Bạn đang xem 20 trang mẫu của tài liệu "Lập trình giao diện cấp cao - ThS. Trần Minh Triết", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pptlap_trinh_giao_dien_cap_cao_ths_tran_minh_triet.ppt

Nội dung text: Lập trình giao diện cấp cao - ThS. Trần Minh Triết

  1. Đại học Khoa học Tự nhiên ĐHQG-HCM Khoa Công Nghệ Thông Tin Lập trình giao diện cấp cao ThS. Trần Minh Triết 1
  2. Nội dung Mở đầu Lập trình giao diện – Screen Lập trình giao diện trên Form 2
  3. Tài liệu tham khảo (Chương 9+10) Programming Wireless Devices with the Java™ 2 Platform Micro Edition Second Edition Roger Riggs, Antero Taivalsaari, Jim Van Peursem, Jyri Huopaniemi, Mark Patel, Aleksi Uotila, Jim Holliday Editor Addison Wesley (2003) 3
  4. Tổng quan Lập trình giao diện Các lớp MIDP cung cấp hai mức đồ họa: đồ họa mức thấp và đồ họa mức cao. Đồ họa mức cao dùng cho văn bản hay form. Đồ họa mức thấp dùng cho các ứng dụng trò chơi yêu phải vẽ lên màn hình. 4
  5. Tổng quan Lập trình giao diện Ứng dụng Game Phụ thuộc vào thiết bị Vẽ trực tiếp lên display Xử lý nhấn phím Ứng dụng quản lý, nghiệp vụ List, TextBox, Form Tương thích nhiêu thiết bị Duy nhất 1 đối tượng Displayable có thể được hiển thị tại mỗi thời điểm public abstract class Canvas extends Displayable public abstract class Screen extends Displayable 5
  6. Tổng quan Lập trình giao diện Cả hai lớp đồ họa mức thấp và mức cao đều là lớp con của lớp Displayble. Trong MIDP, chỉ có thể có một lớp displayable trên màn hình tại một thời điểm. Có thể định nghĩa nhiều màn hình nhưng một lần chỉ hiển thị được một màn hình. 6
  7. Tổng quan Lập trình giao diện import javax.microedition.lcdui.*; 7
  8. Các thành phần giao diện cấp cao kế thừa trực tiếp từ lớp Screen Đồ họa mức cao là lớp con của lớp Screen: List TextBox Alert Form Ta ít điều khiển sắp xếp các thành phần trên màn hình. Việc sắp xếp thật sự phụ thuộc vào nhà sản xuất. 8
  9. List Lớp List là một Screen chứa danh sách các lựa chọn chẳng hạn như các radio button. Người dùng có thể tương tác với list và chọn một hay nhiều item. Có 3 loại List: implicit, exclusive và multiple choice 9
  10. List Ví dụ 1: List list = new List("Fruits", Choice.IMPLICIT); list.append("Apple", null); list.append("Pear", null); list.append("Orange", null); list.append("Banana", null); list.append("Pineapple", null); list.append("Mandarin", null); list.setCommandListener(this); list.addCommand(backCommand); 10
  11. Implicit Choice List Ví dụ 2: // Construct a list of message headers List list = new List("Messages", Choice.IMPLICIT, messageHeaders, messageStateIcons); // The command handler is in the same class list.setCommandListener(this); // Command for "opening" the selected message Command openCommand = new Command("Open", Command.ITEM, 1); // Command for "removing" the selected message Command removeCommand = new Command("Remove", Command.ITEM, 2); // Command for going "back" Command backCommand = new Command("Back", Command.BACK, 3); 11
  12. Implicit Choice List Ví dụ 2 (tt): list.addCommand(openCommand); list.addCommand(removeCommand); list.addCommand(backCommand); list.setSelectCommand(openCommand); // openCommand is the default 12
  13. Implicit Choice List Ví dụ 2 (tt): public void commandAction (Command cmd, Displayable d) { int selectedIndex = ((List) d).getSelectedIndex(); if (cmd == openCommand) { // Handle "open" command based on selectedIndex } else if (cmd == removeCommand) { // Handle "remove" command based on selectedIndex } else if (cmd == backCommand) { // Handle backward navigation } } 13
  14. Exclusive Choice List Ví dụ 3: List list = new List("Border Style“, Choice.EXCLUSIVE); list.append("None“, null); list.append("Plain“, null); list.append("Fancy“, null); list.addCommand(backCommand); list.addCommand(okCommand); 14
  15. Exclusive Choice List Ví dụ 3: public void commandAction(Command cmd, Displayable d) { List list = (List) d; if (cmd == okCommand) { int i = list.getSelectedIndex(); // Use the index of the selected list element } else if (cmd == backCommand) { // Handle the back command } } 15
  16. Multiple Choice List Ví dụ 4: List list = new List("Colors to mix“, Choice.MULTIPLE); list.append("Red“, null); list.append("Green“, null); list.append("Blue“, null); list.addCommand(backCommand); list.addCommand(okCommand); 16
  17. Multiple Choice List Ví dụ 4: public void commandAction(Command cmd, Displayable d) { if (cmd == okCommand) { List list = (List) d; for (int i = 0; i < list.size(); i++) { boolean selected = list.isSelected(i); // If selected take action } } } 17
  18. Font của element trong List Ví dụ 5: // Get the default font Font defaultFont = list.getFont(0); int defaultFontFace = defaultFont.getFace(); int defaultFontSize = defaultFont.getSize(); // Define a style that differs from the default font int readFontStyle; if (defaultFont.isBold()) { // If default is itself bold, use bold and italic readFontStyle=Font.STYLE_BOLD|Font.STYLE_ITALIC; } else { // Otherwise use simply bold readFontStyle = Font.STYLE_BOLD; } 18
  19. Font của element trong List Ví dụ 5 (tt): // Get a new font with only the style differing from default font Font readElementFont = Font.getFont(defaultFontFace, readFontStyle, defaultFontSize); // Set the readElementFont for "unread" elements for (int i = 0 ; i < list.size() ; i++) { // readState array contains boolean true if item is read if (!readState[i]) { list.setFont(i, readElementFont); } } 19
  20. TextBox Lớp TextBox cho phép người dùng nhập và soạn thảo văn bản. Có thể định nghĩa số ký tự tối đa giới hạn loại dữ liệu nhập (số học, mật khẩu, email ) và hiệu chỉnh nội dung của textbox. Kích thước thật sự của textbox có thể nhỏ hơn yêu cầu khi thực hiện thực tế (do giới hạn của thiết bị). Kích thước thật sự của textbox có thể lấy bằng phương thức getMaxSize(). 20
  21. TextBox Ví dụ 1: TextBox text = new TextBox("Phone“, "18005551212“, 50, TextField.PHONENUMBER); text.addCommand(backCommand); text.addCommand(okCommand); Trên TextBox phải có ít nhất 1 command. Nếu không người dùng không thể thoát ra khỏi TextBox 21
  22. Các kiểu Textbox Các kiểu Textbox Các cờ điều khiển khác: ANY PASSWORD NUMERIC UNEDITABLE DECIMAL SENSITIVE PHONENUMBER NON_PREDICTIVE URL INITIAL_CAPS_WORD EMAILADDR INITIAL_CAPS_SENTENCE Ví dụ: NUMERIC | PASSWORD 22
  23. Alert Alert hiển thị một màn hình pop-up trong một khoảng thời gian, dùng để cảnh báo hay báo lỗi. Thời gian hiển thị có thể được thiết lập bởi ứng dụng. Alert có thể được gán các kiểu khác nhau (alarm, confirmation, error, info, warning), các âm thanh tương ứng sẽ được phát ra. 23
  24. Alert Ví dụ 1: Alert alert = new Alert("Cinema", "Two tickets purchased", null, AlertType.CONFIRMATION); alert.setTimeout(4000); display.setCurrent(alert); 24
  25. Sử dụng Command trong Alert Ví dụ 2: Alert alert = new Alert(null, null, null, AlertType.CONFIRMATION); alert.addCommand(okCommand); alert.addCommand(backCommand); alert.setCommandListener(this); String prompt = "Delete address?\n\n"; String detail = "john.doe@foo.bar"; alert.setString(prompt + detail); display.setCurrent(alert); 25
  26. Sử dụng Gauge trong Alert Ví dụ 3: Alert alert = new Alert("Cinema", "Sending message", null, null); alert.setTimeout(4000); Gauge indicator = new Gauge(null, false, Gauge.INDEFINITE, Gauge.CONTINUOUS_RUNNING); alert.setIndicator(indicator); display.setCurrent(alert); 26
  27. Form Form là lớp đối tượng được sử dụng nhiều nhất trong các lớp Screen vì cho phép chứa nhiều item trên cùng một màn hình. Các item có thề là DateField, TextField , ImageItem, TextItem, ChoiceGroup. Constructor: Form (String title) Form (String title, Item[] items) 27
  28. Form Phương thức: int append (Image img) int append (Item item) int append (String str) void delete (int itemNum) void deleteAll () Item get (int itemNum) int getHeight() int getWidth() void insert(int itemNum, Item item) void set(int itemNum, Item item) void setItemStateListener(ItemStateListener iListener) int size() 28
  29. Các tính năng mới trong MIDP 2.0 Lớp Font được bổ sung tính năng: Cho phép lấy Font mặc định của static text và input text (hàm getFont). Lớp List được bổ sung tính năng: Lấy và cập nhật Font của từng element trong list (hàm setFont và getFont) Điều khiển việc xuống hàng (wrapping) hay rút gọn (truncate) văn bản trong element (hàm setFitPolicy và getFitPolicy) Thiết lập command mặc định cho element được chọn (hàm setSelectCommand) Xóa tất cả các element trong list bằng 1 hàm duy nhất (deleteAll) Sử dụng Image (dạng mutable) làm các element trong List (hàm append, insert, và constructor). 29
  30. Các tính năng mới trong MIDP 2.0 (t.t.) Lớp Alert được bổ sung các tính năng: Sử dụng Image (dạng mutable) trong Alert (hàm setImage) Sử dụng Gauge làm progress indicator trong Alert (hàm setIndicator và getIndicator) Bổ sung (các) Command và thay thế command dismiss (mặc định) trong Alert (hàm addCommand và removeCommand) Đặt command listener cho phép ứng dụng xử lý Command (hàm setCommandListener). 30
  31. Các thành phần trong Form Sử dụng form cho phép nhiều item khác nhau trong cùng một màn hình. Lập trình viên không điều khiển sự sắp xếp các item trên màn hình. Sau khi đã định nghĩa đối tượng Form, sau đó sẽ thêm vào các item. Mỗi item là một lớp con của lớp Item. DateField Gauge StringItem TextField ChoiceGroup Image và ImageItem 31
  32. Các thành phần trong Form import javax.microedition.lcdui.* 32
  33. DateField public class DateField extends Item DateField cho phép người dùng nhập thông tin ngày tháng và thời gian. Có thể xác định giá trị khởi tạo và chế độ nhập: Ngày tháng (DateField.DATE) Thời gian (DateField.TIME) Cả hai (DateField.DATE_TIME) Constructor: DateField(String label, int mode) DateField(String label,int mode,TimeZone timeZone) 33
  34. DateField Ví dụ 1: DateField date = new DateField("Date", DateField.DATE); date.setDate(new java.util.Date()); // Set date to "now" form.append(date); 34
  35. DateField 35
  36. Gauge public class Gauge extends Item Lớp Gauge cung cấp một hiển thị thanh (bar display) của một giá trị số học. Gauge có thể có tính tương tác hoặc không. Nếu một gauge là tương tác thì người dùng có thể thay đổi giá trị của tham số qua gauge. Gauge không tương tác chỉ đơn thuần là để hiển thị. Constructor: Gauge (String label, boolean interactive, int maxValue, int initialValue) 36
  37. Gauge Ví dụ 1: Gauge gauge = new Gauge("Speed:“, true, 10, 5); form.append(gauge); 37
  38. Gauge Ví dụ 2: Alert alert = new Alert("Cinema", "Sending message", null, null); alert.setTimeout(4000); Gauge indicator = new Gauge(null, false, Gauge.INDEFINITE, Gauge.CONTINUOUS_RUNNING); alert.setIndicator(indicator); display.setCurrent(alert); 38
  39. Gauge 39
  40. StringItem public class StringItem extends Item StringItem chỉ là một chuỗi hiển thị mà người dùng không thể hiệu chỉnh. Nhãn và nội dung của StringItem có thể được hiệu chỉnh bởi ứng dụng. Constructor: StringItem (String label, String text) MIDP 2.0: StringItem (String label, String text, int appearanceMode ) Các kiểu hiển thị: Item.HYPERLINK, Item.BUTTON, Item.PLAIN (mặc định) 40
  41. StringItem Ví dụ 1: String si = new StringItem("Photo name:", "baby.png"); form.append(si); 41
  42. StringItem 42
  43. StringItem Ví dụ 2: Form form = new Form("Concatenation"); // Add Commands and CommandListener form.append("First"); form.append("paragraph"); form.append("of text."); Item si = new StringItem("Label", "Another"); form.append(si); form.append("text paragraph"); form.append("here as an example."); display.setCurrent(form); 43
  44. StringItem Ví dụ 3: MIDP 2.0 Form form = new Form("Appearance"); Command backCommand = new Command("Back", Command.BACK, 1); form.addCommand(backCommand); form.setCommandListener(this); 44
  45. StringItem Ví dụ 3 (tt): MIDP 2.0 Item link = new StringItem(null, "link", Item.HYPERLINK); Command linkCommand = new Command("Go", Command.ITEM, 1); link.setDefaultCommand(linkCommand); ink.setItemCommandListener(this); form.append("Follow this "); form.append(link); form.append("."); 45
  46. TextField public class TextField extends Item TextField cho phép người dùng nhập văn bản. Có thể có giá trị khởi tạo kích thước tối đa và ràng buộc nhập liệu. Kích thước thật sự có thể nhỏ hơn yêu cầu do giới hạn của thiết bị di động. Constructor: TextField (String label, String text, int maxSize, int constraints) 46
  47. TextField Các kiểu Textbox Các cờ điều khiển khác: ANY PASSWORD NUMERIC UNEDITABLE DECIMAL SENSITIVE PHONENUMBER NON_PREDICTIVE URL INITIAL_CAPS_WORD EMAILADDR INITIAL_CAPS_SENTENCE Ví dụ: NUMERIC | PASSWORD 47
  48. TextField 48
  49. ChoiceGroup public class ChoiceGroup extends Item Implements Choice ChoiceGroup cung cấp một nhóm các radio-button hay checkbox cho phép lựa chọn đơn (radio button) hay lựa chọn nhiều (checkbox). 49
  50. ChoiceGroup Ví dụ 1: ChoiceGroup choice = new ChoiceGroup("Size:", Choice.EXCLUSIVE); choice.append("Small", null); choice.append("Large", null); form.append(choice); 50
  51. ChoiceGroup 51
  52. Image và ImageItem public static Image createImage(String name) throws java.io.IOException; public static Image createImage(Image image); public static Image createImage(int width, int height); public static Image createImage(byte[] imagedata, int imageoffset, int imagelength); 52
  53. Image và ImageItem public class ImageItem extends Item ImageItem cho phép thêm vào hình form. ImageItem chứa tham chiếu đến một đối tượng Image phải được tạo trước đó. public ImageItem (String label, Image img,int layout, String altText); 53
  54. Image và ImageItem 54
  55. Image và ImageItem Image image = Image.createImage( "/images/PhotoAlbum.png"); ImageItem imageItem = new ImageItem(null, // (no label) image, ImageItem.LAYOUT_CENTER | ImageItem.LAYOUT_NEWLINE_AFTER | ImageItem.LAYOUT_NEWLINE_BEFORE, "(preview image)"); form.append(imageItem); 55
  56. Các tính năng mới trong MIDP 2.0 Lớp TextBox và TextField được bổ sung tính năng về hiển thị và nhập liệu: Cho phép nhắc nhở ký tự đầu tiên (xem hàm setInitialInputMode) Hỗ trợ giới hạn việc nhập liệu dạng số (hàm setConstraints với tham số DECIMAL), Hỗ trợ các kiểu quy định nhập liệu PASSWORD, SENSITIVE, và NON_PREDICTIVE cho phép giới hạn việc hiển thị và cache các giá trị (hàm setConstraints) Cho phép nhắc nhở để viết hoa ký tự đầu câu hay tiếng (hàm setConstraints). 56
  57. Các tính năng mới trong MIDP 2.0 (tt) Các tính năng mới của Form và Item: Cho phép định vị 1 item so với item trước và sau (xem hàm getLayout và setLayout). Chức năng Spacer cho phép tạo các khoảng trống trên Form (xem lớp Spacer). Các chế độ hiển thị mới: plain, button, hay hyperlink (dành cho StringItem và ImageItem). Có thể bổ sung và bỏ bớt command của mỗi item (hàm addCommand và removeCommand). 57
  58. Các tính năng mới trong MIDP 2.0 (tt) Các tính năng mới của Form và Item: Interface ItemCommandListener cho phép định nghĩa các hành động command (context-sensitive) cho Item (hàm setItemCommandListener). Có thể định nghĩa Command mặc định cho mỗi item (hàm setDefaultCommand). Cho phép 1 Item cụ thể trong Form trở thành item hiện hành và hiển thị lên (hàm Display.setCurrentItem). Cho phép xóa tất cả item trong Form chỉ bằng 1 hàm deleteAll. Cho phép định nghĩ các kiểu item riêng bằng cách sử dụng lớp CustomItem. 58
  59. Các tính năng mới trong MIDP 2.0 (tt) String và StringItem: Chế độ hiện thị của String: plain, button, hay hyperlink (constructor và hàm getAppearanceMode) Lấy và cập nhật Font cho từng String (hàm setFont và getFont). 59
  60. Các tính năng mới trong MIDP 2.0 (tt) Image và ImageItem: Chế độ hiển thị của Image: plain, button, hay hyperlink (constructor và hàm getAppearanceMode) Image sử dụng trong Form là dạng mutable (xem constructor và hàm setImage). Lớp Gauge hỗ trợ hiển thị trạng thái đang bận của hệ thống: Hiệu ứng liên tục được cập nhật liên tục được hệ thống cập nhật Hiệu ứng tăng dần từng bước giá trị (do ứng dụng gọi hàm setValue và setMaxValue). 60
  61. Các tính năng mới trong MIDP 2.0 (tt) Lớp ChoiceGroup và interface Choice được bổ sung các tính năng: Chế độ pop-up (tương tự exclusive, ngoại trừ giao diện hiển thị phần tử được chọn, danh sách hiển thị dạng pop up để chọn phần tử khác), Lấy và cập nhật Font của từng element (hàm setFont và getFont) Xóa tất cả các element trong ChoiceGroup bằng hàm deleteAll. 61