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

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à

KHOA CÔNG NGHỆ THÔNG TIN

NGHỆ AN - 2012

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

Nghệ An, tháng 12 năm 2012

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ọcqua 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áchvữ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 VietSoftwareInternationl đã 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, đónggó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ốtnghiệ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

Để đơ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ềntả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êncạ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ạinhữ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êncứ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à ứngdụ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ỏinhữ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ácbạ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ácbạn em sẽ hoàn thiện mình trong các ứng dụng

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

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

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ộttậ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ácbiệt giữa GWT và những Framework khác là với GWT chúng ta viết ứng dụng phíatrì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ằngJavaScript

Phần cốt lõi của GWT là trình biên dịch Java – To – JavaScript tương thích vớiInternet Explorer, Firefox, Mozilla, Safari và Opera Trình biên dịch chuyển các cấutrú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 ứngdụ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ồmnhữ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ếtnố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 HTMLtruyề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 thaotá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ôngcầ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ằngngôn ngữ nào đó (VD: php, Java…) Ngoài ra nó còn có thể tích hợp với cácFramework Java khác như Java - Server Faces (JSF), Spring, Structs, và EnterpriseJavaBeans (EJBs) Tính mềm dẻo này của GWT cho phép chúng ta tiếp tục sử dụngcác công cụ phía server mà chúng ta đang sử dụng

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ựngnhữ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 Javathành JavaScript, cũng tương tự như trình biên dịch Java chuyển mã nguồn Java thànhbytecode Để 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 quancù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èmtheo để 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êndị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êndị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 ứngdụ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ươngthứ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ởitrì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)

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ứatrong ký hiệu chú thích nhiều dòng Bên trong chú thích này là mã nguồn JavaScriptchú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ứcnative 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ự ánkhông, trình biên dịch GWT có hiểu và biên dịch được chúng thành JavaScript khônghay 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

String StringBuffer System

Exceptions/Errors

AssertionError ArrayStoreException ClassCastException

IllegalStateException

IndexOutOfBounds-Exception

Exception

NegativeArraySize-NullPointerException NumberFormatException RuntimeException

AbstractCollection AbstractList AbstractMap

LinkedHashMap a ListIterator a HashSet

Collection Comparator EventListener

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ònnhữ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ụngcá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 trongHTML Ví dụ như: Button, TextBox, TextArea, Checkbox, RadioButton, andFormPanel 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ườidù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

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 trangHTML truyền thống Đối tượng JavaScript đặc biệt này là nền tảng để tạo ra kỹ thuậtRemote 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ữaClient và Server

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ởitrì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

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();

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

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ủ

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áychủ 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áychủ ứ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ênJava 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ớimộ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ácthuộ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ệncho 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ộtvă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)

}

}

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ậptin 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ý

<managed-bean>

<managed-bean-name>sampleBean</managed-bean-name>

<managed-bean-class>org.gwtbook.SampleBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope>

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 Railscung 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áchhà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ácwidget 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áchà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

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ã Javasang 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ạnhkhác của máy chủ

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

Ví dụ, trong một chương trình GWT, bạn muốn sử dụng một đối tượng Java gọiButton Đố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ànhphầ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ácphươ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ìnhthứ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 JavaButtton 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

theButton.setStyleName("buttonStyle");

Thiết lập Style Sheet Cascading tên lớp(CSS) cho các nút Một mục nhậptương ứng phải được tìm thấy trongCSS 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ộtkhoảng thời gian: ví dụ, buttonStyle{ }

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

Trong Java cho phép bạn xây dựng các ứng dụng GWT như bạn muốn, bằngcách sử dụng bất kỳ số lượng các widget và sử dụng các phương thức liên quan đến nó

để xây dựng các chức năng Tuy nhiên, bạn không thể hiển thị các đối tượng Javatrong một trình duyệt web, vì bạn không có một ứng dụng Ajax Đây là nơi mà DOMthay thế đại diện của các widget đi kèm

Document Object Model (DOM) là cách thể hiện các trang web mà bạn nhìnthấy Bạn có thể truy cập và thay đổi DOM bằng cách sử dụng nhiều ngôn ngữ, vànhững tác động của hầu hết các thao tác ngay lập tức hiển thị trên trang trình duyệthiện tại Các thao tác có thể thêm hoặc loại bỏ các yếu tố, che giấu hoặc làm cho cácyếu tố có thể nhìn thấy, hoặc thay đổi vị trí của chúng Trong trường hợp của GWT,thao tác này được thực hiện thông qua JavaScript trong mã biên dịch, nhưng trongchương trình thì chúng ta sử dụng Java

