Phần 4: Một số vấn đề tham khảo 4 Các tags phổ biến trong portlet
4.1Tùy chỉnh portlet trên giao diện Portlet and layout
Portlet and layout
Trong Liferay portal, 1 layout (cách bố trí) sẽ chia 1 trang portal thành nhiều vùng khác nhau. Một hoặc nhiều portlet có thể được xếp trong các vùng này. Chúng ta cũng có thể kéo thả các portlet này đến bất cứ 1 vùng nào trong 1 layout, do đó có thể thay đổi giao diện người dung một cách linh động.
Đây là 1 tiện ích của Liferay portal: chúng ta có thể áp dụng 1 layout bất kỳ vào 1 trang nào đó. Không những thế, ta cũng có thể đưa bất cứ portlet nào vào bất cứ vùng nào trong 1layout. Bằng phương pháp kéo thả, chúng ta có thể thay đổi giao diện của website trong vòng vài phút, điều này sẽ gây những bất ngờ thú vị đối với những người thường xuyên truy nhập vào website.
Liferay cung cấp cho chúng ta 10 layout mặc định, các layout này có thể đáp ứng hầu hết các thiết kế trong liferay portal. Tất nhiên là chúng ta cũng có thể tự tạo ra những layout của riêng mình. Các layout mặc định là: - Freeform - 1 cột - 2 cột (50/50) - 2 cột (30/70) - 2 cột (70/30) - 3 cột - 1-2 cột (30/70) - 1-2 cột (70/30) - 1-2-1 cột - 2-2 cột
Quay trở lại với portlet của chúng ta để kiểm tra xem layout nào đang dược sử dụng trên trang Faceone. Để kiểm tra ta vào menu Manage và vào tiếp Page layout, một cửa sổ sẽ hiện ra như sau:
Nhìn hình ta thấy ô 2 columns (30/70) được đánh dấu. Điều này có nghĩa là layout này hiện đang được sử dụng cho trang FaceOne. Điều này giải thích tại sao trong giao diện của trang FaceOne thì portlet Sign In nằm phía bên trái lại có độ dài ngắn hơn portlet uisix ở phía bên phải.
Chúng ta cũng cần lưu ý rằng layout 1 column ở hình trên được sử dụng khá thường xuyên. Nếu muốn sử dụng layout này cho 1 trang portal thì ta làm theo các bước như sau:
1. Click vào nut x màu nỏ để tắt layout popup ở trên. 2. Tạo 1 trang mới tên là FaceTwo.
3. Vào giao diện FaceTwo, chọn Manage và chọn tiếp Page Layout. 4. Chọn layout 1 column và click vào Save. Thao tác này sẽ giúp ta
có được layout 1 column trong trang FaceTwo.
5. Thêm vào uisix portlet vào trang FaceTwo. Usix Portlet sẽ lập tức chiếm toàn bộ chiều dài trang FaceTwo.
Khi chúng ta thêm 1 trang mới, trình duyệt sẽ không refresh. Tuy nhiên lần truy nhập tiếp theo thì ta sẽ thấy trang FaceTwo vẫn tồn tại. Vậy làm thế nào mà nó có thể được lưu vào cơ sở dữ liệu? Nó được lưu là nhờ phương thức AJAX được gọi đến.
Portlet content và portlet template
Một portlet trong Liferay có 2 phần:
- Portlet content: Là phần bên trong mà sẽ hiển thị các văn bản text, hình ảnh cho người dung.
- Portlet template: Là phần bên ngoài chứa được icon cho việc chỉnh sửa portlet. Phần này có thể được chỉnh sửa trong 1 giao diện.
Khi 1 portlet được khởi tạo, Liferay sẽ vẽ 1 đường viền xung quanh nó. Hành động này có thể được cấu hình trong file $PLUGIN_SDK_HOME/portlets/unisex-portlet/docroot/WEB-INF/
liferay-portlet.xml. Việc hiển thị của đường viền này hoàn toàn có thể chỉnh sửa lại bằng cách sử dụng 1 file template là $AS_ROOT_HOME/ html/common/themes/portlet.jsp. File này chịu trách nhiệm vẽ đường viền xung quanh portlet như hình chúng ta thấy ở trên.
File $AS_ROOT_HOME/html/common/themes/portlet.jsp sẽ vẽ các button để điều khiển portlet bao gồm:
- Look-and-field và configuration (Chỉnh sửa font chữ, cách thể hiện …)
- Minimize (Thu nhỏ cửa sổ portlet) - Maximize (Phóng to cửa sổ portlet) - Close (Đóng portlet)
- Move up (Di chuyển portlet lên trên)
- Move down (Di chuyển portlet xuống dưới)
- Preferences (Tùy biến portlet – chỉ sử dụng nếu chế độ chỉnh sửa được hỗ trợ)
- Help (Các chỉ dẫn – chỉ hiển thị nếu chế độ chỉ dẫn được hỗ trợ) Portal sẽ khởi tạo các tham số ngữ cảnh để có thể chỉ định template sẽ hiển thị các button nào.
Ngoài portlet template, thì portlet content cũng có thể điều chỉnh được. Điều này được thực hiện thông qua file CSS và file JavaScript được đóng gói cùng file WAR của portlet. File CSS và file JavaScript được được đặc tả thông qua file $PLUGIN_SDK_HOME/portlets/unisex- portlet/docroot/WEB-INF/liferay-portlet.xml.
<header-portlet-css>/css/portlet.css</header-portlet-css> <footer-portlet-javascript>/js/javascript.js</footer-portlet- javascript>
Customizing portlet chrome
Một trang portal có thể bao gồm nhiều portlet. Một portlet là 1 thành phần động trong 1 trang portal. Trong phần này, chúng ta sẽ nói về việc làm thế nào để có thể tùy biến 1 portlet.
Portlet chrome là gì
Trong hình dưới đây, các thành phần sau được gọi chung là Portlet Chrome (adsbygoogle = window.adsbygoogle || []).push({});
- 1 icon nhỏ ở phía trên bên trái của portlet - Portlet title
- Icon của chức năng Look and Fiew và Configuraion - Icon thu nhỏ -
- Icon phóng to + - Icon xóa x
Chúng ta có thể điều khiển việc xuất hiện của các portlet chrome với 1 theme và 1 style sheet.
Portlet icon được mô tả trong file cấu hình $PLUGIN_SDK_HOME/ portlets/unisex-portlet/docroot/WEB-INF/liferay-portlet.xml :
<portlet>
<portlet-name>uisix</portlet-name>
<icon>/icon.png</icon> <!- - It is this line - - > //ignore details
</portlet>
Portlet title được tùy chỉnh trong file: $PLUGIN_SDK_HOME/ portlets/unisex-portlet/docroot/WEB-INF/ portlet.xml
<portlet-info> <title>uisix</title>
<short-title>uisix</short-title> <!- - It is this line - - > <keywords>uisix</keywords>
</portlet-info>
Tùy chỉnh portlet icon
Dựa vào hình dưới đây, ta có thể thay thế file icon.png trong thư mục uisix-portlet/docroot
Nếu muốn ẩn biểu tượng icon thì ta phải làm thế nào? Chúng ta cần tạo 1 theme tùy chỉnh, gọi là uisix-theme cho uisix-portlet. Sau đó trong trong file $PLUGIN_SDK_HOME/portlets/unisex-portlet/
docroot/_diffs/templates/portlet.vm, sau đó tìm đến dòng sau, và nếu ta xóa $theme.iconPortlet() thì icon sẽ không xuất hiện thêm nữa.
<h1 class="portlet-title">
$theme.iconPortlet() <span class="portlet-title- text">$portlet_title</span>
</h1>
Nếu ta muốn xóa icon cho chức năng Look and Field và Configuration, ta có thể thêm dòng code sau vào file JSP của portlet
<%
ThemeDisplay themeDisplay= (ThemeDisplay)renderRequest. getAttribute(WebKeys.THEME_DISPLAY);
PortletDisplay portletDisplay= themeDisplay.getPortletDisplay();
portletDisplay.setShowConfigurationIcon(false); %>