Giới thiệu về phần mở rộng di động cho eSWT, Phần 1: Sử dụng các tiểu trình đơn giản để nhanh chóng xây dựng các ứng dụng điện thoại di động

Khi các nền di động ngày càng trở nên tinh vi, nhu cầu về điện toán di động sẽ tăng theo. Trong loạt bài này, chúng ta hãy tìm hiểu về Bộ công cụ tiểu trình tiêu chuẩn nhúng (eSWT - embedded Standard Widget Toolkit). Bạn có thể sử dụng eSWT để phát triển các ứng dụng dáng vẻ nguyên sinh Java™ (native-looking Java applications) cho các loại điện thoại di động. Bài viết này tìm hiểu cách sử dụng các phần tử điều khiển di động của eSWT. Các thí dụ về mã sẽ dẫn bạn thông suốt về cách sử dụng năm lớp này trong phần mở rộng di động cho eSWT.

Uriel Liu, Kỹ sư phần mềm, EMC

Uriel Liu là nhà phát triển phần mềm tại Phòng thí nghiệm Phát triển Phần mềm IBM Trung Quốc (IBM China Software Development Lab) và làm về công nghệ khách WED. Ông cũng là một người đam mê dự án eRCP



Eric Hsu, Kỹ sư phần mềm, IBM

Eric HsuEric Hsu là nhà phát triển phần mềm tại Phòng thí nghiệm Phát triển Phần mềm IBM Trung Quốc tại Đài Bắc. Ông làm về công nghệ khách Lotus Expediter và phát triển dự án eRCP cho Eclipse. Ông cũng là một người đam mê dự án eRCP Eclipse.



30 09 2010

Giới thiệu

Khi các nền di động tinh vi ngày càng phổ biến, nhu cầu về điện toán di động sẽ tăng lên. Phần mở rộng di động cho Bộ công cụ tiểu trình tiêu chuẩn nhúng (eSWT) là một công nghệ Eclipse có thể được sử dụng để phát triển các ứng dụng dáng vẻ nguyên sinh Java™ cho các loại điện thoại di động.

eSWT cung cấp các tiểu trình nhúng tiêu chuẩn để xây dựng các ứng dụng điện thoại di động. Nó là một phần của dự án nền tảng khách phong phú nhúng (eRCP - embedded Rich Client Platform). eSWT chủ yếu quan tâm đến việc đáp ứng các yêu cầu về chức năng và trải nghiệm của người sử dụng các thiết bị di động. eSWT cung cấp việc truy cập hiệu quả, khả chuyển cho các tiện ích giao diện người sử dụng của các thiết bị mà nó được cài đặt trên đó. Đó là một tập con của giao diện lập trình ứng dụng SWT cho máy tính để bàn. Để có sự thích ứng khi triển khai, các giao diện lập trình ứng dụng được chia thành hai gói:

  • eSWT lõi chứa chức năng cơ bản và các tiểu trình đơn giản.
  • eSWT mở rộng chứa các tiểu trình phức tạp hơn (Bảng, Cây, Trình duyệt Web) và các hộp thoại và bài trí bổ sung.

Bài viết này giả định rằng bạn đã có một sự hiểu biết cơ bản về eSWT và eRCP.


Tổng quan

Bảng 1 cung cấp tổng quan về các phần mở rộng di động của eSWT. Bạn cũng có thể xem hệ phân cấp các lớp.