Tất cả các widget GWT có một đại diện DOM thay thế được xây dựng songsong với các đối tượng Java Constuctor Java nói chung là chịu trách nhiệm cho việctạo ra đại diện DOM, nếu bạn nhìn vào chi tiết xây dựng cho lớp Button, bạn sẽ thấyđịnh nghĩa sau đây:

3.1.2 Tiêu chuẩn GWT Widget

GWT phân phối tiêu chuẩn đi kèm với một loạt các widget để sử dụng trong cácứng dụng Những widget này bao gồm các loại mà bạn mong chờ: nút, văn bản, vv…Tuy nhiên, một số widget mà bạn có thể mong đợi lại không thấy, ví dụ, thanh tiếntrình và thanh trượt, mặc dù bạn có thể xây dựng một trong số đó

Trong các thiết lập của widget, các nhà thiết kế của GWT đã thực hiện một hệthống phân cấp mạnh mẽ của các lớp Java để cung cấp một yếu tố nhất quán trên các

widget tồn tại một cách tự nhiên, như widget TextBox, TextArea, và PasswordTextBox.

GWT nhận thực tế này và giữ lại trong một lớp TextBoxBase, mà những widget thừa

hưởng Bạn hãy xem hình 3.1

Bạn có thể thấy trong hệ thống phân cấp này tất cả các widget cuối cùng kế

thừa từ lớp UIObject Trong lớp UIObject, bạn sẽ tìm thấy phương thức setElement(),

mà trước đây chúng ta đã thảo luận về việc sử dụng để thiết lập các liên kết vật lý giữa

một đối tượng Java của widget và DOM views Lớp con của UIObject phải gọi

phương thức này đầu tiên trước khi bất kỳ phương thức nào khác được gọi, để đảmbảo rằng liên kết đến một yếu tố trình duyệt được thiết lập

Chú ý: Tất cả các GWT widget kế thừa từ lớp UIObject Lớp này cung cấp một

tập hợp chung của các phương thức và các thuộc tính cho tất cả các widget, bao gồm

cả kích thước thiết lập, tầm nhìn, và tên phong cách, cũng như cung cấp các liên kếtgiữa các cơ quan đại diện Java và DOM

Hình 3.1: GWT widget - Hệ thống phân cấp lớp

Lớp UIObject cung cấp quyền truy cập vào một loạt các chức năng DOM mà

không cần phải truy cập vào DOM trực tiếp Ví dụ, bạn có thể thiết lập chiều cao của

một UIObject GWT bằng cách sử dụng phương thức setHeight(), và lần lượt sử dụng phương thức setStyleAttribute() từ lớp DOM:

public void setHeight(String height) {

DOM.setStyleAttribute(element, "height", height);

}

Sau UIObject, tất cả các widget (trừ TreeItem và MenuItem) phải kế thừa từ lớp Widget, nó cung cấp các widget-ness của nó, bao gồm cả các phương thức được gọi

khi một widget được gắn hoặc tách ra từ một bảng điều khiển Lớp này cũng bao gồm

việc thực hiện mặc định của phương pháp onBrowserEvent(), cho phép một tiện ích

quản lý bất kỳ sự kiện nào đã ẩn

a Tương tác với các Widget cơ bản

 Sử dụng TextBox để nắm bắt văn bản

 Sử dụng PasswordTextBox để ẩn văn bản

PasswordTextBox giống như TextBox, với một sự khác biệt nhỏ: Bất kỳ ký tự

gõ vào hộp xuất hiện như những ngôi sao hay một vòng tròn để che giấu những nộidung của trường Như tên của nó, thành phần đầu vào này thường được sử dụng chocác lĩnh vực mật khẩu, một người nào đó nhìn qua sẽ không thể đọc những gì bạn

Đoạn sau đây tạo ra một TextBox mới

với tên và giới hạn ký tự là 100 ký tự.

TextBox text = new TextBox(); text.setName("name");

text.setMaxLength(100);

Như với các TextBox, bạn phải thiết lập thuộc tính tên của các thành phần nếu

bạn có kế hoạch để gửi dữ liệu đến một máy chủ như là dữ liệu mẫu Sau đó, tên nàyđược sử dụng trên máy chủ để lấy dữ liệu bằng tên trường

 Sử dụng TextArea để nắm bắt văn bản dài

