Tổng Quan Về Google Web Toolkit (GWT)

1. Tổng Quan VềGoogle Web Toolkit (GWT) Nhóm sinh viên thực hiện: 1. Nguyễn Văn Toàn MSSV: LT11780 2. Nguyễn Cao Thụy Anh MSSV: 1088211 3. Phạm Anh Tuấn MSSV: LT11788 4. Võ Thị Phương Trinh MSSV: LT11786 5. Trần Ánh Tuyết MSSV: LT11792 6. Nguyễn Thị Thúy Ái MSSV: LT11713 7. Nguyễn Trung Nghĩa MSSV: 1071463

2. 1. GWT là gì?

3. 1. GWT là gì? (tt) GWT là một open source Java framework giúp cho việc phát triển các ứng dụng Ajax dễ dàng hơn mà không cần phải biết quá nhiều ngôn ngữ. Trước đây, khi phát triển một ứng dụng web, phía client phải viết rất nhiều mã JSP, HTML, JavaScript,... Nay với GWT, bạn có thể viết toàn bộ ứng dụng web phía client bằng mã Java, sau đó GWT sẽ biên dịch (compile) mã Java thành mã JavaScript và HTML. Ta có thể xem GWT là một bộ biên dịch Java sang JavaScript và HTML.

4. Đồng thời GWT lại có thể debug - một lợi thế rất lớn vì bản thân JavaScript không có chế độ debug, khiến cho rất khó khăn để xác định được vị trí lỗi trong code JavaScript, ... GWT được sử dụng bởi nhiều sản phẩm tại Google, bao gồm cả Google Wave và phiên bản mới của AdWords. Đó là mã nguồn mở, hoàn toàn miễn phí, và được sử dụng bởi hàng ngàn nhà phát triển trên thế giới. 1. GWT là gì? (tt)

5. Theo Google: - GWT là một Java framework mã nguồn mở cho phép bạn thoát khỏi ma trận các công nghệ để viết các ứng dụng AJAX quá khó khăn và nhiều lỗi. Với GWT, bạn có thể phát triển và kiểm tra lỗi các ứng dụng AJAX bằng ngôn ngữ Java, sử dụng các công cụ phát triển Java tuỳ theo ý thích. Khi bạn triển khai ứng dụng của mình, bộ biên dịch của GWT sẽ dịch ứng dụng Java của bạn sang Javascript và HTML.

6. Theo Google (tt): - GWT nhấn mạnh đến tính tái sử dụng, những giải pháp hiệu quả để chống lại những thách thức mà AJAX gặp phải. * GWT phiên bản 1.0 RC 1 (xây dựng 1.0.20) được phát hành vào ngày 16 tháng 5 năm 2006 . Google công bố GWT tại hội nghị JavaOne, 2006.

7. GWT 1.0 Ngày 17 tháng 05, năm 2006 (đầu tiên)GWT 1.1 Ngày11tháng 08, năm 2006GWT 1.2 Ngày 16 tháng 09, năm 2006GWT 1.3 Ngày 05 tháng 02, năm 2007 GWT 1.4 Ngày 28 tháng 08, năm 2007GWT 1.5 Ngày27 tháng 08, năm 2008GWT 1.6 Ngày07 tháng 04, năm 2009GWT 1.7 Ngày13 tháng 07, năm 2009GWT 2.0 Ngày08 tháng 12, năm 2009 2. Các phiên bản:

8. GWT 2.0.1 ngày02 tháng 02, năm 2010GWT 2.0.2 ngày 12 tháng 02, năm 2010 GWT 2.0.3 ngày19 tháng 02, năm 2010GWT 2.0.4 ngày 02 tháng 07, năm 2010GWT 2.1.0 ngày 19 tháng 10, năm 2010GWT 2.1.1 ngày 16 tháng 12, năm 2010GWT 2.2.0 ngày 11 tháng 02, năm 2011GWT 2.3.0 ngày 03 tháng 05, năm 2011GWT 2.4.0 ngày 08 tháng 09, năm 2011 (mới nhất) 2. Các phiên bản (tt):