Bảng 1. Các lớp có trong phần mở rộng di động của eSWT
Các kiểu phần tử điều khiểnLớp/Các giao diệnMô tả
Các phần tử điều khiểnCaptionedControlDùng để hiển thị một nhãn (hay chú thích) ở mặt trước phần tử điều khiển. Như một tùy chọn, có thể sử dụng một đoạn văn bản nối theo sau điều khiển này.
ConstrainedTextMột phần tử điều khiển văn bản một dòng, ràng buộc kiểu dáng (styles) đầu vào của người sử dụng.
DateEditorMột phần tử điều khiển nhập dữ liệu đặc biệt cho phép người sử dụng nhập vào hoặc chọn một ngày tháng.
ListBox/ListBoxItemBiểu diễn một đối tượng giao diện người sử dụng cho phép nhấn chọn, hiển thị một danh sách các mục gồm có các biểu tượng và văn bản từ một mô hình dữ liệu. Một tiểu trình Mô hình-Khung nhìn-Điều khiển (MVC- Model-View-Control) trong eSWT.
ListViewMột tiểu trình cho phép người sử dụng chọn một hoặc nhiều mục từ một tập hợp các mục mà có thể được hiển thị trong một định dạng nhiều cột với các kiểu dáng khác nhau.
MobileShellMột trình shell (trình vỏ) đặc biệt phù hợp với các thiết bị mà yêu cầu có sự thay đổi động các trang trí (trim) vào thời gian chạy. Bạn có thể sử dụng nó để hiển thị một ứng dụng ở chế độ toàn màn hình. (“shell” – tiếng Anh nghĩa là vỏ - bao bọc lớp nhân (kernel) hệ điều hành. Người sử dụng tương tác với hệ điều hành qua shell – N.D).
SortedListBiểu diễn một đối tượng giao diện người sử dụng cho phép nhấn chọn, hiển thị một danh sách các mục văn bản đã sắp thứ tự. Một bộ lọc trực quan có thể được sử dụng để lọc danh sách với đầu vào của người sử dụng.
HyperLinkBiểu diễn một đối tượng giao diện người sử dụng cho phép nhấn chọn, sẽ khởi chạy các ứng dụng khác khi được kích hoạt bởi người dùng cuối.
TextExtensionChứa các phương thức để mở rộng các chức năng của phần tử điều khiển văn bản.
Các trình conTaskTipCung cấp phản hồi cho người sử dụng về trạng thái của một tác vụ chạy lâu.
Các hội thoạiMultiPageDialogCác cá thể của lớp này biểu diễn một hộp thoại có nhiều tai phiếu (tab).
QueryDialogMột cửa sổ phương thức dùng để nhắc nhở người dùng cuối nhập dữ liệu.
TimedMessageBoxMột cửa sổ hình thái, dùng để thông báo ngắn gọn cho người sử dụng những thông tin hạn chế, sử dụng một kiểu dáng chuẩn.
Liên quan đến công cụMobileDevice / MovileDeviceEvent / MobileDeviceListenerCác cá thể của lớp này biểu diễn thiết bị được sử dụng. Nó cung cấp các phương thức cho phép các ứng dụng tìm hiểu được nhiều hơn về các đặc tính và khả năng đặc thù của thiết bị.
Screen / ScreenEvent / ScreenListenerCác cá thể của lớp này biểu diễn các màn hiển thị sẵn có để sử dụng ứng dụng.
InputCác cá thể của lớp này biểu diễn các đặc tính nhập đầu vào dựa trên bàn phím.

Phần còn lại của bài viết này tìm hiểu về năm phần tử điều khiển di động đầu tiên. Hãy Tải về các đoạn mã sử dụng trong bài viết này.


CaptionedControl

Bạn có thể sử dụng CaptionedControl để hiển thị một nhãn, hay chú thích, ở mặt trước một phần tử điều khiển. Như một tùy chọn, có thể sử dụng một đoạn văn bản nối theo sau điều khiển này, chẳng hạn như các đơn vị đo lường.

Việc xác định xem phần tử điều khiển nào đang có tiêu điểm (“has focus” – phần tử điều khiển được làm nổi bật và đang sẵn sàng tương tác với người sử dụng vào lúc đó – N.D.) có thể sẽ khó khăn trên các thiết bị di động, nơi mà các điều kiện ánh sáng thường không phải là tốt nhất. Hãy sử dụng CaptionedControl để chú thích một phần tử điều khiển với một nhãn được làm nổi bật là tiêu điểm bất cứ khi nào phần tử điều khiển đó có tiêu điểm. Với một nhãn được làm nổi bật toàn bộ, rất dễ dàng tìm ra tiêu điểm.

