Liferay 6.2: Ví dụ về AJAX trong Liferay

Khỏi phải bàn đến lợi ích của ajax trong trong các ứng dụng web. Với nhiều lợi ích như thế nên ajax được hỗ trợ rất tốt trong Liferay và việc sử dụng nó cũng hết sức đơn giản. Trong bài viết này, mình sẽ làm một ví dụ đơn giản minh họa việc sử dụng ajax giúp cho lập trình viên có thể tạo ra những ứng dụng web độc đáo nhất.

Bài toán

Giả sử, ta có một danh sách các sinh viên. Ta muốn hiển thị thông tin của một sinh viên nào đó bằng việc gõ mã sinh viên vào một ô textbox, sau đó nhấn vào nút Tìm kiếm bên cạnh. Nếu tìm thấy thông tin của sinh viên có mã giống với mã chúng ta vừa nhập thì ta sẽ hiển thị thông tin của sinh viên đó lên màn hình.

Phân tích

Thực ra, bài toán trên rất dễ dàng nếu như chúng ta sử dụng một form tìm kiếm (xem tại đây), nút tìm kiếm chính là nút submit. Nhưng mình muốn ở đây là chúng ta sử dụng ajax để thực hiện công việc trên để tránh phải refresh lại màn hình.

Công việc của chúng ta là khi nhấn nút Tìm kiếm thì ta sẽ lấy nội dung trong ô textbox và truyền xuống dưới máy chủ. Máy chủ sẽ xử lý và trả lại kết quả cho chúng ta. Khi nhận được kết quả trả lại ta sẽ hiển thị nó lên màn hình cho người dụng.

Cài đặt

Kiến thức

Trong nội dung này, chúng ta cần quan tâm nhất hai thứ sau đây:

AUI.IO.Request: Gửi dữ liệu và nhận kết quả
Resource: Xử lý dữ liệu ở máy chủ.

AUI.IO.Request

Bạn có thể xem các ví dụ của IO.Request tại đây hoặc xem API tại đây. IO là các lớp tiện ích cho phép chuyển các yêu cầu HTTP thông qua một giao diện đơn giản. Đặc biệt là nó cho phép Javascript thực hiện các yêu cầu HTTP để lấy các tài nguyên từ máy chủ mà không cần tải lại trang.

Resource

Thông thường, ta biết đến hai thành phần Render và Action. Render được thực hiện khi ta tải các trang còn Action được dùng khi ta thực hiện các thao tác như thêm, cập nhật, xóa, .... Liferay còn hỗ trợ thêm một thành phần nữa là Resource. Nó cho phép ta làm việc với các tài nguyên của hệ thống.

Ví dụ

Bước thứ nhất, ta tạo một porlet có tên là ajax-portlet. Portlet này sẽ chứa các đoạn code jsp và java để giải quyết bài toán của chúng ta.

Bước thứ hai ta sẽ viết một file jsp gồm có 1 textbox, 1 button và một bảng thể hiện thông tin của một sinh viên. Cuối cùng là một đoạn Java code để xử lý dữ liệu và trả lại kết quả phù hợp.

JSP

Ta sẽ đi giải thích một chút về tệp tin JSP trên:

Dòng thứ 4: ta sẽ tạo ra 1 textbox cho phép nhập 1 chuỗi mã của sinh viên cần tìm.
Dòng thứ 5: là một nút bấm, khi bấm vào sẽ gọi đến hàm onSearch được định nghĩa ở cuối tệp.
Từ dòng 9 - 36: là một bảng thể hiện thông tin của một học viên (3 thông tin)
Dòng 38-39: Ta tạo ra một Resource URL được sử dụng để gọi phương thức serveResource ở dưới máy chủ. Các tham số hằng số sẽ được ghi trong phần này bằng cách thêm vào các thẻ (nếu có)
Dòng 41-72: là phần chính mà chúng ta quan tâm trong bài viết này. Chúng ta quan tâm nhất là các dòng từ 50-69. Ở đây, ta tạo ra một đối tượng AUI().io.request với các tham số như trong ví dụ. Giải thích một chút:

Trường data: có định dạng là JSON, nó là các tham số động được truyền xuống dưới server
Trường dataType: là kiểu dữ liệu trả về (json, xml, text,...)
Trường method: là phương thức truyền (post, get)
Trường on: cho phép bắt các sự kiện. Ở đây, mình chỉ bắt mỗi sự kiện success (ngoài ra còn nhiều sự kiện khác (xem ở đây). Trong trường hợp này, dữ liệu trả về là một đối tượng Json có ba thành phần là name, code và gender. Khi bắt được các dữ liệu trả về thì mình chỉ lưu nó vào các thẻ có sẵn để thể hiện thông tin của sinh viên mà thôi. Ví dụ, trường name sẽ được lưu vào thẻ span có id là studentName,...

Như vậy, chúng ta có thể thấy việc viết một trang jsp để lấy dữ liệu theo phương thức ajax không hề khó. Tiếp theo, ta sẽ xem xét việc máy chủ sẽ trả lại dữ liệu như thế nào.

Java code

Khi tạo ra một portlet mới, chúng ta sẽ có một controller (theo mô hình MVC) để xử lý các dữ liệu. Trong ví dụ này, lớp đó có tên là AJAXPorlet. Ta sẽ viết lại (override) phương thức serveResource như sau:

Ta xem xét một số dòng sau:

Từ dòng 30 đến dòng 57 thể hiện cho nội dung của phương thức serveResource.
Trong đó, tại dòng 32 chúng ta dữ lấy dữ liệu được truyền từ màn hình xuống. Cụ thể ở đây là lấy giá trị của trường code.
Dòng 35: ta sẽ lấy dữ liệu từ cơ sở dữ liệu
Dòng 37: tạo ra một đối tượng Json, ở đây ta có thể tạo một đối tượng json hoặc một mảng cũng được. Trong ví dụ này, ta chỉ cần một sinh viên nên chỉ cần một đối tượng json là đủ lưu trữ các thông tin của một sinh viên rồi.
Dòng 39-41: chúng ta lần lượt đặt các giá trị cần hiển thị vào đối tượng json vừa tạo trên. Mỗi dữ liệu sẽ được gán với 1 nhãn (tên). Ví dụ, giá trị fullname sẽ được gán bằng nhãn name.
Dòng 43-44: là các thiết lập cho việc xuất kết quả ngược trở lại màn hình.
Cuối cùng là dòng 48 kết quả được chuyển trở lại cho bên yêu cầu.

Dữ liệu được chuyển trở lại và ngay lập tức trên mà hình, các thông tin của sinh viên sẽ được hiển thị như hình dưới đây:

Kết luận

Lại là một ví dụ thú vị trong Liferay đúng không? Theo mình, gần như ứng dụng nào (portlet) cũng đều chứa một hoặc nhiều các yêu cần cần sử dụng ajax. Hi vọng ví dụ này giúp ích cho bạn. Bạn có thể tại source code tại đây. Chúc các bạn thành công.

Liferay, Java & Programming

Menu