Liferay 6.2: Gửi và nhận dữ liệu trong portlet

Trong bài trước, chúng ta đã tạo ra được một portlet có tên là FirstApp, portlet này đã hiển thị một lời chào lên màn hình. Câu chuyện đặt ra, nếu mình muốn cho phép người khác hiển thị dòng chữ chào mừng đấy thì ta phải làm thế nào?

Rất đơn giản thôi, ta cho người dùng nhập vào nội dung (tên người chẳng hạn) và người dụng nhấn vào nút Gửi , lúc này, controller sẽ trả lại dòng chữ chào mừng mà ta mong muốn.

Ta tạo một project mới có tên là SecondApp nhé (bạn đã quen tạo project mới chưa? Nếu chưa thì xem lại ở đây nhé).

Sau khi tạo xong, bạn tạo một portlet tương tư như bài 1. Portlet mới có tên là SecondPortlet .

• Portlet class: SecondPortlet
• Java package: com.liferay.tutorial
• Supperclass: com.liferay.util.bridges.mvc.MVCPortlet

Sau đó, bạn click vào Next ta được màn hình như sau:

Thêm mới portlet

Ở đây, bạn sẽ thấy các trường có ý nghĩa như sau:

• Name: Tên hay Id của portlet, tên này sẽ được lưu trong thẻ <portlet-name> ở các file portlet.xml và liferay-portlet.xml
• Display name: Tên hiển thị trong danh sách các portlet
• Title: Là tiêu đề của portlet, sẽ hiện thị trên đầu portlet khi ta kéo portlet vào page.
• Portlet Mode: Ở đây, mình vừa hiển thị vừa chỉnh sửa nên chúng ta chọn view và edit. View là mặc định vì vậy chúng ta sẽ tích thêm vào edit. Việc tích vào edit chỉ là để nó tạo tự động thêm file edit.jsp thôi, còn không tích thì chúng ta tự tạo sau.
• JSP folder: là nơi chứa tất cả các file jsp của thư mục. Một project có thể có nhiều portlet, vì thế, nên để các file jsp của từng portlet trong một thư mục riêng cho dễ quản lý. Thông thường ta để trong thư mục /html/tên_portlet.

Bạn nhấn vào Next ta được màn hình như sau:

Thêm các thông tin khác

• Icon: là đường dẫn đến icon của portlet. Portlet tự tạo icon cho nó, bạn cứ để yên đường dẫn như thế và sau này thay file icon.png bằng file khác là được.
• css: file main.css sẽ được gắn vào portlet của chúng ta. File này năm trong thư mục css. Sau này, tất cả các style của bạn đều để trong file này nhé. 
• JavaScript: file main.js chứa các hàm Javascirpt
• CSS class wrapper: như mình giải thích ở bài 1
• Display Category: Cái mục này để phân loại các ứng dụng của chúng ta. Có rất nhiều loại khác nhau, mình tự thêm một loại mới là Tutorial khi bạn kéo portlet này vào page thì tìm trong mục Tutorial nhé.

Cuối cùng nhấn vào Finish. Ta sẽ được một portlet có cấu trúc sau:

Cấu trúc thư mục của portlet

Thêm portlet vào máy chủ và chạy. Bạn sẽ thấy nội dung mặc định của portlet sẽ là nội dung của file: /html/second/view.jsp.

Bây giờ chúng ta sẽ sửa nội dung của file view.jsp để thêm vào một link mở ra giao diện để ta có thể nhập vào một chuỗi (tên). Nội dung mặc định của file này là:
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

This is the <b>Second Portlet</b> portlet in View mode.

Ta thêm vào file view.jsp 4 dòng như sau:

<portlet:renderURL var="editURL">

    <portlet:param name="mvcPath" value="/html/second/edit.jsp" />

</portlet:renderURL>

<p><a href="<%= editURL %>">Enter Name link</a></p>

Ta sẽ đi giải thích một chút về các thẻ trong 4 dòng lệnh vừa thêm vào:

• Thẻ <portlet:renderURL>: Thẻ này sẽ sinh ra một URL và gán vào biến editURL. URL này có dạng render dùng trong các trường hợp mở liên kết mới ngược lại với dạng action thực hiện một thao tác nào đó (thêm, sửa, xóa...)
• Thẻ <portlet:param>: thẻ này nhăm mục đích sẽ thêm tham số vào URL ở trên, ta có thể hiểu như sau: giả sử render URL có dạng là: http://abc.xyz thì sẽ sinh ra một URL có dạng http://abc.xyz?mvcPath=/html/second/edit.jsp. Thuộc tính name có thể đặt bất kỳ, nhưng nên đặt có ý nghĩa còn value đường dẫn đầy đủ tính từ docroot đến file jsp cần thiết.
• Thẻ <a>: Thẻ này thì rất quen thuộc với người làm web rồi. Nhưng chú ý trong thuộc tính href, ta thấy có lệnh <%= editURL%>. editURL biến của thẻ renderURL ở trên rồi, còn <%=%> thì có nghĩa là gì? Nó là một chỉ thị của JSP, có nghĩa là in ra giá trị của biến edit. Có thể hiểu một cách nôm na, dòng lệnh cuối cùng sẽ được dịch thành thẻ HTML là:
  <p><a href="http://abc.xyz?mvcPath=/html/second/edit.jsp">Enter Name link</a></p>
  Ngoài ra ta còn có một số chỉ thị khác như:
• <%@%>: dùng để import các file hoặc các thư viện. Mình sẽ nói sau
• <%!%>: dùng để định nghĩa các hàm, hằng số trên file jsp
• <%!-- --%>: chú thích
• <%=%>: in ra giá trị.