Bạn có thể sử dụng các kiểu dáng loại trừ lẫn nhau sau đây để định nghĩa một CaptionedControl.

LEFT_TO_RIGHT
Kiểu dáng mặc định. Các yếu tố bên trong CaptionedControl được sắp thẳng hàng từ trái sang phải.
RIGHT_TO_LEFT
Các yếu tố bên trong CaptionedControl được sắp thẳng hàng từ phải sang trái.

CaptionedControl có một số phương thức nhận (getters) và phương thức thiết lập (setters) để thao tác giá trị các thuộc tính của nó. Liệt kê 1 hiển thị một mã mẫu tạo ra hai CaptionedControls.

Liệt kê 1. Tạo ra hai CaptionedControls
CaptionedControl captionedControl = new CaptionedControl(shell, SWT.LEFT_TO_RIGHT); 
captionedControl.setText("Name: "); 
Text text = new Text(captionedControl, SWT.SINGLE); 
text.setText("Dr. John Wimer");
captionedControl.setTrailingText("Surgeon"); 
Image image1 = new Image(display,"res/surgeon.png"); 
captionedControl.setImage(image1);

CaptionedControl captionedControl2 = new CaptionedControl(shell, SWT.LEFT_TO_RIGHT);
captionedControl2.setText("Name: "); 
Text text2 = new Text(captionedControl2, SWT.SINGLE); 
text2.setText("Jessica");
captionedControl2.setTrailingText("Receptionist"); 
Image image2 = new Image(display,"res/receptionist.png"); 
captionedControl2.setImage(image2);

Đoạn mã trên tạo ra hai phần tử điều khiển văn bản được gắn chú thích bằng CaptionedControl. Ví dụ cũng tạo ra hai hình ảnh để mô tả tốt hơn chức danh công việc của họ. Kết quả mã được trình bày trong Hình 1, với phần tử điều khiển có tiêu điểm được làm nổi bật.

Hình 1. Các CaptionedControl mẫu
Các CaptionedControl mẫu

ConstrainedText

ConstrainedText là một phần tử điều khiển văn bản một dòng, nó hạn chế kiểu dữ liệu mà người sử dụng có thể nhập vào. Phần tử điều khiển này giới hạn các ký tự mà người sử dụng có thể nhập vào để việc nhập dữ liệu hiệu quả hơn. Nó cũng giới hạn các ký tự có thể nhập được chỉ bên trong trường này.

Bạn có thể sử dụng các kiểu loại trừ lẫn nhau sau đây để tạo ra các kiểu ConstrainedText khác nhau.

DECIMAL (thập phân)
Kiểu đầu vào thập phân cho phép nhập các giá trị số, phần lẻ có hay không là tùy chọn. Thí dụ, -123, 0.123, hoặc .5 tất cả đều là các đầu vào hợp lệ.
NUMERIC (số)
Kiểu đầu vào dạng số cho phép các giá trị bằng số.
PHONENUMBER (số điện thoại)
Kiểu đầu vào số điện thoại cho phép nhập các giá trị số, có thể có các ký tự đặc thù cho điện thoại, chẳng hạn như +, * và #.

Mã mẫu trong Liệt kê 2 tạo ra các loại ConstrainedText khác nhau.

Liệt kê 2. Các mẫu ConstrainedText
Composite composite1 = new Composite(shell,SWT.NONE); 
composite1.setLayout(new RowLayout(SWT.HORIZONTAL)); 
Label phoneNumber = new Label(composite1,SWT.NONE);
phoneNumber.setText("Phone Number: "); 

ConstrainedText cT1 = new ConstrainedText(composite1, SWT.BORDER, 
            ConstrainedText.PHONENUMBER); 
Composite composite2 = new Composite(shell,SWT.NONE); 
composite2.setLayout(new RowLayout(SWT.HORIZONTAL)); 
Label decimal = new Label(composite2,SWT.NONE);
decimal.setText("Decimal: "); 

ConstrainedText cT2 = new ConstrainedText(composite2, SWT.BORDER, 
                      ConstrainedText.DECIMAL); 
