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

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

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.

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


đâ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

 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-

 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

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.

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


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">

#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