Ajax Tag trong Struts 2




Struts sử dụng DOJO Framework để triển khai AJAX tag. Bạn cần thêm struts2-dojo-plugin-2.2.3.jar tới classpath. Bạn có thể lấy file này từ lib folder của struts 2 đã tải về (C:\struts-2.2.3-all\struts-2.2.3\lib\struts2-dojo-plugin-2.2.3.jar)

Chúng ta sửa đổi HelloWorld.jsp như sau:

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>
<title>Hello World</title>
<s:head />
<sx:head />
</head>
<body>
   <s:form>
      <sx:autocompleter label="Favourite Colour"
         list="{'red','green','blue'}" />
      <br />
      <sx:datetimepicker name="deliverydate" label="Delivery Date"
         displayFormat="dd/MM/yyyy" />
      <br />
      <s:url id="url" value="/hello.action" />
      <sx:div href="%{#url}" delay="2000">
           Initial Content
      </sx:div>
      <br/>
      <sx:tabbedpanel id="tabContainer">
         <sx:div label="Tab 1">Tab 1</sx:div>
         <sx:div label="Tab 2">Tab 2</sx:div>
      </sx:tabbedpanel>
   </s:form>
</body>
</html>

Sau đây chúng ta phân tích ví dụ trên:

Trong dòng code thứ hai, bạn chú ý rằng chúng ta đã thêm một thư viện thẻ taglib mới với tiền tố là sx. Đây là thư viện thẻ đặc biệt được tạo để tích hợp ajax.

Tiếp đó, bên trong HTML head, chúng ta gọi sx:head. Nó khởi tạo DOJO Framework và làm cho nó sẵn sàng cho tất cả lời gọi AJAX bên trong page. Bước này là rất quan trọng, các lời gọi AJAX của bạn sẽ không làm việc nếu không khởi tạo sx:head.

Thẻ autocompleter trông khá giống một select box. Nhưng điểm khác nhau giữa thẻ này và select box là nó tự động hoàn thành. Tức là, nếu bạn gõ gr, nó sẽ tự động điền là green. Ngoài ra thẻ này còn khá giống thẻ s:select.

Thẻ datetimepicker tạo một trường input với một button. Khi nút này được nhấn, một popup được hiển thị. Khi người dùng lựa chọn một date, thì date được điền vào trong trường input trong định dạng mà đã được xác định trong thuộc tính thẻ. Trong ví dụ, chúng ta đã định dạng là dd/MM/yyyy.

Tiếp đó, chúng ta tạo thẻ url tới system.action file mà chúng ta đã tạo trong các chương trước. Khi chúng ta xác định một sx:div với delay được thiết lập là 2 s thì khi bạn chạy, thì Initial Content sẽ được hiển thị trong 2 s, sau đó nội dung của div sẽ được thay thế với nội dung từ hello.action.

Cuối cùng, chúng ta có thẻ sx:tabbedpanel với hai tab.