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 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 đã...
Nội dung trích xuất từ tài liệu:
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 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 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: Liệ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'); button.addClickListener(new ClickListener() { public void onClick(Widget sender) { Window.alert(Hello World!); } }); RootPanel.get().add(button); } } Điều này trông rất giống mã GUI mà bạn có thể có đã viết bằng Swing, AWT hoặc SWT. Như các bạn có thể đoán, Liệt kê 1 tạo một nút để hiển thị một thông báo Hello World! khi bạn nhấn vào nó. Nút này được thêm vào RootPanel, một trình bao (wrapper) GWT quanh phần thân của một trang HTML. Hình 1 cho thấy ứng dụng đang hoạt động, đang chạy bên trong GWT Shell (trình bao). Shell này là môi trường lưu trữ gỡ rối, kết hợp một trình duyệt Web đơn giản, có trong GWT SDK. Hì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, đâ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 ...