Liferay 6.2: Cửa sổ popup

Cửa sổ popup là một tiện ích được tích hợp sẵn trong Liferay. Bản thân Liferay cũng sử dụng tiện ích này ở nhiều nơi. Ví dụ như trong giao diện phân quyền sử dụng (bạn click vào đường link phân quyền sẽ có một cửa sổ được bật nên để bạn chọn các quyền phù hợp), cấu hình portlet (bạn click vào các đường link cấu hình ở phía trên bên phải của mỗi portlet, sẽ có các cửa sổ được mở lên để bạn thay đổi cấu hình, giao diện, ... của portlet).

Nói chung, cửa sổ popup rất hữu dụng trong quá trình thiết kế giao diện ứng dụng. Vậy, làm thế nào có thể sử dụng được nó. Bài viết này sẽ giúp bạn.

Bài viết này được thử nghiệm với phiên bản Liferay 6.2. Với phiên bản này, Liferay đơn giản hóa việc gọi cửa sổ popup hơn các phiên bản trước đó. Ở đây, mình sẽ hướng dẫn hai cách mở cửa số popup. Đó là sử dụng các tiện ích có sẵn của Liferay và sử dụng AUI (Alloy UI) để mở cửa sổ popup.

Các tiện ích có sẵn

Liferay cung cấp sẵn cho chúng ta ba thẻ <aui:button />, <aui:nav-item /> và <liferay-ui:icon />, chúng có tác dụng mở một cửa sổ popup mới khi chúng ta đặt giá trị của thuộc tính useDialog="true". Bây giờ, chúng ta sẽ đi xem xét từng thẻ và cách thức hoạt động của chúng.

Giả sử, ta có tệp view.jsp sẽ chứa ba thẻ trên và tệp detail.jsp sẽ được hiển thị trong cửa sổ popup khi ta gọi nó. Sau đây là nội dung của tệp detail.jsp:

Có thể thấy rằng, nội dung của tệp detail.jsp rất đơn giản. Ta chỉ lấy từ request với khóa là parameter (dòng 3) và in lại nội dung của giá trị đó lên màn hình (dòng 6) mà thôi.

Thẻ AUI Button

Thẻ <aui:button /> là một thẻ hữu ích để tạo ra các button đẹp mắt. Sau đây là một vài thuộc tính mà ta cần quan tâm:

href: giá trị là một URL. Khi bạn click vào button, browser sẽ chuyển theo URL tương ứng. Nếu thuộc tính userDialog="true" thì sẽ mở một popup và trang được chuyển hướng đến sẽ nằm trong nó.
icon: hiển thị một icon trong nó.
name: tên button
type: loại button, các giá trị có thể chấp nhận là: button, submit, cancel and reset.
useDialog: Liệu có mở một cửa sổ popup để tải trang mới hay không?
value: nhãn của button, đồng thời cũng là tiêu đề của popup.

Bạn hãy xem ví dụ sau:

Bây giờ, hãy chạy thử portlet vừa tạo. Bạn sẽ thấy một nút bấm và click vào đó. Một cửa sổ popup sẽ hiện ra, bạn sẽ thấy rằng cửa sổ này giống hết cửa sổ phía dưới. Tuy nhiên, chỉ có phần màn hình trong portlet của chúng ta là khác. Vì portlet ở cửa sổ cha (cửa sổ chứa button) đang hiển thị tệp view.jsp còn cửa sổ popup thì hiển thị tệp detail.jsp.
Nếu để cửa sổ popup chứa cả trang web như vậy thì rất khó theo dõi. Ta chỉ cần cửa sổ popup chứa nội dung của portlet mà thôi. Đoạn code sau đây sẽ giải quyết được yêu cầu trên.

So sánh hai đoạn code, ta sẽ thấy khác biệt nằm ở dòng số 4. Mình có thêm thuộc tính windowState (windowState="<%= LiferayWindowState.POP_UP.toString() %>"). Thực tế, là mình thêm một tham số (windowState) vào URL để nói cho hệ thống biết mình sẽ chuyển tới một màn hình mở được mở theo kiểu POP_UP. Hệ thống sẽ tự động tải các mẫu để phù hợp với yêu cầu (phần này sẽ được thảo luận trong các bài liên quan đến theme).

Bây giờ, chạy lại chương trình và click vào nút bấm trên màn hình, một cửa sổ popup hiện ra và bạn sẽ thấy chỉ có nội dung của portlet được hiển thị trong cửa sổ này mà thôi.

Thẻ AUI Nav-item

Thẻ <aui:nav-item> cũng tương tự như thẻ <aui:button />. Sau đây là một số thuộc tính mà ta cần quan tâm:

href: giá trị là một URL. Khi bạn click vào đường link , browser sẽ chuyển theo URL tương ứng. Nếu thuộc tính userDialog="true" thì sẽ mở một popup và trang được chuyển hướng đến sẽ nằm trong nó.
label: nhãn của lên kết.
title: Tiêu đề của popup
useDialog: Liệu có mở cửa sổ popup để tải trang mới hay không?

Sau đây là ví dụ sử dụng thẻ <aui:nav-item>:

The UI Icon

Thẻ cuối cùng mà ta quan tâm là <liferay-ui:icon>, thẻ này rất hữu ích và hay được sử dụng. Ví dụ, trong bài viết "Liferay: Thao tác trên từng dòng của search-container", mình đã sử dụng thẻ này để tạo ra các liên kết rất đẹp mắt. Bên cạnh đó, nó cũng còn có rất nhiều các tiện ích khác để chúng ta khai thác. Một số thuộc tính hay dùng của thẻ là:

label: Liệu có hiển thị nhãn của liên kết hay không?
message: Nhãn của liên kết và đồng thời là tiêu đề của popup
url: Giá trị là một URL, browser sẽ chuyển đến trang tương ứng khi bạn click vào thẻ này.
useDialog: Liệu có mở trang mới trong một cửa sổ popup hay không.

Tương tự hai thẻ trên, thẻ <liferay-ui:icon> cũng cho phép ta mở một cửa sổ popup, bạn hãy xem ví dụ sau:

Sử dụng Alloy UI

(còn nữa)
Bạn có thể tải mã nguồn tại đây

Liferay, Java & Programming

Menu