Composite composite3 = new Composite(shell,SWT.NONE); 
composite3.setLayout(new RowLayout(SWT.HORIZONTAL));
Label numeric = new Label(composite3,SWT.NONE); 
numeric.setText("Numeric: ");

ConstrainedText cT3 = new ConstrainedText(composite3, SWT.BORDER, 
                      ConstrainedText.NUMERIC);

Mã trên đây tạo ra ba ConstrainedText giới hạn đầu vào chỉ là số điện thoại, số kiểu thập phân và số. Kết quả được chỉ ra ở Hình 2 với một số mẫu văn bản được nhập vào.

Hình 2. Mẫu ConstrainedText
Mẫu ConstrainedText

DateEditor

DateEditor là một phần tử điều khiển nhập dữ liệu đặc biệt, nó cho phép người sử dụng nhập vào hoặc chọn một ngày tháng. Giá trị trả về của getDate() là một cá thể của lớp Date.

Địa phương và múi giờ mặc định dùng cho định dạng ngày tháng và thời giờ phản ánh cấu hình hiện thời trong thiết bị. Nếu ngày tháng không được đặt, mặc định là ngày tháng hiện tại được sử dụng. Các ứng dụng có thể gọi phương thức setTimeZone(timeZone) để thay đổi phần chênh lệch cần cộng thêm vào giờ UTC (Coordinated Universal Time - Giờ Quốc tế Phối hợp). Sự thay đổi này chỉ ảnh hưởng đến cá thể tiểu trình ấy mà không làm ảnh hưởng đến các ứng dụng khác.

Bạn có thể sử dụng các kiểu loại trừ lẫn nhau sau đây để tạo ra các loại DateEditor khác nhau.

DATE (ngày)
Một kiểu nhập ngày tháng gồm năm, tháng và ngày.
DATE_TIME (ngày giờ)
Một kiểu nhập ngày tháng và thời giờ.
DURATION (khoảng thời gian)
Một kiểu nhập một khoảng thời gian tính bằng giờ, phút và giây.
OFFSET (dịch chuyển)
Một kiểu nhập một khoảng thời gian tính bằng giờ, phút, giây và có thể được trừ đi hoặc cộng thêm vào giá trị thời gian.

Với các kiểu này, bạn có thể sử dụng phép toán lô-gíc với các bit riêng lẻ hoặc một trong các gợi ý đặc thù cho tiểu trình như sau:

COMPACT (cô đọng)
Một gợi ý rằng tiểu trình sẽ được hiển thị dưới một định dạng nhỏ hơn hoặc không đầy đủ tính năng.
FULL (đầy đủ)
Một gợi ý rằng tiểu trình sẽ được hiển thị dưới một định dạng có đầy đủ tính năng và nhấn mạnh tính dễ sử dụng, chứ không phải là cô đọng.

Có một số phương thức nhận giá trị và thiết lập giá trị để thiết lập hoặc lấy ngày tháng và thời giờ. Bạn cũng có thể sử dụng setTimeZone() để thay đổi múi giờ của ứng dụng. javadoc của eRCP có các chi tiết về cách sử dụng.

Liệt kê 3 cho thấy mã mẫu tạo ra các kiểu DateEditor khác nhau.

Liệt kê 3. Các mẫu DateEditor
DateEditor dateEditor1 = new DateEditor(composite, SWT.NONE, DateEditor.DATE);
DateEditor dateEditor2 = new DateEditor(composite, SWT.NONE, DateEditor.TIME);
DateEditor dateEditor3 = new DateEditor(composite, SWT.NONE, DateEditor.DURATION);
DateEditor dateEditor4 = new DateEditor(composite, SWT.NONE, DateEditor.OFFSET);
dateEditor3.setTime(1000); 
dateEditor4.setTime(-1000);

Bốn loại DateEditor được tạo ra.

Hình 3. DateEditor mẫu
DateEditor mẫu