TextArea là như TextBox ngoại trừ việc nó có nhiều dòng và bao gồm một thanh

cuộn khi văn bản vượt quá giới hạn của khu vực hiển thị Ví dụ sau đây tạo ra một

TextArea là rộng 30 ký tự và chiều cao 5 dòng.

• Đăng tải các file với các widget FileUpload

Các widget FileUpload đóng vai trò như là một bao GWT trình duyệt tiêuchuẩn tập tin tải lên hộp văn bản để cho phép người dùng tải lên một tập tin từ máytính của họ đến máy chủ của bạn

Nhưng đây chỉ là thành phần phía máy khách kích vào nút Browse cho phépngười dùng lựa chọn một tập tin trên máy tính của họ thông qua hộp thoại File tiêuchuẩn tìm kiếm, chứ nó không cho phép bạn lưu một tập tin vào máy chủ của bạn.Widget này phải được nhúng trong một hình thức đã thiết lập mã hóa dữ liệu Khi đãsẵn sàng, bạn gửi mẫu đến máy chủ của bạn để xử lý các tập tin được lựa chọn tải lên.Điều này widget không cung cấp bất kỳ mã nào để phía máy chủ xử lý các tập tin tảilên, bạn phải cung cấp nó

Hệ thống menu được cung cấp bởi GWT dựa trên MenuBar và các widgetMenuItem MenuItem được thêm vào MenuBars, và các MenuBars được thêm vàoMenuBars khác, để tạo ra hệ thống menu trong ứng dụng của bạn Hình dưới cho thấy

hệ thống menu Bảng điều khiển, Đồng hồ, Máy tính, và Slideshow MenuItems thêmvào một thanh Create MenuBar, Create MenuBar và Help MenuBar được thêm vàomột MenuBar được hiển thị trên trang trình duyệt

Ví dụ 3.1: Xây dựng MenuBar, MenuItem và MenuBar Local lồng nhau

protected MenuBar buildHelpMenu(){

MenuBar menuHelp = new MenuBar(true); (1)

MenuBar menuLocale = new MenuBar(true);

menuLocale.addItem(constants.EnglishLocale(), (2)

new ChangeLocaleToEnglishCommand());

menuLocale.addItem(constants.SwedishLocale(), new ChangeLocaleToSwedishCommand());

menuHelp.addItem(constants.LocaleMenuItemName(), menuLocale) return menuHelp;

}

Tạo thanh menu dọc bằng cách thông qua các giá trị Boolean true như một tham

số trong xây dựng (xem (1)) Trong MenuBar, một hoặc nhiều MenuItems, hoặc

MenuBars khác đi với nhau để cung cấp cho các cấu trúc hình ảnh được hiển thị trong

hình trên Nó có thể tạo ra MenuItems nội tuyến trong các mã, đó là những gì làm ở (2)

tham số đầu tiên phương thức addItem() là một MenuItem mới Mỗi MenuItem bị ràng buộc vào một đoạn mã, tham số thứ hai phương thức addItem(), được thực hiện khi mà

mục trình đơn được nhấp

 Quản lý dữ liệu bằng cách sử dụng cây

Widget này cung cấp cho các ứng dụng với một cây phân cấp tiêu chuẩn baogồm TreeItem widget

Hình 3.2: Ứng dụng sách của Bảng điều khiển, hiển thị widget Tree bên trái

Tree được xây dựng tương tự như cách bạn xây dựng một trình đơn trước đó Trong trường hợp đó, bạn đã thêm vào một số MenuItems trên MenuBar, ở đây, bạn sẽ thêm TreeItems trên Tree Ở đây cho phép bạn tạo một TreeItem trống hoặc TreeItems

từ Strings hoặc các widget khác (trong đó có thể có nghĩa là một widget hoặc một công

cụ tiêu chuẩn hỗn hợp) Trong ví dụ 3.2, mà xuất phát từ các ứng dụng Dashboard’sBook (org.gwtbook.client.ui.book.Book), bạn xây dựng một cây đơn giản để đại diệncho cấu trúc cấp cao nhất của cuốn sách

Ví dụ 3.2: Tạo hệ thống cây Sách của Bảng điều khiển