9. Một ứng dụng GWT có thể chạy theo 2 cách: + Hosted mode: Ứng dụng sẽ chạy như một ứng dụng Java với JVM. Cách này chỉ sử dụng cho developer. + Web mode : Ứng dụng là Javascropt và HTML thuần, được biên dịch ra từ các đoạn code Java. Cách này là dành cho người sử dụng. 3. Phát triển ứng dụng GWT:

10. Để viết một ứng dụng GWT, có rất nhiều cách: + Notepad: Nếu ứng dụng chỉ là để test hoặc demo thì chỉ cần notepad cũng có thể viết được, vì chỉ có khoảng chục dòng code. Còn bộ compiler (vốn được tích hợp sẵn trong GWT) sẽ được chạy bằng các lệnh command-line. + GWT4NB: là plugin dành riêng cho NetBeans 3. Phát triển ứng dụng GWT (tt):

11. + Google Eclipse: Là một plugin cho Eclipse, để các Java developer có thể sử dụng IDE mã nguồn mở này phát triển các ứng dụng GWT. Hiện tại Google eclipse đã được tích hợp sẵn với Eclipse và được công bố bởi Cypal Studio. (Eclipse đề cập ở đây là nền Eclipse, tức là tất cả các IDE được phát triển trên nền Eclipse như JBuilder, Jdeveloper). + WindowBuilder: Là một IDE khá toàn diện. Cho phép có thể tạo ra các đối tượng GWT bằng cách kéo thả và sắp xếp trên panel theo các layout tuỳ chọn. 3. Phát triển ứng dụng GWT (tt):

12. Bộ biên dịch Java-to-javascript: Dùng để dịch tất cả các mã nguồn Java của ứng dụng GWT sang code JS và HTML. - Trình duyệt dành cho Hosted Mode: Dùng để các developer chạy ứng dụng GWT bằng hosted mode (tất nhiên là với JVM). - Thư viện JRE: Chỉ có 2 thư viện chuẩn của Java được sử dụng trong GWT là java.lang và java.util. 4. Các thành phần của GWT:

13. - Các thư viện của GWT để thiết kế giao diện. Là các giao diện và các lớp được tạo sẵn hoặc do người dùng tự tạo, dùng để tạo các đối tượng AJAX bằng Java trong các ứng dụng GWT. Chúng còn được gọi là các widgets. 4. Các thành phần của GWT (tt):

14. Button PushButton RadioButton CheckBox DatePicker ToggleButton TextBox PasswordTextBox TextArea 5. Các Widgets tạo sẵn: • Hyperlink • ListBox • MenuBar • Tree • SuggestBox (auto-complete) • RichTextArea • Table • TabBar • DialogBox

15. PopupPanel StackPanel StackLayoutPanel HorizontalPanel VerticalPanel FlowPanel VerticalSplitPanel 6. Các Panels tạo sẵn: • HorizontalSplitPanel • SplitLayoutPanel • DockLayoutPanel • TabPanel • TabLayoutPanel • DisclosurePanel

16. *Hệ điều hành mà GWT hỗ trợ: Do viết trên Java, GWT có thể chạy trên Windows, Linux, Mac OS. Sau đây sẽ hướng dẫn cài trên Windows (Bộ cài đặt gồm 4 files ): Cài JDK Cài NetBeans Tạo ứng dụng đơn giản 7. Cài đặt GWT:

17. Chạy file: jdk-7u2-windows-i586.exe, Chọn Next -> Next 7.1 Cài JDK:

18. Chọn Next -> Continue; Cài xong JDK 7.1 Cài JDK (tt):

19. Chạy file netbeans-7.1-ml-windows.exe, chọn Customize Chọn như hình bên phải và chọn OK 7.2 Cài NetBeans:

20. Chọn như hình, chọn Next -> Next, tiếp tục chọn Next -> Next Chọn Install -> Finish. Cài xong NetBeans. 7.2 Cài NetBeans (tt):

21. Khởi động NetBeans, chọn Tools -> Plugins 7.3 Cài plugin GWT:

