Tìm hiểu về công nghệ google web toolkit (gwt)

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: Sinh viên thực hiện: Lớp: Mã số SV: ThS Nguyễn Công Nhật Phạm Thị Như Quỳnh 49K - CNTT 0851077166 Nghệ An, tháng 12 năm 2012 ĐỒ ÁN TỐT NGHIỆP Tìm hiểu 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 đỡ hướng dẫn em suốt thời gian làm đồ án để em hoàn thành tốt đồ án tốt nghiệp Em xin chân thành cảm ơn quý Thầy, Cô giáo khoa Công Nghệ Thông Tin trường Đại Học Vinh tận tình truyền đạt kiến thức năm học qua Vốn kiến thức tiếp thu trình học khơng tảng q trình nghiên cứu đồ án mà hành trang quý báu để em bước vào đời cách vững tự tin Em thầm biết ơn anh, chị công tác Công ty VietSoftware Internationl giúp đỡ em kiến thức kinh nghiệm thực tế nhiều Sau 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 giúp đỡ q trình học tập, nghiên cứu 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 Phạm Thị Như Quỳnh SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) LỜI MỞ ĐẦU Về mặt công nghệ, Internet website trở thành phần thiếu công nghệ thông tin Cùng với phát triển mạng lưới hạ tầng mạng, nhiều công nghệ web đời Với công nghệ web động, trang web không tạo lưu trữ sẵn mà máy chủ tự động tạo nhận yêu cầu (request) gửi đến trình duyệt để hiển thị Để làm điều này, thông thường lập trình viên phải làm việc với dịng lệnh JavaScript phức tạp khó quản lý Để đơn giản hóa thiết kế web động, loạt cơng nghệ dựa tảng JavaScript Google giới thiệu Tiêu biểu số Goole Web Toolkit (GWT) – thư viện để viết mã nguồn phía client - side theo cách viết Java – hay Google Map API, thư viện để hiển thị tương tác với liệu đồ Bên cạnh đó, Google cịn hỗ trợ việc triển khai ứng dụng web với mơ hình điện tốn đám mây thông qua công cụ Google App Engine Với tham gia tích cực Google, chắn trào lưu công nghệ kinh doanh vô sơi động mang lại lợi ích to lớn Tuy nhiên, ứng dụng Google Việt Nam tương đối chưa 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 trang cung cấp thông tin du lịch Về phần GWT, trình nghiên cứu, em thấy mạnh lĩnh vực xây dựng website quản lý Vì vậy, sau thời gian thực tập Công ty VietSoftware Internationl Em định chọn đề tài cho đồ án tốt nghiệp là: “Tìm hiểu cơng nghệ Google Web Toolkit ” Trong báo cáo này, em giới thiệu trước hết cơng nghệ GWT, sau ứng dụng cơng cụ GWT vào xây dựng ứng dụng web thực tế Đồ án gồm phần : - Phần I: Tổng quan GWT - Phần II : So sánh GWT với 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 Client-Server - Phần V : Xây dựng demo sử dụng công nghệ GWT Với trình độ, kinh nghiệm kĩ cịn hạn chế nên đồ án khơng tránh khỏi thiếu sót Em mong nhận bảo, góp ý thầy cô giáo bạn Hi vọng rằng, thông qua đồ án với bảo thầy cô giáo bạn em hồn thiện ứng dụng SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) MỤC LỤC LỜI CẢM ƠN LỜI MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ GOOGLE WEB TOOLKIT 1.1 Thảo luận trình biên dịch Java thành JavaScript 1.2 Sử dụng JSNI thực thi mã JavaScript từ Java 1.3 1.4 Truy cập đến thư viện JRE emulation Tìm hiểu thư viện widget GWT 1.5 1.6 Gọi thủ tục từ xa với GWT Công cụ xử lý XML GWT 10 CHƯƠNG 2: SO SÁNH GWT VỚI CÁC CÔNG NGHỆ KHÁC 11 2.1 GWT với Swing 11 2.2 GWT với Echo2 13 2.3 GWT với JavaServer Faces 14 2.4 GWT với Ruby on Rails 15 CHƯƠNG 3: XÂY DỤNG GIAO DIỆN NGƯỜI DÙNG VỚI GWT 17 3.1 Làm việc với Widget 17 3.1.1 Widget gì? 17 a Sử dụng Widget đối tượng Java 17 b Xem xét widget phần tử DOM 19 3.1.2 Tiêu chuẩn GWT Widget 19 a Tương tác với Widget 21 b Hiển thị văn vào ứng dụng 25 3.2 Làm việc với Panel 26 3.2.1 Panel gì? 26 a Sử dụng Panel đối tượng Java 26 b Xem xét Panel phần tử DOM 27 3.2.2 Tiêu chuẩn GWT Panel 28 a Tương tác với Panel đơn giản 29 b Xem xét với Panel phức tạp 32 3.3 Xử lý kiện 33 3.3.1 Khám phá kiện 33 3.3.2 Lắng nghe kiện 35 a Sự kiện chìm 36 b Quản lý kiện bị đánh chìm với phương thức onBrowserEvent 36 SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) 3.3.3 Xử lý kiện trình duyệt tiêu chuẩn 37 a Nhấp xung quanh 37 b Tải hình ảnh 38 c Sự kiện thay đổi kích cỡ cửa sổ 38 CHƯƠNG 4: CÔNG NGHỆ GIAO TIẾP GIỮA CLIENT – SERVER 39 4.1 Giao tiếp với GWT – RPC 39 4.1.1 Khái niệm RPC 39 4.1.2 Thực GWT – RPC 40 4.2 a Tìm hiểu đối tượng liệu Serializable 40 b Xác định dịch vụ GWT – RPC 41 c Gọi dịch vụ máy chủ từ xa 43 Kiểm tra kiến trúc client – side RPC 43 4.2.1 Cơ cấu lại mã khách hàng 43 a Đóng gói thành phần Server Status 44 b úng gúi cuc gi t xa Faỗade 45 4.2.2 Kiểm tra kỹ thuật bỏ phiếu khác 45 4.3 a Kỹ thuật giao tiếp server push client pull 46 b Thực thành phần liên tục cập nhật 46 Hình thức Ajax cổ điển HTML 47 4.3.1 Ajax cổ điển với RequestBuilder 47 a Kiểm tra phương thức HTTP 48 b RPC đơn giản với RequestBuilder 49 4.3.2 Các vấn đề FormPanel 50 a Giới thiệu FormPanel 50 b Lắng nghe kiện FormPanel 51 CHƯƠNG 5: XÂY DỰNG DEMO MINH HỌA SỬ DỤNG CÔNG NGHỆ GOOGLE WEB TOOLKIT 53 5.1 Công cụ môi trường 53 5.2 Các bước tiến hành 53 KẾT LUẬN 57 TÀI LIỆU THAM KHẢO 58 SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) CHƯƠNG TỔNG QUAN VỀ GOOGLE WEB TOOLKIT Vào khoảng tháng 5/2006, Google xuất Google Web Toolkit (GWT), tập hợp công cụ phát triển, tiện ích lập trình widget giúp tạo ứng dụng web theo cách mà trước chưa làm Sự khác biệt GWT Framework khác với GWT viết ứng dụng phía trình duyệt ngơn ngữ Java thay JavaScript Điều có nghĩa, ngồi việc thuận lợi thay ngơn ngữ JavaScript Java sử dụng cơng cụ phát triển Java mà có sẵn Eclipse, Junit, Netbean… Thay phải cố gắng xây dựng công cụ để phát triển ứng dụng phía trình duyệt JavaScript Phần cốt lõi GWT trình biên dịch Java – To – JavaScript tương thích với Internet Explorer, Firefox, Mozilla, Safari Opera Trình biên dịch chuyển cấu trúc Java sang JavaScript, cho phép sử dụng lớp gói util Vector, Hashmap, Date GWT bao gồm nhiều widget panel để giúp cho việc xây dựng ứng dụng web mà giống ứng dụng desktop Thư viện widget bao gồm: text boxes, drop – down menus, form fields khác Thêm vào bao gồm 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ụ cách tương tác đối tượng JavaScript XMLHttpRequest, đối tượng đồng hành với việc giao tiếp không đồng Ajax, cho phép kết nối trình duyệt server mà khơng cần làm trang giống trang HTML truyền thống Một công cụ khác cung cấp GWT tập hợp lớp thao tác định dạng tin nhắn Json, định dạng biết đến với tính đơn giản thơng dụng Đặc biệt GWT cịn cho phép gửi đối tượng Java Server mà không cần định dạng tin nhắn trung gian GWT cho phép giao tiếp với dịch vụ phía server viết ngơn ngữ (VD: php, Java…) Ngồi cịn tích hợp với Framework Java khác Java - Server Faces (JSF), Spring, Structs, Enterprise JavaBeans (EJBs) Tính mềm dẻo GWT cho phép tiếp tục sử dụng cơng cụ phía server mà sử dụng SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) GWT cung cấp tập hợp công cụ tập trung giải vấn đề xây dựng ứng dụng web ứng dụng desktop bao gồm tập hợp nhiều widget nhiều công cụ khác Hộp công cụ GWT cung cấp XML parser, công cụ khác giao tiếp với Server, quốc tế hóa ứng dụng cơng cụ cấu hình, hệ thống quản lý lịch sử trình duyệt 1.1 Thảo luận trình biên dịch Java thành JavaScript Để hiểu rõ GWT cung cấp tìm hiểu mà định nghĩa là: trình biên dịch Trình biên dịch GWT làm nhiệm vụ chuyển mã nguồn Java thành JavaScript, tương tự trình biên dịch Java chuyển mã nguồn Java thành bytecode Để biên dịch chương trình GWT chạy chương trình javacom.google.gwt.dev.GWTCompiler, truyền vào cho vị trí module số tham số khác Một module bao gồm tập hợp lớp File Java có liên quan với file cấu hình đơn giản Đặc trưng module lớp entry point, lớp mà thực thi dự án bắt đầu Trình biên dịch bắt đầu biên dịch lớp entry point với 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 Java khơng biên dịch thứ module mà biên dịch sử dụng lớp entry point Trình biên dịch có ba cách để xuất mã nguồn JavaScript - Cách mặc định “obfuscate” (xáo trộn) làm cho mã nguồn JavaScript khó đọc, khơng có khoảng cách câu lệnh, trơng giống đoạn bị mã hóa gần đọc Cách giúp chống lại kẻ trộm mã nguồn làm cho kích thước file JavaScript nhỏ nhiều Nó hữu ích cho ứng dụng lớn - Cách thứ hai “pretty” (xinh đẹp), cách tạo mã nguồn đọc Nó lại giữ mã nguồn Java gốc cách “xáo trộn” - Cách cuối “detailed” (chi tiết), tạo mã nguồn JavaScript giống cách thứ hai thêm tên lớp phần tên phương thức JavaScript Làm dễ dàng theo dõi mã nguồn JavaScript 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 thực thi mã nguồn JavaScript từ Java thực thi mã nguồn Java từ JavaScript JSNI cho phép bạn thực SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) gọi JavaScript trực tiếp từ mã Java máy khách GWT Điều thực thi trình biên dịch GWT, chúng kết hợp mã JavaScript mà nhúng vào với mã nguồn JavaScript mà tạo từ Java Đây ví dụ đơn giản nó: public native int addTwoNumbers (int x, int y) /*-{ var result = x + y; return result; }-*/; Trong Java, khai báo phương thức native để thơng báo cho trình biên dịch biết phương thức cài đặt ngôn ngữ khác Theo tài liệu lập trình Java khai báo phương thức native không cho phép xác định đoạn mã cài đặt định nghĩa phương thức Khi xem đoạn mã thấy đoạn code bên phương thức chứa ký hiệu thích nhiều dịng Bên thích mã nguồn JavaScript nhúng vào Khi phương thức thực thi đoạn mã thi hành Điều 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 cung cấp đoạn JavaScript mà trình biên dịch GWT dùng để thực thi gọi phương thức 1.3 Truy cập đến thư viện JRE emulation Vấn đề đặt là, sử dụng lớp gói JRE vào dự án khơng, trình biên dịch GWT có hiểu biên dịch chúng thành JavaScript không hay sử dụng vùng API mà GWT cung cấp Câu trả lời có giới hạn vài lớp gói java.lang java.util Bảng 1.1 bảng 1.2 cho lớp mà sử dụng ứng dụng GWT Hãy xem cẩn thận có số chi tiết quan trọng bỏ qua ví dụ java.util.Date hỗ trợ java.util.Calendar cơng cụ định dạng ngày tháng khác khơng Bảng 1.1: Lớp java.lang.* có sẵn GWT Classes Boolean Byte Character Class Double Float Integer Long Math Number Object Short SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) String StringBuffer System Exceptions/Errors AssertionError ArrayStoreException ClassCastException Exception Error IllegalArgument-Exception IllegalStateException IndexOutOfBounds- NegativeArraySize- Exception Exception NumberFormatException RuntimeException NullPointerException StringIndexOutOfBounds- Throwable UnsupportedOperatio- Exception Exception Interfaces CharSequence Cloneable Comparable Bảng 1.2: Lớp java.util.* có sẵn GWT Classes AbstractCollection AbstractList AbstractMap AbstractSet ArrayList Arrays Collections Date HashMap LinkedHashMapa ListIteratora HashSet SortedMapa Stack TreeMapa Vector Exceptions/Errors EmptyStackException NoSuchElementException TooManyListenersExcept -ion Interfaces Collection Comparator EventListener Iterator List Map RandomAccess Set (a Mục tiêu bao gồm phát hành 1.4 GWT) SV: Phạm Thị Như Quỳnh Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) a Đóng gói thành phần Server Status Bước việc xây dựng thành phần xây dựng bố trí hình ảnh thành phần sau định lớp widget phải mở rộng Đối với thành phần Server Status, hình 4.3 cho thấy cấu trúc mong muốn kết theo kiểu HTML Các thành phần Server Status VerticalPanel với bốn thành phần Ngăn bên thành phần tình trạng máy chủ tiêu đề Bạn sử dụng nhãn cho điều này, với CSS bạn làm bật Hình 4.3: Cấu trúc thành phần Server Status thành phần hồn thành Thành phần thứ hai bạn sử dụng thành phần Grid để hiển thị số liệu thống kê máy chủ bạn lấy thông qua RPC Grid bao gồm hai cột hàng để giữ năm nhãn năm giá trị liệu Các nhãn này, Server Name Total Memory, bổ sung vào lưới điện văn gốc Các giá trị khác, thành phần Label riêng biệt, bạn cập nhật giá trị cách sử dụng phương thức setText() thành phần Label Bạn thiết lập văn trực tiếp lưới , cách cung cấp ví dụ Label đặt tên cho giá trị mã, mã từ tư liệu, làm cho dễ dàng để hiểu trì Ở thành phần Server Status thành phần cập nhật Button, sử dụng để tự cập nhật số liệu thống kê, Label để thời gian qua giá trị cập nhật Đó ý định thành phần sử dụng số loại chế bỏ phiếu để cập nhật định kỳ, nút cập nhật hướng dẫn sử dụng sử dụng để buộc cập nhật sớm Cuối thu phiên gần hoàn thiện SV: Phạm Thị Như Quỳnh 44 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) Hình 4.4: Một phiên gần hồn chỉnh ví dụ thành phần Server Status b Đóng gúi cuc gi t xa Faỗade Mụ hỡnh Faỗade cách cung cấp giao diện cấp cao để làm cho hệ thống phụ dễ dàng sử dụng Trong trường hợp này, bạn muốn để đóng gói tất logic RPC vào lớp cung cấp giao diện đơn giản cần thực điều sau đây: - Giảm độ phức tạp cách giảm số lượng lớp bạn cần phải tương tác - Thúc đẩy khớp nối yếu, cho phép bạn thay đổi chế RPC mà không ảnh hưởng đến khách hàng 4.2.2 Kiểm tra kỹ thuật bỏ phiếu khác Bạn thường xuyên phải giữ liên lạc với máy chủ thông qua gọi RPC để giữ cho khách hàng cập nhật Điều thường để thơng báo cho trình duyệt khách hàng số kiện xuất email, tin nhắn trò chuyện Giải pháp để thăm dò ý kiến máy chủ Điều thực cách liên lạc với máy chủ thông qua RPC cách thường xuyên, chẳng hạn năm phút lần Một số ứng dụng đòi hỏi phải cập nhật thường xuyên gần với thời gian thực tốt Trong phần này, khám phá chức GWT cho nhiệm vụ lập kế hoạch kiểm tra kỹ thuật bỏ phiếu khác SV: Phạm Thị Như Quỳnh 45 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) a Kỹ thuật giao tiếp server push client pull Kỹ thuật giao tiếp chia thành hai loại: server push client pull Push máy chủ đẩy nội dung cho khách hàng, pull khách hàng yêu cầu liệu từ máy chủ khác biệt hai loại người bắt đầu yêu cầu  Kiểm tra server push Bạn sử dụng server push hàng ngày bạn gửi email tin nhắn Ví dụ, bạn gửi email, bạn gửi đến máy chủ mail, mail đẩy đến máy chủ mail Cũng với tin nhắn tức thời, tin nhắn đẩy đến người nhận Bằng cách đẩy liệu cho khách hàng, bạn có nhiều lượng khách hàng, nguồn tài ngun máy chủ khơng có băng thơng sử dụng bạn có để gửi Với quy mơ bạn dễ dàng hỗ trợ số lượng khách hàng với chương trình tương đối dễ dàng  Kiểm tra client pull Client pull tên khác cho trình tự đáp ứng yêu cầu tiêu chuẩn sử dụng trình duyệt Khi bạn đến URL với trình duyệt bạn, bạn yêu cầu trang từ máy chủ nói cách khác, kéo trang từ máy chủ Kỹ thuật hữu ích có chậm trễ thao tác kiện nhận kiện chấp nhận Client pull có thách thức riêng Bởi có chậm trễ việc gửi nhận kiện, bạn thường cần phải xếp hàng liệu máy chủ, chờ đợi cho khách hàng để kiểm tra Ví dụ, bạn viết ứng dụng chat cách sử dụng kéo khách hàng, máy chủ cần phải lưu trữ tin nhắn chưa gửi cho người sử dụng người dùng lấy tin nhắn b Thực thành phần liên tục cập nhật Trong phần này, xem xét lại thành phần Server Status cho phép định kỳ cập nhật Để làm điều này, bạn thêm khả thiết lập tỷ lệ làm cho liệu, thêm khả thay đổi ngừng việc tự động cập nhật Khi làm vậy, chúng tơi cần phải nhìn vào lớp Timer GWT, cho phép bạn kích hoạt kiện theo thời gian Lớp Timer tìm thấy gói com.google.gwt.user.client Nó cung cấp constructor khơng có đối số số phương thức Các phương thức chữ ký sau: public abstract class Timer { SV: Phạm Thị Như Quỳnh 46 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) public abstract void run(); public void schedule(int milliseconds); public void scheduleRepeating(int milliseconds); public void cancel(); } Để kích hoạt kiện hẹn giờ, bạn cần phải thiết lập kiện thời gian với phương thức schedule() kiện định kỳ với phương thức scheduleRepeating() Trong trường hợp schedule(), bạn định số mili giây chờ đợi trước thực phương thức run() Phương thức scheduleRepeating() có số mili giây tham số, liên tục thực phương thức run() Run() bắt đầu thực số mili giây định sau liên tục tái phát khoảng thời gian Phương thức cancel(), tên gọi nó, cho phép bạn ngăn chặn đếm thời gian Một dừng lại, bạn bắt đầu lại lần cách gọi hai phương thức schedule() scheduleRepeating() 4.3 Hình thức Ajax cổ điển HTML Tại tìm hiểu hai công cụ: RequestBuilder FormPanel Cả hai truyền liệu đến máy chủ, đó, câu hỏi công cụ tốt ? Nếu bạn cần phải gửi yêu cầu liệu từ máy chủ mà khơng cần trình bày hình thức cho người sử dụng lựa chọn RequestBuilder tốt RequestBuilder dễ sử dụng xử lý lỗi tốt, cho phép truy cập vào mã trạng thái máy chủ, xử lý lỗi cách thích hợp RequestBuilder cho phép thiết lập thời gian chờ yêu cầu hủy bỏ, thiết lập sửa đổi tiêu đề gửi đến máy chủ FormPanel gửi liệu đến máy chủ cách gói chức có mẫu HTML tìm thấy trình duyệt web Điều làm cho hữu ích muốn gửi liệu mà người dùng cung cấp đến máy chủ, nơi mà liệu gửi thơng qua hình thức Trong cách xử lý RequestBuilder làm việc, xử lý kiện đăng ký với FormPanel để lắng nghe hình thức kiện Sau hồn thành, kết trả máy chủ gửi đến khung ẩn, đọc mã, cho phép cung cấp thông tin phản hồi cho người dùng phản ứng máy chủ 4.3.1 Ajax cổ điển với RequestBuilder Đối tượng XMLHttpRequest công cụ mà phần trình duyệt đại, liên quan với JavaScript Đối tượng XMLHttpRequest cho phép SV: Phạm Thị Như Quỳnh 47 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) bạn lấy nội dung từ URL từ xa xử lý phản ứng lập trình Lợi ích việc tải nội dung theo cách mà bạn sử dụng mã để giao tiếp với máy chủ mà không cần phải làm trang web, làm cho ứng dụng web bạn cảm thấy giống ứng dụng máy tính để bàn dễ dùng Cơ chế GWT – RPC mà bạn tìm hiểu cơng cụ cao cấp xây dựng đầu trang đối tượng Chúng ta bắt đầu thảo luận với tổng quan HTTP khác biệt GET POST Điều cung cấp tảng cho việc khám phá RequestBuilder Sau qua giao thức truyền thông, kiểm tra lớp RequestBuilder RequestBuilder cung cấp giao diện đơn giản với mặc định hợp lý cho việc thực gọi từ xa đến máy chủ mà không bị khả làm thay đổi chi tiết cấp thấp yêu cầu bạn cần Điều bao gồm khả thay đổi yêu cầu làm thêm tiêu đề HTTP xác định thời gian chờ a Kiểm tra phương thức HTTP Khi bạn tải trang web vào trình duyệt bạn, Hypertext Transport Protocol (HTTP) sử dụng để giao tiếp giao dịch HTTP liên quan đến yêu cầu đáp ứng Trình duyệt gửi yêu cầu đến máy chủ, đáp ứng gửi từ máy chủ lại cho trình duyệt Mỗi yêu cầu HTTP liên quan đến việc phát hành lệnh đến máy chủ bao gồm tên phương thức URL, tiêu đề cặp tên – giá tri, có khả có tin nhắn Có nhiều phương thức, với GWT, cần tập trung vào GET POST, phương thức hỗ trợ GWT Cả hai GET POST sử dụng để gửi liệu đến máy chủ, cách thực điều khác b Phân tích phương thức GET HTTP Lệnh GET gửi tất liệu phần URL Trước tìm hiểu chi tiết cụ thể, nhìn vào URL ví dụ, URL sử dụng để thực tìm kiếm Google cho "GWT": http://www.google.com/search?hl=en&q=GWT&btnG=Google%2Bsearch Khi trình duyệt bạn gửi yêu cầu URL tới google.com, gửi tin nhắn GET sau cách sử dụng HTTP: GET /search?hl=en&q=GWT&btnG=Google%2BSearch HTTP/1.1 Host: www.google.com URL nguyên vẹn, ngoại trừ tên máy chủ thêm vào tiêu đề Cho rõ ràng, bao gồm tiêu đề chủ, bạn sử dụng số lượng cặp tên – giá trị bổ sung để xác định thơng tin trình duyệt bạn SV: Phạm Thị Như Quỳnh 48 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) Phần quan trọng phần truy vấn URL Một dấu hỏi phân biệt truy vấn từ đường, chứa cặp tên/giá trị Các cặp tên/giá trị phân cách ampersands (&), cặp cá nhân sử dụng dấu (=) để tách tên khỏi giá trị c So sánh phương thức GET POST Phương thức POST thường sử dụng cho hình thức HTML, nơi có nhiều liệu cần truyền Phương thức POST khác với phương thức GET việc làm gửi liệu đến máy chủ Thay bao gồm liệu phần truy vấn URL, sử dụng body thơng điệp HTTP Trong HTTP, lệnh tiêu đề tách từ body với dòng trống Khi nhìn GET, chúng tơi đưa truy vấn đơn giản đến máy chủ web Lần này, chúng tơi nhìn vào truy vấn, gửi qua POST: POST /search HTTP/1.1 Host: www.google.com Content-type: application/x-www-form-urlencoded Content-length: 32 hl=en&q=GWT&btnG=Google%2BSearch d RPC đơn giản với RequestBuilder Lớp RequestBuilder cho phép bạn gọi URL đăng ký xử lý để nhận kết Xử lý hoạt động tương tự cách làm việc với GWT – RPC, ngoại trừ việc bạn gửi nhận liệu văn Bất kỳ liệu khơng phải hình thức văn bản, giá trị ngày, phải chuyển đổi sang văn liệu gửi Các liệu gửi cách GET POST, hàm URL – mã hóa liệu sử dụng GET, vói POST, bạn vượt qua loại liệu dựa văn Đối với hai GET POST, bạn định tên người dùng mật để truy cập tài nguyên máy chủ mà bạn yêu cầu Trong hầu hết trường hợp, bạn khơng cần làm điều này, cung cấp có nhu cầu RequestBuilder nằm gói com.google.gwt.http.client, phần model HTTP RequestBuilder phải khởi tạo để sử dụng Constructor có hai tham số: phương thức URL Phương thức hai số tĩnh: RequestBuilder.GET RequestBuilder.POST SV: Phạm Thị Như Quỳnh 49 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) 4.3.2 Các vấn đề FormPanel Một kỹ thuật phổ biến để tạo khung nội tuyến ẩn cho việc gửi nhận liệu Bạn gửi liệu cách tải nội dung vào khung nội tuyến thông qua JavaScript, qua thông số thông qua chuỗi truy vấn đến máy chủ Sau nạp khung nội tuyến, bạn kiểm tra nội dung trang ẩn để xem trả lại FormPanel sử dụng kỹ thuật phép hình thức trình tiêu chuẩn trả lại phản ứng với ứng dụng bạn mà không làm trang FormPanel sử dụng tốt bạn muốn trình bày tập hợp điều khiển đầu vào cho người dùng liệu mẫu lệnh gửi đến máy chủ để xử lý Bạn sử dụng GWT – RPC RequestBuilder, làm địi hỏi mã nhiều để có hiệu tương tự a Giới thiệu FormPanel Hình thức HTML bao gồm yếu tố , bên form controls Mỗi control đặt tên để xác định Ví dụ, mẫu đăng ký sử dụng tên FullName, streetAddress, cityState, PhoneNumber Hầu hết hình thức bao gồm nút gửi gửi liệu đến máy chủ Thuộc tính phương thức xác định loại tin nhắn HTTP nên sử dụng để gửi liệu đến máy chủ, POST GET Các hình thức ví dụ vừa mô tả trông giống ví dụ mã sau trang HTML: Khi người dùng nhấp vào nút submit, tạo liệu gửi đến máy chủ Quy tắc kiểm soát bên yếu tố hình thức gửi đến URL định hành động Bởi có điều khiển bên yếu tố hình thức gửi đi, bạn có nhiều hình thức trang Ví dụ có hình thức tìm kiếm hình thức đăng ký trang với hai hành động khác FormPanel làm việc cách: Khi bạn gửi FormPanel, gửi liệu cho tất điều khiển chứa thành phần Hình 4.5 cho thấy mối quan hệ điều khiển container FormPanel SV: Phạm Thị Như Quỳnh 50 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) Hình 4.5: Một đại diện trực quan mối quan hệ control FormPanel mà có b Lắng nghe kiện FormPanel FormPanel cho phép bạn đăng ký kiện nghe viết mã xử lý cho kiện tiếp xúc Hai kiện việc nộp mẫu đơn hoàn thành nộp: form.addFormHandler(new FormHandler() { public void onSubmit(FormSubmitEvent event) { // } public void onSubmitComplete(FormSubmitCompleteEvent event) { // } }); Việc xử lý onSubmit() kích hoạt trước trình hình thức, cho phép bạn xác nhận hình thức chí hủy bỏ Để hủy bỏ, bạn gọi phương thức setCancelled (true) đối tượng kiện truyền Ở bạn thêm mã xác nhận phương thức onSubmit() từ ví dụ trước xác minh người sử dụng cung cấp tên họ: public void onSubmit(FormSubmitEvent event) { if (fullName.getText().length() == 0) { Window.alert("You must enter your name"); event.setCancelled(true); return; } } SV: Phạm Thị Như Quỳnh 51 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) Nếu phương thức onSubmit() trả mà không cần thiết lập cờ bị hủy bỏ, biểu mẫu gửi đến máy chủ Các FormPanel theo mặc định quy định cụ thể mục tiêu biểu mẫu để có khung ẩn Bằng cách này, thị trình duyệt để tải phản ứng máy chủ vào khung ẩn thay cửa sổ trình duyệt Khi đáp ứng trả từ máy chủ, phương thức onSubmitComplete() gọi, thơng qua đối tượng FormSubmitCompleteEvent Đối tượng có phương thức getResul() trả nội dung máy chủ SV: Phạm Thị Như Quỳnh 52 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) CHƯƠNG XÂY DỰNG DEMO MINH HỌA SỬ DỤNG CƠNG NGHỆ GOOGLE WEB TOOLKIT 5.1 Cơng cụ mơi trường - Công cụ: Eclipse - Cơ sở liệu: MySQL - Server: Tomcat 7.0 - Framework: GWT 5.2 Các bước tiến hành Bước 1: Tạo Project Bước 2: Tạo bảng liệu để lưu trữ My SQL Ở ta sử dụng lệnh viết Eclipse để tạo bảng Chúng ta tạo bảng giao diện MySQL Bước 3: Thiết kế ứng dụng - Ứng dụng web động - Cho phép người quản trị thêm, sửa, xóa nhóm dịch vụ, dịch vụ người quản trị đăng nhập vào hệ thống - Hiện thị thơng tin Nhóm dịch vụ, Dịch vụ, Khách Hàng - Sử dụng bắt lỗi tất lỗi xảy ra, chẳng hạn : khơng lựa chọn Nhóm dịch vụ Tỷ giá bảng dịch vụ… Bước 4: Thiết kế giao diện người dùng - Khi server bắt đầu chạy Form Đăng Nhập yêu cầu đăng nhập vào hệ thống tài khoản có sở liệu SV: Phạm Thị Như Quỳnh 53 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) - Nếu tài khoản không thông báo đăng nhập sai, yêu cầu đăng nhập lại - Nếu đăng nhập thành cơng giao diện hệ thống dịch vụ với Tab Panel : Giới thiệu, Dịch vụ, Khách Hàng, Hóa Đơn - Tab Giới thiệu có giao diện sau - Bên Tab Dịch vụ có lựa chọn : Nhóm dịch vụ dịch vụ + Nếu lựa chọn Nhóm dịch vụ người quản trị thêm, sửa, xóa nhóm dịch vụ Với giao diện nhóm dịch vụ sau: SV: Phạm Thị Như Quỳnh 54 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) + Nếu lựa chọn Dịch vụ cho phép người quản trị thêm, sửa, xóa dịch vụ Với giao diện nhóm dịch vụ sau: - Trong Tab Khách Hàng, người quản trị Thêm khách hàng có khách hàng đến đăng ký dịch vụ… Người quản trị Sửa Xóa khách hàng cần thiết SV: Phạm Thị Như Quỳnh 55 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP - Tìm hiểu cơng nghệ Google Web Toolkit (GWT) Sau khách hàng đăng ký thông tin sử dụng dịch vụ, hệ thống lấy thông tin khách hàng nhập sang bảng hóa đơn - Sau sử dụng xong hệ thống Thốt ngồi nút Logout, hệ thổng quay trở trang Đăng Nhập SV: Phạm Thị Như Quỳnh 56 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) KẾT LUẬN Do thời gian có hạn nên sản phẩm đặt ban đầu em đồ án chưa hoàn chỉnh, nhiên qua đồ án chúng em đạt số thành định việc học tập nghiên cứu, hi vọng sản phẩm áp dụng vào thực tế Kết đạt GWT khơng phù hợp với nhu cầu người, GWT thành tựu kỹ thuật lớn xứng đáng xem xét nghiêm chỉnh bạn thiết kế ứng dụng Ajax Qua trình thực đồ án, em học hỏi nhiều kiến thức bổ ích cách thức giải tốn cụ thể, khả tìm hiểu cơng nghệ, đặc biệt việc củng cố kiến thức môn chuyên ngành học, cụ thể: - Kiến thức công nghệ: việc sử dụng ngôn ngữ lập trình Java cho việc lập trình web - Kiến thức “Phân tích thiết kế hệ thống”: q trình tiếp cận tốn, kĩ khảo sát trạng xác lập toán, kĩ phân tích hệ thống chức năng, liệu, kĩ thiết lập hệ thống… - Ứng dụng chạy Web, khắc phục hạn chế ứng dụng desktop thơng thường, chạy trình duyệt với tốc độ cao Hạn chế Do thời gian thực đồ án có hạn nên đề tài cịn nhiều hạn chế như: chưa xây dựng đủ chức hệ thống quản lý Spa chưa sử dụng hết điểm mạnh công nghệ GoogleWeb Toolkit vào đồ án Giao diện trang web chưa trang trí theo yêu cầu ban đầu Hướng phát triển Sẽ phát triển hệ thống quản lý Spa cách hoàn chỉnh với đầy đủ chức năng, tận dụng tối đa công cụ thư viện mà Google Web Toolkit hỗ trợ SV: Phạm Thị Như Quỳnh 57 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu cơng nghệ Google Web Toolkit (GWT) TÀI LIỆU THAM KHẢO Tiếng Anh [1] GWT In Action – by Robert Hanson Adam Tacy [2] Pro web 2.0 Application Development with GWT – by Jeff Dwyer [3] Taking the Pain Out of Ajax [4] Google Web Toolkit Applications [5] GWT Java Ajax Programming [6] Getting started with Google Web Toolkit (GWT) - by Ed Burnette [7] Getting Started With The Google Web Toolkit - by David Salter TrangWeb [1] GWT homepage: http://code.google.com/webtoolkit [2] Wikipedia: http://en.wikipedia.org/wiki/Google_Web_Toolkit [3] Google: http://www.google.com [4] http://code.google.com/webtoolkit [5] http://gwt-guide.blogspot.com SV: Phạm Thị Như Quỳnh 58 Lớp 49K - Khoa CNTT ... Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) CHƯƠNG TỔNG QUAN VỀ GOOGLE WEB TOOLKIT Vào khoảng tháng 5/2006, Google xuất Google Web Toolkit (GWT), tập hợp cơng cụ phát... NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) LỜI MỞ ĐẦU Về mặt công nghệ, Internet website trở thành phần thiếu công nghệ thông tin Cùng với phát triển mạng lưới hạ tầng mạng, nhiều công nghệ. .. NGHIỆP Tìm hiểu công nghệ Google Web Toolkit (GWT) GWT cung cấp tập hợp công cụ tập trung giải vấn đề xây dựng ứng dụng web ứng dụng desktop bao gồm tập hợp nhiều widget nhiều công cụ khác Hộp công