現在你可以添加portlets到頁面，通過拖放從Add菜單。但是liferay的頁面布局選項可能對你來說有一定的局限，或者你會發現重復性的向同樣類型的頁面添加相同的portlets,不要沮喪，我們可以通過定制模板的方式打破這個限制。布局模板插件讓你設計的布局更富有流暢性，可以嵌入常用的portlets 應用CSS，velocity,html等。

使用DeveloperStudio生成布局模板

1，去File->New->LiferayPlugin Project.

2,? 項目名為:columns-1-4-1顯示名為 columns 1 4 1

3,? 選擇你喜歡的build 類型，并且選擇合適的PluginsSDK和liferay runtime.

4,? 選中 LayoutTemplate當作插件類型

5,? 點擊Finish

使用終端生成布局模板

在終端界面切換到Plugins SDK的layouttpl目錄，執行下面的腳本命令

1，在Linux 和Mac OS X:

./create.sh columns-1-4-1 "Columns 1 4 1"

2, 在windows下的腳本命令：

create.bat columns-1-4-1 "Columns 1 4 1"

這里要注意：布局模板的項目名必須以-layouttpl為后綴。

分析布局模板項目

columns-1-4-1-layouttpl/

docroot/

META-INF/

WEB-INF/

liferay-layout-templates.xml

liferay-plugin-package.properties

columns_1_4_1.png

columns_1_4_1.tpl

columns_1_4_1.wap.tpl

build.xml

一個布局模板項目可以包括多個布局模板，目錄結構都是相同的，但是你有一個.png .tpl 和.wap .tpl文件針對每個布局模板在docroot/目錄。而liferay-*文件描述了布局模板的打包和部署的相關內容。

布局模板文件

一個或多個布局插件可以放到同一個模板項目，讓我們看下每個模板文件的作用吧：

l?? 【project-name】.tpl:生成HTML的模板結構

l?? 【project-name】.wap.tpl:針對移動設備的模板，WAP表示無線應用協議

l?? 【project-name】.png:設置的在liferay portal上模板的縮略圖

liferay配置文件

除了三個模板指定的文件，一個布局模板項目還有兩個屬于liferay的配置文件：

l?? liferay-layout-templates.xml:指定模板的名字和它們的TPL和PNG文件的位置。

l?? liferay-plugin-package.properties:描述liferay熱部署器的插件項目

部署layout模板

在開發工具下，把模板項目拖放到server 上。

在終端下輸入:ant deploy

當部署成功后，會出現下面的信息：

Reading plugin package for columns-1-4-1-layouttpl

Registering layout templates for columns-1-4-1-layouttpl

1 layout template for columns-1-4-1-layouttpl is available for use

設計布局模板

最開始，TPL是空的，一個嶄新的起點來滿足你對布局模板設計的靈活性，如果你感覺無從下手，沒關系，現在我們建立一個新的布局模板，并演示讓它正常工作的過程。如果你想更多的例子，你可以到liferay商店的page layouts部分，下載一些liferay提供的CE布局模板來驗證其中的代碼，你也可以檢驗liferay核心布局模板，可以在liferay源代碼liferay-portal/portal-web/docroot/layouttpl/custom文件目錄下找到它們。

我們命名Columns 1 4 1 是因為我們想讓第一行有1列，第二行有4列，而第三行則仍為一列。Liferay提供了類似的模板1-2-1在CE版的liferay應用商店。下面是代碼：

$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 portlet-column-content-last")

$processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")

CSS的類名必須應用到根

：class=”columns-1-2-1”一個main-content的ID和一個主角色必須應用到根DIV下。

在根DIV下，你針對你的布局模板的每一行生成一個

標簽，你必須應用portlet-layout 和row-fluid CSS類到這些s

在行級

上你需要指定一個或多個列，針對每個列，需要確保指定portlet-columncss類。如果該列是第一個，最后一個，或是唯一一個，你必須指定另外的CSS類:portlet-column-first,portlet-column-last 或portlet-column-only.

Liferay6.2 themes應有了AlloyBoostrap，該Alloy Bootstrap影響模板和它的themes. Liferay 6.2布局模板使用Bootstrap的12列單元系統:

針對每個列

.你必須指定另外的CSS類，被稱為span[width]是12個列寬度的表示方法，例如你應用了一個span8 CSS類到一個列，那么該列就會占據頁面的8/12=2/3的寬度，而span3就表示頁面的1/4.。

接下來，你必須對每個列設定唯一的css id例如id=”column-1” id=”column-2”等等。

最后在列

你需要包括一個velocity模板指令，該指令可以顯示添加到該列的portlet:

$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")

該processor.processColumn方法需要兩個參數，第一個參數是CSS列ID，而第二個參數是一個列表CSS類，你總是需要傳入portlet-column-content在第二個參數，如果該列是第一個，最后一個或是唯一列在行上，你還需要傳入兩個參數，中間被空格隔離開”portlet-column-content portlet-column-content[first|last|only]”.

現在我們討論如何設計TPL，讓我們把上面的1 2 1列模板轉化為1 4 1 列模板。

1，修改CSS類 從 columns-1-2-1到columns-1-4-1

2,? 我們不需要修改第一行的

因為它已經是設置為單獨列了，我們需要修改第二行的因為我們需要設置四個相等的列，替換第二行，用下面的內容：

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

$processor.processColumn("column-5", "portlet-column-content portlet-column-content-last")

1，????????發現行

被設置城單獨的列，因此我們唯一做的就是修改它的ID，用下面的內容替換：

$processor.processColumn("column-6", "portlet-column-content portlet-column-content-only")

到這里，你已經生成了1 41的布局模板，而大小正符合你的需求，現在，我們需要生成一些原始的內容，讓我們嵌入portlets來提高我們的控制力。

總結

以上是生活随笔為你收集整理的java liferay 框架_liferay6.2-生成布局模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。