• Thứ Sáu, 13/08/2004 11:29 (GMT+7)

    Lập trình giao diện mức cao trong MIDP 1.0


    Một trong những vấn đề khó khăn của lập trình cho thiết bị di động là giao diện (UI). MIDP đưa ra 2 loại giao diện đồ họa mức thấp và mức cao nhằm tạo thuận lợi cho việc phát triển ứng dụng. Bài viết này tập trung giới thiệu về đồ họa mức cao trong MIDP.

    Đồ họa mức thấp và mức cao

    Chúng ta có thể phân biệt một cách đơn giản: Đồ 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 cầu phải vẽ lên màn hình.

    Đồ họa mức cao là lớp con của lớp Screen. Nó cung cấp các thành phần như textbox, form, list và alert. Việc sắp xếp các thành phần trên màn hình hạn chế, phụ thuộc vào nhà sản xuất.

    Đồ họa mức thấp là lớp con của lớp Canvas. Lớp này cung cấp các phương thức đồ họa cho phép vẽ lên màn hình hay bộ nhớ đệm màn hình cùng với các phương thức xử lý sự kiện bàn phím. Lớp này dùng cho các ứng dụng trò chơi cần điều khiển nhiều về màn hình.

    Khai báo của 2 lớp đồ hoạ mức thấp và mức cao như sau:

    public abstract class Canvas ex tends Displayable

    public abstract class Screen extends Displayable

    Cả hai lớp đồ họa mức thấp và mức cao đều là lớp con của lớp Displayble. Lưu ý, chỉ có thể có một lớp Displayable trên màn hình tại một thời điểm. Bạn 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.

     Hình 1. Hai mức đồ họa thấp vào cao


    Hình 1: Hai mức đồ họa thấp và cao

    Đồ họa mức cao

    Đồ hoạ mức cao bao gồm các lớp đối tượng sau:

    - TextBox

    Lớp TextBox cho phép người dùng nhập và soạn thảo văn bản. Lập trình viê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 chạy trong 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().

    - Form

    Form có lẽ là lớp hữu dụng nhất của các lớp Screen bởi vì nó 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...

    - List

    Lớp List (danh sách) 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 danh sách và chọn một hay nhiều item. MIDP định nghĩa ba loại danh sách:

      IMPLICIT - Loại danh sách này tạo ra một thông báo (notify) ngay lập tức cho ứng dụng nếu nó đã được đăng ký một đối tượng CommandListener. Mục đang focus sẽ được lựa chọn.

      EXCLUSIVE - Loại danh sách này chỉ cho phép lựa chọn một mục đơn. Ứng dụng sẽ được thông báo và danh sách phải được kiểm tra sau đó để xác định mục nào đã được chọn.

      MULTIPLE - Loại danh sách này cho phép lựa chọn nhiều mục và bật tắt trạng thái khi lựa chọn. Ứng dụng sẽ không được thông báo và danh sách sẽ được kiểm tra sau để xác định mục nào được chọn.

    - Alert

    Alert hiển thị một màn hình pop-up trong một khoảng thời gian. Nói chung nó 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 hoặc có thể được thiết lập là FOREVER (dạng modal alert) cho đến khi được người dùng nhấn phím bất kỳ để đóng lại. 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. Ngoài ra Alert có thể được dùng để tạo màn hình chào (splash screen) cho game. Các bạn xem thêm bài 'Xây dựng màn hình chào cho ứng dụng ĐTDĐ' trong TGVT - PCW số tháng 7/2004, trang 138.

    FORM và ITEM

    Sử dụng form cho phép hiển thị nhiều item khác nhau trong cùng một màn hình. Sau khi đã định nghĩa đối tượng Form, bạn cần thêm vào các item. Mỗi item là một lớp con của lớp Item.

    Hình 3 minh họa cách thêm các item được thêm vào form và cách sử dụng chúng trong ứng dụng.


    Hình 2: Sử dụng Item trong Form (phần 1)

    - String Item

    public class StringItem extends Item

    StringItem là chuỗi hiển thị mà người dùng không thể hiệu chỉnh. Tuy nhiên, cả nhãn và nội dung của StringItem có thể được hiệu chỉnh bởi ứng dụng.

    - Image Item

    public class ImageItem extends Item

    ImageItem cho phép thêm hình vào form. ImageItem chứa tham chiếu đến một đối tượng Image phải được tạo trước đó.

    - Text Field

    public class TextField extends Item

    TextField cho phép người dùng nhập văn bản. 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 của TextField có thể nhỏ hơn yêu cầu do giới hạn của thiết bị di động. Lập trình viên có thể (và nên) lấy kích thước lớn nhất thật sự bằng cách sử dụng phương thức getMaxSize(). Có thể sử dụng ràng buộc nhập liệu để giới hạn dữ liệu nhập của người dùng. Ràng buộc nhập liệu có thể là ANY (bất kỳ), EMAIL, NUMERIC, PASSWORD, PHONENUMBER, URL.

     Hình 3. Sử dụng Item trong Form (phần 2)


    Hình 3: Sử dụng Item trong Form (phần 2)

    - Date Field

    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 (DATE), thời gian (TIME) hoặc cả hai.

    - Choice Group

    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 hay lựa chọn nhiều. ChoiceGroup hiện thực giao diện (interface) Choice.

    Hình 4: Chạy UIDemo trên trình giả lập của J2ME Wirless Toolkit 1.0.4_01
     

    Giao diện Choice (cũng được lớp List sử dụng) định nghĩa các phương thức có thể được dùng để xử lý danh sách các item. Danh sách các item là một chuỗi và cũng có thể bao gồm cả hình ảnh. Ứng dụng có thể chèn (insert), thêm vào cuối (append), và xóa (delete) các item sau khi đối tượng Choice đã được tạo. Các item này trong danh sách sẽ được tham chiếu bởi số chỉ mục (bắt đầu từ 0).

    ChoiceGroup có thể là EXCLUSIVE hay MULTIPLE. Người dùng có thể chọn một mục hoặc nhiều mục. Chế độ IMPLICIT (được hỗ trợ trong List Screen) không được ChoiceGroup hỗ trợ. Do đó  CommandListener sẽ không được gọi khi người dùng lựa chọn.

    - Gauge

    public class Gauge extends Item

    Lớp Gauge cung cấp một hiển thị thanh (bar) của một giá trị số học. Gauge có thể có tính tương tác hoặc không. Gauge tương tác cho phép người dùng thay đổi giá trị của tham số. Gauge không tương tác chỉ đơn thuần để hiển thị, ví dụ như hiển thị tỉ lệ phần trăm hiện thời của một tác vụ nào đó.

     
    Hình 5: Chạy UIDemo trên trình giả lập Samsung JSDK 1.0 cho điện thoại X600

    Chương trình mẫu

    J2ME Wireless Toolkit của Sun và JaUmi Wireless Toolkit của Samsung có sẵn một Project tên là UIDemo minh họa rất rõ ràng cách sử dụng đồ họa mức cao. Bạn có thể chạy Project này để quan sát cụ thể việc thực hiện đồ họa mức cao trên thiết bị giả lập. Mã nguồn của project khá rõ ràng và dễ hiểu.

    Kết luận

    Đồ họa mức cao thích hợp với các ứng dụng yêu cầu tính khả chuyển cao, tập trung vào nội dung và không cần giao diện phức tạp. Tuy nhiên, đồ họa mức cao vẫn có thể áp dụng cho lập trình game nhằm đơn giản hóa các thao tác như lựa chọn menu, options, help, bảng điểm...

    Lê Ngọc Quốc Khánh
    (step2 - www.JavaVietnam.org)

    ID: A0408_137