DateEditor đầu tiên là một phần tử điều khiển kiểu ngày tháng. Người sử dụng có thể nhấn chuột vào neo liên kết bên phải để đưa ra một bộ chọn ngày/giờ.

Hình 4. DateEditor dưới dạng một bộ chọn ngày/giờ
DateEditor dưới dạng một bộ chọn ngày/giờ

ListBox

ListBox biểu diễn một đối tượng giao diện người sử dụng cho phép nhấn chọn, hiển thị một danh sách các mục, chẳng hạn như văn bản và biểu tượng từ một mô hình dữ liệu. Mỗi mục trong danh sách có thể bao gồm một tổ hợp gồm tựa đề, các biểu tượng tựa đề, văn bản chi tiết, và các biểu tượng chi tiết. Bạn có thể sử dụng các kiểu dáng và yếu tố điều chỉnh để thiết đặt cách bài trí và hiển thị của ListBox.

Không như List, dữ liệu chứa trong ListBox lấy từ một mảng các ListBoxItem, chứ không phải là thêm hoặc chèn vào từng cái một, để cung cấp một mô hình MVC. Tựa đề và các biểu tượng chi tiết trong một ListBoxItem sẽ được hiển thị ở kích thước đã cho, hoặc được co kéo để vừa với các kiểu dáng ListBox. Để làm cho việc trình bày được nhất quán, tất cả các biểu tượng tựa đề sẽ có cùng kích thước, và tất cả các biểu tượng chi tiết sẽ có cùng kích thước đối với một danh sách bất kỳ. Các phần tử của một ListBoxItem mà rỗng sẽ không được hiển thị trong bài trí của ListBox.

Bạn có thể sử dụng các kiểu loại trừ lẫn nhau sau đây để tạo các kiểu ListBox khác nhau:

LB_STYLE_NO_HEADING_TEXT
Hiển thị các mục một dòng với chỉ một cột (văn bản chi tiết). Nó cũng là kiểu mặc định nếu thuộc tính kiểu dáng không được chỉ ra.
LB_STYLE_1LINE_ITEM
Hiển thị các mục một dòng với hai cột (văn bản tiêu đề và văn bản chi tiết).
LB_STYLE_2LINE_ITEM
Hiển thị các mục dòng kép — trên một cột với tiêu đề và chi tiết kết hợp với nhau.

Các kiểu dáng trên có thể thực hiện phép toán OR theo bit với một số bất kỳ các yếu tố điều chỉnh dưới đây.

LB_MOD_SHOW_SELECTION_NUMBER
Hiển thị một số một ký số gióng thẳng hàng với từng mục, số này có thể được sử dụng để chọn mục đó. Thí dụ, 1 có nghĩa là nhấn số 1 trên bàn phím để chọn mục này.
LB_MOD_SHOW_HEADING_ICONS
Hiển thị biểu tượng kết hợp với văn bản tiêu đề.
LB_MOD_SHOW_DETAIL_ICONS
Hiển thị các biểu tượng kết hợp với văn bản chi tiết.

Do ListBox là một tiểu trình MVC, khi bạn thay đổi bất cứ cái gì trong phần mô hình (ListBoxItem), bạn có thể sử dụng các phương thức sau đây để giữ cho phần khung nhìn đồng bộ hóa với sự thay đổi của mô hình.

setDataModel(ListBoxItem[] items)
Khi bạn thực hiện một thay đổi đối với một ListBox. bạn có thể thông báo cho ListBox này. Mảng này sẽ được sử dụng trong vòng đời của ListBox nếu bạn không thiết lập một mảng khác làm mô hình dữ liệu của ListBox.
public void refreshItem(int index)
Khi bạn thực hiện một thay đổi đối với một ListBoxItem, bạn có thể thông báo cho ListBox này rằng dữ liệu dành cho mục này tại chỉ mục đã cho, đã được cập nhật và việc hiển thị mục này cần được làm tươi lại.
refreshList()
Khi bạn thực hiện các thay đổi đối với một số ListBoxItem, bạn có thể sử dụng phương thức này để làm tươi phần hiển thị toàn bộ danh sách trong ListBox này.

