BÁO CÁO CÔNG NGHỆ WEB VÀ DỊCH VỤ TRỰC TUYẾN Đề tài: Tìm hiểu về theme và layout trong Liferay

1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG



BÁO CÁO
CÔNG NGHỆ WEB VÀ DỊCH VỤ TRỰC TUYẾN
Đề tài: Tìm hiểu về theme và layout trong Liferay
Giảng viên hướng dẫn
: TS. Tạ Tuấn Anh
Nhóm 12
: Nguyễn Văn Trung
Lê Thị Huế
Trần Huy Quyết
Võ Hải Nam
Lớp
: Hệ Thống Thông Tin K52

Hà Nội – 11/2011
1

MỤC LỤC

1. NHỮNG VẤN ĐỀ PHÁT TRIỂN THEME TRONG LIFERAY 2
1.1. Cấu trúc cơ bản của một Liferay 3
1.2. Thiết Liferay Plugins SDK cho phát triển plugin 4
1.2.1. Các công cụ đề nghị 5
1.2.2. Tải về và cài đặt các tập tin Liferay 7
1.3. Làm thế nào để xây dựng theme của riêng của bạn 11

1.3.1. Tạo thuộc tính xây dựng riêng của bạn 11
1.3.2. Chạy Liferay Plugins SDK để tạo ra bộ khung theme 12
1.3.3. AlloyUI 17
1.3.4. Hình ảnh 20
Velocity templates 21
1.3.5. Cập nhật các theme với các tập tin của riêng bạn 24
1.3.6. Triển khai nóng theme 34
1.4. Tổng kết 37
2. Layout Template 37
2.1. Sử dụng các layout template out-of-box trong Liferay Portal 39
2.2. Kiểm soát giao diện của một trang với các theme và bố trí mẫu 42
2.3. Tạo bộ khung của một layout template trong Plugin SDK 43
2.4. Thêm thực hiện của riêng bạn để file layout template 45
2.5. Xây dựng và đăng ký layout template 47
3. THEME VÀ LAYOUT DEMO THỬ NGHIỆM 48




2

1. NHỮNG VẤN ĐỀ PHÁT TRIỂN THEME TRONG LIFERAY

Liferay Portal là một cổng thông tin tuân thủ các tiêu chuẩn máy chủ. Các lớp trình
bày của một Liferay dựa trên cổng thông tin ứng dụng bao gồm ba phần chính: dữ liệu
kết xuất thông qua portlet, một theme mà kiểm soát giao diện người dùng thông thường
(xem và cảm nhận – look and feel) của cổng thông tin trang được tạo ra bởi Liferay, và
các layout template kiểm soát các cấu trúc của cổng thông tin trang. Một theme Liferay
về cơ bản là một thành phần giao diện người dùng để thực hiện cổng thông tin ứng dụng
thân thiện với người sử dụng và trực quan hấp dẫn. Nó thường bao gồm CSS, hình ảnh,

JavaScript, và Velocity mẫu Freemarker và được đóng gói như một Web lưu trữ (WAR)
tập tin để phân phối và triển khai. Nhiều theme có thể được triển khai trên một máy chủ
Liferay Portal cho người dùng có thích hợp cho phép để lựa chọn. Một theme có thể được
áp dụng cho tất cả các trang web đang chạy trên cùng một máy chủ cổng thông tin là
theme mặc định thường xuyên. Ví dụ, theo mặc định tất cả người dùng nhìn thấy cùng
một theme mặc định Liferay classic cho tất cả các trang web. Một theme cũng có thể
được áp dụng cho tất cả các trang công cộng hay tư nhân của bất kỳ trang web cụ thể,
hoặc bất kỳ trang nào cụ thể của một trang web. Liferay Portal cung cấp một số công cụ
cho các nhà thiết kế theme và phát triển xây dựng các theme mới hoặc cập nhật các theme
hiện có. Phần này sẽ giải thích làm thế nào bạn có thể sử dụng công cụ phải hoàn toàn tùy
chỉnh giao diện và cảm nhận (look and feel) của bất kỳ cổng thông tin Liferay ứng dụng
để đáp ứng thiết kế của riêng bạn.
Phần này chúng ta sẽ đề cập đến những nội dung sau:
 Cấu trúc cơ bản của một trang cổng thông tin Liferay
 Thiết lập Liferay plugin SDK để phát triển plugin
o Các công cụ đề nghị
o Tải về và cài đặt các tập tin Liferay
 Làm thế nào để xây dựng theme của riêng của bạn
3

o Tạo thuộc tính xây dựng của riêng của bạn
o Tạo một bộ khung theme mới
 AlloyUI
o Cascading Style Sheets: Từ CSS 2.1 CSS3
o JavaScript: Từ JQuery đến YUI3
o HTML5
 Hình ảnh
 Velocity mẫu
o Bộ khung cơ bản của theme
 Pop-up Windows

 Cập nhật các theme với các tập tin của riêng bạn
o Thay đổi cấu hình để kích hoạt chế độ nhà phát triển
o Sửa đổi các tập tin được tạo ra
o Thêm tập tin theme của riêng của bạn thư mục con của thư mục _diffs
 Xây dựng các theme như tập tin WAR và triển khai nó
