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
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 theme layout 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 MỤC LỤC NHỮNG VẤN ĐỀ PHÁT TRIỂN THEME TRONG LIFERAY 1.1 Cấu trúc Liferay 1.2 Thiết Liferay Plugins SDK cho phát triển plugin 1.2.1 Các công cụ đề nghị 1.2.2 Tải cài đặt tập tin Liferay 1.3 Làm để xây dựng theme riêng bạn 11 1.3.1 Tạo thuộc tính xây dựng riêng bạn 11 1.3.2 Chạy Liferay Plugins SDK để tạo 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 theme với tập tin riêng bạn 24 1.3.6 Triển khai nóng theme 34 1.4 Tổng kết 37 Layout Template 37 2.1 Sử dụng layout template out-of-box Liferay Portal 39 2.2 Kiểm soát giao diện trang với theme bố trí mẫu 42 2.3 Tạo khung layout template Plugin SDK 43 2.4 Thêm thực riêng bạn để file layout template 45 2.5 Xây dựng đăng ký layout template 47 THEME VÀ LAYOUT DEMO THỬ NGHIỆM 48 1 NHỮNG VẤN ĐỀ PHÁT TRIỂN THEME TRONG LIFERAY Liferay Portal cổng thông tin tuân thủ tiêu chuẩn máy chủ Các lớp trình bày Liferay dựa cổng thông tin ứng dụng bao gồm ba phần chính: liệu kết xuất thơng qua portlet, theme mà kiểm sốt giao diện người dùng thơng thường (xem cảm nhận – look and feel) cổng thông tin trang tạo Liferay, layout template kiểm sốt cấu trúc cổng thơng tin trang Một theme Liferay thành phần giao diện người dùng để thực cổng thông tin ứng dụng thân thiện với người sử dụng trực quan hấp dẫn Nó thường bao gồm CSS, hình ảnh, JavaScript, Velocity mẫu Freemarker đóng gói Web lưu trữ (WAR) tập tin để phân phối triển khai Nhiều theme triển khai 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 áp dụng cho tất trang web chạy máy chủ cổng thông tin theme mặc định thường xuyên Ví dụ, theo mặc định tất người dùng nhìn thấy theme mặc định Liferay classic cho tất trang web Một theme áp dụng cho tất trang công cộng hay tư nhân trang web cụ thể, trang cụ thể trang web Liferay Portal cung cấp số công cụ cho nhà thiết kế theme phát triển xây dựng theme cập nhật theme có Phần giải thích làm bạn sử dụng cơng cụ phải hoàn toàn tùy chỉnh giao diện cảm nhận (look and feel) cổng thông tin Liferay ứng dụng để đáp ứng thiết kế riêng bạn Phần đề cập đến nội dung sau: Cấu trúc 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 cài đặt tập tin Liferay Làm để xây dựng theme riêng bạn o Tạo thuộc tính xây dựng riêng bạn o Tạo khung theme 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 theme Pop-up Windows Cập nhật theme với tập tin 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 tập tin tạo o Thêm tập tin theme riêng bạn thư mục thư mục _diffs Xây dựng theme tập tin WAR triển khai o Đóng gói theme tập tin WAR o Triển khai nóng theme 1.1 Cấu trúc Liferay Portal pageA điển hình Liferay Portal trang bao gồm thành phần tiêu đề (có khơng logo), điều hướng menu (hoặc menu điều hướng nằm ngang dọc, hai), nhiều portlet khu vực hiển thị portlet, footer Bắt đầu với Liferay Portal 6, thành viên đăng nhập nhận thấy cơng cụ DockBar, tắt, đầu trang cổng thông tin Các thành phần xây dựng Liferay theme Các layout template phần theme, hoạt động với theme lại với để kiểm sốt nhìn tổng thể cảm nhận trang cổng thông tin tạo Sơ đồ cho thấy giải phẫu cấu trúc trang cổng thông tin: Bây hiểu thành phần cấp cao trang cổng thông tin Câu hỏi làm tận dụng số cơng cụ có để tùy chỉnh thành phần tạo ứng dụng cổng thông tin hấp dẫn? Liferay Portal cung cấp Liferay Plugins SDK cho nhà thiết kế phát triển để tạo sửa đổi Liferay plugin khác bao gồm máy lẻ (bắt đầu từ Liferay 6.0), hook, layout template, portlet, theme, web Liferay IDE sẵn có plugin Eclipse để nhà phát triển quen dùng Eclipse IDE tận dụng ưu thể công cụ việc phát triển theme 1.2 Thiết Liferay Plugins SDK cho phát triển plugin Liferay Portal tảng web kinh doanh mã nguồn mở dựa Java cho việc xây dựng giải pháp cổng thơng tin Nó hỗ trợ tiêu chuẩn mở với kiến trúc linh hoạt Ma trận hỗ trợ triển khai bao gồm hàng trăm kết hợp khác phần cứng, hệ điều hành, máy chủ ứng dụng container chứa servlet, sở liệu quan hệ, tích hợp với ứng dụng bên thứ ba Chúng ta sử dụng môi trường sau để phát triển ứng dụng: Windows XP Windows Jdk1.6.0_16 Apache Ant 1.8.1 Liferay Portal CE 6.0 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 lượng tử DB plugin Subversion cho kiểm số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 hệ thống tập tin cục thiết lập thuộc tính mơi trường hệ thống JAVA_HOME sau: JAVA_HOME=C:\Software\Java\jdk1.6.0_16 Thêm % JAVA_HOME% \ bin, cho cài đặt đường dẫn mơi trường hệ thống Windows Có thể kiểm tra thiết lập bạn cách chạy lệnh java-version hoặc% JAVA_HOME% cho Windows echo $ JAVA_HOME cho Linux Dựa hệ thống điều hành máy tính, cần phải tải cài đặt JDK 64-bit môi trường phát triển 1.2.1.2 AntApache Ant thư viện Java cơng cụ dịng lệnh 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 đóng gói plugin portlet, theme, layout template Cần phải cài đặt Ant thư mục local thiết lập thuộc tính mơi trường hệ thống ANT_HOME sau: ANT_HOME=C:\Software\apache-ant-1.8.1 Cần thêm % ANT_HOME% \ bin biến thiết lập đường dẫn PATH Windows Có thể kiểm tra thiết lập bạn cách chạy lệnh ant -version ANT_HOME% echo% cho Windows echo $ ANT_HOME cho Linux 1.2.1.3 Maven Maven mức độ cao, quản lý dự án thông minh, xây dựng triển khai cơng cụ cung cấp nhóm phần mềm tảng Apache Nó giao dịch với ứng dụng phát triển quản lý vòng đời Phiên sử dụng rộng rãi Maven2 Ant đơn giản hộp công cụ Maven hồn tồn khác Nó ứng dụng mơ hình để đạt sở hạ tầng mà hiển thị đặc điểm tầm nhìn, khả tái sử dụng, bảo trì, lĩnh hội Cộng đồng Liferay làm việc kho chứa thức maven cho Liferay Portal thông cổng Liferay Plugins SDK tới Maven Maven hỗ trợ cung cấp Liferay Portal Các bước cấu hình mức độ cao bao gồm: Cài đặt proxy maven / repository Cấu hình thiết lập Maven HOME/.m2/settings.xml $ Cài đặt kho chứa Liferay vào kho lưu trữ Cài đặt Liferay Maven SDK Tạo plugin Để biết thêm chi tiết, xin vui lòng tham khảo blog sau 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 Helios tải cài đặt cục bộ, chẳng hạn C:\Software\ eclipse Windows 1.2.1.5 Liferay IDE Sự phát triển theme Liferay thử thách tốn thời gian, đặc biệt người không quen thuộc với kiến trúc theme Liferay thuộc tính Sau giới thiệu Liferay Portal 6.0, Liferay IDE giới thiệu để cung cấp công cụ Eclipse để phát triển tảng Liferay Portal Plugin Ecplise hỗ trợ XP/Vista/7 Windows, Linux, Mac OS X 10.5 cao Nó làm cho tác vụ thơng thường tầm thường dễ dàng cho phép số tự động hóa q trình phát triển, triển khai, gỡ lỗi Plugins Liferay Xin vui lịng tham khảo Chương để tìm hiểu thêm chi tiết 1.2.1.6 Các plugin eclipse khác Plugin Eclipse cho phép kĩ sư Liferay nhanh chóng tạo sửa đổi Liferay theme SVN Quantum DB plugin cho Eclipse khuyến cáo để phát triển plugin 1.2.2 Tải cài đặt tập tin Liferay Để thiết lập môi trường phát triển Liferay, cần phải có chạy Liferay Portal Liferay Plugins SDK Nó khuyến khích mà bạn tải Liferay Portal mã nguồn để tham khảo Tất tập tin có liên quan tải từ website SourceForge http://sourceforge.net/projects/lportal/files/Liferay%20Portal Cuốn sách nhắm mục tiêu vào Liferay Portal 6.0 phiên sau Ngoài ra, chắn tất ba thành phần phiên 1.2.2.1 Tạo thư mục không gian làm việc chung Bây tạo thư mục không gian làm việc môi trường địa phương bạn chẳng hạn C: \ workspace_6.0.5_book Windows Lưu Liferay Portal Bundles, Liferay Plugins SDK, mã nguồn Liferay Portal thành ba thư mục thư mục Bạn cài đặt thành phần thư mục khác nhau, cần phải chắn bạn cập nhật môi trường bạn chẳng hạn xây dựng build.{your.username }.properties, mà giải thích sau chương này, để phản ánh cài đặt bạn 1.2.2.2 Liferay Portal bundles Nếu bạn không cài đặt Liferay Portal 6.x, bạn tải gói Tomcat, giải nén nó, lưu tập tin theo nhóm khơng gian làm việc tạo Thư mục nhóm gọi $ {liferay.bundles.home} sách 1.2.2.3 Liferay Plugins SDK Tải Liferay Plugins SDK, giải nén nó, lưu tập tin theo Liferay-plugins-sdk {version.number} vùng làm việc tạo bạn Thư mục gọi $ {liferay.plugins.sdk.home} sách 1.2.2.4 Mã nguồn Cổng thông tin Liferay Tải Liferay Portal mã nguồn, giải nén nó, lưu tập tin theo Liferay-portal-src {version.number} vùng làm việc tạo bạn Thư mục gọi $ {liferay.portal.src.home Cần phải có cấu trúc thư mục tương tự hiển thị ảnh chụp hình sau: 1.2.2.5 Cấu hình sở liệu Là cần thiết để có sở liệu để cài đặt chạy Liferay Portal.Theo mặc định, Liferay Portal sử dụng xây dựng HyperSQL Cơ sở liệu (HSQLDB), đủ số kỹ sư theme khơng có nhiều tương tác trực tiếp với sở liệu theme phát triển 1.4 Tổng kết Trong chương này, nắm khái niệm theme Liferay Portal, cách thiết lập Liferay Plugins SDK cho phát triển theme, theme tạo nào, nơi tập tin chép, nơi bạn có nghĩa vụ phải tạo riêng bạn tập tin sửa đổi tập tin có dựa mã nguồn Liferay Bạn biết làm để cập nhật tập tin cá nhân thư mục con, bao gồm css, hình ảnh, js, mẫu thư mục theme / docroot / _diffs, làm để gói, triển khai, kiểm tra theme Trong chương kế tiếp, nghiên cứu Layout Template Layout Template Như giải thích phần trên, trang cổng thông tin thường bao gồm tiêu đề với biểu tượng, menu điều hướng (ngang / định hướng tab theo 37 chiều dọc), portlet khu vực, nội dung footer Có hai lớp trừu tượng để tạo cổng thông tin trang Liferay Lớp với theme, tạo thành phần chặt chẽ cách trang Một theme bao gồm CSS hình ảnh cần thiết trình bày thành phần trang cổng thông tin cách trực quan hấp dẫn Khu vực nội dung portlet bao gồm nhiều portlet Các portlet phục vụ thành phần chức trang Họ ứng dụng với phụ trợ khác hệ thống không thiết phải theo theo thứ tự Do đó, cần thiết cho quản trị người sử dụng khác Manage Pages cho phép thêm, loại bỏ, xếp lại portlet họ cách mong muốn thời gian dàn dựng chí thời gian chạy Liferay tóm tắt khả vào thành phần riêng biệt gọi Giao diện Giá trị trừu tượng trở nên rõ ràng quản trị Portal thay đổi bố trí repositions portlet số trang cổng thơng tin tất có theme áp dụng Layout mảnh phù hợp với bên trang tạo theme đóng gói portlet để kiểm sốt portlet bố trí trang cổng thơng tin Chúng thường lưới giống cấu trúc chủ yếu tạo bảng HTML với hàng cột container dựa CSS-phân cách thẻ div Đây điển hình để áp dụng CSS định nghĩa để điều khiển nhân vật chẳng hạn chiều rộng padding lưới điện Đối với trang cổng thơng tin, có layout template tương ứng thành phần khu vực, nơi người dùng với điều khoản thích hợp kéo-và-thả portlet vào lưới nhắm mục tiêu theo thứ tự mong muốn Nó kết hợp theme bố trí điều khiển trang cổng thơng tin trình bày cho người dùng cuối Chúng ta học số khái niệm theme làm để phát triển theme Liferay Plugins SDK phần Chúng ta nhìn vào chi tiết layout chương 38 Chúng ta đưa nội dung sau layout template: Sử dụng layout template out-of-box Liferay Portal Làm theme layout template làm việc để điều khiển nhìn cảm nhận trang cổng thơng tin Cấu trúc layout template Chuẩn bố trí mẫu Liferay out-of-box Tùy chỉnh bố trí mẫu Liferay out-of-box Tạo mẫu tùy chỉnh cách bố trí Làm layout template trả lại Liferay Cấu hình mặc định cho layout template 2.1 Sử dụng layout template out-of-box Liferay Portal Liferay Portal có số layout template xây dựng trong phiên Các mẫu có sẵn cho người quản trị người sử dụng khác với cho phép Manage Pages để áp dụng cá nhân trang cổng thơng tin Họ đáp ứng hầu hết trường hợp sử dụng Để xem layout template out-of-box, bạn đăng nhập Cổng thông tin Quản trị, liên kết Manage | Page Layout khu vực Dockbar, bạn thấy trang quảng cáo thể ảnh chụp hình sau để liệt kê tất bố trí cài đặt sẵn mẫu có sẵn Liferay Portal 39 Bây xem làm tự động áp dụng layout template trang cổng thông tin Một lần nữa, sử dụng Palm-Tree Publications tổ chức mẫu làm theo hướng dẫn đây: Đăng nhập quản trị Portal Tạo tổ chức Palm-Tree Publications, bạn chưa làm Tới Manage Page Palm-Tree Publications Tạo trang Trang chủ công cộng đặt tên tổ chức Thêm người sử dụng quản trị viên để tổ chức Tới trang chủ công chúng tổ chức Nhấp vào Manage | Page Layout khu vực Dockbar Chọn cột (50/50) bố trí mẫu, sau click vào nút Save để lưu thay đổi Bây nhấp vào Add | khu vực Dockbar 40 10 Tìm kiếm duyệt Loan Calculator portlet ứng dụng Add pop_up bảng điều khiển 11 Thêm portlet vào cột trang, click vào Add liên kết bên cạnh portlet kéo-và-thả vào cột Lặp lại hai bước cuối để thêm portlet Chuyển đổi tiền tệ thứ hai cột trang Bạn thấy hai portlet tải phía bên trang bên cạnh, thể ảnh chụp hình sau đây: Như bạn thấy, bạn tạo trang công cộng với cột (50/50) bố trí áp dụng Mỗi hai portlet 50% chiều rộng khu vực nội dung portlet Bố trí với hai cột rộng rãi hàng tạo từ ứng dụng cột (50/50) bố trí mẫu Bạn dễ dàng thay đổi bố cục trang sử dụng layout template khác nhau.Click vào Manage | Page Layout khu vực Dockbar, sau nhấn vào cột (30/70) bố trí mẫu, sau nhấp vào nút Save để lưu lại thay đổi Bây bạn xem trang chủ bạn hiển thị cách khác thể điều sau ảnh chụp hình, tất trang thành phần bao gồm Dockbar, tiêu đề, chuyển hướng menu, nội dung portlet, footer xác giống cột (50/50) layout template áp dụng trang 41 2.2 Kiểm soát giao diện trang với theme bố trí mẫu Như giải thích Chương 2, portal_normal.vm tập tin theme bao gồm khác phần để tạo yếu tố HTML5 thành phần theme bao gồm Dockbar, tiêu đề với biểu tượng, menu định hướng, nội dung portlet, footer, CSS, JavaScript, hình ảnh theme điều khiển nhìn tổng quát cảm giác trang cổng thông tin theme áp dụng cho tất trang trang web công cộng / tư nhân, cá nhân trang cụ thể Đây cấp độ trừu tượng trình bày Bố trí mảnh phù hợp với bên trang web tạo tập tin Velocity portal_normal.vm theme Liferay Khu vực nội dung trang cổng thông tin bao gồm tập hợp portlet bọc bố trí Đây cấp độ thứ hai trừu tượng trình bày Trong theme kiểm sốt xuất hình ảnh trang, bố trí một thành phần riêng biệt viện dẫn theme để bọc portlet trả lại trình bày trang cổng thơng tin Theme khác layout template áp dụng độc lập đến trang cổng thông tin thời gian chạy Tuy nhiên, ln ln kết hợp theme cụ thể bố trí cụ thể mà làm việc cho nhìn tổng quát cảm giác trang cổng thông tin cụ thể thời gian chạy cụ thể Các portlet trang cụ thể phục vụ cấp độ thứ ba trừu tượng cách cung cấp chức cổng thông tin thực Chúng ta thảo luận nhìn 42 cảm thấy bên portlet Chúng ta nhìn vào khối mã sau từ portal_normal.vm, đặt thư mục ${PORTAL_ROOT_HOME}\html\themes\classic\templates Chúng ta chọn themeLiferay classic ví dụ cho thấy làm theme, bố trí mẫu, portlet làm việc với để tạo trang cổng thông tin: #language("breadcrumbs") #breadcrumbs() #if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() $portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include) #end 2.3 Tạo khung layout template Plugin SDK Có thư mục layouttpl bên Plugins Liferay SDK nơi mà tất cách bố trí mẫu cư trú SDK cung cấp tập tin script để tạo khung mẫu Layout Để tạo layout template mới, bạn chạy lệnh layouttpl thư mục tương tự bạn sử dụng để tạo portlet theme 43 Bây điều hướng đến $ {liferay.plugins.sdk.home} / layouttpl thư mục chạy tạo kịch như: Đối với Windows: create "” Đối với Unix / Linux / Mac: /create.sh "" Trường hợp layout template thư mục tên tập tin cấu trúc, mẫu đơn giản văn thực hiển thị trang Manage | Page Layout Bố trí thư mục tên mẫu không nên chứa không gian trống tên Tham số thứ hai phải có dấu ngoặc kép xung quanh phép khơng gian mơ tả layout template tạo Ví dụ, lệnh sau để tạo khung trống cột 1_3 bố trí mẫu Windows: C:\workspace_6.0.5_book\liferay-plugins-sdk-6.0.5\layouttpl>create 1_3_columns "1_3 Columns" Liferay cung cấp Liferay IDE plugin Bạn sử dụng Liferay IDE để tạo layout template bao gồm thư mục tập tin khung tạo kịch thực lệnh Bây bạn đến Windows Explorer bạn thông báo layout template thư mục có tên 1_3_columns-layouttpl tạo tự động thư mục ${liferay.plugins.sdk.home}/layouttpl Tên thư mục giống bố trí tên mẫu, quy định cụ thể yếu tố đầu vào tạo lệnh kịch bản, với layouttpl nối thêm vào cuối tên layout template Nó có khung sau: 44 Bạn thấy ba tập tin thư mục docroot layout template bạn sau: 1_3_columns.tpl: Đây layout template tập tin cho trình duyệt web thường xuyên 1_3_columns.wap.tpl: Đây layout template tập tin cho thiết bị di động 1_3_columns.png: Đây hình ảnh thu nhỏ hình ảnh mặc định bố trí Hình nhỏ hiển thị người sử dụng cổng thông tin với quyền nhấp chuột Manage | Page Layout từ trình đơn Dockbar Liferay tự động phát khách hàng sử dụng để kết nối với trang web cổng thông tin phục vụ mẫu thích hợp Nếu khách hàng thiết bị di động, phục vụ tập tin 1_3_columns.wap.tpl Nếu khơng, phục vụ tập tin 1_3_columns.tpl cho trình duyệt web bình thường 2.4 Thêm thực riêng bạn để file layout template Trên tập tin vừa tạo 1_3_columns.tpl 1_3_columns.wap.tpl trống 1_3_columns.png mặc định hình ảnh mà khơng đại diện cho bố trí thực tế mẫu cần phải tạo Các bước để bổ sung mã riêng để hai tập tin mẫu Mở tập tin 1_3_columns.tpl với trình soạn thảo ưa thích bạn, thêm mã sau đây, sau lưu 45 $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only") $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first") $processor.processColumn("column-3", "portlet-column-content") $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last") 46 Xin để ý mẫu bố trí có hai dịng: dịng có cột hàng thứ hai có ba cột rộng Mỗi tế bào xác định hàng cột có ID nhất, chẳng hạn cột-1, cột 2, cột 3, cột ID quan trọng để làm cho portlet bên phải (s) đặt bên phải trang cổng thơng tin mẫu bố trí áp dụng Bây chép đoạn code tương tự từ 1_3_columns.tpl tập tin 1_3_columns.wap.tpl Bạn sửa đổi tập tin 1_3_columns.wap.tpl bạn muốn làm thiết kế bạn bố trí mẫu cho thiết bị di động Điều thứ ba cần làm sử dụng chương trình thao tác hình ảnh GIMP Adobe Photoshop để tạo 1_3_columns.png trông giống layout template thể 2.5 Xây dựng đăng ký layout template Bây có tất file cần thiết chỗ Mở thư mục thay đổi dấu nhắc lệnh, $ {liferay.plugins.sdk.home} / layouttpl/1_3_columns-layouttpl thư mục, sau chạy lệnh ant để xây dựng layout template tùy chỉnh vào tập tin WAR, chép vào thư mục $ {liferay.plugins.sdk.home} / TP Lệnh ant chép file WAR 1_3_columns layouttpl- tạo $ {liferay.bundles.home} /deploy thư mục cho việc triển khai nóng Liferay Bây đăng nhập quản trị viên Cổng thông tin, kiểm tra layout template tạo đăng ký Liferay Portal vào Manage | Page Layout 47 Bước tạo trang thử nghiệm có tên Test Page, áp dụng tạo bố trí mẫu trang này, thêm số portlet mẫu tế bào hàng cột Bạn thấy mẫu bố trí tạo thành công, triển khai, áp dụng cho trang thử nghiệm ảnh chụp hình sau đây: THEME VÀ LAYOUT DEMO THỬ NGHIỆM Sau tìm hiểu cách thức xây dựng theme layout website, nhóm chúng em tiến hành xây dựng demo website Viện Công nghệ thông tin truyền thông 48 Thiết kế banner website, bao gồm: search box, logo, banner picture navigation Phần content thiết kế theo 1_3 column layout Layout bao gồm phần đầu ảnh flash file giới thiệu viện CNTT truyền thông Phần column chứa phần nội dung website Được xây dựng quản lý hệ quản trị nội dung liferay Cấu trúc box, topic chỉnh sửa CSS để phù hợp với thiết kế website Giao diện tổng thể website không bao gồm nội dung: 49 Giao diện page website cấu trúc theo layout 2column: 50 Như với hỗ trợ theme layout liferay portal 6.0 xây dựng website ứng dụng cổng thông tin với tùy biến khác theme layout để đưa vào hoạt động 51 ... template 45 2.5 Xây dựng đăng ký layout template 47 THEME VÀ LAYOUT DEMO THỬ NGHIỆM 48 1 NHỮNG VẤN ĐỀ PHÁT TRIỂN THEME TRONG LIFERAY Liferay Portal cổng thông tin tuân... bạn vào Windows Explorer bạn thơng báo thư mục theme có tên Palm-Tree Publications tạo tự động thư mục $ {liferay. plugins.sdk.home}/themes Tên thư mục theme giống tên theme với theme nối thêm vào... thấy mẫu bố trí tạo thành công, triển khai, áp dụng cho trang thử nghiệm ảnh chụp hình sau đây: THEME VÀ LAYOUT DEMO THỬ NGHIỆM Sau tìm hiểu cách thức xây dựng theme layout website, nhóm chúng em