private Tree buildTOC(){

TreeItem chapter1 = new TreeItem("1: Introducing GWT");

chapter1.addItem("1.1: A Walk Through GWT");

chapter1.addItem("1.2: GWT Versus Other Solutions");

:

TreeItem chapter2 = new TreeItem("2: Exercising the GWT Tools"); chapter2.addItem("2.1: Setting up Dashboard Version 1");

:

TreeItem chapter3 = new TreeItem("3: Creating the Dashboard");

chapter3.addItem("3.1: Stage 2 - Developing the Application");

Tree t = new Tree();

t.addItem(chapter1); t.addItem(chapter2); t.addItem(chapter3);

return t;

}

b Hiển thị văn bản vào ứng dụng

• Hiển thị văn bản như một Label

Một widget Label chứa văn bản tùy ý, được hiển thị chính xác như văn bản

Điều này có nghĩa là Label được tạo ra bởi các new Label ("Hi <B> there </ B>") xuất hiện trên trang trình duyệt một cách chính xác là "Hi <b> there </ b>" - there không

được hiểu là HTML và không được hiển thị đậm trong văn bản

Nó có thể kiểm soát sự liên kết ngang của nhãn, mặc dù theo mặc định kích

thước của một widget Label là kích thước của văn bản bao quanh nó Phải sắp xếp,

bằng cách sử dụng lệnh sau đây:

theLabel.setHorizontalAlignment(HorizontalAlignmentConstant.ALIGN_RIGHT)

Khó có thể nhìn thấy ảnh hưởng trừ khi sử dụng một phong cách trang đểthiết lập chiều rộng của nhãn có thể kéo dài hơn so với văn bản Các liên kết màbạn nhìn thấy trong ứng dụng Dashboard’s Server Status(org.gwtbook.client.ui.serverstatus.ServerStatus), thể hiện trong hình 3.3, đạt được

bằng cách sắp xếp Label trong một bảng điều khiển Grid Một Label cũng có thể WordWrap nếu phương thức setWordWrap() được gọi, phương thức này có một biến Boolean thiết lập là true nếu Label word-wrap và false khác.

Hình 3.3: Dashboard’s Server Status ứng dụng GWT Label widget trong hành động

 Làm cho văn bản hoạt động bằng cách sử dụng các widget HTML

Nếu bạn muốn cung cấp funkiness hơn với trình bày của văn bản, sau đó cácwidget HTML có thể có các thành phần mà bạn đang tìm kiếm Nó hoạt động giốngnhư một widget Label, nhưng, điều này quan trọng là nó diễn giải bất kỳ văn bản dướidạng HTML tùy ý Trong khi đó các nhãn văn bản "Hi <B> there </ B>" được viết

như là, nếu bạn viết mã new HTML ("Hi <B> there </ B>"), văn bản được hiển thị như

"Hi there "

Các widget HTML cũng là hữu ích nếu bạn muốn cung cấp một liên kết thực

sự Khi chúng ta nhìn vào các widget Hyperlink, bạn đã học được cách bạn có thể trình

bày những gì trông giống như một siêu liên kết cho người sử dụng, nhưng khi nhấnvào, nó chỉ thay đổi các khía cạnh lịch sử của ứng dụng Nếu bạn sử dụng một widgetHTML thay vào đó, sau đó bạn có thể cung cấp các liên kết thích hợp, như bạn sẽ làmsau này trong các ứng dụng Giới thiệu liên kết đến trang web của cuốn sách:

new HTML("<a href='http://www.manning.com/hanson'>Manning</a>");

Bạn phải cẩn thận với các widget này bởi vì cho phép HTML tùy ý có thể phơibày các vấn đề ứng dụng về an ninh của bạn nếu sử dụng HTML độc hại xây dựng

3.2 Làm việc với Panel

3.2.1 Panel là gì?

Panels là các khối xây dựng của một ứng dụng GWT, cấu trúc, và đôi khi làchức năng Chúng cho phép bạn xác định vị trí các widget khi bạn cần để thực hiện cácchức năng của ứng dụng

Khái niệm này bắt đầu với RootPanel, như là một giao diện trực tiếp vào trangweb hiện hành của trình duyệt RootPanel là một trường hợp đặc biệt vì nó bắt trựctiếp các trang trình duyệt, tất cả các bảng khác không có kiến thức của trình duyệt chođến khi họ được thêm vào thông qua các phương thức trong lớp RootPanel NgoàiRootPanel, panel tồn tại là các thùng chứa mà widget được đặt vào đó, để cung cấpcho các cơ cấu cần thiết cho ứng dụng của bạn

a Sử dụng Panel như một đối tượng Java