22. Chọn như hình, chọn Activate -> Activate -> Finish 7.3 Cài plugin GWT (tt):

23. Chọn như hình, Chọn file org-netbeans-modules-gwt4nb-2.10.5.nbm, chọn Open 7.3 Cài plugin GWT (tt): 1 3 2

24. Chọn Install -> Next, chọn như hình 1,Chọn Update -> Continue Chọn như hình 2 -> Finish. Đã cài xong plugin GWT 7.3 Cài plugin GWT (tt): 1 2

25. Giải nén file gwt-2.4.0.zip vào C:\Program Files (hình 1) Chạy NetBeans, chọn menu File -> New Project và chọn như (hình 2) 7.4 Tạo ứng dụng GWT: 1 2

26. Chọn như hình Đặt tên project tại ô Project Name, ở đây là demo, chọn Next 7.4 Tạo ứng dụng GWT (tt):

27. Chọn như hình, chọn Next 7.4 Tạo ứng dụng GWT (tt):

28. Chọn GWT. Chọn Browse Chọn thự mục chứa GWT (C:\Program Files\gwt-2.4.0) Ô GWT Module đặt lại tên: org.demo.Main, chọn Finish. Tạo xong 7.4 Tạo ứng dụng GWT (tt):

29. Ứng dụng GWT được NetBeans, R-click vào project demo chọn Run để chạy, nội dung sẽ hiện lên trình duyệt Web 7.4 Tạo ứng dụng GWT (tt):

30. Đến giữa năm 2008, GWT hỗ trợ các trình duyệt sau: Firefox, 1.5, 2.0, 3.0 và mới nhất Explorer 6 và 7 và mới nhất Safari 2 và 3 ; Opera 9,0 và mới nhất Google Chrome tất cả các phiên bản GWT phát triển các phần mềm thương mại GWT phát hành với Apache 2.0 open source license, nên có thể sử dụng để phát triển các ứng dụng thương mại, phi thương mại và doanh nghiệp (enterprise) 8. Trình duyệt hỗ trợ GWT:

31. a. Không có lỗi cú pháp JavaScript - Sử dụng một ngôn ngữ, có kiểu mạnh (Java) cho phát triển và gỡ lỗi. -Không có lập trình JavaScript. b. Có thể sử dụng Java phức tạp trên client:- Dịch sang JavaScript, nhưng vẫn dùng String, array, Math class, ArrayList, HashMap, … - Có nhiều Java IDE hỗ trợ phát triễn/gỡ lỗi (GWT xây dựng các dự án Eclipse,MyEclipse hoặc NetBean, ... tự động). c. Có thể gửi các kiểu Java phức tạp đến máy chủ. d. Môi trường kiểm tra độc lập: có thể dùng với MyEclipse/NetBeans mà không cần cài đặt máy chủ 9. Ưu điểm:

32. Big learning curve - Java developers can deploy with AjaxTags (or other JSP tag libraries that wrap Ajax functionality) in just a few minutes, whereas it takes much longer to get anything running with GWT.  Cumbersome deployment - Clumsy and poorly documented process to deploy on a regular Java-based Web server.  Nonstandard approach to integrate JavaScript - You never put direct JavaScript in your HTML. Instead, you use JSNI to wrap JavaScript in Java. Very powerful in the long run, but hard to get used to at first.  Only for Java developers - Most Ajax environments do JavaScript on the client and have a choice for the server. GWT is based entirely around Java.  Unusual approach - Fundamentally different strategy than all other Ajax environments makes evaluation and management buyoff harder  10. Khuyết điểm:

33. Write GWT SDK cung cấp một bộ lõi Java API và Widgets. Điều này cho phép bạn viết các ứng dụng AJAX trong Java và sau đó biên dịch tối ưu hóa nguồn JavaScript chạy trên tất cả các trình duyệt, bao gồm cả trình duyệt di động cho Android và iPhone. Xây dựng các ứng dụng AJAX theo cách này hiệu quả hơn nhờ đến một mức độ trừu tượng cao hơn trên các khái niệm phổ biến như DOM thao tác và truyền XHR. Bất cứ điều gì bạn có thể làm với trình duyệt của DOM và JavaScript có thể được thực hiện trong GWT, bao gồm cả tương tác với viết tay JavaScript.