o Đóng gói các theme như tập tin WAR
o Triển khai nóng các theme

1.1. Cấu trúc cơ bản của một Liferay
Portal pageA điển hình Liferay Portal trang bao gồm các thành phần như tiêu đề (có
hoặc không một logo), điều hướng menu (hoặc menu điều hướng nằm ngang hoặc dọc,
hoặc cả hai), một hoặc nhiều portlet trong khu vực hiển thị portlet, và footer. Bắt đầu với
Liferay Portal 6, mọi thành viên đăng nhập sẽ nhận thấy rằng một công cụ DockBar, có
thể được tắt, ở đầu của một trang cổng thông tin. Các thành phần này được xây dựng
trong Liferay theme.
4

Các layout template không phải là một phần của một theme, nhưng hoạt động với
theme lại với nhau để kiểm soát cái nhìn tổng thể và cảm nhận của trang cổng thông tin
được tạo ra. Sơ đồ dưới đây cho thấy giải phẫu của một cấu trúc trang cổng thông tin:


Bây giờ chúng tôi hiểu các thành phần cấp cao của một trang cổng thông tin. Câu hỏi
tiếp theo là làm thế nào chúng ta có thể tận dụng một số công cụ hiện có để tùy chỉnh các
thành phần và tạo một ứng dụng cổng thông tin hấp dẫn?
Liferay Portal cung cấp Liferay Plugins SDK cho các nhà thiết kế và phát triển để tạo
ra hoặc sửa đổi Liferay plugin khác nhau bao gồm cả máy lẻ (bắt đầu từ Liferay 6.0),
hook, layout template, portlet, theme, và web. Liferay IDE sẵn có như là một plugin
Eclipse để các nhà phát triển đã quen dùng Eclipse IDE có thể tận dụng ưu thể của công
cụ này trong việc phát triển theme.

1.2. Thiết Liferay Plugins SDK cho phát triển plugin
Liferay Portal là nền tảng web kinh doanh mã nguồn mở dựa trên Java cho việc xây
dựng giải pháp cổng thông tin. Nó hỗ trợ các tiêu chuẩn mở với một kiến trúc rất linh
hoạt. Ma trận hỗ trợ triển khai của nó bao gồm hàng trăm các kết hợp khác nhau của phần
5

cứng, hệ điều hành, máy chủ ứng dụng hoặc các container chứa servlet, cơ sở dữ liệu
quan hệ, và tích hợp với ứng dụng của bên thứ ba. Chúng ta có thể sử dụng môi trường
sau để phát triển ứng dụng:
 Windows XP hoặc Windows 7
 Jdk1.6.0_16
 Apache Ant 1.8.1
 Liferay Portal CE 6.0 đi kèm với Tomcat 6.0.26
 Liferay Plugins SDK 6,0
 Liferay IDE 1.1 (tùy chọn)
 Cộng đồng MySQL server 5,1
 Eclipse với SVN khách hàng và lượng tử DB plugin
 Subversion cho kiểm soát nguồn

1.2.1. Các công cụ đề nghị
1.2.1.1. JDK
Cài đặt Sun (Oracle) JDK 1.6 trong hệ thống tập tin cục bộ và thiết lập thuộc tính môi
trường hệ thống JAVA_HOME như sau: JAVA_HOME=C:\Software\Java\jdk1.6.0_16.
Thêm % JAVA_HOME% \ bin, cho sự cài đặt đường dẫn môi trường của hệ thống
Windows. Có thể kiểm tra các thiết lập của bạn bằng cách chạy lệnh java-version hoặc%
JAVA_HOME% cho Windows hoặc echo $ JAVA_HOME cho Linux. Dựa trên hệ thống
điều hành của máy tính, có thể cần phải tải về và cài đặt JDK 64-bit môi trường phát
triển.
1.2.1.2. AntApache
Ant là một thư viện Java và công cụ dòng lệnh có thể trợ giúp xây dựng phần mềm.

Các out-of-box Liferay Plugins SDK sử dụng Ant để biên soạn và đóng gói các plugin đó
portlet, theme, và các layout template. Cần phải cài đặt Ant trong thư mục local và thiết
lập thuộc tính môi trường hệ thống ANT_HOME như sau:
6

ANT_HOME=C:\Software\apache-ant-1.8.1
Cần thêm % ANT_HOME% \ bin trong biến thiết lập đường dẫn PATH của Windows.
Có thể kiểm tra các thiết lập của bạn bằng cách chạy lệnh ant -version hoặc
ANT_HOME% echo% cho Windows hoặc echo $ ANT_HOME cho Linux.
1.2.1.3. Maven
Maven là một mức độ cao, quản lý dự án thông minh, xây dựng và triển khai công cụ
được cung cấp bởi nhóm phần mềm nền tảng của Apache. Nó giao dịch với các ứng dụng
phát triển quản lý vòng đời. Phiên bản được sử dụng rộng rãi là Maven2.
Ant là chỉ đơn giản là một hộp công cụ trong khi Maven là hoàn toàn khác nhau. Nó là
về ứng dụng các mô hình để đạt được một cơ sở hạ tầng mà hiển thị đặc điểm của tầm
nhìn, khả năng tái sử dụng, bảo trì, và lĩnh hội. Cộng đồng Liferay đang làm việc trên kho
chứa chính thức của maven cho Liferay Portal cũng như thông cổng Liferay Plugins SDK
tới Maven. Maven hỗ trợ được cung cấp trong Liferay Portal 6. Các bước cấu hình mức
độ cao bao gồm:
 Cài đặt một proxy maven / repository
 Cấu hình các thiết lập Maven trong HOME/.m2/settings.xml $
 Cài đặt các kho chứa Liferay vào kho lưu trữ
 Cài đặt Liferay Maven SDK
 Tạo một plugin
 Để biết thêm chi tiết, xin vui lòng tham khảo blog sau đây và các trang wiki:



