Menu

Liferay 7: Sử dụng Item Selector

Trong phiên bản 7, Liferay đã giới thiệu rất nhiều tính năng mới thú vụ. Một trong số chúng là Item Selector. Nói một cách đơn giản, nó là một thành phần (component) cho phép người dùng chọn nhiều loại tài nguyên khác nhau (ảnh, video, bài viết,...).

Nếu ứng dụng (portlet) của bạn cần phải chọn ảnh/video/bài viết,... từ hệ thống thì Item Selector chính một lựa chọn hợp lý. Item Selector sẽ mở ra một cửa sổ (dialog) lựa chọn cho phép bạn có thể chọn nhiều loại tài nguyên khác nhau như ảnh, video, hoặc bất kỳ dữ liệu nào.

item selector

Tại sao cần Item Selector

Nếu không có Item Selector thì ở mỗi ứng dụng và mỗi loại dữ liệu chúng ta cần phải tự cài đặt. Việc này thực sự tồn nhất nhiều thời gian. công sức và tất nhiên nó sẽ không thống nhất.

Item Selector mang đến một giải pháp đơn gian, dễ dàng mở rộng và quan trọng nhất là tính nhất quản. Có nghĩa là với Item Selector bạn có thể dùng cho bất cứ loại dữ liệu nào mà bạn tạo ra mà vẫn đảm bảo tính nhất quản. Về cơ bản, có hai thứ cần dùng Item Selector: Entity và Return Type

  1. Entity: Loại dữ liệu mà bạn muốn chọn (ảnh, video...)? Mỗi loại entity phải cài đặt giao diện ItemSelectorCriterion để Item Selector có thể hiểu. Liferay đã thực hiện cài đặt cho những Entity cơ bản như ảnh, video,... Bạn có thể tìm được danh sách các Entity của Liferay tại đây. Nếu bạn muốn tạo ra một loại Entity mới và hiển thị trong Item Selector thì bạn cần mở rộng từ lớp BaseItemSelectorCriterion. Lớp này cũng được cài đặt từ giao diện ItemSelectorCriterion.
  2. Return Type: Loại dữ liệu nào mà bạn muốn cung cấp cho người dùng khi họ chọn một Entity trên Item Selector? Bạn muốn nhận được URL, UUID hay khoá chính (ID)? Mỗi loại dữ liệu trả về phải được cài đặt từ giao diện ItemSelectorReturnType. Liferay cũng đã cung cấp sẵn một số loại Return Type như URL, UUID và bạn có thể xem chúng tại đây.

Vậy, Item Selector là một tổ hợp của các Entity và Return Type. Sau đây, tôi sẽ giải thích cách Item Selector để chọn hình ảnh và trả về URL. Các bước thực hiện như sau:

  1. Tạo URL từ Entity và Return Type
  2. Sử dụng URL ở bước 1 trong cửa sổ Item Selector 

Tạo URL từ Entity và Return Type

Đầu tiên, bạn cần phải tạo URL từ tổ hợp các Entity và Return Type. Ở đây Entity là hình ảnh và Return Type là URL.

Thêm thư viện: Thêm các module vào file build.gradle.

dependencies {
compileOnly group: "com.liferay.portal",     name: "com.liferay.portal.kernel", version: "2.0.0",
compileOnly group: "com.liferay.portal",     
    name: "com.liferay.util.taglib", version: "2.0.0"
compileOnly group: "javax.portlet",     name: "portlet-api", version: "2.0"
compileOnly group: "javax.servlet",
    name: "javax.servlet-api", version: "3.0.1"
compileOnly group: "jstl", name: "jstl", version: "1.2"
compileOnly group: "org.osgi",
    name: "org.osgi.compendium", version: "5.0.0"
compileOnly group: "com.liferay",
    name: "com.liferay.item.selector.api", version: "2.0.0"
compileOnly group: "com.liferay",
    name: "com.liferay.item.selector.criteria.api", version: "2.0.0"
}

Tạo một OSGI Service Item Selector Component trong lớp *Portlet:

private ItemSelector _itemSelector; @Reference(unbind = "-")
public void setItemSelector(ItemSelector itemSelector) {
_itemSelector = itemSelector;
}

Thêm Return Type

List<ItemSelectorReturnType> itemSelectorReturnTypes
= new ArrayList<>();
itemSelectorReturnTypes.add(new URLItemSelectorReturnType());

Đặt Return Type trong Image Item Selector:

imageItemSelectorCriterion.setDesiredItemSelectorReturnTypes(
itemSelectorReturnTypes );

Tạo đối tượng RequestBackedPortletURLFactory:

RequestBackedPortletURLFactory requestBackedPortletURLFactory = RequestBackedPortletURLFactoryUtil.create(request);

RequestBackedPortletURLFactory được sử dụng để tạo ra Portlet URL

Tạo URL bằng phương thức getItemSelectorURL

PortletURL itemSelectorURL = _itemSelector.
getItemSelectorURL(requestBackedPortletURLFactory,
"sampleTestSelectItem", imageItemSelectorCriterion);
Ý nghĩa của các tham số:
  1. RequestBackedPortletURLFactory: Là đối tượng của lớp RequestBackedPortletURLFactory và nó được sử dụng để tạo ra các Portlet URL
  2. Event Name: Là tên sự kiện duy nhất sẽ được gọi bởi Item Selector khi một mục được chọn.
  3. ItemSelectorCriterion: Là một đối tượng của lớp ItemSelectorCriterion. Ở đây là cho các hình ảnh

Sử dụng URL trong Item Selector

Khai báo thư viện AUI

<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>

Tạo một button và sử dụng module liferay-item-selector-dialog:

<aui:button name="chooseImage" value="Choose"/>
<%
String itemSelectorURL = GetterUtil.getString(
request.getAttribute("itemSelectorURL"));
%>
<aui:script use="liferay-item-selector-dialog">
$('# <portlet:namespace/>chooseImage').on('click',
function(event) {
var itemSelectorDialog = new A.LiferayItemSelectorDialog({
eventName: 'ItemSelectedEventName',
on: {
selectedItemChange: function(event) {
var selectedItem = event.newVal;
if (selectedItem) {
var itemValue = JSON.parse(
selectedItem.value
);
itemSrc = itemValue.url;
<!-- use item as needed -->
}
}
},
title: '<liferay-ui:message key="select-image"/>',
url: '<%= itemSelectorURL.toString() %>'
});
itemSelectorDialog.open();
}
);
</aui:script>

Tạm kết

Tận dụng hết được các tính năng được cung cấp sẵn bởi Liferay sẽ giúp bạn giảm được đáng kể thời gian và công sức. Đồng thời ứng dụng của bạn cũng sẽ trở lên thống nhất trong ứng dụng và với các ứng dụng khác trong hệ thống.

Bạn có thể tham khảo bài viết gốc tại đây.

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)