GWT cung cấp một số panel khác nhau, từ một FlowPanel đơn giản, nơi mà cácthành phần được đặt ra từ trái sang phải, từ trên xuống dưới, bảng phức tạp hơn, chẳnghạn như DeckPanel, nơi các widget nhỏ được tổ chức giống như một cỗ bài với cácwidget chỉ có thể nhìn thấy tại một thời điểm

Ví dụ, khi bạn tạo ra một FlowPanel (một bảng điều khiển cho phép bất kỳwidget nào được thêm vào nó trong các kích thước bảng điều khiển), bạn sử dụng các

mã Java sau đây:

FlowPanel theFlowPanel = new FlowPanel();

Mã này tạo ra một đối tượng FlowPanel Java mới, mà sau đó bạn có thể thựchiện một số các phương thức lớp n Một số trong những phương thức được liệt kêtrong bảng sau:

Bảng 3.2: Áp dụng một số phương thức lớp Java Panel đối tượng FlowPanel

theFlowPanel.add(new Label("Test")); Thêm một widget Label mới

FlowPanel

theFlowPanel.iterator();

Lấy một đối tượng Java chophép bạn lặp lại trên tất cả cácwidget đã được thêm vàoFlowPanel

Đối tượng Java của các panel cho phép bạn điều chỉnh các bảng điều khiển như

một đối tượng Java thuần khiết Mặc dù các phương thức add() cho phép biết bảng

điều khiển hoạt động như thế nào và có thể xuất hiện trên trình duyệt, nó không chophép bạn hoàn toàn hiểu cách nó xử lý Để làm được điều đó, chúng ta cần xem xétcác bảng điều khiển trong cách nhìn khác của mình, như là một phần tử DOM

b Xem xét Panel như các phần tử DOM

Các phần tử DOM xem các panel được hiển thị trong trình duyệt web Khi mộtbảng điều khiển được tạo ra bằng cách sử dụng xây dựng Java, xây dựng là chịu tráchnhiệm cho việc tạo ra các phần tử DOM cần thiết cho bảng điều khiển Ví dụ,FlowPanel chúng ta nhìn vào trong phần trước có một lớp xây dựng Java định nghĩanhư sau:

public FlowPanel() {

setElement(DOM.createDiv());

}

Do đó, khi bạn tạo một đối tượng Java FlowPanel, bạn cũng tạo ra một phần tử

div DOM Nếu bạn nhìn trực tiếp vào các phần tử DOM của FlowPanel này, bạn sẽ

thấy như sau:

<div>

</div>

Tại trung tâm của hệ thống GWT là RootPanel-bảng điều khiển liên kết các ứngdụng của cửa sổ trình duyệt Nó cung cấp tài liệu tham khảo đặc biệt yếu tố DOM trêntrang, hơn là một bảng điều khiển chính nó Có hai cách sử dụng đối tượng Đầu tiên làphải vượt qua một tên DOM mà bạn biết đã tồn tại, như RootPanel.get("MyDomArea"), trong trường hợp một phần tử DOM tham chiếu để MyDomAreađược trả về Cách tiếp cận thứ hai là gọi RootPanel.get() thiếu các thông số có nghĩa là

kết quả sẽ là một tham chiếu đến yếu tố Body của trang.

3.2.2 Tiêu chuẩn GWT Panel

GWT phân phối tiêu chuẩn đi kèm với một loạt các panel bao gồm nhiều tình

tiết khác nhau Ta chia nó vào năm nhánh, tương ứng với các sự cố được hiển thị trong

hệ thống phân cấp lớp trong hình 3.4:

- Simple panels: Những panel đơn giản được dựa trên một phần tử div và có

thể chỉ chứa có một widget (Đây là một sự phân biệt ngữ nghĩa hơn là một thực tế,

bởi vì một widget này có thể là một bảng chứa các widget/panel khác, hoặc một

- Composite panels: Panel tổng hợp là một sự kết hợp của các panel khác với

nhau để cung cấp một số chức năng mới

- Split panels: mới xuất hiện trong GWT 1.4 là gia đình SplitPanel, cung cấp

một thanh trượt giữa hai widget mà cho phép bạn được thay đổi kích cỡ

Bạn có thể thấy trong hệ thống phân cấp này với tất cả các Panel trong phân lớp GWT trừu tượng Lớp Panel này lớp con lớp Widget (và do đó UIObject), do đó, trong

một ý nghĩa nào đó, một panel là một widget Bạn có thể tạo ra những panel sự kiện

chìm và ghi đè lên các phương thức onBrowserEvent().