34. Debug Bạncóthể debug cácứngdụng AJAX trong IDE yêuthíchcủabạngiốngnhưmộtứngdụngmáytínhđểbàn, vàtrongtrìnhduyệtưathíchcủabạngiốngnếubạnđãđượcmãhóa JavaScript. Cácnhàpháttriển GWT pluginkéodàikhoảngcáchgiữa Java bytecode . Nhờsựpháttriển GWT plugin, khôngcóbiêndịchcủamãJavascriptđểxemnótrongtrìnhduyệt. Bạncóthểsửdụngchỉnhsửa, làmmới, sửdụngvới JavaScript, trongkhiđồngthờikiểmtracácbiến, cácđiểmngắtthiếtlập, vàsửdụngtấtcảcáccôngcụkháccósẵnchobạnvới Java. Vàbởivìchếđộpháttriểncủa GWT làbâygiờtrongtrìnhduyệt, bạncóthểsửdụngcáccôngcụnhư Firebug vàkhibạnmãtrong Java.

35. Optimize (Tối ưu hóa) Google Web Toolkit bao gồm hai công cụ mạnh để tạo ra các ứng dụng web tối ưu hóa. Trình biên dịch thực hiện tối ưu hóa toàn diện GWT trên cơ sở mã của bạn – trong phương pháp, loại bỏ mã chết, tối ưu hóa chuỗi, và nhiều hơn nữa. Bằng cách thiết lập chia điểm trong các mã, nó cũng có thể tải về các phân khúc của bạn thành nhiều đoạn JavaScript, chia tách các ứng dụng lớn cho thời gian khởi động nhanh hơn. Hiệu suất không giới hạn JavaScript. Google Web Toolkit cho phép bạn để chẩn đoán vấn đề hoạt động trong trình duyệt.

36. Run Khi bạn đã sẵn sàng để triển khai, GWT biên dịch mã nguồn Java của bạn vào tối ưu hóa, độc lập các tập tin JavaScript tự động chạy trên các trình duyệt lớn, cũng như các trình duyệt di động cho Android và iPhone. Một số ví dụ thực tế: Website để quản lý hình ảnh không gian địa lý. Một loạt các bộ hình ảnh - một số rất lớn. Vector dữ liệu - ranh giới chính trị, đường giao thông. Người sử dụng truy cập các điều khiển để truy cập các thành viên. Các tài liệu XML lấy từ máy chủ để cấu hình và cập nhật vào cửa WMS

37. Demo của GWT Gmail, Google Calendar, Google Docs là những ví dụ thực tế nhất về GWT. Ngoài ra bạn có thế xem thêm một số sample như: Mail Application Kitchen Sink JSON Interop Using JSNI ... và còn nhiều nữa tại Example Projects

38. Link tham khảo và ebook Ebookthamkhảo: GWT in Action Google™ Web Toolkit Solutions (Digital Short Cut) Cool & Useful Stuff Các link thamkhảo: http://gwt.vnonweb.net/2010/01/nhung-cau-hoi-thong-thuong-ve-gwt-cho.html http://code.google.com/webtoolkit/overview.html Tạiđâycungcấpthông tin về API, Tutorial:http://code.google.com/webtoolkit/overview.html http://www.vnecon.vn/showthread.php?t=603 http://googlewebtoolkit.blogspot.com/ http://code.google.com/webtoolkit/overview.html http://code.google.com/webtoolkit/doc/latest/tutorial/ http://vi.wikipedia.org/wiki/Ajax_%28l%E1%BA%ADp_tr%C3%ACnh%29#C.C3.A1c_tr.C3.ACnh_duy.E1.BB.87t_h.E1.BB.97_tr.E1.BB.A3_Ajax http://en.wikipedia.org/wiki/Google_Web_Toolkit#History

39. XIN CHÂN THÀNH CẢM ƠN!