Ajax cho các nhà phát triển Java: Khảo sát bộ công cụ Web của Google Phát triển các ứng dụng Ajax từ một cơ sở mã Java Philip McCarthy, Nhà Phát triển, SmartStream Technologies Ltd Tóm
Trang 1Ajax cho các nhà phát triển Java: Khảo sát bộ công cụ Web của Google
Phát triển các ứng dụng Ajax từ một cơ sở mã Java
Philip McCarthy, Nhà Phát triển, SmartStream Technologies Ltd
Tóm tắt: Google Web Toolkit (GWT-Bộ công cụ Web của Google) mới được
phát hành là một bộ toàn diện về các API và các công cụ cho phép bạn tạo các ứng dụng Web động gần như hoàn toàn trong mã Java™ Philip McCarthy quay lại
loạt bài Ajax cho các nhà phát triển Java được ưa thích của mình để cho bạn thấy GWT có thể làm gì và giúp bạn quyết định xem nó có đúng với bạn không (Lưu ý: bạn có thể tải về tệp ZIP đã cập nhật có chứa mã nguồn của bài viết này.)
GWT (xem Tài nguyên) có một cách tiếp cận khác thường để phát triển ứng dụng Web Thay vì sử dụng sự phân tách thông thường của các cơ sở mã phía máy khách và phía máy chủ, GWT cung cấp một Java API để cho phép bạn tạo các giao diện đồ họa người dùng (GUI) dựa trên thành phần, rồi biên dịch chúng để hiển thị trong trình duyệt Web của người dùng Việc sử dụng GWT rộng rãi để phát triển trên Swing hay SWT hơn là phát triển ứng dụng Web theo kinh nghiệm thông thường và nó thử trừu tượng hóa cách xa giao thức HTTP và mô hình
HTML DOM Thật vậy, thực tế mà ứng dụng cuối cùng được biểu hiện trong một trình duyệt Web cảm thấy gần như ngẫu nhiên
GWT đạt được những thành tích thông qua việc tạo mã, với trình biên dịch của GWT tạo JavaScript từ mã Java phía máy khách của bạn Nó hỗ trợ một tập con của các gói java.lang và java.util, cùng với các API được chính GWT cung cấp Một ứng dụng GWT đã biên dịch bao gồm các đoạn mã HTML, XML và
JavaScript Tuy nhiên, các đoạn mã này gần như không thể giải được và ứng dụng
đã biên dịch này tốt nhất được coi như là một hộp đen sự tương đương của GWT của mã byte (bytecode) Java
Trong bài này, tôi sẽ chạy qua việc tạo một ứng dụng GWT đơn giản để lấy báo cáo thời tiết từ một Web API từ xa và hiển thị nó trong trình duyệt Theo cách này, tôi sẽ trình bày ngắn gọn về càng nhiều khả năng của GWT càng tốt và tôi sẽ đề cập đến một số vấn đề tiềm năng mà bạn sẽ gặp phải
Khởi đầu đơn giản
Liệt kê 1 cho thấy mã nguồn Java của gần như một ứng dụng có thể đơn giản nhất
mà bạn có thể thực hiện bằng cách sử dụng GWT:
Trang 2Liệt kê 1 Ví dụ GWT đơn giản nhất
public class Simple implements EntryPoint {
public void onModuleLoad() {
final Button button = new Button("Say 'Hello'");
Trang 3Hình 1 Ví dụ GWT đơn giản nhất đang hoạt động
Xây dựng ứng dụng của Bản tin dự báo thời tiết (Weather Reporter)
Tôi sẽ sử dụng GWT để tạo một ứng dụng Bản tin dự báo thời tiết đơn giản GUI của ứng dụng giới thiệu cho người dùng với một hộp đầu vào để nhập mã bưu điện
và một lựa chọn độ C hoặc độ F (Fahrenheit) để biểu diễn nhiệt độ Khi người dùng nhấn vào nút Submit (Gửi đi), ứng dụng sử dụng API Weather miễn phí của Yahoo để nhận được một bản tin với định dạng RSS cho các vị trí đã chọn Phần HTML của tài liệu này được trích ra và hiển thị cho người dùng
Các ứng dụng GWT được đóng gói thành các mô đun và phải tuân theo một cấu trúc cụ thể Một tệp cấu hình có tên là module-name gwt.xml định nghĩa lớp
hoạt động như là lối vào của ứng dụng và chỉ thị xem các nguồn tài nguyên có cần được thừa hưởng từ các mô đun GWT khác không Bạn phải đặt các tệp cấu hình trong cấu trúc gói nguồn của ứng dụng ở một cùng mức như một gói có tên client,
Trang 4đây là nơi tất cả các mã Java phía máy khách được lưu trữ và một thư mục có tên
là public (công cộng), có chứa Tài nguyên Web của dự án như là các hình ảnh, CSS và HTML Cuối cùng, thư mục public phải bao gồm một tệp HTML có một thẻ meta có chứa tên đủ điều kiện của mô đun đó Thư viện JavaScript đang chạy của GWT sử dụng tệp này để khởi tạo ứng dụng
applicationCreator GWT tạo cấu trúc cơ bản này cho bạn, căn cứ vào tên lớp lối vào của bạn Vì vậy, việc gọi applicationCreator
developerworks.gwt.weather.client.Weather tạo ra một phác thảo dự án mà tôi có thể sử dụng như một điểm khởi đầu cho ứng dụng Bản tin dự báo thời tiết Nguồn tải về cho ứng dụng này bao gồm một tệp xây dựng Ant (Ant Build file) có chứa một số chỉ tiêu có ích để làm việc với một dự án GWT phù hợp với cấu trúc này (xem Tải về)
Phát triển GUI cơ bản
Trước tiên, tôi sẽ phát triển cách bố trí cơ bản về các tiện ích (widget) giao diện người dùng của ứng dụng, mà không cần thêm bất kỳ hành vi nào Siêu lớp của hầu hết mọi thứ mà bạn có thể đưa ra trong giao diện người dùng GWT là lớp Widget Các Widget luôn được chứa trong các Panel (bảng), mà chính nó cũng là các Widget và do đó có thể được lồng nhau Các kiểu khác nhau của các panel cung cấp các hành vi bố trí khác nhau Vì vậy, một Panel của GWT đóng một vai trò tương tự như Layout (cách bố trí) trong AWT/Swing hoặc một Box trong XUL
Cuối cùng tất cả các widget và panel phải được gắn vào trang Web chứa chúng Như bạn đã thấy trong Liệt kê 1, bạn có thể gắn chúng trực tiếp vào RootPanel Ngoài ra, bạn có thể sử dụng RootPanel để nhận được các tham chiếu đến các phần tử HTML được các mã nhận dạng (ID) hay các tên lớp (classnames) của chúng xác định Trong trường hợp này, tôi sẽ sử dụng hai phần tử HTML DIV riêng biệt có tên là input-container (thùng chứa-đầu vào) và output-container (thùng chứa-đầu ra) Thùng chứa đầu tiên chứa các điều khiển UI cho Bản tin dự báo thời tiết, thùng chứa thứ hai hiển thị chính bản tin dự báo thời tiết đó
Liệt kê 2 cho thấy đoạn mã cần thiết để thiết lập cách bố trí cơ bản; nó sẽ tự giải thích Widget HTML chỉ đơn giản là một thùng chứa để đánh dấu HTML Đây là nơi kết quả đầu ra HTML từ nguồn cấp dữ liệu thời tiết Yahoo! được hiển thị Tất
cả các mã này hoạt động bên trong phương thức onModuleLoad() của lớp Weather (Thời tiết), được giao diện EntryPoint cung cấp Phương thức này được gọi khi một trang Web nhúng mô đun Weather được nạp vào trong một trình duyệt Web của máy khách
Trang 5Liệt kê 2 Bố trí mã cho bản tin dự báo thời tiết
public void onModuleLoad() {
HorizontalPanel inputPanel = new HorizontalPanel();
// Align child widgets along middle of panel
// Create radio button group to select units in C or F
Panel radioPanel = new VerticalPanel();
RadioButton ucRadio = new RadioButton("units", "Celsius");
Trang 6RadioButton ufRadio = new RadioButton("units", "Fahrenheit");
// Create Submit button
Button btn = new Button("Submit");
// Add button to inputs, aligned to bottom
Trang 7một tên lớp CSS theo dạng project-widget Ví dụ, gwt-Button và gwt-RadioButton
là hai trong số các tên lớp của widget GWT cốt lõi Các panel thường được triển khai thực hiện như một búi các bảng lồng nhau và không có các tên lớp mặc định
Trang 8Cách tiếp cận kiểu widget cho mỗi tên lớp mặc định cho phép nó dễ dàng định kiểu các widget một cách thống nhất trên toàn ứng dụng của bạn Tất nhiên, áp dụng các quy tắc bộ chọn CSS thông thường và bạn có thể khai thác chúng để áp dụng các kiểu dáng khác nhau cho kiểu widget giống nhau tùy thuộc vào ngữ cảnh của nó Để luôn linh hoạt hơn, bạn có thể thay thế hoặc tăng thêm các tên lớp mặc định của widgets trên một cơ sở đặc biệt bằng cách gọi các phương thức
setStyleName() và addStyleName() của chúng
Liệt kê 3 kết hợp các cách tiếp cận này để áp dụng các kiểu dáng cho bảng nhập vào của ứng dụng Bản tin dự báo thời tiết Tên lớp weather-input-panel được tạo trong Weather.java với một cuộc gọi đến inputPanel.setStyleName("weather-input-panel");
Liệt kê 3 Áp dụng các kiểu dáng của bảng định khiểu (CSS) cho bảng nhập vào của ứng dụng Bản tin dự báo thời tiết
/* Style the input panel itself */
Trang 10Hình 3 Bảng nhập vào với các kiểu dáng được áp dụng
Thêm hành vi phía máy khách
Bây giờ cách bố trí cơ bản và việc định kiểu của ứng dụng được thực hiện, tôi có thể bắt đầu áp dụng một số hành vi phía máy khách Bạn sử dụng mẫu Listener (Người nghe) quen thuộc để thực hiện xử lý sự kiện trong GWT GWT cung cấp các giao diện Listener cho các sự kiện chuột, các sự kiện bàn phím, các sự kiện thay đổi và v.v, cũng như một số lớp adapter và lớp helper cho thuận tiện hơn Nói chung, bạn thêm những người nghe sự kiện bằng cách thể hiện lớp bên trong
ẩn danh quen thuộc với các lập trình viên Swing Tuy nhiên, tham số đầu tiên của tất cả các phương thức Listener của GWT là người gửi của sự kiện, thường là widget mà người dùng đã tương tác với nó Điều này có nghĩa là bạn có thể đính kèm cùng cá thể Listener cho nhiều widget khi cần thiết; bạn có thể sử dụng tham
số người gửi để xác định widget nào trong số chúng đã thực hiện sự kiện này
Liệt kê 4 cho thấy việc thực hiện của hai người nghe sự kiện trong ứng dụng bản tin dự báo thời tiết Một trình xử lý (handler) nhấn nút được thêm vào cho nút
Submit (Gửi đi) và một trình điều khiển bàn phím (keyhandler) được thêm vào cho TextBox Dù nhấn chuột vào nút Submit hoặc ấn phím Enter khi TextBox
xuất hiện sẽ làm cho trình xử lý có liên quan gọi phương thức riêng
validateAndSubmit() Ngoài các mã trong Liệt kê 4, txBox và ucRadio đã trở
Trang 11thành các thành phần thể hiện của lớp Weather sao cho có thể truy cập chúng từ phương thức xác nhận hợp lệ
Liệt kê 4 Thêm hành vi phía máy khách
// Create Submit button, with click listener inner class attached
Button btn = new Button("Submit", new ClickListener() {
public void onClick(Widget sender) {
validateAndSubmit();
}
});
// For usability, also submit data when the user hits Enter
// when the textbox has focus
txBox.addKeyboardListener(new KeyboardListenerAdapter(){
public void onKeyPress(Widget sender, char keyCode, int modifiers) {
// Check for Enter key
if ((keyCode == 13) && (modifiers == 0)) {
validateAndSubmit();
Trang 12Window.alert() Nếu mã bưu điện hợp lệ, sau đó cả nó lẫn sự lựa chọn của người dùng theo đơn vị độ C hoặc độ F được chuyển tới phương thức
fetchWeatherHtml(), như tôi sẽ bắt đầu ngay sau đây
Liệt kê 5 Logic validateAndSubmit
private void validateAndSubmit() {
// Trim whitespace from input
String zip = txBox.getText().trim();
if (!zipValidator.isValid(zip)) {
Window.alert("Zip-code must have 5 digits");
return;
}
Trang 13// Disable the TextBox
txBox.setEnabled(false);
// Get choice of celsius/fahrenheit
boolean celsius = ucRadio.isChecked();
fetchWeatherHtml(zip, celsius);
}
Gỡ rối phía máy khách với Shell của GWT
Tôi sắp chuyển sang hướng khác một chút ở đây để đề cập rằng GWT Shell có các kết nối JVM cho phép bạn gỡ rối mã phía máy khách của bạn trong một Java IDE Bạn có thể tương tác với giao diện người dùng Web của bạn và chuyển qua đoạn
mã Java thể hiện JavaScript tương ứng được thực thi trên máy khách Đây là một khả năng quan trọng vì việc gỡ rối JavaScript đã tạo ra ở phía máy khách về cơ bản không phải là phần khởi đầu
Thật dễ dàng để cấu hình một nhiệm vụ gỡ rối Eclipse để khởi chạy trình bao (shell) qua lớp com.google.gwt.dev.GWTShell Hình 4 cho thấy Eclipse tạm dừng tại một điểm ngắt (Breakpoint) trong phương thức validateAndSubmit(), tiếp sau
việc nhấn chuột lên nút Submit:
Trang 14Hình 4 Eclipse đang gỡ rối mã GWT phía máy khách
Giao tiếp với các các thành phần phía máy chủ
Bây giờ ứng dụng Bản tin dự báo thời tiết có thể thu thập và xác minh đầu vào người dùng Bước tiếp theo là lấy dữ liệu từ máy chủ Trong việc phát triển Ajax thông thường, việc lấy dữ liệu này sẽ đòi hỏi gọi một nguồn tài nguyên phía máy chủ trực tiếp từ JavaScript và nhận dữ liệu trả về đã mã hóa như là JavaScript Object Notation (JSON-Ký hiệu đối tượng JavaScript) hoặc XML GWT trừu tượng hóa quá trình giao tiếp này phía sau cơ chế gọi thủ tục riêng của nó từ xa (RPC)
Trang 15Trong thuật ngữ GWT, mã máy khách giao tiếp với các dịch vụ đang chạy trên
máy chủ Web Cơ chế RPC được sử dụng để lộ ra các dịch vụ này có các điểm tương đồng với cách tiếp cận sử dụng Java RMI Điều này có nghĩa là bạn chỉ cần viết thực hiện dịch vụ phía máy chủ và một vài giao diện Việc tạo mã và phản chiếu giải quyết các nhánh rẽ của máy khách và các ủy quyền chính của máy chủ
Theo đó, bước đầu tiên là để xác định một giao diện cho dịch vụ Bản tin dự báo thời tiết Giao diện này cần mở rộng giao diện GWT RemoteService và nó chứa các chữ kí của các phương thức dịch vụ, các phương thức này được trưng ra cho
mã máy khách GWT Vì các cuộc gọi RPC trong GWT ở giữa mã JavaScript và
mã Java, nên GWT kết hợp một cơ chế tuần tự hóa-đối tượng để dàn xếp các đối
số và trả về các giá trị trên đường ranh giới ngôn ngữ (xem phần bên Các kiểu tuần tự hóa để thấy những gì bạn có thể sử dụng)
Các kiểu tuần tự hóa
Một tóm tắt ngắn gọn về các kiểu tuần tự hóa trong GWT như sau:
Các lớp gốc (như int) và các lớp trình bao bọc (wrapper) nguyên thủy (như Integer) là tuần tự hóa
String và Date là tuần tự hóa
Mảng của các kiểu tuần tự hóa là sự tuần tự hóa chính nó
Các lớp do người dùng định nghĩa là tuần tự hóa nếu tất cả các thành viên dài hạn của chúng là tuần tự hóa và chúng triển khai thực hiện giao diện IsSerializable của GWT
Các lớp Collection (bộ sưu tập) có thể được sử dụng cùng với các chú thích javadoc có tuyên bố kiểu tuần tự hóa mà chúng có chứa
Vì mã máy khách bị hạn chế theo tập hợp con nhỏ của các lớp Java được GWT triển khai thực hiện, nên các kiểu tuần tự hóa này tạo ra lớp phủ tương đối toàn diện
Với một giao diện dịch vụ được định nghĩa, bước tiếp theo là thực hiện nó trong một lớp có mở rộng lớp RemoteServiceServlet của GWT Như tên cho thấy, đây là một chuyên môn của HttpServlet của ngôn ngữ Java, vì vậy nó có thể được lưu trữ trên bất kỳ thùng chứa servlet nào
Một nét riêng biệt của GWT đáng nói đến ở đây là giao diện truy cập từ xa của dịch vụ này phải ở ngay trong gói client của ứng dụng của bạn vì nó cần phải được
Trang 16kết hợp trong quá trình tạo JavaScript Tuy nhiên, vì lớp thực hiện phía máy chủ tham chiếu giao diện truy cập từ xa, nên sự phụ thuộc thời gian biên dịch Java bây giờ tồn tại giữa mã phía máy chủ và mã phía máy khách Giải pháp của tôi cho vấn
đề này là đặt giao diện truy cập từ xa vào gói con common của gói client Sau đó tôi có common trong xây dựng Java nhưng loại trừ phần còn lại của gói client Điều này ngăn cản các tệp lớp khỏi được tạo ra từ mã máy khách, mã này chỉ cần được chuyển đổi sang JavaScript Một giải pháp ngắn gọn hơn có thể là chia nhỏ cấu trúc gói giữa hai thư mục mã nguồn cho mã phía máy khách và phía máy chủ
để sao chép các lớp chung vào cả hai thư mục
Liệt kê 6 hiển thị giao diện dịch vụ từ xa được sử dụng trong ứng dụng Bản tin dự báo thời tiết: WeatherService Nó có một mã bưu điện và một cờ phân biệt độ C/độ F (Celsius/Fahrenheit) làm đầu vào và trả về một String có chứa một mô tả thời tiết HTML Liệt kê 6 cũng cho thấy phác thảo của
YahooWeatherServiceImpl, sử dụng API thời tiết của Yahoo! để nhận được một nguồn cấp dữ liệu RSS cho mã vùng bưu điện cụ thể và trích ra một mô tả HTML
từ nó
Liệt kê 6 Giao diện WeatherService từ xa và thực hiện một phần
public interface WeatherService extends RemoteService {
/**
* Return HTML description of weather
* @param zip zipcode to fetch weather for
* @param isCelsius true to fetch temperatures in celsius,
* false for fahrenheit
* @return HTML description of weather for zipcode area
*/