Các mã trong liệt kê 4 tạo ra một mảng các ListBoxItem và thiết lập nó làm mô hình cho các loại ListBox khác nhau.

Liệt kê 4. ListBox mẫu
int[]   modes={ ListBox.LB_STYLE_2LINE_ITEM | ListBox.LB_MOD_SHOW_HEADING_ICONS |
        ListBox.LB_MOD_SHOW_DETAIL_ICONS, ListBox.LB_STYLE_1LINE_ITEM |
        ListBox.LB_MOD_SHOW_HEADING_ICONS | ListBox.LB_MOD_SHOW_DETAIL_ICONS,
        ListBox.LB_STYLE_1LINE_ITEM | ListBox.LB_MOD_SHOW_HEADING_ICONS |
        ListBox.LB_MOD_SHOW_DETAIL_ICONS | ListBox.LB_MOD_SHOW_SELECTION_NUMBER,
        ListBox.LB_STYLE_1LINE_ITEM | ListBox.LB_MOD_SHOW_DETAIL_ICONS |
        ListBox.LB_MOD_SHOW_SELECTION_NUMBER,
        ListBox.LB_STYLE_NO_HEADING_TEXT|ListBox.LB_MOD_SHOW_DETAIL_ICONS,
        ListBox.LB_STYLE_NO_HEADING_TEXT }; 

// Create the data modal 
ListBoxItem[]
listboxitems = new ListBoxItem[3]; // Get images Image 
surdetail = new Image(display, "res/ambunance-2-24x24.png"); 
Image surheading = new Image(display, "res/surgeon-32x32.png"); 
Image nurdetail = new Image(display, "res/syringe-24x24.png"); 
Image nurheading = new Image(display, "res/nurse-32x32.png"); 
Image pragdetail = new Image(display, "res/red-cross-24x24.png"); 
Image pregheading = new Image(display, "res/pregnant-32x32.png"); 
listboxitems[0] = new ListBoxItem("Bill Marshall", surdetail, "Surgeon", surheading); 
listboxitems[1] = new ListBoxItem("Nancy Moore", nurdetail, "nurse", nurheading); 
listboxitems[2] = new ListBoxItem("Lily Davis", pragdetail, "Pregnant", pregheading); 

// Then we call creation of ListBox several times with different 
// styles to see different visual effect 
ListBox[] 
listbox = new ListBox[6]; for (int i=0; i<6; i++) { 

// create new Listbox 
listbox[i] = new ListBox(composite, SWT.SINGLE, modes[i] ); 

// add the ListBoxItems to the ListBox
listbox[i].setDataModel(listboxitems); }

Kết quả của các đoạn mã trên được hiển thị dưới đây.

Hình 5. ListBox Mẫu
ListBox Mẫu

ListView

ListView cho phép người sử dụng chọn ra một hoặc nhiều mục từ một tập hợp các mục có thể được hiển thị dưới một định dạng nhiều cột với các kiểu dáng khác nhau. Nó tương tự như List, nhưng nó còn cung cấp hỗ trợ biểu tượng trong từng mục để có một dáng vẻ cuốn hút hơn.

ListView bài trí các mục con của nó trong một hoặc nhiều cột từ trên xuống dưới. Nếu một gợi ý định hướng bài trí chưa được chỉ rõ, phần triển khai thực hiện sẽ chọn hướng. Nếu chỉ có đủ độ rộng màn hình cho một cột, danh sách sẽ được cuộn theo chiều dọc. Nếu có đủ chỗ để hiển thị nhiều cột trong tiểu trình, danh sách sẽ cuộn theo chiều ngang. Danh sách không bao giờ cuộn theo nhiều hơn một hướng. Hướng bài trí có thể được thiết lập vào lúc chạy bằng cách gọi phương thức setLayout(int).