1.2.1.4. Eclipse
Eclipse Galileo hoặc Helios được tải về và cài đặt cục bộ, chẳng hạn như C:\Software\

eclipse trong Windows.
7

1.2.1.5. Liferay IDE
Sự phát triển của theme Liferay có thể được thử thách và tốn thời gian, đặc biệt là đối
với những người không quen thuộc với kiến trúc theme Liferay và các thuộc tính.
Sau khi giới thiệu trong Liferay Portal 6.0, Liferay IDE đã được giới thiệu để cung cấp
các công cụ Eclipse để phát triển nền tảng Liferay Portal. Plugin Ecplise này hỗ trợ
XP/Vista/7 Windows, Linux, và Mac OS X 10.5 hoặc cao hơn. Nó làm cho tác vụ thông
thường và tầm thường dễ dàng hơn và cho phép một số được tự động hóa trong quá trình
phát triển, triển khai, và gỡ lỗi của các Plugins Liferay. Xin vui lòng tham khảo Chương
5 để tìm hiểu thêm chi tiết.
1.2.1.6. Các plugin eclipse khác
Plugin Eclipse cho phép các kĩ sư Liferay nhanh chóng tạo ra hoặc sửa đổi Liferay
theme. SVN và Quantum DB plugin cho Eclipse được khuyến cáo để phát triển plugin.
1.2.2. Tải về và cài đặt các tập tin Liferay
Để thiết lập một môi trường phát triển Liferay, chúng ta cần phải có một chạy Liferay
Portal và Liferay Plugins SDK. Nó cũng rất khuyến khích mà bạn tải về Liferay Portal
mã nguồn để tham khảo. Tất cả các tập tin có liên quan có thể được tải về từ website
SourceForge Cuốn sách
này là nhắm mục tiêu vào Liferay Portal 6.0 hoặc các phiên bản sau này. Ngoài ra, hãy
chắc chắn rằng tất cả ba thành phần cùng một phiên bản.
1.2.2.1. Tạo một thư mục không gian làm việc chung
Bây giờ tạo một thư mục không gian làm việc trong môi trường địa phương của bạn
chẳng hạn như C: \ workspace_6.0.5_book trong Windows. Lưu Liferay Portal Bundles,
Liferay Plugins SDK, và mã nguồn Liferay Portal thành ba thư mục con trong thư mục
này. Bạn cũng có thể cài đặt các thành phần này trong các thư mục khác nhau, nhưng cần
phải chắc chắn rằng bạn cập nhật môi trường của bạn chẳng hạn như xây dựng
8

