2. Layout Template
2.2. Kiểm soát giao diện của một trang với các theme và bố trí mẫu
Như đã giải thích trong Chương 2, portal_normal.vm tập tin của từng theme bao gồm khác nhau phần để tạo ra các yếu tố HTML5 cũng như các thành phần của theme bao gồm cả Dockbar, tiêu đề với biểu tượng, menu định hướng, nội dung portlet, footer, và như vậy.CSS, JavaScript, và hình ảnh trong theme điều khiển cái nhìn tổng quát và cảm giác của một trang cổng thông tin khi theme là áp dụng cho tất cả các trang của trang web công cộng và / hoặc tư nhân, hoặc cá nhân trên một trang cụ thể. Đây là cấp độ đầu tiên của sự trừu tượng của bài trình bày. Bố trí là một mảnh phù hợp với bên trong một trang web được tạo ra bởi các tập tin Velocity portal_normal.vm của một theme Liferay. Khu vực nội dung của mỗi trang cổng thông tin bao gồm của một tập hợp các portlet bọc bởi bố trí. Đây là cấp độ thứ hai của trừu tượng trình bày. Trong khi theme kiểm soát sự xuất hiện hình ảnh của một trang, bố trí một một thành phần riêng biệt được viện dẫn trong một theme để bọc các portlet được trả lại và trình bày trên một trang cổng thông tin. Theme khác nhau và các layout template có thể được áp dụng độc lập đến một trang cổng thông tin trong thời gian chạy. Tuy nhiên, nó luôn luôn là sự kết hợp của một theme cụ thể và một trong bố trí cụ thể mà làm việc cùng nhau cho cái nhìn tổng quát và cảm giác của bất kỳ trang cổng thông tin cụ thể tại bất kỳ thời gian chạy cụ thể.
Các portlet trên một trang cụ thể phục vụ như là cấp độ thứ ba của trừu tượng bằng cách cung cấp chức năng cổng thông tin thực sự. Chúng ta sẽ thảo luận về cái nhìn và
43
cảm thấy bên trong portlet. Chúng ta hãy nhìn vào khối mã sau đây từ portal_normal.vm, đó được đặt tại thư mục ${PORTAL_ROOT_HOME}\html\themes\classic\templates. Chúng ta hãy chọn themeLiferay classic như một ví dụ cho thấy làm thế nào các theme, bố trí mẫu, và các portlet làm việc với nhau để tạo ra một trang cổng thông tin:
<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) $theme.wrapPortlet("portlet.vm", $content_include) #end </div>