Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn MobileShell, SortedList, HyperLink, TextExtension, và TaskTip Uriel Liu Kỹ sư phần mềm EMC 30 09 2010 Eric Hsu Kỹ sư phần mềm IBM 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 “Giới thiệu về phần mở rộng di động cho eSWT” 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™ dành cho các loại máy điện thoại di động. Trong bài này, hãy tìm hiểu thêm về cách sử dụng các phần tử điều khiển điện thoại di động: MobileShell, SortedList, HyperLink, TextExtension, và TaskTip. Xem thêm bài trong loạt bài này 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. Phần 1 của loạt bài này, "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," cung cấp cái nhìn tổng quát của gói mở rộng cho di động. Nó cũng đề cập đến các trình điều khiển cơ bản (CaptionedControl, ConstrainedText, DateEditor, ListBox, và ListView). Trong bài viết này, chúng ta học cách sử dụng: • MobileShell để hiển thị một ứng dụng mô hình toàn màn hình. © Copyright IBM Corporation 2010 Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Nhẫn hiệu đăng ký Trang 1 của 12 developerWorks® ibm.com/developerWorks/vn/ • SortedList để nhận được một danh mục được sắp xếp với bộ lọc để lọc ra thông tin vô ích. • HyperLink như là một cách để khởi động các ứng dụng dành riêng (native application) để thiết đặt các kiểu. • TextExtension như là một phương tiện để thiết đặt các kiểu của văn bản nhập vào. • TaskTip để cung cấp một gợi ý cho người sử dụng về trạng thái hiện tại của ứng dụng. Tải về các đoạn mã mẫu sử dụng trong bài viết này. MobileShell Không giống như một shell điển hình, MobileShell hỗ trợ một chế độ màn hình đặc biệt để sử dụng toàn bộ không gian màn hình thiết bị, thay cho không gian ứng dụng ở chế độ bình thường (“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). MobileShell đặc biệt thích hợp với thiết bị đòi hỏi có sự thay đổi động các trang trí (trims) vào lúc chạy. Các ứng dụng có thể gọi phương thức setFullScreenMode(boolean) để chuyển đổi giữa chế độ bình thường và chế độ toàn màn hình vào lúc chạy. Đặc tính này thường được sử dụng trong các ứng dụng như trình biểu diễn (media player) và trình duyệt Web, nơi mà ứng dụng có thể yêu cầu một chế độ toàn màn hình để biểu hiện tốt hơn các hiệu ứng. Lưu ý rằng MobileShell không hỗ trợ các kiểu trạng thái trên hệ điều hành Windows® Mobile. Nếu bạn tạo ra MobileShell với một lệnh gắn vào nó, nó sẽ trở thành chế độ toàn màn hình với một thanh trình đơn nằm ở đáy màn hình sau khi bạn thực hiện setFullScreenMode(true). Liệt kê 1 cho thấy mã mẫu tạo ra MobileShell. Liệt kê 1. Tạo MobileShell display = parent.getDisplay(); mobileshell = new MobileShell(display,SWT.RESIZE); button= new Button(mobileshell, SWT.PUSH|SWT.BORDER); button.setBounds(0, 0, 200, 200); button.setText("FullScreen Mode"); button.addSelectionListener(new SelectionListener(){ public void widgetSelected(SelectionEvent e) { if(!isFullScreen){ mobileshell.setFullScreenMode(true); button.setText("Normal mode"); isFullScreen = true; } else { mobileshell.setFullScreenMode(false); button.setText("FullScreen Mode"); isFullScreen = false; } } public void widgetDefaultSelected(SelectionEvent e) { } }); mobileshell.open(); Đoạn mã trên đây tạo ra một MobileShell với một nút để chuyển đổi giữa chế độ toàn màn hình và chế độ bình thường. Kết quả được hiển thị dưới đây. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 2 của 12 ibm.com/developerWorks/vn/ developerWorks® Hình 1. MobileShell mẫu SortedList Lớp SortedList dùng để biểu diễn một đối tượng giao diện người sử dụng có thể nhấn chọn được, nó hiển thị một danh sách đã sắp thứ tự các mục văn bản. Các mục có thể được hiển thị theo thứ tự tăng dần hoặc giảm dần. Nếu đã chỉ rõ kiểu dáng là FILTER trong khi xây dựng, thì một nhãn kết hợp cũng được hiển thị, cho thấy các ký tự gõ nhập được dùng để lọc ra danh sách gồm ít mục hơn. Trạng thái lựa chọn của các mục bị lọc bỏ ra khỏi danh sách sẽ bị xóa. Bạn có thể sử dụng kiểu chế độ này để tạo ra một SortedList với một thanh lọc (filter bar). FILTER sẽ tạo ra một SortedList với một thanh lọc ở phía đáy. Bạn có thể gõ nhập vào bất kỳ ký tự nào trong thanh này, và SortedList sẽ chỉ hiển thị trong danh sách các mục có chứa ký tự mà bạn đã nhập vào. Liệt kê 2 hiển thị một mã mẫu cho SortedList. Liệt kê 2. SortedList mẫu sortedList=new SortedList(shell,SWT.MULTI|SWT.V_SCROLL|SWT.BORDER,SortedList.FILTER); sortedList.add("banana"); sortedList.add("123"); sortedList.add("12"); sortedList.add("happyhour"); sortedList.add("toobad"); sortedList.add("youknowwhat"); sortedList.add("yes"); sortedList.add("886222333"); sortedList.setBounds(0,0,240,320); Đoạn mã trên tạo một SortedList nhiều lựa chọn với kiểu FILTER. Khi bạn đang gõ nhập vào trong trường lọc, SortedList sẽ chỉ hiển thị các mục có chứa các văn bản được nhập vào. Hình 2 cho thấy kết quả với một số văn bản nhập vào làm ví dụ. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 3 của 12 developerWorks® ibm.com/developerWorks/vn/ Hình 2. SortedList mẫu HyperLink Các cá thể của lớp HyperLink (siêu liên kết) biểu diễn một đối tượng giao diện người sử dụng có thể nhấn chọn để khởi động các ứng dụng khác khi được người sử dụng kích hoạt. Lớp này đại diện cho một số kiểu siêu liên kết đã gắn kết với một số chức năng nhất định. Người sử dụng có thể kích hoạt chương trình đã kết hợp, do kiểu dáng đó xác định. Một cá thể HyperLink chấp nhận các ký tự chung giống như các phần tử điều khiển khác, nhưng vẻ ngoài là phụ thuộc vào địa phương và việc triển khai thực hiện. Thí dụ, một đối tượng HyperLink với kiểu PHONE hẳn sẽ hiển thị như sau: (416) 123-4567. Nhưng nội dung thực tế của đối tượng mà ứng dụng thấy được thông qua các API, chẳng hạn như getText(), có thể là chuỗi 4161234567. Bạn có thể sử dụng các kiểu dáng định dạng sau đây để xác định kiểu loại của HyperLink mà bạn tạo ra. URL Khởi chạy một trình duyệt Web đặc thù của nền tảng này khi được kích hoạt. EMAIL Mở trình khách thư điện tử đặc thù của nền tảng này khi được kích hoạt. PHONE Hiển thị một giao diện trình quay số (dialer) đặc thù của nền tảng này khi được kích hoạt. Liệt kê 3 cho thấy một mã mẫu tạo ra các kiểu HyperLink khác nhau. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 4 của 12 ibm.com/developerWorks/vn/ developerWorks® Liệt kê 3. Các mẫu HyperLink HyperLink email = new HyperLink(shell, SWT.NONE, HyperLink.EMAIL); email.setText("[email protected]"); email.setBounds(new Rectangle(0,0,200,30)); HyperLink dialer = new HyperLink(shell, SWT.BORDER | SWT.LEFT, HyperLink.PHONE); dialer.setText("3581234567"); dialer.setBounds(new Rectangle(0,40,200,30)); HyperLink url = new HyperLink(shell, SWT.NONE | SWT.CENTER, HyperLink.URL); url.setText("http://www.google.com"); url.setBounds(new Rectangle(0,80,200,30)); Đoạn mã này tạo ra ba siêu liên kết với ba kiểu khác nhau, như trong Hình 3. Hình 3. HyperLink mẫu Người sử dụng có thể nhấn vào các liên kết để khởi chạy chương trình nguyên sinh (native) tương ứng, như trình bày sau đây. Hình 4. Các ứng dụng nguyên sinh được khởi chạy bằng cách nhấn vào siêu liên kết Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 5 của 12 developerWorks® ibm.com/developerWorks/vn/ TextExtension chứ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 chức năng là đặc thù riêng cho các thiết bị bàn phím không đầy đủ. Các ứng dụng có thể yêu cầu một số chế độ nhập văn bản nhất định khi một phần tử điều khiển TextExtension có tiêu điểm (“get focused” – 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.). Chế độ nhập hiệu quả sẽ tính đến hai khía cạnh của kiểu dáng: căn cứ vào nội dung ngữ nghĩa, và dựa trên bộ ký tự nội dung. TextExtension Còn lại, hành vi biên tập và vẻ ngoài của TextExtension là giống hệt với phần tử điều khiển văn bản. Các khác biệt với TextExtension là ở chỗ nới rộng sự chuyển đổi khả dĩ của các chế độ nhập ban đầu, chẳng hạn như bật/tắt dự đoán đầu vào; thay đổi dạng chữ hoa/chữ thường ban đầu; và chế độ nhập của một số ngôn ngữ. Chế độ nhập ban đầu không tiếp tục nếu người sử dụng đã thay đổi trong khi biên tập. Chế độ đó sẽ được tiếp tục trong vòng đời của ứng dụng hay không là phụ thuộc vào phần triển khai thực hiện. Bạn có thể sử dụng các kiểu yếu tố điều chỉnh sau đây để xác định các chế độ nhập. NON_PREDICTIVE Gợi ý về tắt dự đoán văn bản nhập khả dĩ. Theo mặc định, bất kỳ tiện ích dự đoán đầu vào nào phải được bật lên nếu sẵn có. LATIN_INPUT_ONLY Bắt buộc chỉ sẵn có các chế độ nhập đặc thù riêng cho địa điểm. Kiểu này được sử dụng trong một số tình huống khi chỉ được phép có các ký tự La tinh, chẳng hạn như trường văn bản mật khẩu. Bạn có thể sử dụng các yếu tố điều chỉnh dạng chữ (dành riêng) sau đây để xác định các dạng chữ hoa/chữ thường khác nhau. UPPERCASE Các chữ hoa của một kiểu chữ. LOWERCASE Các chữ thường của một kiểu chữ, đối lập với dạng chữ hoa. TEXTCASE Từ đầu tiên của một câu được viết hoa. Việc xác định một câu kết thúc ở đâu là phụ thuộc vào phần triển khai thực hiện. TITLECASE Từ nào cũng được viết hoa. Mã mẫu trong Liệt kê 4 tạo ra bốn kiểu TextExtension. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 6 của 12 ibm.com/developerWorks/vn/ developerWorks® Liệt kê 4. Các mẫu TextExtension TextExtension te1 = new TextExtension(shell,SWT.BORDER,TextExtension.EMAILADDRESS); te1.setInitialInputMode(TextExtension.UPPERCASE, "UCB_BASIC_LATIN"); te1.setBounds(new Rectangle(0,0,200,30)); TextExtension te2 = new TextExtension(shell,SWT.BORDER,TextExtension.URL); te2.setInitialInputMode(TextExtension.LOWERCASE, "UCB_BASIC_LATIN"); te2.setBounds(new Rectangle(0,40,200,30)); TextExtension te3 = new TextExtension(shell,SWT.BORDER,TextExtension.NON_PREDICTIVE); te3.setInitialInputMode(TextExtension.TEXTCASE, null); te3.setBounds(new Rectangle(0,80,200,30)); TextExtension te4 = new TextExtension(shell,SWT.BORDER,TextExtension.LATIN_INPUT_ONLY); te4.setInitialInputMode(TextExtension.TITLECASE, "IS_FULLWIDTH_LATIN"); te4.setBounds(new Rectangle(0,120,200,30)); Hình 5 cho thấy kết quả của đoạn mã trên. Hình 5. TextExtension mẫu Trong hình 5, TextExtension đầu tiên cho thấy một kiểu EMAILADDRESS, và chế độ nhập ban đầu là UpperCase. Nếu bạn không xác định địa chỉ thư điện tử trong trường này, giá trị mặc định là [email protected]. Thí dụ cho thấy việc nhập một ký tự "d" ở đuôi của chuỗi ký tự này, và bạn có thể thấy rằng nó sẽ hiển thị chữ "D" hoa trong trường văn bản đó. thứ hai cho thấy một kiểu URL, và chế độ nhập ban đầu là chữ thường. Nó sẽ tự động viết thêm vào đầu http:// trong trường này. Thí dụ cho thấy việc nhập một ký tự "s" ở đuôi của chuỗi ký tự này, và nó xuất hiện ra là chữ thường trong trường văn bản đó. TextExtension TextExtension tiếp theo là một trường văn bản mà không có các chức năng dự đoán. Chế độ nhập của nó là TEXTCASE, có nghĩa là từ đầu tiên trong câu được viết hoa. Ví dụ nhập vào là "i am sam [Enter key] and you are good," có kết quả "I am sam And you are good." thứ tư cho thấy một trường văn bản với phần nhập vào chỉ là ký tự Latin. Chế độ nhập của nó là TITLECASE, nghĩa là từ nào cũng viết hoa. Ví dụ nhập vào là "i am sam and you are good," có kết quả là "I Am Sam And You Are Good." TextExtension Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 7 của 12 developerWorks® ibm.com/developerWorks/vn/ TaskTip Lớp TaskTip cung cấp phản hồi cho người sử dụng về tình trạng của một tác vụ chạy lâu. Một TaskTip có thể chứa văn bản, có thể có (là tùy chọn) một thanh tiến độ, hoặc một đối tượng khác để minh họa trạng thái tác vụ hiện hành. Giống như một MessageBox, vẻ bề ngoài và chức năng của TaskTip là phụ thuộc vào nền (không có lối truy cập mức API nào tới các thành phần giao diện người sử dụng bên trong một TaskTip). Không giống như một MessageBox, TaskTip là một cửa sổ không thể trở thành tiêu điểm và sẽ không thay đổi việc kích hoạt hoặc trạng thái có tiêu điểm của cửa sổ hiện hành. Khi đã được xây dựng mà không có một hằng kiểu dáng, một TaskTip hiển thị văn bản thuần để cho biết tiến độ công việc. Một TaskTip sẽ nhìn thấy được bằng cách gọi setVisible(true) và vẫn còn nhìn thấy cho đến khi ứng dụng gọi phương thức setVisible(false). Khi một TaskTip mới được tạo trước khi ẩn hoặc huỷ bỏ một TaskTip, trước đó, cái mới nhất trở thành TaskTip ở trên đỉnh cao nhất và làm mờ đi các TaskTip trước đó, nếu có. TaskTip có hai biến kiểu dáng. SMOOTH Hiển thị một chỉ báo trực quan của phần tiến độ còn lại phải làm. INDETERMINATE Cho thấy một chỉ báo trực quan rằng một quá trình chạy lâu đang tiến triển. Liệt kê 5 cho thấy một mã mẫu tạo ra hai kiểu TaskTip. Liệt kê 5. Các mẫu TaskTip TaskTip tasktip1 = new TaskTip(shell,SWT.SMOOTH); tasktip1.setMaximum(100); tasktip1.setMinimum(0); tasktip1.setSelection(30); tasktip1.setVisible(true); tasktip1.setText("This is a SMOOTH style"); try { Thread.sleep(2000); } catch (InterruptedException e) { e.printStackTrace(); } tasktip1.setVisible(false); TaskTip tasktip2 = new TaskTip(shell,SWT.INDETERMINATE); tasktip2.setVisible(true); tasktip2.setText("The is a INDETERMINATE style"); Đoạn mã trên trước tiên tạo ra TaskTip theo kiểu SMOOTH với số 30 được chọn. Bạn sẽ thấy rằng thanh tiến độ được làm đầy đến 30% bằng màu xanh nhạt vì thang giá trị tối đa/tối thiểu là 100/0. Sau hai phút TaskTip đầu tiên không trông thấy nữa, và TaskTip thứ hai được tạo ra với kiểu INDETERMINATE. Một thanh quay phía bên phải chỉ thị nó là một tác vụ chạy lâu, như trong Hình 6. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 8 của 12 ibm.com/developerWorks/vn/ developerWorks® Hình 6. TaskTipvới các kiểu dáng khác nhau Kết luận Trong bài viết này bạn đã tìm hiểu thêm năm phần tử điều khiển di động của eSWT nữa mà bạn có thể sử dụng để làm phong phú thêm các ứng dụng di động của bạn. Bạn đang vững bước trên con đường phát triển các ứng dụng Java dáng vẻ nguyên sinh dành cho các loại điện thoại di động. Phần 3 sẽ khám phá thêm các phần tử điều khiển di động tân tiến và mạnh mẽ hơn mà bạn có thể sử dụng trong các ứng dụng eSWT của bạn. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 9 của 12 developerWorks® ibm.com/developerWorks/vn/ Các tải về Mô tả Tên Kích thước Sample code snippets os-eswt2_MobExt_Test_Two.zip 8KB Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 10 của 12 ibm.com/developerWorks/vn/ developerWorks® Tài nguyên Học tập • "Khám phá Nền khách giàu nhúng của Eclipse" (embedded Rich Client Platform)” là một giới thiệu tổng quát về eRCP. Hãy tìm hiểu về các thành phần khác nhau tạo nên eRCP và nhận một số ví dụ về cách sử dụng chúng trong các ứng dụng của bạn. • "Phát triển ứng dụng eRCP với Eclipse" là một tài liệu hướng dẫn để phát triển các ứng dụng eRCP. Các bước chi tiết sẽ hướng dẫn bạn thiết lập, phát triển kiểu dáng, triển khai, và gỡ rối một chu trình lập trình ứng dụng eRCP. • Truy cập eRCP để tìm hiểu cách dự án này mở rộng Nền khách giàu nhúng (RCP) của Eclipse cho các thiết bị nhúng như thế nào. eRCP chủ yếu là một bộ các thành phần nằm trong tập hợp các thành phần RCP. Về cơ bản nó cho phép cùng một mô hình ứng dụng đã sử dụng trên các máy tính để bàn được sử dụng trên các thiết bị nhúng. • Để nghe các bài phỏng vấn và thảo luận thú vị đối với các nhà phát triển phần mềm, hãy xem developerWorks podcasts. • Theo sát các sự kiện kỹ thuật và phát tin trên mạng của developerWorks. • Theo dõi developerWorks trên Twitter. • Xem các hội nghị, triển lãm thương mại, các buổi phát tin trên mạng, và các sự kiện khác sắp tới trên thế giới mà các nhà phát triển mã nguồn mở của IBM quan tâm. • Truy cập vùng mã nguồn mở của developerWorks để nhận được thông tin hướng dẫn rộng hơn, các công cụ, và các dự án cập nhật để giúp bạn phát triển các công nghệ mã nguồn mở và sử dụng chúng với các sản phẩm của IBM, cũng như các bài viết và bài học hướng dẫn phổ biến nhất của chúng tôi. • Quan sát và tìm hiểu về IBM và các công nghệ mã nguồn mở cũng như các chức năng của sản phẩm với các trình diễn miễn phí của developerWorks theo yêu cầu. Lấy sản phẩm và công nghệ • Đổi mới dự án phát triển mã nguồn mở tiếp theo của bạn với phần mềm dùng thử của IBM, có sẵn để tải về hoặc trên đĩa DVD. • Tải về các phiên bản đánh giá sản phẩm của IBM hoặc khám phá dùng thử trực tuyến trong IBM SOA Sandbox và bắt tay thực hành các công cụ phát triển ứng dụng và các sản phẩm phần giữa từ DB2®, Lotus®, Rational®, Tivoli®, và WebSphere®. Thảo luận • Tham dự vào các blog của developerWorks và tham gia vào cộng đồng developerWorks. Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 11 của 12 developerWorks® ibm.com/developerWorks/vn/ Đôi nét về các tác giả Uriel Liu 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 Eric 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. © Copyright IBM Corporation 2010 (www.ibm.com/legal/copytrade.shtml) Nhẫn hiệu đăng ký (www.ibm.com/developerworks/vn/ibm/trademarks/) Giới thiệu về phần mở rộng di động cho eSWT, Phần 2: Sử dụng các phần tử điều khiển cao cấp cho các ứng dụng điện thoại di động của bạn Trang 12 của 12