8. Xây dựng giao diện người dùng
8.1.Bô ̣ giao diện người dùng(theme)
Liferay giới thiệu khái niệm theme từ version 3.5 để giúp người sử dụng dễ dàng trong việc thay đổi “look and feel” của portal. Theme trong liferay quy định cách thức hiển thị của các thành phần dựa trên các file CSS, JavaScript, template và image.
Để tùy biến một theme phải qua 4 bước cơ bản sau: - Cấu hình các thuộc tính
- Chỉnh sửa template - Định nghĩa CSS - Chỉnh sửa JavaScript
Tất cả theme trong Liferay được dựng trên một “master theme” được biết là “Classic”. Sau đây là cấu trúc cơ bản của mô ̣t theme :
Hình 13. Cấu trúc của theme
Trong đó:
Templates: Templates gồm có các file sau:
- portal_normal.vm: file này chứa toàn bộ cấu trúc, nó bao gồm header, footer và bao gồm 2 template dock.vm, navigation.vm.
+ Thẻ <div id="wrapper"> bao gồm toàn bộ phần nội dung của portal.
+ $theme.include() được dùng để chèn nội dung của các thành phần khác vào như header, footer.
- doc.vm: file này bao gồm tất cả mã html cho dock
- navigation.vm: file này bao gồm tất cả mã html cho navigation
- portal_pop_up.vm: file này bao gồm toàn bộ cấu trúc html của cửa sổ popup - portlet.vm: file này chứa mã html mà bao bọc các portlet, bao gồm cả portlet
title và portlet-icons.
Các file template này dựa trên cấu trúc của Velocity template. Velocity template là một bộ máy template dựa trên ngôn ngữ Java. Nó là cách đơn giản nhất để phối hợp nội dung của website.
Liferay hỗ trợ các thẻ thư viện Taglib cho phép người dùng có thể nhúng các hàm thư viện này vào các file template một cách dễ dàng . Các taglib này được định nghĩa trong portal \util-taglib\src\com\liferay\taglib và người sử dụng có thể gọi chúng ra . Chẳng ha ̣n:
$theme.language(): sẽ gọi ra các ngôn ngữ mà liferay hỗ trợ $theme.journalContentSearch(): gọi ra thanh search.
$theme.search()
Các taglib này được khai báo trong portal\util-
taglib\src\com\liferay\taglib\util\VelocityTaglib.java CSS: CSS gồm các file sau:
- main.css: file này bao gồm các file css khác.
- custom.css: file này cho phép nhà phát triển chỉnh sửa thành phần của css trong các file khác nhưng không làm thay đổi các file này mà các thành phần đó được định nghĩa lại trong custom.css, điều này giúp cho việc sửa đổi và nâng cấp dễ dàng.
- base.css: file này bao gồm các style cơ bản như là style cho các element không được chỉ định trực tiếp trong các file css khác. File này sẽ thiết lập các thuộc tính css chung nhất của portal
- form.css: file này chứa toàn bộ style cho các thành phần form như : textbox, textarea, các button submit, reset …
- layout.css: file này chứa style dùng cho layout template như độ rộng của các cột, khoảng cách giữa các cột …
- navigation.css: file này chứa toàn bộ style dùng cho navigation. Navigator thường được dùng để chứa menu, ngôn ngữ hoặc thanh search của portal.
- portlet.css : file này chứa style dùng cho portlet. - tab.css : file này chứa style dùng cho tab trong portlet. JavaScript :
Liferay bao gồm thư viện javascript jQuery, điều này làm cho việc viết các mã javascript phức tạp trở nên đơn giản hơn rất nhiều.
Có 2 cách để triển khai theme, đó là:
Triển khai theme như là một phần của portal
Triển khai theme như một ứng dụng độc lập (adsbygoogle = window.adsbygoogle || []).push({});
Cách 1: Xây dựng theme như là một phần của portal
Chẳng hạn, ở đây ta xây dựng theme có tên là my -training theo các bước sau:
- Copy thư mục class trong ..\servers\tomcat\webapps\ROOT\html\themes vào thư mục ..\ext-web\docroot\html\themes và đổi tên thư mục classic thành my - training.
- Cấu hình các thuô ̣ c tính và đăng ký theme với portal bằng cách tạo file ..\ext- web\docroot\WEB-INF\liferay-look-and-feel-ext.xml với nội dung sau:
<?xml version="1.0"?> <look-and-feel> <compatibility> <version>4.4.2</version> </compatibility> <company-limit> <company-includes /> <company-excludes /> </company-limit>
<theme id="my-training" name="My Training">
<root-path>/html/themes/my-training</root-path> <templates-path>${root-path}/templates</templates-path> <images-path>${root-path}/images</images-path> <template-extension>vm</template-extension> </theme> </look-and-feel>
Sau đó deploy lại Liferay , đăng nhập http://localhost:8080 từ menu Welcome chọn Manager Pages -> Look and Feel bạn sẽ thấy theme mới trong theme list. Theme mới này giống với Classic theme. Đến đây bạn có thể thay đổi theme theo ý mình.
- Thay đổi nội dung của các file css . Lưu ý là viê ̣c thay đổi nô ̣i dung sẽ dễ dàng hơn nếu bạn thay đổi trong file cusstom.css duy nhất bởi vì file custom.css được load cuối cùng và sẽ ghi đè thuộc tính của các thẻ được chỉ định trong các file css khác.
Cách 2: xây dựng và triển khai theme như một ứng dụng độc lập
Trong phương pháp này, theme là một web application. Khi deploy, theme sẽ nằm ngang hàng với ROOT (trong trường hợp dùng Tomcat server ). Các bước tiên hành như sau:
- Tạo thư mục C:\my-training-theme, thư mục này để chứa theme.
- Copy nội dung của ..\webapps\ROOT\html\themes\classic vào C:\my-training- theme.
- Tạo thư mục C:\my-training-theme\WEB-INF
- Copy 3 file web .xml, liferay-look-and-feel.xml, liferay-plugin-package.xml từ thư mục ..\servers\tomcat\webapps\liferay-jedi-theme (jedi-theme là theme mặc định của liferay) vào thư mục C:\my-training-theme\WEB-INF và sửa nội dung các file như sau:
+ liferay-look-and-feel.xml :
<look-and-feel> <compatibility>
<version>4.4.2+</version> </compatibility>
<theme id="my-training" name="My Training"> <settings>
<setting key="css-template-id" value="CSS-TEMPLATE"></setting> <setting key="footer-article-id" value="4280"></setting>
</settings> </theme>
</ look-and-feel>
+ liferay-plugin-package.xml:
<plugin-package>
<name>My Training Theme</name>
<module-id>liferay/my-training-theme/5.1.2/war</module-id> <types>
<type>theme</type> </types>
<tags></tags>
<short-description>This is the Liferay light theme.</short- description>
<long-description></long-description> (adsbygoogle = window.adsbygoogle || []).push({});
<change-log>Adapted to the latest version of Liferay.</change-log> <page-url>http://www.liferay.com/web/guest/downloads</page-url> <author>Liferay, Inc.</author> <licenses> <license osi-approved="true">MIT</license> </licenses> <liferay-versions> <liferay-version>5.1.2+</liferay-version> </liferay-versions> </plugin-package>
+ web.xml : với file này chỉ cần sửa : thẻ <display-name>
<display-name>my-training-theme</display-name>
- Sau đó sử dụng command promt di chuyển đến thư mục C:\my-training-theme bằng lệnh sau : cd C:\my-training-theme. Tiếp đó gõ lệnh jar –cvf my-training-
theme.war * . Lệnh này sẽ tạo ra file my-training-theme.war. Đây là file đóng gói của ứng dụng theme.
- Copy file này vào ..\servers\tomcat\webapps. Khởi động tomcat và login vào Liferay -> Manager Pages -> Look and Feel để thấy kết quả.
- Thay đổi các thành phần như css, template, image … sau đó thực hiện đóng gói lại để nhận được kết quả.
Hình 14. Thiết lập giao diện trang tin