build.{your.username }.properties, mà sẽ được giải thích sau trong chương này, để phản
ánh cài đặt của bạn.
1.2.2.2. Liferay Portal bundles
Nếu bạn đã không được cài đặt Liferay Portal 6.x, bạn có thể tải về các gói Tomcat,
giải nén nó, và lưu các tập tin theo nhóm trong không gian làm việc mới được tạo ra.
Thư mục nhóm này được gọi là $ {liferay.bundles.home} trong cuốn sách này.
1.2.2.3. Liferay Plugins SDK
Tải về Liferay Plugins SDK, giải nén nó, và lưu các tập tin theo Liferay-plugins-sdk
{version.number} trong vùng làm việc mới được tạo ra của bạn. Thư mục này được gọi là
$ {liferay.plugins.sdk.home} trong cuốn sách này.
1.2.2.4. Mã nguồn Cổng thông tin Liferay
Tải về Liferay Portal mã nguồn, giải nén nó, và lưu các tập tin theo Liferay-portal-src
{version.number} trong vùng làm việc mới được tạo ra của bạn. Thư mục này được gọi là
$ {liferay.portal.src.home.
Cần phải có một cấu trúc thư mục tương tự như những gì được hiển thị trong
ảnh chụp màn hình sau:
9


1.2.2.5. Cấu hình cơ sở dữ liệu
Là cần thiết để có một cơ sở dữ liệu để cài đặt và chạy Liferay Portal.Theo mặc định,
Liferay Portal sử dụng được xây dựng trong HyperSQL Cơ sở dữ liệu (HSQLDB), đó là
đủ đối với một số kỹ sư theme vì không có nhiều tương tác trực tiếp với cơ sở dữ liệu khi
một theme là phát triển.
10

Để xây dựng một môi trường phát triển ổn định hơn, đặc biệt nếu bạn là một kỹ sư
portlet, bạn có thể muốn sử dụng cơ sở dữ liệu quan hệ ưa thích của bạn thay thế
HSQLDB. Một cài đặt của MySQL phiên bản 5.1 được sử dụng trong môi trường này
phát triển. Để thay đổi cơ sở dữ liệu của Liferay, hãy làm theo cấu hình các bước dưới

đây:
1. Cài đặt cơ sở dữ liệu MySQL, nếu điều này chưa được thực hiện.
2. Tạo một cơ sở dữ liệu mới trống mang tên lportal để cài đặt Liferay của bạn.
3. Mở một dấu nhắc lệnh hoặc Windows Explorer.
4. ${Liferay.bundles.home}\ tomcat-6.0.26 \ webapps \ ROOT \ WEB-INF\classes\
5. Tạo tập tin cổng thông tin ext.properties.
6. Thêm cấu hình MySQL sau đây để tập tin này và lưu các thay đổi:
#
# MySQL
jdbc.default.driverClassName=com.mysql.jdbc.Driver
jdbc.default.url=jdbc:mysql://localhost/lportal?useUnicode=true&ch
aracterEncoding=UTF-8&useFastDateParsing=false
jdbc.default.username=<<put your database username here>>
jdbc.default.password=<<put your database password here>>
Xin lưu ý rằng cấu hình cơ sở dữ liệu trước đó là một tên cơ sở dữ liệu Portal Liferay
lportal. Thay đổi tên cơ sở dữ liệu của riêng bạn, nếu nó là khác nhau. Bạn cần phải thêm
các thông tin đăng nhập cho một quản trị cơ sở dữ liệu MySQL của bạn. Nếu bạn sử dụng
một cơ sở dữ liệu như Oracle, bạn cần thiết lập cấu hình khác nhau trong cùng một tập tin
này. Để biết thêm chi tiết, xin vui lòng tham khảo hướng dẫn chính quyền Liferay Portal.
1.2.2.6. Bắt đầu từ Liferay Portal
Bắt đầu Liferay Portal bằng cách chạy ${liferay.bundles.home}\tomcat-
6.0.26\bin\startup.bat|sh. Đăng nhập vào địa chỉ URL mặc định http://localhost:8080/ với
Tên truy nhập và mật khẩu: và bruno. Bạn có thể đăng nhập như
11

và kiểm tra nếu bạn không triển khai The sevencogs-hook từ thư mục
${liferay.bundles.home}\tomcat-6.0.26\webapps. Xin lưu ý rằng phiên bản Tomcat có thể
khác nhau từ 6.0.26 bạn sẽ cần phải tham khảo phiên bản Tomcat của bạn cho phù hợp.
1.3. Làm thế nào để xây dựng theme của riêng của bạn
Bây giờ bạn đã thiết lập Liferay Plugins SDK để phát triển theme của bạn. Đó là thời

gian để có hành động để xây dựng một đơn giản.
1.3.1. Tạo thuộc tính xây dựng riêng của bạn
Để ghi đè lên các cấu hình mặc định của các tính chất xây dựng, bạn cần phải tạo ra
thuộc tính của bạn để xây dựng trước khi bạn biên dịch các plugins của bạn chẳng hạn
như các portlet và theme. Điều này có thể được thực hiện bằng cách làm theo các bước
đưa ra ở đây:
 Tìm tên người dùng hiện tại của bạn trên hệ thống điều hành của bạn. Trên
Windows, bạn có thể chạy lệnh echo% username% trong giao diện điều khiển dấu
nhắc lệnh. Xin lưu ý rằng tên người dùng là case-sensitive
 Tới thư mục ${liferay.plugins.sdk.home}, ví dụ
C:\workspace_6.0.5_book\Liferay-plugins-SDK-6.0.5.
 Sao chép build.properties và đổi tên nó để xây dựng các thuộc tính
$build.{your.username}.properties. Chẳng hạn như build.frank.properties.
 Theo mặc định, Liferay Plugins SDK hỗ trợ Tomcat trong thư mục (đối với
Ví dụ C:\workspace_6.0.5_book \\ tomcat-6.0.26). bạn cần sửa đổi các thiết lập
mặc định trong xây dựng các thuộc tính $build.{your.username}.properties nếu
bạn sử dụng một máy chủ ứng dụng hoặc servlet container, hoặc sử dụng Tomcat
được cài đặt trong một thư mục khác nhau. Ví dụ, bạn sẽ cần phải thay đổi những
dòng này để trỏ đến máy chủ ứng dụng của riêng bạn hoặc thư mục cài đặt
Tomcat, nếu bạn không sử dụng Tomcat trong thư mục bundles mặc định:
#
# Xác định đường dẫn đến một Tomcat bundle đã giải nén.
12

#
app.server.type = tomcat
app.server.dir = $ {project.dir }/ / bundles/tomcat-6.0.26
app.server.deploy.dir = $ {app.server.dir} / webapps
app.server.lib.global.dir = $ {app.server.dir} / lib / ext
app.server.portal.dir = $ {app.server.dir} / webapps / ROOT

 Tạo một bộ khung theme mới. Bây giờ bạn đã cài đặt Liferay Portal và thiết lập
Liferay Plugins SDK là một môi trường phát triển. Bạn có thể bắt đầu xây dựng
theme của riêng bạn. Ví dụ, chúng ta sẽ để cho bạn thấy làm thế nào để xây dựng
theme Palm-Tree Publication từ đầu.

1.3.2. Chạy Liferay Plugins SDK để tạo ra bộ khung theme
Liferay Plugins SDK cung cấp một tập tin kịch bản để tạo bộ khung của một theme
mới.
1.3.2.1. Sử dụng dấu nhắc lệnh trên Windows
Nếu bạn sử dụng Windows XP và chưa thực hiện như thế, nó được khuyến khích mà
bạn thêm dấu nhắc lệnh để thực đơn của bạn kích chuột phải vào Explorer, vì vậy mà bạn
có thể đi vào thư mục tập tin mong muốn bằng cách kích chuột phải vào thư mục mục
tiêu của bạn và chọn dấu nhắc lệnh. Nếu không, bạn cần mở dấu nhắc lệnh và thay đổi
thư mục đến thư mục mục tiêu của bạn mỗi khi. Nếu bạn sử dụng Windows 7, các dấu
nhắc lệnh có sẵn trong thực đơn của bạn kích chuột phải vào Explorer. Bạn có thể bấm và
giữ phím Shift, sau đó nhấp chuột phải vào một thư mục mà bạn muốn mở dấu nhắc lệnh
cho và click vào Open Command Prompt Ở đây lựa chọn.
Bây giờ điều hướng đến $ {liferay.plugins.sdk.home}/theme thư mục và chạy tạo ra
kịch bản như sau:
Đối với Windows: create <theme-name> "<theme simple description>". Đối với
Unix/Linux/Mac: / create.sh <theme-name> "<theme simple description>". Hãy đảm bảo
13

rằng tập tin create.sh là thực thi trước khi bạn chạy lệnh nhất định.
<theme-name> là tên thư mục theme, không nên có không gian trống trong tên, bên trong
cấu trúc tập tin, và <theme description> đơn giản là văn bản mà thực sự sẽ được hiển thị
trong danh sách các theme có sẵn trong Liferay Portal. Tham số thứ hai phải có dấu
ngoặc kép quanh nó để cho phép các không gian trong mô tả của theme. Ví dụ, lệnh sau
sẽ tạo ra Palm-Tree Publications theme trên Windows:
C:\workspace_6.0.5_book\Liferay-plugins-SDK-6.0.5\themes> create palmtree “Palm-

Tree Publications Theme”
Hình dưới đây cho thấy một thông điệp BUILD SUCCESSFUL:


Bây giờ bạn có thể vào Windows Explorer của bạn và thông báo rằng một thư mục
theme có tên là Palm-Tree Publications đã được tạo ra tự động dưới thư mục $
{liferay.plugins.sdk.home}/themes. Tên thư mục của theme là giống như tên theme với
theme được nối thêm vào cuối tên theme. Nó có bộ khung theme sau đây, như nêu bật
trong các ảnh chụp màn hình tiếp theo:
14



1.3.2.2. Xây dựng và triển khai các theme được tạo ra như WAR file
Bạn có thể chạy các lệnh sau để tạo ra theme:
1. Mở Windows dấu nhắc lệnh và ${liferay.plugins.sdk.home}/themes/palm-tree-
publications-theme/
2. Chạy lệnh tác vụ ant clean để làm sạch các tập tin tạo ra trước đây nhiệm vụ ant,
nếu có.
3. Chạy lệnh ant để xây dựng các theme như tập tin WAR.
15

4. Xin lưu ý rằng lệnh ant gọi mặc định triển khai nhiệm vụ quy định tại
${liferay.plugins.sdk.home}/build-common-plugin.xml. Như thể hiện trong các
ảnh chụp màn hình tiếp theo, quá trình này có các hành động sau đây:
 Biên dịch theme và nhiều bản sao CSS, hình ảnh, JavaScript, và velocity
templates bao gồm init_custom.vm, navigation.vm, portal_normal.vm,
portal_pop_up.vm, và portlet.vm Liferay Portal thư mục con tương ứng của
palm-tree-publications-theme\docroot
 Gói các theme trong một định dạng WAR

 Bản sao các tập tin theme WAR đóng gói tới
${liferay.bundles.home}/deploy cho việc triển khai nóng


Bây giờ bạn có thể quay trở lại vào thư mục docroot của theme và thông báo cấu trúc
thư mục và các tập tin sau đây:
${your.theme.name}-theme/docroot
_diffs
css
application.css
16

base.css
custom.css
dockbar.css
extras.css
forms.css
layout.css
main.css
navigation.css
portlet.css
images
(multiple directories of images)
js
main.js
templates
init_custom.vm
navigation.vm
portal_normal.vm
portal_pop_up.vm

portlet.vm
WEB-INF
liferay-plugin-package.properties

Bạn cũng có thể nhận thấy rằng theme đã được đóng gói như là một tập tin WAR,
palm-tree-publications-theme-{version.number}.war, nơi mà phần đầu tiên
của{version.number} là 6.0.5.1 được cấu hình trong thuộc tính lp.version của bạn xây
dựng thuộc tính tập tin $ {liferay.plugins.sdk.home}/build.{your.username}.properties.
Tập tin WAR được lưu trong $ {liferay.plugins.sdk.home}/dist để phân phối. Các tập tin
WAR tương tự cũng đã được sao chép vào ${liferay.bundles.home}/deploy cho việc triển
17

khai nóng trong Tomcat. Nếu Liferay Portal và đã chạy hoặc sẽ được bắt đầu,
${liferay.bundles.home}/deploy/palm-tree-publications-theme-{version.number}.war sẽ
được triển khai nóng trong Liferay. Bạn có thể kiểm tra các theme bằng cách đăng nhập
như một quản trị cổng thông tin, áp dụng theme này đến một trang, và xác minh giao diện
người dùng của theme được tạo ra.

1.3.3. AlloyUI
Nếu bạn mở một số các tập tin được tạo ra trong theme của bạn, bạn sẽ nhận thấy rằng
một số mã không có sẵn trong các phiên bản trước (pre-6.0) của Liferay Portal.
Ví dụ, bạn sẽ thấy các mã sau đây:
 Một số CSS3 định nghĩa như border-radius và box-shadow trong
${liferay.plugins.sdk.home}/themes/palm-tree-publications-
theme/docroot/css/extras.css
 Một số yếu tố HTML5 thẻ như <header> và <footer> trong
${liferay.plugins.sdk.home}/themes/palm-tree-publications-
theme/docroot/templates/portal_normal.vm
 AUI ().ready trong ${liferay.plugins.sdk.home}/themes/palm-tree-publications-
theme/docroot/js/main.js thay vì jQuery(document).ready, như trong phiên bản

trước 6.0 Liferay Portal.
Do sự ra đời của giao diện người dùng Alloy, từ Liferay Portal 6.0. Giao diện người
dùng Alloy là một tính năng mới quan trọng được giới thiệu trong 6.0 Liferay Portal.
Theo , Alloy là một siêu khung giao diện người dùng cung cấp
một API nhất quán và đơn giản để xây dựng các ứng dụng web trên tất cả ba cấp độ của
trình duyệt cấu trúc, phong cách và hành vi. Nó có các mẫu thiết kế thông thường và làm
cho họ dễ dàng hơn để thực hiện. Với khuôn khổ giao diện người dùng Alloy, Liferay
phát triển cần phải chi tiêu ít thời gian thiết kế và nhiều thời gian hơn việc tạo ra các
plugin có thể sử dụng với giao diện có thể sử dụng. Những yếu tố này hình ảnh có sẵn
18

cho các yếu tố giao diện phổ biến trong thư viện Liferay Tag. Giao diện người dùng
Alloy được xây dựng trên đầu trang của CSS3 và Yahoo! User Interface Library (YUI3).
Nó cũng hỗ trợ nhiều của các công ước HTML5. Điều này cho phép người phát triển giao
diện người dùng tự do để thiết kế các cổng thông tin trong các tiêu chuẩn W3C sắp tới.

1.3.3.1. Cascading Style Sheets – từ CSS 2.1 đến CSS3

Liferay Portal 6.0 thay thế CSS 2.1 với CSS 3. Đặc điểm kỹ thuật CSS3 được chia ra
thành các module. Một số các mô-đun bao gồm:
 Borders: module này giúp tạo ra những box trực quan hấp dẫn
 Backgrounds: CSS3 cung cấp khả năng để xác định về tỷ lệ phần trăm hoặc pixel
lớn như thế nào một hình nền nên, sử dụng nhiều nguồn gốc, và để xác định vị trí
của một nền tảng được tính như thế nào.
 Màu sắc: truyền thống, người sử dụng màu sắc trong CSS với định dạng hệ thập
lục phân, trông như # AABBCC, hoặc định dạng RGB, trông như RGB
(120.100.200). CSS3 đi kèm với một số cách mới của màu sắc thao tác như sử
dụng HSL (Hue, Saturation, Lightness) và độ mờ đục / alpha-kênh. CSS3 không
được hỗ trợ bởi tất cả các trình duyệt chính được nêu ra. Ví dụ, Microsoft Internet
Explorer không hỗ trợ CSS3 yếu tố cho đến khi IE 9.

 Hiệu ứng văn bản: mô-đun này trong CSS3 làm tăng tác dụng văn bản đã được
hợp lý linh hoạt và loại bỏ một số hạn chế trong CSS2. Nó làm cho nó dễ dàng
hơn nhiều để thêm một số các hiệu ứng văn bản như văn bản bóng, đóng gói từ, và
phông chữ web. Những tính năng này tăng cường bố trí chính tả của trang.
 Giao diện người dùng: CSS3 mang lại một số đặc tính mới liên quan đến yếu tố
thay đổi kích thước, con trỏ, phác thảo, bố trí và kích thước hộp, và nhiều hơn nữa.
 Multi-Column Layout: Module này cho phép các nhà thiết kế xác định có bao
nhiêu văn bản cột được chia thành và sẽ xuất hiện như thế nào.
19

 Các mô-đun khác bao gồm Selectors, tạo ra nội dung, truyền thông truy vấn, và lời
nói…
CSS3, rõ ràng, hoàn toàn tương thích ngược, vì vậy nó không phải là cần thiết để thay
đổi thiết kế hiện có để đảm bảo rằng họ làm việc - các trình duyệt web sẽ luôn luôn tiếp
tục hỗ trợ CSS2.
1.3.3.2. JavaScript - Từ jQuery đến YUI3
Kể từ phiên bản 4.x và 5.x, Liferay Portal sử dụng jQuery là khuôn khổ JavaScript cơ
sở của nó. jQuery sử dụng các khái niệm về CSS selectors như # banner hoặc cơ thể thậm
chí > #wrapper để phù hợp với một tập hợp các yếu tố trong một tài liệu hoặc lấy các yếu
tố trên một trang và thao tác chúng. Các phiên bản trước đây của Liferay Portal sử dụng
jQuery không có chế độ xung đột. Theo mặc định, jQuery được gán cho biến $, mà là
cách bạn sẽ nhìn thấy nó tham chiếu trong tài liệu jQuery. Tuy nhiên, trong khi không có
chế độ xung đột, $ là không được sử dụng vì nó có thể gây ra xung đột với các thư viện
khác sử dụng cùng một biến. Trong chế độ này, bạn nên sử dụng jQuery ('chọn') thay vì $
('. Selector').Liferay Portal sử dụng rất nhiều các tính năng kéo và thả. Những tính năng
này được thực hiện trong jQuery trong các phiên bản trước của Liferay Portal.
Từ phiên bản 6.0, Liferay Portal không sử dụng jQuery trong các portlet được xây
dựng trong và plugin, và thay vào đó bắt đầu xây dựng tất cả mọi thứ trên đầu trang của
giao diện người dùng Alloy, mà là dựa trên CSS3 và YUI3. Ngoài jQuery, có rất nhiều
thư viện JavaScript khác có sẵn. một trong những câu hỏi yêu cầu rộng rãi nhất trong các

cộng đồng Liferay là lý do tại sao giao diện người dùng Alloy dựa trên đầu trang YUI3.
Theo Nate Cavanaugh, Giám đốc của Liferay User Interface Engineering, YUI3 có thể
giúp xây dựng các tiện ích và vật dụng JavaScript nhanh hơn nhiều, cung cấp tài liệu tốt
hơn, và giải quyết một số vấn đề thực sự khác nhau, từ quy mô nhỏ đến quy mô lớn,
những lợi ích khác. Là nền tảng JavaScript mặc định trong nhiều phiên bản trước khi
Liferay Portal 6.0, jQuery đã được sử dụng nhiều trong các ứng dụng cổng thông tin
nhiều Liferay dựa trên hiện tại, trong đó có nhiều giải pháp cổng thông tin doanh nghiệp.
20

Câu hỏi tiếp theo là những gì sẽ xảy ra để sự hỗ trợ của jQuery trong Liferay Portal 6.x.
Liferay Portal 6.x không bao gồm thư viện jQuery trong gói sản phẩm. Do đó, có hỗ trợ
jQuery không có out-of-box. Điều này có nghĩa là bất kỳ portlet dựa trên jQuery và
theme sẽ không được đầy đủ chức năng mà không có nỗ lực di chuyển tùy chỉnh. May
mắn thay, bạn có thể gói các phiên bản của thư viện jQuery trong portlet của bạn hoặc tập
tin theme WAR, và bao gồm các thư viện trong ứng dụng của bạn bao gồm đường dẫn.
Nếu bạn có nhiều WAR tập tin để sử dụng các thư viện, bạn cần phải tìm một cách tốt
hơn để chia sẻ thư viện trên toàn những tập tin này WAR. Các hướng dẫn chi tiết về việc
làm thế nào để hỗ trợ jQuery trong theme của riêng và các portlet của bạn sẽ được cung
cấp tại Chương 5 và Chương 10.
1.3.3.3. HTML5
Một số các yếu tố cơ bản đã được thêm vào trong HTML5 bao gồm ngữ nghĩa thay thế
cho sử dụng phổ biến của khối chung chung và các yếu tố nội tuyến. Các yếu tố khác làm
việc với giao diện chuẩn hóa, chẳng hạn như <audio> và các yếu tố <video>. Một số Các
yếu tố khác như <font> và <centers> đã được giảm từ HTML5 bởi vì họ đang đạt được
bằng cách sử dụng CSS. Cú pháp HTML không còn dựa trên Standard Generalized
Markup Language (SGML). Thay vào đó, nó đi kèm với một mới giới thiệu dòng tương
tự như kê khai loại tài liệu SGML, cho phép tuân thủ các tiêu chuẩn hoàn trả trong tất cả
các trình duyệt sử dụng DOCTYPE sniffing (hoặc chuyển đổi DOCTYPE), một quá trình
mà một trình duyệt chọn một vẽ chế độ, dựa trên khai báo DOCTYPE.
Liferay Portal 6.x hỗ trợ HTML5 và bao gồm các DOCTYPE sau đây là dòng đầu tiên

trong theme mặc định của nó. Nó cũng bao gồm các yếu tố HTML5 khác như <header>
và <footer>.<DOCTYPE html>
1.3.4. Hình ảnh
Khi một theme được xây dựng và đóng gói, một số hình ảnh được sao chép từ Liferay
vào theme mới /docroot/images và thư mục con của nó. Những hình ảnh này được sử
dụng trong cổng thông tin tổng thể UI và nhiều portlet Liferay out-of-box.
21


Velocity templates
Apache Velocity là bộ máy mẫu mã nguồn mở. Nó cho phép người dùng sử dụngngôn
ngữ mẫu đơn giản nhưng mạnh mẽ để tham chiếu các đối tượng được định nghĩa trong
code Java. Nó được viết bằng hoàn toàn bằng Java và có thể dễ dàng nhúng vào của riêng
bạn các ứng dụng. Các mẫu Velocity giúp cho mã sạch hơn và bảo trì tốt hơn. Các mẫu
Velocity kiểm soát các HTML khác nhau của cổng thông tin. Với sự kết hợp HTML và
vận tốc, bạn có thể cơ cấu lại như thế nào HTML được phục vụ.
Như đã giải thích trước đó trong chương này, các mẫu vận tốc dưới đây được sao chép
từ Liferay đến thư mục theme của bạn /docroot/templates:
 init_custom.vm: tập tin này cho phép bạn ghi đè lên và xác định biến velocity mới.
 navigation.vm: file này được gọi là portal_normal.vm cung cấp HTML để thực
hiện các menu điều hướng.
 portal_normal.vm: tập tin này điều khiển bộ khung cơ bản HTML của trang
rằng Liferay sẽ phục vụ.
 portal_pop_up.vm: tập tin này điều khiển bố trí các mẫu cổng thông tin cho
cửa sổ pop-up thông báo.
 portlet.vm: tập tin này kết thúc các nội dung của tất cả các portlet.

Trước khi bạn bắt đầu tùy biến các mẫu theme của bạn, bạn có thể muốn có một sự
hiểu biết rõ về các mẫu này, đặc biệt là portal_normal.vm nơi bạn có thể xác định cấu
trúc theme của bạn.

1.3.4.1. Bộ khung cơ bản của theme
Tập tin portal_normal.vm điều khiển bộ khung cơ bản của theme. Mã nguồn sau đây từ
theme mặc định cho thấy các chi tiết của tập tin này từ Liferay Portal 6.0:
<DOCTYPE html>
22

# parse ($ init)
<html dir="#language("lang.dir")" lang="$w3c_language_id">
<head>
<title>$the_title - $company_name</title>
$theme.include($top_head_include)
</head>
<body class="$css_class">
#if($is_signed_in)
#dockbar()
#end
<div id="wrapper">
<a href="#main-content" id="skip-to-ontent">#language("skip-to-content")</a>
<header id="banner" role="banner">
<hgroup id="heading">
<h1 class="company-title">
<a class="logo" href="$company_url" title="#language("go-to")
$company_name">
<span>$company_name</span>
</a>
</h1>
<h2 class="community-title">
<a href="$community_default_url" title="#language("go-to")
$community_name">

<span>$community_name</span>
</a>
</h2>
<h3 class="page-title">
<span>$the_title</span>
23

</h3>
</hgroup>
#if(!$is_signed_in)
<a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_
in_text</a>
#end
#if ($update_available_url)
<div class="popup-alert-notice">
<a class="update-available" href="$update_available_
url">#language("updates-are-available-for-liferay")</a>
</div>
#end
#if ($has_navigation)
#parse ("$full_templates_path/navigation.vm")
#end
</header>
<div id="content">
<nav class="site-breadcrumbs" id="breadcrumbs">
<h1>
<span>#language("breadcrumbs")</span>
</h1>
#breadcrumbs()
</nav>

#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
24

$theme.wrapPortlet("portlet.vm", $content_include)
#end
</div>
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language("powered-by") <a href=""
rel="external">Liferay</a>
</p>
</footer>
</div>
</body>
$theme.include($bottom_include)
</html>
1.3.5. Cập nhật các theme với các tập tin của riêng bạn
Bây giờ bạn biết làm thế nào một bộ khung theme mới được tạo ra với kịch bản tạo ra
theme và các tập tin trong css, hình ảnh, javascript, và các mẫu thư mục con sao chép từ
khi kiến triển khai lệnh được thực hiện trong Liferay Plugins SDK. Bạn cũng biết cấu
trúc của mỗi mẫu Velocity trong theme. Đó là thời gian để cập nhật theme với các tập tin
của riêng bạn.
1.3.5.1. Thay đổi cấu hình để khởi động chế độ phát triển
Liferay Portal là linh hoạt trong cấu hình của thuộc tính hệ thống và thuộc tính cổng
thông tin bằng cách thiết lập tên cặp giá trị tên thuộc tính trong system.properties và
portal.properties, tương ứng. Hai tập tin được đóng gói trong

${PORTAL_ROOT_HOME} / WEB-INF/lib/portal-impl.jar. Theo mặc định, một số các
thuộc tính cổng thông tin đã được cấu hình sẵn cho nhanh hơn hiệu suất trong sản xuất.
Tuy nhiên, những thiết lập mặc định không phù hợp cho các kỹ sư trong chế độ phát
triển.
May mắn thay, Liferay Portal cung cấp một cơ chế tốt cho các quản trị cổng thông tin và