OK, bây giờ bạn thử deploy lại portlet của mình xem trên màn hình có gì nào?

Thêm liên kết đến file edit.

Hình trên là kết quả sau khi chúng ta chỉnh sửa file view.jsp. bạn thử click vào xem nó có hoạt động không?

Giao diện edit

Kết quả là chúng ta thấy giao diện edit hiện ra, bây giờ ta sẽ chỉnh sử file edit.jsp để cho phép người dùng có thể nhập vào một chuỗi tên. Bạn mở file edit.jsp lên, nếu chưa có thì tạo mới file edit.jsp trong thư mục docroot/http/second. Soạn thảo nội dung như sau:

Để ý trong nội dung này có các điểm chú ý như sau:

• Dòng: <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> đây là thư viên aui do nhóm Liferay viết lại. Chứa rất nhiều thẻ hữu ích. Ta sẽ đi tìm hiểu từng thẻ một.
• Dòng <portlet:defineObjects />:  cũng tương tự như trong file view.jsp dùng để định nghĩa các biến toàn cục trong file.
• Hai dòng tiếp theo: <portlet:actionURL var="editURL"></portlet:actionURL> ta sẽ định nghĩa một URL dạng action. Tức là dạng URL cho việc cập nhật, xóa, thêm và các thao tác khác.
• Thẻ tiếp theo: <aui:form action="<%= editURL %>" method="post"> đây chính là thẻ form dùng để cập nhật dữ liệu. Tron thẻ này còn có một số các thuộc tính khác, nhưng giờ chúng ta chỉ xem các thuộc tính cơ bản. Thuộc tính action chính là URL, method="post" là phương thức cập nhật dữ liệu (tương trự trong form HTML thông thường)
• Dòng <aui:input label="name" name="name" type="text" value="" /> là một textbox cho phép chúng ta nhập vào một chuỗi. Thuộc tính name ở đây được sử dụng để chúng ta lấy giá trị trương ứng đã nhập vào.
• Dòng <aui:button type="submit" /> tạo nút để chuyển nội dung form xuống dưới controller.

Bây giờ, bạn click vào link trên trang view ta sẽ được nội dung như sau:

Form nhập dữ liệu

Bạn nhập vào một cái tên và nhấn vào nút Submit. Nhưng lúc này, chúng ta cần phải "bắt" được nội dung trên form gửi xuống controller, sau đó, từ controller ta sẽ gửi lại màn hình view.

Để bắt nội dung được giử từ máy trạm xuống máy chủ. Bạn mởi file java là controller của portlet, trong trường hợp này là SecondPortlet.java và soạn thảo nội dung như sau:

Trong file này, package và import thì mình không nói làm gì. Chúng ta để ý có một phương thức là processAction được override từ phương thức tương ứng của lớp cha. Phương thức này sẽ xử lý bất hành động gửi dữ liệu từ máy cá nhân xuống máy chủ trong portlet này. Ta xem xét nó nhé:

• Phương thức này có hai tham số là actionRequest sẽ chứa các thông tin được gửi từ máy khách xuống (bao gồm cả các dữ liệu trong form) và actionResponse sẽ chứa các dữ liệu được xử lý xong và gửi lên trả lại.
• Dòng String name = ParamUtil.getString(actionRequest, "name"); có tác dụng lấy dữ liệu từ máy khách gửi xuống, ở đây form có một trường input có tên là "name" nên ta sẽ đọc nội dung từ actionRequst bằng hàm tiện ích ParamUtil.
• Các dòng tiếp theo sẽ xử lý dữ liệu. Trong trường hợp không gửi xuống gì cả thì trả về thông điệp là "Hello World" còn trường hợp gửi xuống một cái tên ta sẽ giử lại lời chào.
• Dòng actionResponse.setRenderParameter("message", message); có tác dụng thêm vào luồng dữ liệu tra lại một giá trị có tên là "message" và có giá trị mà chúng ta đã xử lý.
• Cuối cùng ta gọi phương thức của lớp cha.

Như vậy, ta đã thực hiện xong việc nhận dữ liệu từ form và xử lý dữ liệu đó. Bạn hãy deploy và hãy thử nhập một chuỗi bất kỳ và nhấn vào nút "Save" xem có gì thay đổi không?Như quan sát thấy, portlet sẽ trở lại giao diện view ban đâu. Vậy, tại sao không hiển thị dữ liệu trả lại? Câu trả lời là ta đã hiển thị dữ liệu ấy ra đâu. Thế nên, bây giờ ta sẽ sửa lại file view.jsp như sau.

Nội dung cũng không khác với ban đầu là mấy ngoại trừ có thêm các dòng như:

• String message = ParamUtil.getString(renderRequest, "message"); lấy dữ liệu trả lại từ controller, lưu ý là dòng này năm trong chỉ thị <% %>.
• <%= message %> có tác dụng in nội dung của biến message ra HTML.

Bây giờ bạn deploy và nhập vào một cái tên. Ta sẽ được nội dung file view trả về như sau:

Giao diện trả lại

Rõ ràng, ta nhập vào dòng "Programmer", trong controller ta sẽ xử lý bằng cách thêm vào chữ "Hello " ở đằng trước tên và trả về màn hình view. Sau đó, hiển thị lên màn hình như trên.

Vậy, trong bài này, chúng ta đã đi được thêm ba bước nữa. Đó là tạo một form dữ liệu, chuyển dữ liệu xuống máy chủ và trả dữ liệu về máy khách. Tất nhiên, nếu bạn là beginner thì sẽ khó khăn lúc đầu nhưng quen dần thì rất dễ dàng trở thành chuyên gia thôi.

Mã nguồn tại đây nhé