TỔNG QUAN VỀ GOOGLE WEB TOOLKIT
Thảo luận về trình biên dịch Java thành JavaScript
Để hiểu rõ về GWT, chúng ta cần xem xét vai trò của trình biên dịch GWT, công cụ chuyển mã nguồn Java thành JavaScript, tương tự như cách trình biên dịch Java chuyển mã nguồn thành bytecode Để biên dịch một chương trình GWT, người dùng cần chạy chương trình javacom.google.gwt.dev.GWTCompiler, cung cấp vị trí module và một số tham số khác Một module bao gồm tập hợp các lớp Java liên quan và một file cấu hình đơn giản, với đặc trưng là lớp entry point, lớp thực thi khi dự án bắt đầu.
Trình biên dịch GWT bắt đầu quá trình biên dịch từ lớp entry point và chỉ biên dịch những phần mã nguồn Java được sử dụng, khác với trình biên dịch Java tiêu chuẩn.
Trình biên dịch có ba cách để xuất ra mã nguồn JavaScript
Mặc định, phương pháp "obfuscate" (xáo trộn) làm cho mã nguồn JavaScript trở nên khó đọc, không có khoảng cách giữa các câu lệnh, gần như giống như một đoạn mã hóa không thể đọc được Cách này không chỉ giúp bảo vệ mã nguồn khỏi kẻ trộm mà còn giảm kích thước file JavaScript đáng kể, rất 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à phương pháp "detailed" (chi tiết), tạo ra mã nguồn JavaScript tương tự như cách thứ hai nhưng bổ sung tên lớp vào tên phương thức JavaScript Điều này giúp 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.
Sử dụng JSNI thực thi mã JavaScript từ Java
JavaScript Native Interface (JSNI) cho phép thực thi mã JavaScript từ Java và ngược lại, giúp thực hiện cuộc gọi JavaScript trực tiếp từ mã Java máy khách GWT Trình biên dịch GWT sẽ kết hợp mã JavaScript nhúng với mã nguồn JavaScript được tạo ra từ Java Ví dụ đơn giản về JSNI là: public native int addTwoNumbers(int x, int y).
Trong Java, phương thức có thể được khai báo là native để chỉ ra rằng nó được cài đặt bằng ngôn ngữ khác Theo tài liệu lập trình Java, khi khai báo phương thức native, chúng ta không được phép xác định mã cài đặt cho phương thức đó Thay vào đó, mã bên trong phương thức được chứa trong chú thích nhiều dòng, trong đó có mã nguồn JavaScript được nhúng Khi phương thức được thực thi, đoạn mã JavaScript này sẽ được thực hiện, đáp ứng yêu cầu không cho phép cài đặt nội dung cho phương thức native, đồng thời cung cấp mã cho trình biên dịch GWT thực thi khi gọi phương thức.
Truy cập đến thư viện JRE emulation
Chúng ta có thể sử dụng các lớp trong gói JRE cho dự án GWT, nhưng có những giới hạn nhất định Trình biên dịch GWT chỉ hiểu và biên dịch một số lớp trong gói java.lang và java.util thành JavaScript Bảng 1.1 và bảng 1.2 sẽ chỉ ra các lớp có thể sử dụng trong ứng dụng GWT Lưu ý rằng, mặc dù java.util.Date được hỗ trợ, nhưng java.util.Calendar và các công cụ định dạng ngày tháng khác thì không.
Bảng 1.1: Lớp java.lang.* có sẵn trong GWT
Bảng 1.2: Lớp java.util.* có sẵn trong GWT Classes
EmptyStackException NoSuchElementException TooManyListenersExcept -ion Interfaces
(a Mục tiêu bao gồm trong bản phát hành 1.4 của GWT)
Tìm hiểu về thư viện và widget của GWT
GWT cung cấp nhiều widget và panel, trong đó widget như Button và TextBox cho phép người dùng tương tác, còn panel là các thùng chứa chúng Ví dụ về việc sử dụng widget và panel được thể hiện trong Hình 1.2.
GWT cung cấp một bộ widget và panel giúp bạn dễ dàng phát triển ứng dụng Internet phong phú mà không cần bận tâm đến các chi tiết về 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
Các widget do GWT cung cấp tương ứng với các thành phần trong HTML, bao gồm Button, TextBox, TextArea, Checkbox, RadioButton và FormPanel Ngoài ra, GWT còn hỗ trợ hai kiểu hiển thị thông tin tương tự bảng trong HTML.
2 lớp con của HTMLTable là Grid và FlexTable.
Gọi thủ tục từ xa với GWT
Hầu hết các ứng dụng GWT cần khả năng trao đổi thông tin giữa Client và Server, chẳng hạn như khi lấy dữ liệu hiển thị cho người dùng hoặc khi người dùng đăng nhập vào ứng dụng Để thực hiện điều này, các trình duyệt hiện đại sử dụng đối tượng JavaScript 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 như các trang HTML truyền thống Đối tượng này là nền tảng cho kỹ thuật Remote Procedure Calls (RPCs) trong môi trường trình duyệt.
GWT cung cấp hai công cụ chính cho đối tượng XMLHttpRequest: lớp RequestBuilder, là lớp bao ngoài cho đối tượng này, và GWT – RPC, cho phép gửi và nhận các đối tượng Java thực sự giữa Client và Server.
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 tận dụng lợi thế từ khả năng phân tích cú pháp XML và tạo cây DOM của các trình duyệt hiện đại Việc phân tích cú pháp này do trình duyệt thực hiện, không phải GWT, giúp tối ưu hóa hiệu quả thực thi mã nguồn gốc.
SO SÁNH GWT VỚI CÁC CÔNG NGHỆ KHÁC
GWT với Swing
Swing là bộ công cụ tiêu chuẩn để phát triển ứng dụng giao diện trong Java Chúng ta sẽ so sánh Swing với GWT, vì hai khuôn khổ này có cách viết mã tương tự Dưới đây là ví dụ về 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()
}); 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 tương tự như GWT, với một số điểm khác biệt như việc sử dụng ActionListener thay vì ClickListener Đối với các nhà phát triển Swing, có những khác biệt quan trọng giữa GWT và Swing Đầu tiên, GWT không tuân theo mô hình Model View Controller (MVC) và không có mô hình đối tượng chung cho nhiều thành phần Thứ hai, GWT không quản lý bố trí mà sử dụng các panel để xây dựng phong cách bố trí.
HorizontalPanel GWT sắp xếp các thành phần con theo chiều ngang từ trái sang phải, trong khi DockPanel cho phép thêm các widget vào bảng điều khiển tương tự như BorderLayout trong Swing.
GWT cung cấp một môi trường thuận lợi cho các nhà phát triển Swing nhờ vào những khác biệt dễ làm việc Tiếp theo, chúng ta sẽ khám phá Echo2, một công nghệ cho phép phát triển ứng dụng tương tự như GWT nhưng với một cách tiếp cận khác.
GWT với Echo2
Echo2 là một bộ công cụ web phổ biến tương tự như GWT, được sử dụng để phát triển giao diện người dùng Người dùng có thể sử dụng API để tạo các trường hợp của các thành phần và thêm chúng vào màn hình Ví dụ 2.3 cho thấy phiên bản Echo2 của một ví dụ tham khảo GWT, với hai phiên bản có hình thức gần như giống nhau.
In this example, we create a TextField and a Button in Echo2 The TextField is initialized with the text "text box," while the Button is labeled "Click Me." An ActionListener is added to the Button to handle click events.
{ public void actionPerformed (ActionEvent evt)
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ả Echo2 và GWT đều sử dụng API tương tự, chúng hoạt động trong các môi trường khác nhau Ứng dụng Echo2 chạy trên máy chủ, trong khi GWT biên dịch mã nguồn Java sang JavaScript để chạy trên trình duyệt Điều này có nghĩa là khi sự kiện phía máy khách được kích hoạt trong Echo2, nó cần phải được xử lý trên máy chủ.
Giao diện được xây dựng với Echo2 giúp các máy chủ hoạt động hiệu quả hơn bằng cách không yêu cầu gửi toàn bộ JavaScript đến trình duyệt cùng lúc Thay vào đó, Echo2 chỉ gửi những phần cần thiết cho các nhà phát triển hiện tại của ứng dụng Điều này cũng liên quan đến việc sử dụng một máy chủ ứng dụng Java, điều này là cần thiết để lưu trữ ứng dụng Echo2.
GWT với JavaServer Faces
JavaServer Faces (JSF) là một framework web dành cho ứng dụng web dựa trên Java, sử dụng quản lý Java trên máy chủ để đại diện cho các mô hình JSF cung cấp một bộ thư viện thẻ có thể kết hợp với trang JSP nhằm tham chiếu các thuộc tính của mô hình Trong một triển khai JSF tiêu chuẩn, mọi quá trình đều diễn ra trên máy chủ và trang web sẽ được tải lại cho mỗi giao dịch.
Bước đầu tiên để phát triển ứng dụng JSF là tạo lớp đại diện cho các mô hình, như trong ví dụ 2.4 Mô hình này đơn giản, chỉ chứa một văn bản được đặt tên Theo tiêu chuẩn Java bean, bạn cần định nghĩa thuộc tính riêng cho lớp và cung cấp phương thức truy cập để nhận và thiết lập giá trị Ngoài ra, bạn cũng cần 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 ()
} public void setText (String text)
Bước tiếp theo là đăng ký lớp này dưới dạng bean trong các tập tin cấu hình JSF, như đã trình bày trong ví dụ 2.5 Tên sampleBean sẽ được sử dụng để tham chiếu đến bean này trong mã JSP.
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 trong ví dụ này tương tự như một trang JSP tiêu chuẩn, sử dụng hai thư viện thẻ JSF để xác định và điều khiển Đối với các giá trị trong thẻ inputText, bạn tham khảo các văn bản từ quản lý của bạn thông qua ngôn ngữ biểu thức JSF, và điều này cũng được thể hiện trong thẻ actionButton.
JSF cung cấp hạn chế về hỗ trợ cho các chức năng phía máy khách, mặc dù có khả năng xây dựng và tái sử dụng các thành phần bằng JavaScript Tuy nhiên, giá trị sử dụng lại của các thành phần tùy chỉnh trong JSF là không cao Do tính chất tích hợp phía khách hàng, JSF cạnh tranh với GWT, nhưng vẫn có tiềm năng cho việc tích hợp giữa hai công nghệ này.
GWT với Ruby on Rails
Ruby on Rails là một khuôn khổ phát triển nhanh chóng dựa trên ngôn ngữ Ruby, cung cấp khả năng xử lý tự động cho phía máy chủ Nó hỗ trợ Ajax cho phép tích hợp dễ dàng với mã HTML, giúp gửi dữ liệu đến máy chủ khi có hành động từ người dùng và hiển thị phản hồi trên trang Tuy nhiên, Ruby on Rails không được thiết kế để xử lý các tương tác phức tạp giữa khách hàng và máy chủ.
GWT là một nền tảng tập trung vào khách hàng, cho phép phát triển và hiển thị các widget bằng Java, đồng thời xử lý các hành động từ người dùng Nó có khả năng giao tiếp với máy chủ khi cần thiết và được kích hoạt bởi sự tương tác của người dùng GWT cũng cho phép biên dịch mã Java sang JavaScript, giúp chương trình chạy trên trình duyệt Trên máy chủ, GWT cung cấp cơ chế serializing và deserializing đối tượng Java, nhưng không can thiệp vào các khía cạnh khác của máy chủ.
XÂY DỤNG GIAO DIỆN NGƯỜI DÙNG VỚI GWT
Làm việc với Widget
Widget là một trong bốn khối xây dựng cơ bản của ứng dụng GWT, bao gồm bảng, sự kiện và máy chủ truyền thông như RPC, JSON và xử lý XML Khi người dùng chạy ứng dụng GWT, họ tương tác với các widget được định vị trong bảng và phản ứng với sự kiện Widget giống như các nút trên bộ điều khiển từ xa, cho phép người dùng tương tác dễ dàng GWT cung cấp nhiều widget miễn phí, bao gồm các đối tượng phổ biến như Button, TextBox, CheckBox và textArea.
TextArea a Sử dụng Widget như một đối tượng Java
GWT nhằm phát triển ứng dụng Internet phong phú bằng Java, với các trình biên dịch chuyển đổi mã thành HTML và JavaScript cho nhiều trình duyệt khác nhau Để thực hiện điều này, GWT sử dụng các widget để đại diện cho các đối tượng trình duyệt trong chương trình Java.
Trong một chương trình GWT, bạn có thể sử dụng đối tượng Java gọi là Button để tạo ra các nút với văn bản rõ ràng và khả năng nhấn Đối tượng Button này cho phép bạn tùy chỉnh nhiều mô hình khác nhau và hiển thị chúng trong trình duyệt, tương tự như các widget với các phương thức và sự kiện riêng biệt.
Khi sử dụng lập trình GWT, hãy chú ý đến tất cả các widget dưới dạng đối tượng Java Nút có thể được tạo ra bằng cách xây dựng lớp GWT Java Button.
Button theButton = new Button("Click Me");
Mã này tạo ra một nút mới cho phép thực hiện nhiều phương thức khác nhau Các nhiệm vụ điển hình có thể thực hiện trên widget nút GWT được trình bày trong bảng 3.1.
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ả theButton.setStyleName("buttonStyle");
To set up a Cascading Style Sheet (CSS) for buttons, ensure that a corresponding entry is included in the CSS linked to the web document, with the class name beginning with a period, such as buttonStyle { } Additionally, implement a click listener for the button using the syntax: theButton.addClickListener(new ClickListener() { public void onClick(Widget sender) { } });.
Thêm một ClickListener vào nút để lắng nghe sự kiện nhấn chuột Khi nút được nhấn, mã trong phương thức onClick() của ClickListener sẽ được thực thi Sử dụng theButton.setText("Go on, click me") để thay đổi văn bản hiển thị trên nút từ "Go on, lick me" thành "Go on, click me" Để ẩn nút trên trình duyệt web, áp dụng theButton.setVisible(false) để nó không còn hiển thị Đồng thời, xem xét widget như các phần tử DOM.
Trong Java, bạn có thể phát triển ứng dụng GWT tùy ý bằng cách sử dụng nhiều widget và các phương thức liên quan để xây dựng chức năng Tuy nhiên, việc hiển thị các đối tượng Java trong trình duyệt web là không khả thi nếu không có ứng dụng Ajax Do đó, DOM sẽ thay thế cho đạ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à người dùng thấy và có thể truy cập, thay đổi thông qua nhiều ngôn ngữ lập trình Những thay đổi này hiển thị ngay lập tức trên trình duyệt, cho phép thêm, loại bỏ, ẩn hoặc thay đổi vị trí các yếu tố Đối với GWT, các thao tác này được thực hiện thông qua JavaScript trong mã biên dịch, trong khi trong chương trình, chúng ta sử dụng Java.
Tất cả các widget GWT đều có một đại diện DOM thay thế được xây dựng đồng thời với các đối tượng Java Constructor Java chủ yếu chịu trách nhiệm tạo ra đại diện DOM; ví dụ, trong lớp Button, định nghĩa constructor là: public Button() { super(DOM.createButton()); adjustType(getElement()); setStyleName("gwt-Button"); }
Gọi đến DOM.createButton() tạo ra phần tử DOM thông qua lớp
Trong GWT DOM, phương thức setElement() được sử dụng trong các lớp cha mẹ để thiết lập các lớp Java cho widget DOM, đại diện cho yếu tố mới Nhờ vào giá trị được thiết lập bởi setElement(), bạn có thể truy cập các đại diện DOM từ Java thông qua phương thức getElement().
GWT cung cấp một bộ tiêu chuẩn các widget cho ứng dụng, bao gồm những loại cơ bản như nút và văn bản Mặc dù vậy, một số widget như thanh tiến trình và thanh trượt không có sẵn, nhưng bạn vẫn có thể tự xây dựng chúng.
Trong thiết lập widget, các nhà thiết kế GWT đã xây dựng một hệ thống phân cấp mạnh mẽ với các lớp Java, nhằm tạo ra sự nhất quán cho các widget như TextBox, TextArea và PasswordTextBox GWT đã nhận diện điều này và duy trì trong lớp TextBoxBase, mà các widget khác sẽ kế thừa.
Trong hệ thống phân cấp widget, tất cả các widget đều kế thừa từ lớp UIObject Lớp UIObject chứa phương thức setElement(), được sử dụng để thiết lập liên kết vật lý giữa đối tượng Java của widget và các DOM views Các lớp con của UIObject cần gọi phương thức này trước khi thực hiện bất kỳ phương thức nào khác, nhằm đảm bảo rằng liên kết với yếu tố trình duyệt được thiết lập đúng cách.
Tất cả các widget GWT đều kế thừa từ lớp UIObject, lớp này cung cấp các phương thức và thuộc tính chung cho tất cả các widget, bao gồm thiết lập kích thước, tầm nhìn và tên phong cách, đồng thời tạo ra các liên kết giữa các đối tượng Java và DOM.
Hình 3.1: GWT widget - Hệ thống phân cấp lớp
Làm việc với Panel
Panels là các khối xây dựng quan trọng trong ứng dụng GWT, giúp xác định cấu trúc và chức năng Chúng cho phép bạn định vị các widget cần thiết để thực hiện các chức năng của ứng dụng một cách hiệu quả.
Khái niệm về RootPanel bắt đầu với vai trò là giao diện chính cho trang web trong trình duyệt RootPanel là một trường hợp đặc biệt vì nó tương tác trực tiếp với các trang trình duyệt, trong khi các bảng khác không nhận biết trình duyệt cho đến khi được thêm vào thông qua các phương thức của lớp RootPanel Ngoài RootPanel, các panel khác cũng tồn tại như những thùng chứa để đặt widget, cung cấp cấu trúc cần thiết cho ứng dụng của bạn Sử dụng panel như một đối tượng Java là cách hiệu quả để xây dựng giao diện người dùng.
GWT cung cấp nhiều loại panel khác nhau, bao gồm FlowPanel, nơi các thành phần được sắp xếp từ trái sang phải và từ trên xuống dưới, cho đến các panel phức tạp như DeckPanel, trong đó các widget được tổ chức giống như một bộ bài, chỉ hiển thị một widget tại một thời điểm.
Khi tạo một FlowPanel, bạn có thể thêm bất kỳ widget nào vào bảng điều khiển với kích thước tùy ý Để thực hiện điều này, bạn sẽ sử dụng mã Java như sau:
Mã này tạo ra một đối tượng FlowPanel Java mới, cho phép bạn thực hiện nhiều phương thức của lớp n Dưới đây là một số phương thức quan trọng được liệt kê trong bảng.
Bảng 3.2: Áp dụng một số phương thức lớp Java Panel đối tượng FlowPanel Java
Code Mô tả theFlowPanel.setStyleName("buttonStyle");
To establish a Cascading Style Sheet (CSS) for the FlowPanel, you can create a corresponding style definition within the linked CSS document This allows you to customize the appearance of the FlowPanel For example, you can add a new Label widget by using the command `theFlowPanel.add(new Label("Test"));`.
Đối tượng Java cho phép bạn lặp lại tất cả các widget trong FlowPanel, giúp điều chỉnh các bảng điều khiển như một đối tượng Java thuần Mặc dù phương thức add() cho biết cách bảng điều khiển hoạt động và hiển thị trên trình duyệt, nhưng nó không cung cấp cái nhìn toàn diện về cách bảng điều khiển xử lý Để hiểu rõ hơn, chúng ta cần xem xét các bảng điều khiển dưới góc độ như các phần tử DOM.
Các phần tử DOM hiển thị các panel trong trình duyệt web Khi tạo bảng điều khiển bằng Java, quá trình xây dựng sẽ tạo ra các phần tử DOM cần thiết Ví dụ, lớp FlowPanel trong Java được định nghĩa với phương thức khởi tạo như sau: public FlowPanel() { setElement(DOM.createDiv()); }.
Khi tạo một đối tượng Java FlowPanel, bạn đồng thời tạo ra một phần tử div trong DOM Nếu xem xét các phần tử DOM của FlowPanel, bạn sẽ nhận thấy điều này rõ ràng.
Trung tâm của hệ thống GWT là RootPanel, bảng điều khiển kết nối các ứng dụng trong cửa sổ trình duyệt RootPanel cung cấp tài liệu tham khảo cho các yếu tố DOM trên trang, thay vì chỉ là một bảng điều khiển Có hai cách sử dụng đối tượng này: đầu tiên, bạn có thể sử dụng RootPanel.get("MyDomArea") để lấy tham chiếu đến một phần tử DOM đã biết, trong khi nếu gọi RootPanel.get() mà không có tham số, kết quả sẽ là tham chiếu đến yếu tố Body của trang.
GWT cung cấp tiêu chuẩn đi kèm với nhiều panel đa dạng, được phân chia thành năm nhánh tương ứng với các sự cố hiển thị trong hệ thống phân cấp lớp.
Các panel đơn giản được xây dựng dựa trên phần tử div và chỉ có thể chứa một widget Mặc dù đây là sự phân biệt ngữ nghĩa, nhưng widget này có thể là một bảng chứa nhiều widget hoặc panel khác, hoặc thậm chí là một widget hỗn hợp.
Các panel phức tạp cho phép tích hợp nhiều widget và thường được xây dựng dựa trên div hoặc bảng Tuy nhiên, khi sử dụng các widget này, bạn không nên phụ thuộc vào cấu trúc nội bộ của chúng vì điều này có thể thay đổi trong tương lai.
- HTML table panels: Những panel dựa trên các bảng HTML và được dự kiến sẽ tiến hành như thế
- 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ỡ
Trong hệ thống phân cấp GWT, tất cả các Panel đều thuộc lớp Panel, là lớp con của Widget và UIObject, điều này có nghĩa là một panel cũng được coi là một widget Bạn có thể tạo ra các panel có sự kiện chìm và ghi đè các phương thức onBrowserEvent().
Hình 3.4: Hệ thống phân cấp lớp các panel được cung cấp với khuôn khổ
GWT 1.3, hiển thị các loại khác nhau của các panel có sẵn a Tương tác với các Panel đơn giản
SimplePanel là một công cụ giới hạn số lượng widget có thể thêm vào một bảng điều khiển Lớp SimplePanel mở rộng từ lớp Panel trừu tượng và có một biến duy nhất để lưu trữ thông tin của widget.
Xem năm tấm SimplePanel sau o PopupPanel o DialogBox o FormPanel o FocusPanel o ScrollPanel
Một PopupPanel "pops” lên trên các tiện ích khác trên trang của bạn và bạn có thể sử dụng nó, ví dụ, để thực hiện chức năng tooltip
Xử lý sự kiện
3.3.1 Khám phá các sự kiện
Xử lý sự kiện trong ứng dụng web là cách giúp người dùng tương tác với các chức năng của ứng dụng, thông qua các hành động như nhấp chuột, kéo thả, hoặc thay đổi giá trị GWT cung cấp khả năng hỗ trợ cho tất cả các sự kiện này, cho phép quản lý hiệu quả trên trình duyệt, như được thể hiện trong bảng 3.3.
Bảng 3.3: Trình duyệt các sự kiện mà một ứng dụng GWT có thể xử lý, cùng với giá trị nội bộ GWT có thể sẽ được giao
BUTTON_LEFT Nút chuột trái được nhấp
BUTTON_MIDDLE Nút chuột giữa được nhấp
BUTTON_RIGHT Nút chuột trái được nhấp
ONBLUR Yếu tố không tập trung vào bàn phím
ONCHANGE Giá trị của một yếu tố đầu vào đã thay đổi
ONCLICK Người dùng nhấp vào một phần tử
ONDBLCLICK Người dùng nhấp đúp vào một phần tử
Một lỗi JavaScript xảy ra (sự kiện này lỗi là thường xuyên nhất, tìm thấy khi tải một hình ảnh không thành công)
ONFOCUS Ngược lại của sự kiện onBlur: Một yếu tố được tập trung bàn phím
ONKEYDOWN Người sử dụng nhấn một phím
ONKEYPRESS Một nhân vật được tạo ra từ việc bấm phím (hoặc trực tiếp hoặc thông qua autorepeat)
ONKEYUP Người sử dụng phát hành một khóa
ONLOAD Một yếu tố (thông thường là một IMG) hoàn tất tải
ONLOSECAPTURE Một yếu tố có bắt chuột khi nó bị mất
ONMOUSEDOWN Người dùng nhấp chuột trên một phần tử
ONMOUSEMOVE Chuột di chuyển trong khu vực của một yếu tố
ONMOUSEOUT Chuột di chuyển ra khỏi khu vực của một yếu tố
ONMOUSEOVER Chuột di chuyển vào khu vực của một yếu tố
ONMOUSEUP Người sử dụng phát hành chuột trên một phần tử
ONSCROLL Một yếu tố cuộn bù đắp thay đổi
FOCUSEVENTS Đây là một bitmask bao gồm cả tập trung và các sự kiện mờ OnFocus / OnBlur
KEYEVENTS Đây là một bitmask bao gồm xuống, lên, và bấm các sự kiện bàn phím OnKeyDown / OnKeyPress / Onkeyup
MOUSEEVENTS là một bitmask bao gồm các sự kiện chuột như di chuyển, nhấn xuống, nhả lên, di chuyển vào và ra khỏi Tuy nhiên, nó không bao gồm các sự kiện nhấp chuột hay nhấp đôi.
Tìm hiểu về các mô hình sự kiện
Một ứng dụng GWT khởi tạo một hàm xử lý sự kiện toàn cầu duy nhất ở cấp tài liệu của trình duyệt thông qua phương thức init() của lớp DOM Phương thức này có hai hiện thực: một dành cho trình duyệt IE và một cho các trình duyệt khác được GWT hỗ trợ.
Khi tạo một widget, bạn cần sử dụng phương thức sinkEvents() để cho phép nó lắng nghe các sự kiện phù hợp Điều này giúp widget được thiết lập để xử lý tất cả các sự kiện đặc biệt liên quan đến giao diện.
Để xử lý các sự kiện bị đánh chìm, bạn cần ghi đè phương thức onBrowserEvent() khi cung cấp các sự kiện.
- Thêm một widget vào một trang
Một widget hoặc panel sẽ không bắt đầu lắng nghe các sự kiện cho đến khi nó được thêm vào cấu trúc DOM của trang Điều này có thể gây bất ngờ cho bạn, đặc biệt nếu bạn quên rằng có hai đối tượng Java và DOM liên quan đến widget và panel.
GWT sẽ tự động quản lý cơ chế cho bạn; chỉ cần thêm widget hoặc panel vào trang trình duyệt bằng cách sử dụng RootPanel.get().add(widget/panel) hoặc thêm vào bảng khác Khi một thành phần được thêm vào, phương thức onAttach() sẽ được gọi, và nếu đó là một bảng điều khiển, tất cả các phương thức onAttach() của các thành phần con cũng sẽ được kích hoạt Phương thức onAttach() của widget sẽ đăng ký nó như một sự kiện nghe trong hệ thống DOM, giúp các widget lắng nghe và sẵn sàng tiếp nhận các sự kiện.
Khi xử lý sự kiện trong trình duyệt, đặc biệt là Internet Explorer (IE), các sự kiện diễn ra chủ yếu khi người dùng nhấp vào các yếu tố Trong khi đó, các trình duyệt khác xử lý sự kiện này ở mức tài liệu, tạo ra sự khác biệt trong cách thức hoạt động của chúng.
Sau khi sự kiện này được chụp, JavaScript gọi phương thức
Phương thức $wnd dispatchEvent() được khởi tạo trong phương thức init() của DOM, có nhiệm vụ tìm kiếm trình xử lý phù hợp cho các sự kiện vừa được bắt.
- Kiểm tra một sự kiện
Khi một sự kiện xảy ra, ứng dụng GWT sẽ kiểm tra xem có yếu tố nào liên quan đến người nghe sự kiện không Nếu có, nó sẽ gọi phương thức dispatchEvent() trong lớp DOM, truyền vào sự kiện, các phần tử, và một tham chiếu đến EventListener đang lắng nghe các phần tử đó.
- Xử lý một sự kiện
Xử lý sự kiện trong ứng dụng được thực hiện thông qua phương thức onBrowserEvent() Tại giai đoạn này, bạn có thể thực hiện các tùy chọn khác nhau liên quan đến vòng đời của sự kiện Để ngăn chặn các bong bóng sự kiện, bạn có thể sử dụng phương thức DOM.eventCancelBubble(), điều này sẽ đảm bảo rằng các widget khác trong hệ thống không nhận thấy sự kiện Ngoài ra, bạn cũng có thể ngăn chặn hành động mặc định của trình duyệt cho một sự kiện bằng cách sử dụng phương thức DOM.eventPreventDefault().
Cuối cùng, bạn có thể tích hợp các sự kiện trở lại vào mã bằng cách sử dụng mô hình Listener để quản lý hiệu quả các sự kiện.
3.3.2 Lắng nghe các sự kiện
Để một widget có thể xử lý các sự kiện của chính nó, nó cần phải đăng ký bằng cách đánh chìm các sự kiện này Việc này có thể được thực hiện một cách rõ ràng hoặc ngầm thông qua kế thừa.
Một widget có thể đăng ký sự kiện bằng cách sử dụng phương thức sinkEvents(), cho phép ứng dụng GWT và trình duyệt biết loại sự kiện mà widget quan tâm Khi một widget làm chìm tất cả các sự kiện trình duyệt, nó sẽ đăng ký phương thức wnd. dispatchEvent() cho các sự kiện đó và cập nhật các đại diện phần tử DOM để phản ánh các sự kiện quan tâm Trong trường hợp của DashboardPanel, nó xử lý các sự kiện nhấp đúp, dẫn đến việc thu nhỏ hiển thị chỉ tiêu đề khi người dùng nhấp chuột vào thùng chứa, và khôi phục lại bảng điều khiển khi nhấp đúp lần nữa Để thực hiện điều này, bạn cần loại bỏ các widget hiện có và thay thế bằng một hình ảnh kích thước 1 pixel.
Hình 3.10: Hiệu quả của việc giới thiệu xử lý sự kiện nhấp đúp trong DashboardPanel Hình ảnh bên trái cho thấy các ứng dụng
Xem trình diễn ở chế độ đầy đủ bằng cách nhấp đúp vào thanh tiêu đề được co lại ở bên phải Để quản lý sự kiện bị đánh chìm, hãy sử dụng phương thức onBrowserEvent.
CÔNG NGHỆ GIAO TIẾP GIỮA CLIENT – SERVER
Giao tiếp với GWT – RPC
Khi phát triển ứng dụng Internet phong phú, việc liên lạc với máy chủ là rất quan trọng Chương này sẽ khám phá Remote Procedure Call (RPC) với bộ công cụ GWT, đồng thời làm rõ cơ chế GWT – RPC để phân biệt với các RPC thông thường khác.
RPC là một thuật ngữ mô tả cơ chế cho phép một chương trình thực hiện các tác vụ trên một máy tính khác và nhận lại kết quả.
4.1.1 Khái niệm cơ bản về RPC
Trong phần này, chúng tôi sẽ giải thích cơ chế hoạt động của GWT – RPC thông qua việc xây dựng một thành phần mẫu Mục tiêu của thành phần này là cung cấp bộ nhớ cập nhật cho Java Virtual Machine (JVM).
Để làm việc với ứng dụng RPC, bạn cần lắp ráp ba thành phần chính: các dịch vụ chạy trên máy chủ, khách hàng trong trình duyệt thực hiện các cuộc gọi dịch vụ, và các đối tượng dữ liệu được truyền giữa máy khách và máy chủ Cả máy chủ và khách hàng đều có khả năng serialize và deserialize dữ liệu, cho phép các đối tượng dữ liệu được truyền tải dưới dạng văn bản thông thường.
Hình 4.1 minh họa thành phần Server Status, cho thấy quá trình yêu cầu dịch vụ và phản hồi giữa máy khách và máy chủ Kết nối được khởi xướng bởi khách hàng thông qua một đối tượng proxy từ GWT, mà sau đó sẽ serialize yêu cầu thành văn bản và gửi đến máy chủ Tại máy chủ, yêu cầu được xử lý bởi một servlet Java đặc biệt của GWT, nơi nó được deserializes và đại diện cho yêu cầu dịch vụ Khi dịch vụ trả về giá trị, kết quả sẽ được đăng và gửi lại cho khách hàng Cuối cùng, proxy GWT ở phía khách hàng sẽ nhận phản hồi, deserializes dữ liệu thành đối tượng Java và trả về mã gọi.
Ứng dụng RPC bao gồm ba phần chính: các dịch vụ hoạt động trên máy chủ, khách hàng chạy trong trình duyệt thực hiện các cuộc gọi dịch vụ, và các đối tượng dữ liệu được truyền tải giữa máy khách và máy chủ.
Cơ chế GWT – RPC bao gồm ba phần chính: dịch vụ chạy trên máy chủ dưới dạng servlet, trình duyệt web hoạt động như khách hàng thực hiện các cuộc gọi dịch vụ, và các đối tượng dữ liệu được truyền giữa máy khách và máy chủ GWT – RPC cho phép gửi các đối tượng Java giữa client và server với một lượng công việc tối thiểu cần thực hiện ở cả hai phía.
Hình 4.2: Ba phần của GWT-RPC: khách hàng, máy chủ, và các đối tượng dữ liệu a Tìm hiểu đối tượng dữ liệu Serializable
GWT – RPC hoạt động dựa trên các đối tượng dữ liệu, vì dữ liệu là yếu tố cốt lõi Cơ chế GWT-RPC cho phép bạn gọi các phương thức thực thi trên máy chủ, từ đó nhận lại giá trị kết quả cho khách hàng.
Thực hiện giao diện IsSerializable
Giao diện IsSerializable là một thành phần quan trọng trong thư viện GWT, cho phép xác định rằng một lớp có khả năng tuần tự hóa Nó tương tự như giao diện java.io.Serializable trong Java nhưng được thiết kế đặc biệt cho các ứng dụng GWT Hầu hết các phần của ứng dụng GWT sẽ sử dụng giao diện này IsSerializable không chứa phương thức nào, mà chỉ đơn giản là giúp trình biên dịch GWT nhận biết rằng đối tượng có thể được tuần tự hóa.
Để thực hiện đối tượng dữ liệu Server Status, bạn cần tạo một đối tượng dữ liệu để giữ các thống kê máy chủ và gửi đến trình duyệt của khách hàng Lớp này thuộc gói org.gwtbook.client và sẽ được biên dịch thành JavaScript để sử dụng trong trình duyệt Trên máy chủ, lớp này cũng được sử dụng nhưng dưới dạng phiên bản Java đã biên dịch GWT sẽ xử lý serialization dữ liệu, đảm bảo rằng các trường trong phiên bản JavaScript phía khách hàng tương ứng với phiên bản Java phía máy chủ của lớp này Bước tiếp theo là xác định dịch vụ GWT – RPC.
Bước tiếp theo trong việc sử dụng cơ chế GWT-RPC là xác định và triển khai các dịch vụ trên máy chủ, bao gồm việc tạo một giao diện Java để mô tả và thực hiện các dịch vụ Khi phát triển dịch vụ phía máy chủ, bạn cũng nên xem xét tích hợp với các hệ thống phụ trợ khác như cơ sở dữ liệu, máy chủ mail và các dịch vụ bổ sung khác.
Để xác định dịch vụ của bạn, bạn cần tạo một giao diện Java và mở rộng giao diện RemoteService GWT Quá trình này khá đơn giản Như đã đề cập trong dự án Server Status, phương thức dịch vụ RPC sẽ trả về một đối tượng.
ServerStatusData chứa số liệu về các máy chủ khác nhau Giao diện RemoteService không định nghĩa phương thức nào, do đó bạn không cần thực hiện điều gì đặc biệt để truy cập các hoạt động dịch vụ Tuy nhiên, có những yêu cầu bổ sung khá tinh tế khi xác định các giao diện này.
- Giao diện phải mở rộng com.google.gwt.user.client.rpc.RemoteService
- Tất cả các thông số phương thức và giá trị trả lại phải được serializable
- Giao diện phải sống trong gói khách hàng
GWT tự động tạo lớp proxy cho ứng dụng phía máy khách và chuyển tiếp các phương thức thông qua sự phản ánh trên máy chủ, giúp đơn giản hóa quá trình RPC và giảm thiểu mã cần viết Giao diện RemoteService là công cụ quan trọng để xác định các dịch vụ từ xa, cho phép nhiều giao diện khác nhau thực hiện chức năng máy chủ.
Để xác định giao diện dịch vụ cho ứng dụng của bạn, cần thực hiện phương thức tương ứng bằng cách tạo một servlet mở rộng từ RemoteServiceServlet GWT và triển khai các giao diện dịch vụ Ví dụ 4.1 minh họa cách thực hiện ServerService một cách hoàn chỉnh.
Kiểm tra kiến trúc client – side RPC
Chúng ta đã bắt đầu phát triển thành phần Server Status nhằm cung cấp thông tin về Java Virtual Machine trên máy chủ, bao gồm các chỉ số quan trọng như bộ nhớ và chủ đề Trong quá trình này, chúng ta đã khám phá cách sử dụng cơ chế GWT – RPC để khắc phục các vấn đề liên quan đến việc truyền dữ liệu giữa máy khách và máy chủ.
Sau khi hoàn thành, chúng ta đã tạo ra một số mã nhưng chưa hoàn thiện Vẫn còn một số thiếu sót, bao gồm cấu trúc logic cho các thành phần, cơ chế bỏ phiếu và việc đóng gói các thành phần để nâng cao khả năng sử dụng.
4.2.1 Cơ cấu lại các mã khách hàng
Trong phần này, chúng ta tiếp tục dự án Server Status bằng cách làm mịn và mở rộng nó, áp dụng các mô hình phần mềm mã RPC Đầu tiên, chúng ta sẽ đóng gói các thành phần tình trạng máy chủ như một phần mở rộng của lớp GWT Composite và thêm mã RPC Tiếp theo, chúng ta sẽ khám phá cách sử dụng mô hình phần mềm Façade để đơn giản hóa tương tác RPC Cuối cùng, chúng ta sẽ xem xét cách sử dụng các mẫu phần mềm Command để dễ dàng gọi các phương thức từ xa.
Bước đầu tiên trong việc xây dựng một thành phần là thiết kế bố trí hình ảnh cơ bản và xác định lớp widget cần mở rộng Đối với thành phần Server Status, hình 4.3 minh họa cấu trúc mong muốn và kết quả theo định dạng HTML.
Các thành phần Server Status bao gồm một VerticalPanel với bốn thành phần khác nhau Ngăn đầu tiên chứa tiêu đề tình trạng máy chủ, nơi bạn có thể sử dụng một nhãn để thể hiện thông tin và áp dụng CSS để làm nổi bật nó hơn.
Hình 4.3: Cấu trúc của các thành phần Server Status và những gì các thành phần hoàn thành
Thành phần Grid sẽ được sử dụng để hiển thị số liệu thống kê máy chủ qua RPC, bao gồm hai cột và năm hàng cho năm nhãn và giá trị dữ liệu Các nhãn như Server Name và Total Memory sẽ được thêm vào lưới dưới dạng văn bản gốc, trong khi các giá trị sẽ là các thành phần Label riêng biệt, cho phép cập nhật dễ dàng thông qua phương thức setText() Mặc dù có thể thiết lập văn bản trực tiếp trong lưới, việc cung cấp các ví dụ Label cho mỗi giá trị trong mã sẽ giúp tăng tính dễ hiểu và khả năng bảo trì Cuối cùng, ở dưới cùng của các thành phần Server Status sẽ có một thành phần cập nhật.
Nút được sử dụng để tự động cập nhật các số liệu thống kê, trong khi Label hiển thị thời gian cập nhật các giá trị Chúng tôi dự định sử dụng cơ chế bỏ phiếu để cập nhật định kỳ, nhưng nút cập nhật cũng cho phép thực hiện bản cập nhật sớm khi cần thiết.
Cuối cùng chúng ta thu được một phiên bản gần như hoàn thiện
Hình 4.4: Một phiên bản gần như hoàn chỉnh của ví dụ thành phần Server Status b Đúng gúi cuộc gọi từ xa trong Faỗade
Mẫu hình Façade cung cấp một giao diện cấp cao, giúp hệ thống phụ trở nên dễ sử dụng hơn Để đóng gói toàn bộ logic RPC vào một lớp với giao diện đơn giản, bạn cần thực hiện một số bước cụ thể.
- Giảm độ phức tạp bằng cách giảm số lượng các 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 cơ chế RPC cơ bản 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 nhau
Để giữ cho khách hàng luôn được cập nhật, việc duy trì liên lạc với máy chủ thông qua cuộc gọi RPC là rất quan trọng Điều này giúp thông báo cho trình duyệt của khách hàng về các sự kiện như email mới hoặc tin nhắn trò chuyện Giải pháp hiệu quả là thực hiện việc thăm dò máy chủ thường xuyên, chẳng hạn như mỗi năm phút Tuy nhiên, một số ứng dụng cần cập nhật gần như thời gian thực Trong phần này, chúng ta sẽ khám phá chức năng của GWT trong các nhiệm vụ lập kế hoạch và kiểm tra kỹ thuật bỏ phiếu khác nhau, bao gồm cả kỹ thuật giao tiếp server push và client pull.
Kỹ thuật giao tiếp được phân thành hai loại chính: server push và client pull Trong kỹ thuật push, máy chủ chủ động đẩy nội dung đến khách hàng, trong khi ở kỹ thuật pull, khách hàng tự yêu cầu dữ liệu từ máy chủ Sự khác biệt giữa hai loại này nằm ở việc ai là người khởi xướng yêu cầu.
Mỗi ngày, bạn sử dụng công nghệ server push khi gửi email hoặc tin nhắn Khi bạn gửi một email, nó sẽ được chuyển đến một máy chủ mail, từ đó email được đẩy đến máy chủ của người nhận Tương tự, trong trường hợp tin nhắn tức thời, tin nhắn cũng được đẩy đến người nhận một cách nhanh chóng.
Bằng cách cung cấp dữ liệu cho khách hàng, bạn có thể thu hút một lượng lớn khách hàng mà không cần tốn nhiều tài nguyên máy chủ hoặc băng thông cho đến khi có nội dung để gửi Với quy mô này, bạn có thể dễ dàng hỗ trợ một số lượng lớn khách hàng thông qua một chương trình tương đối đơn giản.
Client pull là thuật ngữ chỉ các trình tự đáp ứng yêu cầu tiêu chuẩn mà trình duyệt sử dụng Khi bạn truy cập một URL, trình duyệt sẽ gửi yêu cầu đến máy chủ để "kéo" trang về Kỹ thuật này rất hữu ích trong việc giảm thiểu độ trễ giữa các thao tác sự kiện và việc nhận được phản hồi hợp lệ.
Client pull có những thách thức riêng, đặc biệt là sự chậm trễ giữa việc gửi và nhận sự kiện Điều này yêu cầu bạn phải xếp hàng dữ liệu trên máy chủ và chờ đợi khách hàng kiểm tra Ví dụ, khi phát triển ứng dụng chat bằng client pull, máy chủ cần lưu trữ các tin nhắn chưa gửi cho người dùng cho đến khi họ lấy chúng Hơn nữa, việc thực hiện một thành phần liên tục cập nhật cũng là một yếu tố quan trọng cần xem xét.
Trong bài viết này, chúng ta sẽ tìm hiểu về thành phần Trạng thái Máy chủ và cách để nó tự động cập nhật định kỳ Để thực hiện điều này, bạn sẽ cần thiết lập tỷ lệ làm mới cho dữ liệu và có khả năng thay đổi hoặc tạm dừng việc cập nhật tự động Chúng ta sẽ xem xét lớp Timer GWT, cho phép kích hoạt các sự kiện theo thời gian.
Hình thức Ajax cổ điển và HTML
Trong bài viết này, chúng ta sẽ khám phá hai công cụ quan trọng là RequestBuilder và FormPanel, cả hai đều có khả năng truyền dữ liệu đến máy chủ Vậy câu hỏi đặt ra là công cụ nào là lựa chọn tốt nhất cho nhu cầu của bạn?
Nếu bạn cần gửi hoặc yêu cầu dữ liệu từ máy chủ mà không cần giao diện người dùng, RequestBuilder là lựa chọn tối ưu Công cụ này dễ sử dụng, xử lý lỗi hiệu quả và cho phép bạn truy cập mã trạng thái máy chủ để xử lý lỗi một cách thích hợp Ngoài ra, RequestBuilder còn hỗ trợ thiết lập thời gian chờ cho yêu cầu hủy bỏ và cho phép bạn thiết lập cũng như sửa đổi các tiêu đề gửi đến máy chủ.
FormPanel gửi dữ liệu đến máy chủ bằng cách gói chức năng hiện có như mẫu
HTML được sử dụng trong các trình duyệt web để gửi dữ liệu từ người dùng đến máy chủ thông qua các biểu mẫu RequestBuilder hoạt động tương tự, cho phép đăng ký xử lý sự kiện với FormPanel để theo dõi các sự kiện của biểu mẫu Sau khi hoàn tất, kết quả từ máy chủ được gửi đến một khung ẩn, giúp mã có thể đọc và cung cấp phản hồi cho người dùng về phản ứng của máy chủ.
4.3.1 Ajax cổ điển với RequestBuilder Đối tượng XMLHttpRequest là một công cụ mà là một phần của các trình duyệt hiện đại, có thể liên quan với JavaScript Đối tượng XMLHttpRequest này cho phép bạn lấy nội dung từ một URL từ xa và xử lý các phản ứng lập trình Lợi ích của việc tải nội dung theo cách mà bạn có thể sử dụng mã để giao tiếp với máy chủ mà không cần phải làm mới trang web, làm cho các ứng dụng web của bạn cảm thấy giống như một ứng dụng máy tính để bàn và dễ dùng hơn Cơ chế GWT – RPC mà bạn đã tìm hiểu là một công cụ cao cấp được xây dựng trên đầu trang của đối tượng này
Bài viết sẽ bắt đầu với tổng quan về giao thức HTTP và phân tích sự khác biệt giữa phương thức GET và POST, tạo nền tảng cho việc khám phá lớp RequestBuilder Sau khi nắm vững các khái niệm cơ bản, chúng ta sẽ xem xét RequestBuilder, một công cụ cung cấp giao diện đơn giản và hợp lý để thực hiện các cuộc gọi từ xa đến máy chủ Nó cho phép người dùng tùy chỉnh các chi tiết cấp thấp của yêu cầu, bao gồm việc thêm tiêu đề HTTP và xác định thời gian chờ.
Khi bạn tải một trang web, giao tiếp diễn ra qua Giao thức Truyền tải Siêu văn bản (HTTP), bao gồm yêu cầu và phản hồi giữa trình duyệt và máy chủ Trình duyệt gửi yêu cầu đến máy chủ, và máy chủ phản hồi lại Mỗi yêu cầu HTTP bao gồm một lệnh với phương thức URL, cặp tiêu đề tên – giá trị, và có thể có một tin nhắn Trong GWT, chúng ta chỉ cần chú trọng đến hai phương thức chính là GET và POST, vì đây là những phương thức duy nhất được GWT hỗ trợ.
GET và POST có thể được sử dụng để gửi dữ liệu đến máy chủ, nhưng cách thực hiện điều thì khác nhau b Phân tích phương thức GET HTTP
Lệnh GET gửi tất cả dữ liệu dưới dạng một phần của URL Ví dụ, khi thực hiện tìm kiếm Google cho từ khóa "GWT", URL sẽ là: http://www.google.com/search?hl=en&q=GWT&btnG=Google%2Bsearch Khi trình duyệt gửi yêu cầu URL tới google.com, nó sẽ gửi một tin nhắn GET qua giao thức HTTP.
GET /search?hl=en&q=GWT&btnG=Google%2BSearch HTTP/1.1
URL vẫn giữ nguyên, chỉ có tên máy chủ được thêm vào như tiêu đề Để rõ ràng, chúng tôi chỉ bao gồm các tiêu đề chính, nhưng bạn có thể sử dụng nhiều cặp tên – giá trị bổ sung để xác định thông tin về trình duyệt của mình.
Phần truy vấn trong URL là rất quan trọng, được phân biệt bởi dấu hỏi duy nhất và chứa các cặp tên/giá trị Các cặp này được phân cách bằng ampersands (&) và sử dụng dấu bằng (=) để tách tên khỏi giá trị So với phương thức GET, phương thức POST có sự khác biệt rõ rệt trong cách truyền tải dữ liệu.
Phương thức POST thường được sử dụng trong HTML để truyền tải nhiều dữ liệu Khác với phương thức GET, POST gửi dữ liệu qua body của thông điệp HTTP thay vì qua URL Trong HTTP, lệnh và tiêu đề được tách biệt với body bằng một dòng trống Khi sử dụng GET, chúng ta gửi một truy vấn đơn giản đến máy chủ web, trong khi với POST, cùng một truy vấn sẽ được gửi qua phương thức này.
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 gọi một URL và đăng ký một xử lý để nhận kết quả, hoạt động tương tự như GWT – RPC nhưng chỉ hỗ trợ dữ liệu văn bản Dữ liệu không phải văn bản, như giá trị ngày, cần được chuyển đổi sang văn bản trước khi gửi Bạn có thể gửi dữ liệu bằng phương thức GET hoặc POST; với GET, dữ liệu sẽ được mã hóa trong URL, trong khi POST cho phép gửi bất kỳ loại dữ liệu dựa trên văn bản Cả hai phương thức đều cho phép chỉ định tên người dùng và mật khẩu để truy cập tài nguyên máy chủ, mặc dù trong hầu hết các trường hợp, điều này không cần thiết.
The RequestBuilder, part of the com.google.gwt.http.client package, is a component of the HTTP model that must be initialized for use Its constructor requires two parameters: a method and a URL, with the method being one of two static constants: RequestBuilder.GET or RequestBuilder.POST.
4.3.2 Các vấn đề cơ bản của FormPanel
FormPanel là một kỹ thuật phổ biến cho việc tạo khung nội tuyến ẩn, cho phép gửi và nhận dữ liệu mà không cần làm mới trang Bằng cách sử dụng JavaScript và chuỗi truy vấn, bạn có thể tải nội dung vào khung nội tuyến và kiểm tra các nội dung đã trả về Kỹ thuật này rất hiệu quả khi bạn muốn trình bày các điều khiển đầu vào cho người dùng và gửi dữ liệu mẫu đến máy chủ để xử lý Mặc dù bạn có thể sử dụng GWT – RPC hoặc RequestBuilder, nhưng điều này sẽ yêu cầu nhiều mã hơn để đạt được hiệu quả tương tự.
Hình thức HTML bao gồm yếu tố với các form controls được đặt tên để xác định chúng, như FullName, streetAddress, cityState và PhoneNumber trong một mẫu đăng ký Hầu hết các hình thức cũng có nút gửi để gửi dữ liệu đến máy chủ Thuộc tính phương thức xác định loại tin nhắn HTTP (POST hoặc GET) được sử dụng để gửi dữ liệu Ví dụ về các hình thức này có thể được minh họa trong mã HTML.
Khi người dùng nhấn nút gửi, dữ liệu sẽ được gửi đến máy chủ theo quy tắc mà chỉ các điều khiển bên trong các yếu tố hình thức được gửi đến URL chỉ định bởi hành động Điều này cho phép bạn có nhiều hình thức trên cùng một trang, chẳng hạn như một hình thức tìm kiếm và một hình thức đăng ký, mỗi hình thức có hành động khác nhau.
