Liferay 6.2: Sử dụng tiện ích SessionClicks

English version

Chắc chắn trong quá trình xây dựng website, cổng thông tin thì bạn phải sử dụng các dữ liệu tạm thời. Mình có thể kể ra các ứng dụng như hiển thị các sản phẩm hoặc mục mà người dùng đã xem, hay sử dụng trong quá trình chọn hàng để mua trong các ứng dụng thương mại điện tử. Hoặc đơn giản là ghi lại trạng thái của thanh thực đơn chẳng hạn.

Có nhiều phương pháp để bạn ghi lại các dữ liệu tạm thời đó. Trong bài viết này mình sẽ thảo luận về phương pháp được sử dụng trong Liferay. Trong Liferay, chúng ta sẽ quan tâm tới hai thành phần chính đó là SessionClicks được sử dụng trong JSP và Java code. Còn đối với code Javascript chúng ta sẽ sử dụng tiện ích được cung cấp sẵn Liferay.Store để lưu lại giá trị cho các biến tạm thời. Hãy xem ví dụ cụ thể của chúng ta nào:
Bài toán: Để dễ giải thích ta sẽ làm một bài toán đơn giản như sau: Đầu tiền, ta sẽ tạo ra một thẻ div và ta cần hiển thị hoặc ẩn thẻ này đi. Tiếp theo, ta sẽ tạo ra ba liên kết (thẻ a), các thẻ tên là refresh, show và hide có tác dụng lần lượt là tải lại trang, hiển thị và ẩn thẻ div trên. Trạng thái ẩn hoặc hiện của thẻ này sẽ được lưu lại tạm thời, khi tải lại trang nó vẫn giữ lại được trạng thái đó. Hình dưới minh họa các thành phần cần thiết, thẻ div chứa một thẻ img, và ba thẻ tương ứng với ba liên kết.

Mục tiêu của chúng ta cần đạt được là khi bạn nhấn vào nút Hide thì cái ảnh phía trên sẽ ẩn đi, sau đó bạn nhấn vào nút Refresh hay F5 thì trạng thái ẩn của bức ảnh vẫn được ghi lại, tương tự khi bạn nhấn vào nút Show.

Mình sẽ có hai cách để làm công việc trên, đó là chỉ sử dụng JSP code và cách thử hai là sử dụng javascript để ghi lại trạng thái đó. Hãy bắt đầu với cách thứ nhất nhé:

JSP Code

Hãy xem đoạn code dưới đây, sau đó mình sẽ giải thích ý nghĩa từng dòng một:

Ta hãy phân tích từng dòng một nhé:

• Hai dòng đầu tiên ta bỏ qua nhé, bạn có thể xem chi tiết file init.jsp trên trang github (link ở cuối bài).
• Dòng số 5: Dòng này để lấy tham số khi chúng ta nhấn vào nút Show hoặc Hide (tham số này được mình thêm vào liên kết, xem dòng 29 và 36). Nếu bạn nhấn vào các nút khác thì giá trị của biến param là rỗng.
• Dòng số 7: Kiểm tra nếu param khác rỗng (nghĩa là ta nhấn hoặc nút Show hoặc nút Hide) thì ta sẽ lưu lại trạng thái (dòng 9).
• Dòng số 9: Ta sẽ lưu tạm thời giá trị này lại với khóa là status (sử dụng phương thức SessionClicks.put).
• Dòng số 12: Đọc lại giá trị đã được lưu tạm thời bằng phương thức SessionClicks.get.
• Dòng số 16: Tùy vào giá trị của biến status mà ta đặt cho thuộc tính class của thẻ div với giá trị là hide hoặc rỗng.

Như vậy, ta đã biết cách sử dụng hai phương thức là put và get trong tiện ích SessionClicks để lưu trữ và lấy ra các biết tạm thời. Tuy nhiên, portlet của ta cần phải tải lại mỗi khi chúng ta nhấn vào nút Show hoặc Hide. Chính vì vậy, cách tiếp theo cho phép chúng ta không cần phải tải lại trang khi nhấn vào nút Show hoặc Hide mà vẫn đảm bảo các lượt tải sau này vẫn ghi lại được trạng thái của thẻ div.

Javascript + JSP Code

Hãy xem đoạn code dưới đây và so sánh với phương pháp trên nhé:

Các thành phần hiển thị thì vẫn không thay đổi, chỉ có thay đổi code một chút. Chúng ta hãy đi phân tích những thay đổi đó nhé:

• Trong đoạn code JSP đầu tiên, ta chỉ giữ lại biểu thức lấy giá trị tạm thời mà thôi. Các phần khác ta bỏ qua, vì dữ liệu tạm thời này được lưu khi ta gọi hàm Javascript là setStatus.
• Hàm setStatus được gọi khi ta click vào nút Show hoặc nút Hide, với các tham số tương ứng thì hàm này sẽ ẩn hoặc hiện thẻ div, đồng thời lưu lại trạng thái (xem dòng 42).
• Rõ ràng, ta sử dụng Javascript nên khi click vào nút Show hoặc Hide thì vẫn không phải tại lại trang mà vẫn được kết quả như mong muốn.
• Bây giờ hãy thử click vào nút Refresh đi, trạng thái của thẻ div vẫn được ghi lại đúng không nào?

Kết luận

Trên đây là hai trường hợp sử dụng tiện ích SessionClicks để lưu trữ tạm thời các dữ liệu đơn giản. Ví dụ của mình thì chỉ giải quyết một vấn đề vô cùng đơn giản, tuy từng bài toán cụ thể hãy chọn giải pháp thích hợp nhé.

Bạn có thể tải mã nguồn của portlet tại đây và cảm ơn đã ghé thăm blog của mình.