TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN -------------------------- PHẠM THỊ NHƯ QUỲNH ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: TÌM HIỂU VỀ CÔNG NGHỆ GOOGLE WEB TOOLKIT (GWT) NGHỆ AN - 2012 TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN -------------------------- ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: TÌM HIỂU VỀ CÔNG NGHỆ GOOGLE WEB TOOLKIT (GWT) Giáo viên hướng dẫn: ThS. Nguyễn Công Nhật Sinh viên thực hiện: Phạm Thị Như Quỳnh Lớp: 49K - CNTT Mã số SV: 0851077166 án t t nghi pĐồ ố ệ GVHD: ThS. Nguy n Quang Ninhễ Nghệ An, tháng 12 năm 2012 SVTH: D ng Th Trangươ ị 3 L p: 49K - CNTTớ ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) LỜI CẢM ƠN Để hoàn thành đồ án tốt nghiệp này, em xin bày tỏ lòng biết ơn sâu sắc tới thầy giáo Th.S Nguyễn Công Nhật đã tận tình quan tâm, giúp đỡ và hướng dẫn em trong suốt thời gian làm đồ án để em hoàn thành tốt đồ án tốt nghiệp này. Em cũng xin chân thành cảm ơn các quý Thầy, Cô giáo trong khoa Công Nghệ Thông Tin trường Đại Học Vinh đã tận tình truyền đạt kiến thức trong những năm học qua. Vốn kiến thức được tiếp thu trong quá trình học không chỉ là nền tảng trong quá trình nghiên cứu đồ án mà còn là hành trang quý báu để em bước vào đời một cách vững chắc và tự tin. Em cũng thầm biết ơn các anh, chị đang công tác tại Công ty VietSoftware Internationl đã giúp đỡ em về kiến thức cũng như kinh nghiệm thực tế rất nhiều. Sau cùng xin gửi lời cảm ơn chân thành tới gia đình, bạn bè đã động viên, đóng góp ý kiến và giúp đỡ trong quá trình học tập, nghiên cứu và hoàn thành đồ án tốt nghiệp. Em xin chân thành cảm ơn ! Vinh, tháng 11 năm 2012 Sinh viên thực hiện Phạm Thị Như Quỳnh SV: Phạm Thị Như Quỳnh 4 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) LỜI MỞ ĐẦU Về mặt công nghệ, Internet và các website đã và đang trở thành những phần không thể thiếu của công nghệ thông tin hiện tại. Cùng với sự phát triển của mạng lưới hạ tầng mạng, rất nhiều công nghệ web mới đã lần lượt ra đời. Với công nghệ web động, những trang web không được tạo và lưu trữ sẵn mà nó sẽ được máy chủ tự động tạo ra khi nhận được yêu cầu (request) và gửi đến trình duyệt để hiển thị. Để làm được điều này, thông thường lập trình viên phải làm việc với những dòng lệnh JavaScript phức tạp và khó quản lý. Để đơn giản hóa khi thiết kế web động, một loạt những công nghệ dựa trên nền tảng JavaScript đã được Google giới thiệu. Tiêu biểu trong số đó là Goole Web Toolkit (GWT) – một bộ thư viện để viết mã nguồn phía client - side theo cách viết của Java – hay Google Map API, một bộ thư viện để hiển thị và tương tác với dữ liệu bản đồ. Bên cạnh đó, Google còn hỗ trợ việc triển khai những ứng dụng web với mô hình điện toán đám mây thông qua công cụ Google App Engine. Với sự tham gia tích cực của Google, đây chắc chắn sẽ là một trào lưu công nghệ và kinh doanh vô cùng sôi động và mang lại những lợi ích to lớn. Tuy nhiên, những ứng dụng của Google ở Việt Nam vẫn còn tương đối mới và chưa được quan tâm nghiên cứu nhiều. Chủ yếu, người ta ứng dụng Google Map API để xây dựng những trang cung cấp thông tin du lịch. Về phần GWT, trong quá trình nghiên cứu, em thấy nó khá mạnh trong lĩnh vực xây dựng một website quản lý. Vì vậy, sau thời gian thực tập tại Công ty VietSoftware Internationl. Em đã quyết định chọn đề tài cho đồ án tốt nghiệp là: “Tìm hiểu về công nghệ Google Web Toolkit ”. Trong bài báo cáo này, em giới thiệu trước hết về công nghệ GWT, sau đó là ứng dụng được công cụ GWT vào xây dựng ứng dụng web trong thực tế. Đồ án gồm 5 phần : - Phần I: Tổng quan về GWT - Phần II : So sánh GWT với các công nghệ khác - Phần III : Xây dựng giao diện người dùng với GWT - Phần IV : Công nghệ giao tiếp giữa Client-Server - Phần V : Xây dựng demo sử dụng công nghệ GWT Với trình độ, kinh nghiệm và kĩ năng còn hạn chế nên đồ án không tránh khỏi những thiếu sót. Em rất mong nhận được sự chỉ bảo, góp ý của các thầy cô giáo và các bạn. Hi vọng rằng, thông qua đồ án cùng với sự chỉ bảo của các thầy cô giáo và các bạn em sẽ hoàn thiện mình trong các ứng dụng. SV: Phạm Thị Như Quỳnh 5 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) MỤC LỤC LỜI CẢM ƠN 4 LỜI MỞ ĐẦU 5 MỤC LỤC 6 CHƯƠNG 1 TỔNG QUAN VỀ GOOGLE WEB TOOLKIT .7 CHƯƠNG 2 SO SÁNH GWT VỚI CÁC CÔNG NGHỆ KHÁC 13 CHƯƠNG 3 XÂY DỤNG GIAO DIỆN NGƯỜI DÙNG VỚI GWT 19 CHƯƠNG 4 CÔNG NGHỆ GIAO TIẾP GIỮA CLIENT – SERVER 42 CHƯƠNG 5 XÂY DỰNG DEMO MINH HỌA SỬ DỤNG CÔNG NGHỆ GOOGLE WEB TOOLKIT .56 KẾT LUẬN 61 TÀI LIỆU THAM KHẢO .62 SV: Phạm Thị Như Quỳnh 6 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) CHƯƠNG 1 TỔNG QUAN VỀ GOOGLE WEB TOOLKIT Vào khoảng tháng 5/2006, Google xuất bản Google Web Toolkit (GWT), một tập hợp những công cụ phát triển, những tiện ích lập trình và những widget giúp chúng ta tạo những ứng dụng web theo cách mà trước đây chúng ta chưa từng làm. Sự khác biệt giữa GWT và những Framework khác là với GWT chúng ta viết ứng dụng phía trình duyệt của chúng ta bằng ngôn ngữ Java thay vì JavaScript. Điều đó có nghĩa, ngoài việc thuận lợi thay thế ngôn ngữ JavaScript bằng Java thì chúng ta có thể sử dụng các công cụ phát triển Java mà có sẵn như Eclipse, Junit, Netbean… Thay vì phải cố gắng xây dựng những công cụ mới để phát triển ứng dụng phía trình duyệt bằng JavaScript. Phần cốt lõi của GWT là trình biên dịch Java – To – JavaScript tương thích với Internet Explorer, Firefox, Mozilla, Safari và Opera. Trình biên dịch chuyển các cấu trúc của Java sang JavaScript, cho phép chúng ta sử dụng các lớp trong gói util như Vector, Hashmap, Date. GWT cũng bao gồm nhiều widget và panel để giúp cho việc xây dựng một ứng dụng web mà giống như một ứng dụng desktop. Thư viện widget bao gồm: text boxes, drop – down menus, và những form fields khác. Thêm vào nữa nó bao gồm những widget phức tạp như: MenuBar, TreeControl, DialogBox, TabPanel, StackPanel … Về vấn đề giao tiếp với Server, GWT hỗ trợ nhiều công cụ cho nhiều trường hợp. Công cụ đầu tiên là cách tương tác bằng đối tượng JavaScript XMLHttpRequest, một đối tượng đồng hành với việc giao tiếp không đồng bộ bằng Ajax, cho phép kết nối giữa trình duyệt và server mà không cần làm mới trang giống như các trang HTML truyền thống. Một công cụ khác được cung cấp bởi GWT là tập hợp những lớp thao tác trên định dạng tin nhắn Json, một định dạng được biết đến với tính đơn giản và thông dụng. Đặc biệt GWT còn cho phép gửi một đối tượng Java về Server mà không cần một định dạng tin nhắn trung gian nào. GWT còn cho phép chúng ta giao tiếp với bất kỳ dịch vụ phía server viết bằng ngôn ngữ nào đó (VD: php, Java…). Ngoài ra nó còn có thể tích hợp với các Framework Java khác như Java - Server Faces (JSF), Spring, Structs, và Enterprise JavaBeans (EJBs). Tính mềm dẻo này của GWT cho phép chúng ta tiếp tục sử dụng các công cụ phía server mà chúng ta đang sử dụng. SV: Phạm Thị Như Quỳnh 7 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) GWT cung cấp tập hợp những công cụ tập trung giải quyết vấn đề xây dựng những ứng dụng web như là ứng dụng desktop bao gồm một tập hợp nhiều widget và nhiều công cụ khác. Hộp công cụ của GWT cung cấp một XML parser, những công cụ khác nhau giao tiếp với Server, quốc tế hóa ứng dụng và những công cụ cấu hình, và một hệ thống quản lý lịch sử trình duyệt. 1.1. Thảo luận về trình biên dịch Java thành JavaScript Để hiểu rõ GWT cung cấp gì thì chúng ta sẽ tìm hiểu cái mà định nghĩa ra nó đó là: trình biên dịch. Trình biên dịch GWT thì làm nhiệm vụ chuyển mã nguồn Java thành JavaScript, cũng tương tự như trình biên dịch Java chuyển mã nguồn Java thành bytecode. Để biên dịch một chương trình GWT chạy chương trình javacom.google.gwt.dev.GWTCompiler, truyền vào cho nó vị trí module và một số tham số khác. Một module bao gồm một tập hợp các lớp các File Java có liên quan cùng với một file cấu hình đơn giản. Đặc trưng của một module là một lớp entry point, đó là một lớp mà thực thi khi dự án bắt đầu. Trình biên dịch bắt đầu biên dịch lớp entry point cùng với những yêu cầu kèm theo để biên dịch mã nguồn Java. Trình biên dịch GWT làm việc khác với trình biên dịch tiêu chuẩn của Java bởi vì nó không biên dịch mọi thứ trong module mà chỉ biên dịch những gì được sử dụng trong lớp entry point. Trình biên dịch có ba cách để xuất ra mã nguồn JavaScript. - Cách mặc định là “obfuscate” (xáo trộn) làm cho mã nguồn JavaScript rất khó đọc, không có khoảng cách giữa các câu lệnh, trông giống như một đoạn đã bị mã hóa gần như không thể đọc được. Cách này giúp chống lại các kẻ trộm mã nguồn và làm cho kích thước file JavaScript nhỏ hơn rất nhiều. Nó hữu ích cho các ứng dụng lớn. - Cách thứ hai là “pretty” (xinh đẹp), cách này tạo ra mã nguồn có thể đọc được. Nó lại giữ mã nguồn Java gốc và cách 1 “xáo trộn”. - Cách cuối cùng là “detailed” (chi tiết), nó tạo ra mã nguồn JavaScript giống như cách thứ hai nhưng nó thêm tên lớp như một phần của tên phương thức JavaScript. Làm chúng ta dễ dàng theo dõi mã nguồn JavaScript khi so sánh với mã nguồn Java gốc. 1.2. Sử dụng JSNI thực thi mã JavaScript từ Java JavaScript Native Interface (JSNI) giúp chúng ta thực thi mã nguồn JavaScript từ Java cũng như thực thi mã nguồn Java từ JavaScript. JSNI cho phép bạn thực hiện cuộc gọi JavaScript trực tiếp từ mã Java máy khách GWT. Điều này có thể thực thi bởi trình SV: Phạm Thị Như Quỳnh 8 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) biên dịch GWT, chúng sẽ kết hợp mã JavaScript mà chúng ta nhúng vào với mã nguồn JavaScript mà được tạo ra từ Java. Đây là một ví dụ đơn giản về nó: public native int addTwoNumbers (int x, int y) /*-{ var result = x + y; return result; }-*/; Trong Java, chúng ta có thể khai báo một phương thức là native để thông báo cho trình biên dịch biết rằng phương thức này được cài đặt bằng một ngôn ngữ khác. Theo tài liệu lập trình Java khi chúng ta khai báo một phương thức native chúng ta không được cho phép xác định đoạn mã cài đặt định nghĩa phương thức đó. Khi chúng ta xem đoạn mã trên chúng ta sẽ thấy đoạn code bên trong phương thức được chứa trong ký hiệu chú thích nhiều dòng. Bên trong chú thích này là mã nguồn JavaScript chúng ta nhúng vào. Khi phương thức này thực thi thì đoạn mã này được thi hành. Điều này làm thỏa mãn yêu cầu không cho phép cài đặt nội dung cho phương thức native nhưng nó đã cung cấp được đoạn JavaScript mà trình biên dịch GWT dùng để thực thi khi gọi phương thức này. 1.3. Truy cập đến thư viện JRE emulation Vấn đề đặt ra là, chúng ta có thể sử dụng các lớp trong gói JRE vào trong dự án không, trình biên dịch GWT có hiểu và biên dịch được chúng thành JavaScript không hay chỉ sử dụng trong vùng bộ API mà GWT cung cấp. Câu trả lời là có những giới hạn chỉ một vài lớp trong gói java.lang và java.util. Bảng 1.1 và bảng 1.2 sẽ chỉ cho chúng ta các lớp mà được sử dụng trong ứng dụng GWT của chúng ta. Hãy xem cẩn thận có một số chi tiết quan trọng chúng ta có thể bỏ qua ví dụ như java.util.Date thì được hỗ trợ nhưng java.util.Calendar bất kỳ công cụ định dạng ngày tháng nào khác thì không. Bảng 1.1: Lớp java.lang.* có sẵn trong GWT Classes Boolean Byte Character Class Double Float Integer Long Math Number Object Short String StringBuffer System Exceptions/Errors SV: Phạm Thị Như Quỳnh 9 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) AssertionError ArrayStoreException ClassCastException Exception Error IllegalArgument-Exception IllegalStateException IndexOutOfBounds- Exception NegativeArraySize- Exception NullPointerException NumberFormatException RuntimeException StringIndexOutOfBounds- Exception Throwable UnsupportedOperatio- Exception Interfaces CharSequence Cloneable Comparable Bảng 1.2: Lớp java.util.* có sẵn trong GWT Classes AbstractCollection AbstractList AbstractMap AbstractSet ArrayList Arrays Collections Date HashMap LinkedHashMap a ListIterator a HashSet SortedMap a Stack TreeMap a Vector Exceptions/Errors EmptyStackException NoSuchElementException TooManyListenersExcept -ion Interfaces Collection Comparator EventListener Iterator List Map RandomAccess Set (a. Mục tiêu bao gồm trong bản phát hành 1.4 của GWT) 1.4. Tìm hiểu về thư viện và widget của GWT GWT có một lượng lớn các widget và những panel. Sự khác biệt giữa widget và panel là widget có thể là những Button, TextBox … cho người dùng tương tác còn SV: Phạm Thị Như Quỳnh 10 Lớp 49K - Khoa CNTT . NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) CHƯƠNG 1 TỔNG QUAN VỀ GOOGLE WEB TOOLKIT Vào khoảng tháng 5/2006, Google xuất bản Google Web Toolkit (GWT), . - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) LỜI MỞ ĐẦU Về mặt công nghệ, Internet và các website đã và đang trở thành những