Gợi ý mật độ mục sẽ xác định kích thước và định vị của các mục để ít nhiều vừa vặn trong tiểu trình. Các ứng dụng có thể truy vấn kích thước được ưu tiên của các biểu tượng cho từng mức mật độ. Kích thước có thể thay đổi trong các nền khác nhau. Khi các biểu tượng cho trước không khớp với kích thước được ưu tiên, phần triển khai thực hiện có thể điều chỉnh lại các kích thước của biểu tượng mà không báo lỗi ngoại lệ nào. Các ứng dụng có thể thay đổi mức mật độ các mục vào lúc chạy bằng cách gọi phương thức setLayoutDensity(int).

ListView có hai biến kiểu dáng: SWT và mật độ. Với kiểu SWT, bạn có thể quy định kiểu cách chọn (chọn một hoặc chọn nhiều) và kiểu dáng trình bày (đứng hoặc ngang). Thí dụ, bạn có thể sử dụng SWT.SINGLE | SWT.VERTICAL để tạo ra một ListView. cho chọn một mục, bài trí chiều đứng. Sau đây là các kiểu dáng loại trừ lẫn nhau mà bạn có thể sử dụng để tạo ra một ListView.

LOW (thấp)
Mật độ thấp
MEDIUM (trung bình)
Mật độ trung bình
HIGH (cao)
Mật độ cao

Liệt kê 5 cho thấy một ví dụ mã tạo ra một ListView chứa 20 mục, tất cả đều được gắn thêm các biểu tượng. Nó cũng tạo ra hai lệnh để thể hiện hiệu ứng trực quan của mật độ.

Liệt kê 5. Các mẫu ListBox
final
ListView lv = new ListView(composite, SWT.MULTI, ListView.HIGH); 
//set Image array
Image[] image = new Image[4]; 
image[0] = new Image(Display.getDefault(), "res/pregnant-32x32.png"); 
image[1] = new Image(Display.getDefault(), "res/nurse-32x32.png"); 
image[2] = new Image(Display.getDefault(), "res/surgeon-32x32.png"); 
image[3] = new Image(Display.getDefault(),  "res/pill-32x32.png"); 
lv.setSize(200,250); 

//Create a Command for setting low density 
Command lowCommand = new Command(lv, Command.SELECT, 0);
lowCommand.setText("LOW"); 
lowCommand.addSelectionListener(new SelectionListener(){               
  public void widgetSelected(SelectionEvent e) { 
    lv.setLayoutDensity(ListView.LOW); 
  }                
  public void widgetDefaultSelected(SelectionEvent e) { 
  }
}); 

//Create a Command for setting high density 
Command midCommand = new Command(lv, Command.SELECT, 0);
midCommand.setText("MEDIUM"); 
midCommand.addSelectionListener(new SelectionListener(){ 
  public void widgetSelected(SelectionEvent e) {
    lv.setLayoutDensity(ListView.MEDIUM); 
  } 
  public void widgetDefaultSelected(SelectionEvent e) { 
  }
}); 

//add ListView items 
for (int i=0; i<20; i++) { 
    lv.add("item"+i, image[i % 4]); 
}

Kết quả của đoạn mã trên được hiển thị trong Hình 6 với mật độ trung bình và Hình 7 với mật độ thấp.

Hình 6. ListView mật độ trung bình
ListView mật độ trung bình
Hình 7. ListView mật độ thấp
Hình 7. ListView mật độ thấp

Kết luận

Bài viết này giới thiệu cho bạn phần mở rộng di động của eSWT. Bạn cũng được tìm hiểu về năm phần tử điều khiển di động. Bạn có thể xem lại các ví dụ mã trong phần Tải về nếu bạn có vấn đề cần hỏi.

Phần 2 của loạt bài này tìm hiểu thêm về các lớp và các giao diện trong phần mở rộng di động của eSWT.


Tải về

Mô tảTênKích thước
Sample code snippetsos-eSWT_MobExt_Test_One.zip39KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=525144
ArticleTitle=Giới thiệu về phần mở rộng di động cho eSWT, Phần 1: Sử dụng các tiểu trình đơn giản để nhanh chóng xây dựng các ứng dụng điện thoại di động
publish-date=09302010