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

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

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

 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

 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: http://www.liferay.com/web/mika.koivisto/blog/-/blogs/liferay-maven-sdk https://www.liferay.com/community/wiki/-/wiki/Main/Maven+SDK

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 http://sourceforge.net/projects/lportal/files/Liferay%20Portal 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:

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 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: bruno@7cogs.com và bruno Bạn có thể đăng nhập như

${liferay.bundles.home}\tomcat-11

test@liferay.com 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à publications-theme/

${liferay.plugins.sdk.home}/themes/palm-tree-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

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-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 http://alloy.liferay.com, 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

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

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 trongcổ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>

<a href="#main-content" id="skip-to-ontent">#language("skip-to-content")</a>

<header id="banner" role="banner">

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à

25

phát triển để thay đổi các thiết lập mặc định và cho phép máy chủ cổng thông tin nhanh hơn và thuận tiện hơn sự phát triển của Liferay plugin chẳng hạn như theme và portlet Một cách đơn giản để tạo ra một máy chủ cổng thông tin phát triển thân thiện hơn là để sao chép các mã sau đây từ các cổng thông tin developer.properties cho cổng thông tin ext.properties trong $ {PORTAL_ROOT_HOME} / WEB-INF/classes Tạo portal-ext.properties tập tin nếu nó không tồn tại:

Với phương pháp này để kích hoạt chế độ nhà phát triển, tuy nhiên, các nhà phát triển

sẽ cần phải sửa đổi các tập tin portal-ext.properties bất cứ lúc nào khi bạn chuyển đổi giữa phát triển và dàn dựng / thử nghiệm môi trường Một cách tiếp cận tốt hơn là để thay đổi JVM tham số trên máy chủ của nhà phát triển như hình sau:

"Dexternal-properties =portal-developer.properties"

Một khi các chế độ Liferay phát triển đã được kích hoạt, bạn có thể sử dụng plugin Firebug của Firefox như một công cụ gỡ lỗi trong phát triển theme của bạn Xin vui lòng tham khảo tài liệu tại portal.properties $ {PORTAL_ROOT_HOME} /WEB-INF/lib/portal-impl.jar tập tin cho một sự hiểu biết tốt hơn về những ý nghĩa của các thuộc tính này