Đăng ký Đăng nhập
Trang chủ Tìm hiểu về công nghệ google web toolkit (gwt)...

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

.DOC
60
647
89

Mô tả:

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 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 1 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 2 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..................................................................................................................1 LỜI MỞ ĐẦU..................................................................................................................2 CHƯƠNG 1: TỔNG QUAN VỀ GOOGLE WEB TOOLKIT..................................5 1.1 Thảo luận về trình biên dịch Java thành JavaScript.......................................6 1.2 Sử dụng JSNI thực thi mã JavaScript từ Java.................................................6 1.3 Truy cập đến thư viện JRE emulation...............................................................7 1.4 Tìm hiểu về thư viện và widget của GWT.........................................................9 1.5 Gọi thủ tục từ xa với GWT.................................................................................9 1.6. Công cụ xử lý XML của 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 là gì?.........................................................................................................17 a. Sử dụng Widget như một đối tượng Java..........................................................17 b. Xem xét widget như các phần tử DOM.............................................................19 3.1.2 Tiêu chuẩn GWT Widget.......................................................................................19 a. Tương tác với các Widget cơ bản.................................................................21 b. Hiển thị văn bản vào ứng dụng.....................................................................25 3.2 Làm việc với Panel.............................................................................................26 3.2.1 Panel là gì?...........................................................................................................26 a. Sử dụng Panel như một đối tượng Java.......................................................26 b. Xem xét Panel như các phần tử DOM..........................................................27 3.2.2 Tiêu chuẩn GWT Panel........................................................................................28 a. Tương tác với các Panel đơn giản...............................................................29 b. Xem xét với các Panel phức tạp hơn............................................................32 3.3 Xử lý sự kiện.......................................................................................................33 3.3.1 Khám phá các sự kiện..........................................................................................33 3.3.2 Lắng nghe các sự kiện..........................................................................................35 a. Sự kiện chìm................................................................................................36 b. Quản lý sự kiện bị đánh chìm với phương thức onBrowserEvent................36 3.3.3 Xử lý các sự kiện của trình duyệt tiêu chuẩn......................................................37 SV: Phạm Thị Như Quỳnh 3 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) 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 cơ bản về RPC....................................................................................39 4.1.2 Thực hiện GWT – RPC........................................................................................40 a. Tìm hiểu đối tượng dữ liệu Serializable......................................................40 b. Xác định dịch vụ GWT – RPC.....................................................................41 c. Gọi các dịch vụ máy chủ từ xa....................................................................43 4.2 Kiểm tra kiến trúc client – side RPC...............................................................43 4.2.1 Cơ cấu lại các mã khách hàng..............................................................................43 a. Đóng gói thành phần Server Status.............................................................44 b. Đóng gói cuộc gọi từ xa trong Façade........................................................45 4.2.2 Kiểm tra kỹ thuật bỏ phiếu khác nhau.................................................................45 a. Kỹ thuật giao tiếp của server push và client pull.........................................46 b. Thực hiện một thành phần liên tục cập nhật................................................46 4.3 Hình thức Ajax cổ điển và 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 đề cơ bản của FormPanel.......................................................................50 a. Giới thiệu về FormPanel.............................................................................50 b. Lắng nghe sự 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ụ và 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 4 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 5 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 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) 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 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 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) String StringBuffer System Exceptions/Errors AssertionError ArrayStoreException ClassCastException Exception Error IllegalArgument-Exception IllegalStateException IndexOutOfBoundsException NegativeArraySize- NumberFormatException RuntimeException NullPointerException StringIndexOutOfBounds- Throwable Exception UnsupportedOperatioException 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 LinkedHashMapa ListIteratora HashSet SortedMapa Stack TreeMapa Vector Exceptions/Errors EmptyStackException NoSuchElementExceptio n TooManyListenersExcept -ion Collection Comparator EventListener Iterator List Map RandomAccess Set Interfaces (a. Mục tiêu bao gồm trong bản phát hành 1.4 của GWT) 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) 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 những panel là những cái thùng chứa chúng. Hình 1.2 là một ví dụ nhỏ về việc sử dụng các widget và panel. Hình 1.2: GWT với một tập hợp các widget và các panel cho phép bạn nhanh chóng tạo ra một ứng dụng Internet phong phú mà không cần phải lo lắng về chi tiết HTML và JavaScript Menubar là widget được dùng trong đỉnh của trang. Tabpanel là một panel tương tác được sử dụng ở giữa trang hoạt động như một thùng chứa một widget TextArea và một widget Button. Tabpanel và Menubar đều được chứa trong một thùng chứa là AbsolutePanel mà cho phép đặt chính xác vị trí mong muốn. Những widget được cung cấp bởi GWT sẽ tương ứng với một thành phần trong HTML. Ví dụ như: Button, TextBox, TextArea, Checkbox, RadioButton, and FormPanel... Thêm vào đó có 2 kiểu hiển thị thông tin giống bảng trong HTML, nó là 2 lớp con của HTMLTable là Grid và FlexTable. 1.5. Gọi thủ tục từ xa với GWT Hầu hết những ứng dụng GWT đều cần khả năng trao đổi thông tin giữa Client và Server. Ví dụ chúng ta muốn lấy dữ liệu hiển thị cho người dùng xem hoặc người dùng đăng nhập đến ứng dụng, hoặc để tải dữ liệu từ bên ngoài. Những trình duyệt ngày nay có một đối tượng JavaScript đặc biệt được gọi là XMLHttpRequest cho phép 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) 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. Đối tượng JavaScript đặc biệt này là nền tảng để tạo ra kỹ thuật Remote Procedure Calls (RPCs) dựa trên nền tảng của trình duyệt. GWT cung cấp hai công cụ hàng đầu của đối tượng XMLHttpRequest. Đầu tiên là lớp RequestBuilder, lớp này là gói bao ngoài của đối tượng này, mặc dù nó là một phần nhỏ ít được sử dụng như Java thông thường. Công cụ thứ hai là GWT – RPC, nó thì phức tạp hơn và cho phép chúng ta gửi và nhận những đối tượng Java thực sự giữa Client và Server. 1.6. Công cụ xử lý XML của GWT Trong 5 năm qua, XML đã trở thành một phần của cuộc sống hàng ngày của chúng ta cũng như các nhà phát triển ứng dụng. Cấu hình máy chủ Java của chúng ta sử dụng một định dạng XML, RSS nguồn cấp dữ liệu tiêu thụ và cung cấp XML, và thường là các giao thức để chúng ta sử dụng để giao tiếp với các dịch vụ từ xa, như trong trường hợp của SOAP và XML - RPC. Để làm cho nó đơn giản như có thể để giải quyết các định dạng dữ liệu trên trình duyệt của khách hàng, GWT cung cấp Document Object Model (DOM) dựa trên phân tích cú pháp XML. Trình phân tích cú pháp XML dựa trên DOM sử dụng XML và tạo ra một đối tượng cây. Sau đó chúng ta có thể sử dụng API DOM đi qua cây và đọc nội dung của nó. GWT có lợi thế thực sự mà các trình duyệt hiện đại có là khả năng phân tích cú pháp XML và tạo một cây DOM. Bởi vì việc phân tích cú pháp được thực hiện bởi trình duyệt và không bằng GWT, chúng ta sẽ có được hiệu quả của việc thực thi mã nguồn gốc. SV: Phạm Thị Như Quỳnh 10 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) CHƯƠNG 2 SO SÁNH GWT VỚI CÁC CÔNG NGHỆ KHÁC Ví dụ 2.1: Thực hiện sự kiện Button đơn giản trong GWT final TextBox text = new TextBox(); text.setText("text box"); final Button button = new Button(); button.setText("Click Me"); button.addClickListener(new ClickListener() { public void onClick (Widget sender) { text.setText("clicked"); } }); Panel main = new FlowPanel(); RootPanel.get().add(main); main.add(text); main.add(button); Đây là ví dụ đầu tiên của GWT chúng ta nên tham khảo. Khi bạn chạy mã GWT này, nó làm cho một trang HTML với một hộp văn bản và nút; khi nút được nhấn vào, mã thay đổi văn bản trong hộp văn bản. Hãy bắt đầu với Swing, sau là Echo2, JavaServer Faces, và Ruby on Rails. 2.1. GWT với Swing Swing là bộ công cụ tiêu chuẩn để xây dựng các ứng dụng giao diện trong Java. Chúng ta đang so sánh Swing và GWT vì hai khuôn khổ là tương tự như cách bạn viết mã cho chúng. Ta xem ví dụ của Swing. Ví dụ 2.2: final JTextField text = new JTextField(); SV: Phạm Thị Như Quỳnh 11 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) text.setText("text box"); final JButton button = new JButton(); button.setText("Click Me"); button.addActionListener(new ActionListener() { public void actionPerformed (ActionEvent e) { text.setText("clicked"); } }); final JFrame rootPanel = new JFrame(); Panel main = new Panel(); rootPanel.getContentPane().add(main); main.add(text); main.add(button); rootPanel.setVisible(true); rootPanel.pack(); Mã Swing này tương tự như ví dụ tham khảo GWT; thực tế, nó gần như giống hệt nhau. Có một vài thay đổi như: trong GWT ta gọi ClickListener còn trong Swing thì gọi ActionListener. Đối với các nhà phát triển Swing, có một vài khác biệt quan trọng giữa GWT và Swing. Đầu tiên, các thành phần mã của GWT không tuân theo mô hình Model View Controller (MVC): Không có mô hình đối tượng, có thể được chia sẻ bởi nhiều thành phần để giữ cho chúng đồng bộ. Thứ hai, GWT không quản lý sử dụng bố trí để kiểm soát bố trí. Thay vào đó lại sử dụng các panel để xây dựng phong cách bố trí. Ví dụ, HorizontalPanel GWT sắp xếp các thành phần con của nó trái sang phải qua trang, trong khi DockPanel cho phép bạn thêm các widget bảng điều khiển một cách tương tự BorderLayout của Swing. Những sự khác biệt này là khá dễ dàng để làm việc, và GWT là một môi trường khá tốt cho các nhà phát triển Swing. Tiếp theo, chúng ta sẽ xem xét với Echo2, cho phép bạn viết các ứng dụng một cách tương tự như GWT nhưng phải mất một cách tiếp cận khác nhau. SV: Phạm Thị Như Quỳnh 12 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) 2.2. GWT với Echo2 Echo2 là một bộ công cụ web phổ biến, nó tương tự như GWT làm thế nào nó được sử dụng để tạo ra giao diện người dùng. Bạn sử dụng API để tạo ra các trường hợp của các thành phần và sau đó thêm chúng vào màn hình. Ví dụ 2.3 minh họa phiên bản Echo2 của ví dụ tham khảo GWT, hai phiên bản trông gần như giống hệt nhau. Ví dụ 2.3: Thực hiện nút Button trong Echo2 final TextField text = new TextField(); text.setText("text box"); final Button button = new Button(); button.setText("Click Me"); button.addActionListener(new ActionListener() { public void actionPerformed (ActionEvent evt) { text.setText("clicked"); } }); Window window = new Window(); window.setContent(new ContentPane()); Row main = new Row(); window.getContent().add(main); main.add(text); main.add(button); Mặc dù cả hai khuôn khổ sử dụng các API tương tự nhưng chúng làm việc trong một môi trường hoàn toàn khác nhau. Ứng dụng viết cho Echo2 chạy trên máy chủ, không phải là máy khách. Với GWT, bạn biên dịch mã nguồn Java của bạn sang JavaScript và chạy nó trên trình duyệt. Với Echo2, bạn biên dịch mã nguồn Java của bạn để lấy các tập tin lớp Java và chạy chúng trên máy chủ. Điều này cũng có nghĩa là khi một sự kiện phía máy khách được kích hoạt, nó có thể cần phải được xử lý trên máy chủ. SV: Phạm Thị Như Quỳnh 13 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) Hậu quả là một giao diện được xây dựng với Echo2 là cần nhu cầu để các máy chủ hoạt động thường xuyên hơn. Cũng có nghĩa là Echo2 không cần phải gửi tất cả các JavaScript cho trình duyệt cùng một lúc, nó sẽ gửi những gì nó cần cho các nhà phát triển hiện hành của ứng dụng. Cuối cùng, nó gắn liền với cách sử dụng một máy chủ ứng dụng Java bởi vì điều này là cần thiết để lưu trữ một ứng dụng Echo2. 2.3. GWT với JavaServer Faces JavaServer Faces (JSF) là một web framework cho các ứng dụng web dựa trên Java. Nó sử dụng quản lý Java ở trên máy chủ, mà đại diện cho các mô hình, cộng với một tập hợp các thư viện thẻ có thể được sử dụng với một trang JSP để tham khảo các thuộc tính của mô hình. Trong một thực hiện JSF tiêu chuẩn, tất cả các công đoạn được thực hiện trên máy chủ, và tải lại trên trang web cho mỗi giao dịch. Bước đầu tiên trong việc tạo ra một ứng dụng JSF là để tạo ra một lớp đại diện cho các mô hình, như trong ví dụ 2.4. Ví dụ của mô hình là đơn giản, nó chỉ chứa một văn bản được đặt tên. Trong tiêu chuẩn Java bean, bạn làm cho sở hữu tư nhân cho lớp và cung cấp truy cập để nhận và thiết lập giá trị. Bạn cũng cần phải thêm phương thức changeText(), được kích hoạt khi nút lệnh được nhấp. Ví dụ 2.4: package org.gwtbook; public class SampleBean { private String text = "text box"; public String getText () { return text; } public void setText (String text) { this.text = text; } public void changeText () { this.text = "clicked"; SV: Phạm Thị Như Quỳnh 14 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) } } Bước tiếp theo là đăng ký lớp này như là một bean được quản lý trong các tập tin cấu hình JSF (xem ví dụ 2.5). Cung cấp các sampleBean tên cho bean, tên này sẽ được sử dụng để tham chiếu nó trong mã JSP để làm theo. Ví dụ 2.5: Một đoạn của file cấu hình JSF định nghĩa một bean được quản lý sampleBean org.gwtbook.SampleBean request Trang JSP, được hiển thị trong ví dụ sau, trông tương tự như một trang JSP tiêu chuẩn. Nó sử dụng hai thư viện thẻ JSF để xác định xem và điều khiển bạn đang sử dụng. Đối với các giá trị trong thẻ inputText, bạn tham khảo các text của quản lý của bạn bằng cách sử dụng ngôn ngữ biểu hiện JSF. Trong thẻ actionButton bạn nhìn thấy nó một lần nữa. JSF cung cấp rất ít trong cách hỗ trợ cho các chức năng phía máy khách. JSF có thể xây dựng và tái sử dụng thành phần phía máy khách bằng cách thực hiện một số công việc trong JavaScript, nhưng các thành phần tùy chỉnh có giá trị sử dụng lại ít. Bởi vì JSF tích hợp phía khách hàng, đó là cạnh tranh với GWT, nhưng có một số tiềm năng cho việc tích hợp. 2.4. GWT với Ruby on Rails Ruby on Rails là một khuôn khổ phát triển nhanh chóng sử dụng ngôn ngữ Ruby. Nó cung cấp cho phía máy chủ của chương trình và được thiết kế đặc biệt để xử lý rất nhiều công việc trợ giúp tự động cho bạn. Về phía khách hàng, Ruby on Rails cung cấp một số hỗ trợ cho Ajax, cho phép bạn sử dụng tương đương với Java của thư viện thẻ trong mã HTML của bạn. Kết quả cuối cùng là Ruby on Rails có thể gửi dữ liệu đến máy chủ kích hoạt bởi một hành động của người dùng và hiển thị một phản ứng trong trang. Tuy nhiên, nó không được thiết kế phức tạp cho tương tác giữa khách hàng và máy chủ. GWT là khách hàng trung tâm. Nó cho phép bạn phát triển và hiển thị các widget bằng cách sử dụng Java và viết Java xử lý để bẫy người dùng kích hoạt các hành động. GWT có thể giao tiếp với máy chủ khi cần thiết, có thể được thúc đẩy bởi SV: Phạm Thị Như Quỳnh 15 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) sự tương tác của người dùng. Sau đó GWT cho phép bạn biên dịch tất cả các mã Java sang JavaScript để chương trình có thể chạy trong trình duyệt. Trên máy chủ, GWT chỉ cung cấp một cơ chế cho serializing và deserializing đối tượng Java để nó có thể nhận được từ trình duyệt và gửi trở lại, nó không được tham gia vào các khía cạnh khác của máy chủ. SV: Phạm Thị Như Quỳnh 16 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) CHƯƠNG 3 XÂY DỤNG GIAO DIỆN NGƯỜI DÙNG VỚI GWT 3.1. Làm việc với Widget 3.1.1. Widget là gì? Widget là một trong bốn khối xây dựng cơ bản của ứng dụng GWT như là bảng, sự kiện, máy chủ truyền thông (bao gồm cả thủ tục gọi từ xa RPC, JavaScript Object Notation [JSON] và xử lý XML, cũng như không đồng bộ truyền thống JavaScript và XML [Ajax] XMLHttpRequest). Khi một người dùng chạy ứng dụng GWT của bạn, họ đang nhìn vào một tập hợp các widget đã được định vị bằng bảng và phản ứng với các sự kiện. Widget giống như các nút trên bộ điều khiển từ xa đã đề cập trước đó, các thành phần người sử dụng tương tác. Bên cạnh đó, GWT cung cấp miễn phí nhiều widget khác nhau, và bao gồm các đối tượng thông thường: Button, TextBox, CheckBox, textArea… Button CheckBox TextBox PasswordTextBox TextArea a. Sử dụng Widget như một đối tượng Java Mục đích của GWT là để phát triển các ứng dụng Internet phong phú trong Java, và sau đó có các trình biên dịch GWT tạo HTML và JavaScript cần thiết cho các ứng dụng để làm việc trong một loạt các trình duyệt khác nhau. Để đạt được điều này, chúng ta phải có cách để đại diện cho các đối tượng trình duyệt khác nhau, trong các chương trình Java GWT gọi nó là widget. SV: Phạm Thị Như Quỳnh 17 Lớp 49K - Khoa CNTT ĐỒ ÁN TỐT NGHIỆP Tìm hiểu về công nghệ Google Web Toolkit (GWT) Ví dụ, trong một chương trình GWT, bạn muốn sử dụng một đối tượng Java gọi Button. Đối tượng Button này là mô hình khác nhau mà bạn muốn, chẳng hạn như có thể để thiết lập văn bản rõ ràng và nhấn nút. Bạn có thể có tất cả mô hình các thành phần bạn muốn nhìn thấy trong một trình duyệt các widget như đối tượng Java với các phương thức và sự kiện. Trong khi bạn sử dụng lập trình GWT, hãy xem xét tất cả các widget trong hình thức tự nhiên của đối tượng Java. Nút được tạo ra bằng cách xây dựng lớp GWT Java Buttton như sau: Button theButton = new Button("Click Me"); Mã này tạo ra một nút mới mà bạn có thể thực hiện lớp phương thức khác nhau. Các nhiệm vụ được hiển thị trong bảng 3.1 là những hoạt động điển hình bạn có thể thực hiện trên một widget nút GWT. Bảng 3.1: Chức năng mà kết quả từ việc áp dụng một số lớp phương thức Button cho các đối tượng Java Button Code Mô tả Thiết lập Style Sheet Cascading tên lớp (CSS) cho các nút. Một mục nhập tương ứng phải được tìm thấy trong CSS gắn liền với tài liệu web, mặc dù tên của nó phải được bắt đầu bằng một khoảng thời gian: ví dụ, buttonStyle {...}. theButton.setStyleName("buttonStyle"); Thêm một ClickListener (một sự kiện nghe lắng nghe sự kiện nhấn chuột) vào nút này. Khi nút được nhấn vào, các mã trong phương thức onClick() được định nghĩa trong ClickListener được thực thi. theButton.addClickListener( new ClickListener(){ public void onClick(Widget sender){ } }); theButton.setText("Go on, click me"); Thay đổi văn bản hiển thị trên nút từ bản gốc "Go on, lick me ". theButton.setVisible(false); Ẩn nút trên trình duyệt web để nó không còn nhìn thấy được. b. Xem xét widget như các phần tử DOM SV: Phạm Thị Như Quỳnh 18 Lớp 49K - Khoa CNTT
- Xem thêm -

Tài liệu liên quan