Hướng dẫn lập trình GWT

Tác giả: Tăng Hải Ngọc Sơn - HunterBMT

Mục đích: Bài viết này nhằm giúp các quí vị cài đặt và làm quen với bộ công cụ lập trình web của google (Google Web Toolkit )

Yêu cầu :

• Netbean 6.9.1
• GWT 2.4.0
• GWT for netbean plugin .
• Tomcat 6.0.32
• JDK 1.6.24

Ở những loạt bài trước , chúng ta đã tìm hiểu về cách xây dự web application trên nền tảng công nghệ J2EE , hôm nay , mình xin giới thiệu tới các bạn một bộ công cụ phát triển web mới ,vẫn với nền nảng J2EE ( JSP và Servlet) đó là GWT .

GWT là gì ?

Chắc hẳn các bạn đã từng nghe tới Ajax , một công nghệ ra đời nhằm việc thay đổi trải nghiệm của người dùng khi sử dụng web apps . Với Ajax , các bạn có thể tương tác với web apps tương tự như với desktop apps , dễ thấy nhất ở đây , là việc thay đổi nội dung trên trang web (HTML) không cần phải thực hiện việc reload lại trang hay post back trở lại server sau mỗi thao tác.

Và nếu các bạn đã một lần thử lập trình bằng Ajax , chắc hẳn các bạn đã từng cảm nhận được sự khó khăn và phức tạp khi chúng ta vừa phải lập trình phía server bằng Java , vừa phải thực hiện việc xử lý output bằng Javascript . Và không phải ai trong số chúng ta cũng có thể lập trình tốt cả hai.

GWT ra đời , đểgiúp chúng ta đơn giản hóa và dễ dàng tiếp cận với việc lập trình. Với GWT, các bạn không cần phải quan tâm tới việc mình sẽ viết Javascript phía client như thế nào, nhận dữ liệu từ XHTML request như thế nào, trả object về phía Client qua JSON ra sao . Tất cả những gì bạn cần, chỉ là code Java, code Java và code Java.

Với GWT, bộ công cụ này sẽ hỗ trợ một số chức năng để chúng ta thao tác ứng dụng một cách đơn giản và giúp người sử dụng phần mềm hiệu quả trong thao tác, cụ thể convert code Java của bạn sang thành Javascript và giúp chúng ta có trong tay chiếc gậy Ajax .

Nếu các bạn cảm thấy hứng thú với GWT, nhà phù thủy từ Google , vậy chờ gì nữa, chúng ta sẽ cùng nhau khám phá GWT.

Cài đặt GWT và plugin hỗ trợ lập trình trong IDE

Để cài đặt GWT, các bạn chỉ cần đơn giản google và tải bộ GWT 2.4.0 về máy, giải nén, thế là xong.

Bên cạnh đó, mình sẽ giới thiệu với các bạn việc lập trình GWT trên IDE quen thuộc của chúng ta, Netbean .

Chúng ta vào Tool , chọn Plugins và chuyển qua tab Downloaded như hình

Các bạn chọn Add Plugins , chọn đường dẫn tới file vừa tải về ,và chọn open. Netbean sẽ tự cài đặt plugins vào cho các bạn .

Tiếp theo , chúng ta sẽ thực hiện project đầu tiên , kinh điển , Hello World  để kiểm tra tính hiệu quả của GWT và plugin trên IDE.

Implement Hello World web app.

Các bạn chọn new project, chọn Java web trong Categories, chọn Web Application trong Projects. Click nút Next

Các bạn tạo project Hello World

Chọn server Tomcat 6.0 , Java EE version 5. Nhấn nút Next

Chọn framework google web toolkit , chọn đường dẫn tới GWT SDK 2.4.0 đã tải về ở đầu bài .

Bấm nút Finish.

Project chúng ta sẽ được tạo ra trong Netbeans như sau :

Chúng ta sẽ chú ý vào class MainEntryPoint .java trước .

Ở đây các bạn có thể thấy , chúng ta có một hàm onModuleLoad()  , tương tự như làm pageLoad() của Asp . Net . Hàm này sẽ sử dụng để khởi tạo tất cả những gì cần thiết, trước khi website được hiển thị ra cho người dùng .

Các bạn có thể thấy, chúng ta có các Label , Button , ClickHandler  tương tư như Swing của Desktop applications . Điểm khác duy nhất ở đây , đó là các class import của chúng ta .

Toàn bộ đều thuộc class client.ui.Button của GWT . Nếu các bạn sử dụng class khác , IDE sẽ báo lỗi ngay tức thì .

Tiếp theo , chúng ta sẽ quan sát file Main.gwt.xml

Main.gwt.xml tổng quan là file config của GWT SDK , để xác định class nào sẽ sử dụng GWT SDK để complier, tuy nhiên với Netbean , file này sẽ tự động được sinh ra , do đó các bạn không cần quá quan tâm về nó .

Tiếp theo là file welcomeGWT.html

Các bạn có thể thấy, ở đấy chúng ta không hề khai báo bất khi tag html nào để tạo ra UI , mà chỉ sử dụng 1 script JS duy nhất , được GWT SDK sinh ra .

Build, và run chương trình .

Các bạn sẽ có giao diện như sau :

Click vào nút Click me ! và các bạn sẽ thấy sự kì diệu . Code JS được sinh ra thực hiện đúng những gì chúng ta đã code bằng java trong file MainEntryPoint mà chúng ta không cần viết gì thêm .

Vậy là các bạn đã đi được bước đầu, trong việc làm quen với GWT , trong loạt bài sau , chúng ta sẽ cùng thực hiện một ứng dụng Ajax , thông qua GWT , với code Java quen thuộc