Liferay Portal学习笔记-coldTear
一、 簡單安裝
1)下載并安裝 JDK1.5
1、? 下載并安裝 Windows Platform J2SE(TM) Development Kit 5.0 Update ,下載網址 http://java.sun.com/j2se/1.5.0/download.jsp
2、? 在控制面板 --> 系統 --> 高級選項 --> 環境變量,新增一個用戶變量 JAVA_HOME 并指向 JDK 的安裝目錄
2) ? 下載并安裝 Liferay Portal
1.???????? 下載并安裝 Liferay Portal Professional 4.0.0 (Bundled with Tomcat and JDK 5.0), 下載網址 http://www.liferay.com/web/guest/download
2.???????? 解壓縮到一個目錄,并確保硬盤上有足夠的空間,我們稱這個目錄為 TOMCAT_HOME
3) ? 啟動 TOMCAT
到 TOMCAT/bin 目錄下,運行 startup.bat 。
你的 Apache Tomcat server 能夠編譯并運行 Liferay Portal 。默認情況下, portal 使用自帶的 HSQL 數據庫。在瀏覽器中輸入 http://localhost:8080 ,將會看見 portal 首頁。
二、? 專業安裝
1) ? 下載并安裝 JDK1.5
1、? 下載并安裝 Windows Platform J2SE(TM) Development Kit 5.0 Update ,下載網址 http://java.sun.com/j2se/1.5.0/download.jsp
2、? 在控制面板 --> 系統 --> 高級選項 --> 環境變量,新增一個用戶變量 JAVA_HOME 并指向 JDK 的安裝目錄
2) ? 下載并安裝 TOMCAT
1、? 下載 apache-tomcat-5.5.17.zip 并解壓縮到一個目錄,我們稱這個目錄為 TOMCAT 。
3) 下載并安裝 Liferay Portal
1、? 下載 liferay-portal-4.0.0.war, 下載網址 http://www.liferay.com/web/guest/download
2、? 解壓縮 liferay-portal-4.0.0.war 到 TOMCAT 目錄下并改名為 liferay ,然后將 liferay/WEB-INF/lib 下除 util-taglib.jar 外的其他 jar 包剪切到 TOMCAT/common/lib/ext 下
3、? 在 TOMCAT/conf/Catalina/localhost 目錄下,刪除該目錄下已有的文件,然后新建 ROOT.xml 文件(這里的 ROOT 必須是大寫)
ROOT.xml :
< Context?path = "" ?docBase = " ../liferay " ?debug = " 0 " ?reloadable = " true " ?crossContext = " true " >??????? < Resource
??????????????name = " jdbc/LiferayPool "
??????????????auth = " Container "
??????????????type = " javax.sql.DataSource "
??????????????driverClassName = " org.hsqldb.jdbcDriver "
??????????????url = " jdbc:hsqldb:test "
??????????????username = " sa "
??????????????password = ""
??????????????maxActive = " 20 "
??????? />
??????? < Resource
??????????????name = " mail/MailSession "
??????????????auth = " Container "
??????????????type = " javax.mail.Session "
??????????????mail.transport.protocol = " smtp "
??????????????mail.smtp.host = " localhost "
??????? />
??????? < Realm?
??????????????className = " org.apache.catalina.realm.JAASRealm "
??????????????appName = " PortalRealm "
??????????????userClassNames = " com.liferay.portal.security.jaas.PortalPrincipal "
??????????????roleClassNames = " com.liferay.portal.security.jaas.PortalRole "
??????????????debug = " 99 "
??????????????useContextClassLoader = " false "
??????? />
</ Context >
4、? 在TOMCAT/conf目錄下,新建jaas.config文件
jaas.config :
PortalRealm {
? com.liferay.portal.security.jaas.PortalLoginModule required;
};
5、? 修改 TOMCAT/conf 目錄下 catalina.properties 文件中的下面一段:
common.loader=${catalina.home}/common/classes,${catalina.home}/common/i18n/*.jar,${catalina.home}/common/endorsed/*.jar,${catalina.home}/common/lib/*.jar,${catalina.home}/common/lib/ext/*.jar
6、? 修改 TOMCAT/bin 目錄下 catalina.bat 文件,增加下面內容:
rem ----- Execute The Requested Command ---------------------------------------
?
set JAVA_OPTS=-Xms128m -Xmx512m -Dfile.encoding=UTF8 -Duser.timezone=GMT+08 -Djava.security.auth.login.config=%CATALINA_HOME%/conf/jaas.config
7、? 到 TOMCAT/bin 目錄下,運行 startup.bat 。在瀏覽器中輸入 http://localhost:8080 ,將會看見 portal 首頁。
三、? 連接數據庫
1) 連接 HSQLDB
修改 TOMCAT/conf/Catalina/localhost/ROOT.xml 文件并將 SQL SERVER 驅動包 hsql.jar 拷貝到 TOMCAT/common/lib/ext 下
?????? <Resource
????????????? name="jdbc/LiferayPool"
????????????? auth="Container"
????????????? type="javax.sql.DataSource"
????????????? driverClassName="org.hsqldb.jdbcDriver"
????????????? url="jdbc:hsqldb:test"
????????????? username="sa"
????????????? password=""
????????????? maxActive="20"
?????? />
2) ? 連接 SQL SERVER
修改 TOMCAT/conf/Catalina/localhost/ROOT.xml 文件并將 SQL SERVER 驅動包 jtds-1.2.jar 拷貝到 TOMCAT/common/lib/ext 下
?????? <Resource
????????????? name="jdbc/LiferayPool"
????????????? auth="Container"
????????????? type="javax.sql.DataSource"
????????????? driverClassName="net.sourceforge.jtds.jdbc.Driver"
????????????? url="jdbc:jtds:sqlserver://localhost:1433;DatabaseName=lportal4"
????????????? username="sa"
??? ????password="sa"
??? ????maxActive="100"
?????? />
?
【原創】Liferay Portal學習筆記(二):使用CMS?????? Liferay Portal 的 CMS(Content Manage System) 提供了兩大功能:文檔管理和文章發布。文檔管理包括文檔庫和圖片集兩個 portlets ,能夠提供對 Microsoft Office 文檔、 PDFs 、文本文件和圖片的管理;文章發布功能依靠 Liferay Portal 中的 Journal portlet 完成,它的特性是能夠將數據( data entry )和版面設計( Layout Design )很輕易的分開,這就使得 content 能夠復合一致的“ look and feel ”,另外, Journal portlet 提供了 content 的版本跟蹤和發布流程的功能。
???
Liferay Portal的CMS功能是通過Journal Portlet實現的,在介紹怎樣使用Journal Portlet之前,有必要理解structures、templates和articles的概念,它們是Journal portlet功能的基礎。
l???????? Structures:定于了content的類型和數量,content的類型包括text、text area、images、selection lists等
l???????? Templates:確定content怎樣排列或擺放
l???????? Articles:確定每個content包含的實際的text和images
??
??? 我們以下圖為例定義一個content,分為三個步驟:
第一步、創建Structure,包含一下元素:一個text元素名為“headline”(對應圖片1區域)、三個text area元素為名稱分別為“body-text”(對應4區域)“caption-1”(對應2區域)“caption-2”(對應6區域)、兩個image元素名稱分別為“image-1”(對應3區域)和“image-2”(對應5區域)
添加完這些元素后的界面如下:
點擊Launch Editor按鈕,可以看到XML定義,也可以在此增刪或修改元素及類型,內容如下:
??<dynamic-element?name='headline'?type='text'></dynamic-element>
??<dynamic-element?name='body-text'?type='text_area'></dynamic-element>
??<dynamic-element?name='caption-1'?type='text_area'></dynamic-element>
??<dynamic-element?name='caption-2'?type='text_area'></dynamic-element>
??<dynamic-element?name='image-1'?type='image'></dynamic-element>
??<dynamic-element?name='image-2'?type='image'></dynamic-element>
</root>
第二步、創建 Template ,添入 ID 、 Name 、 Description 信息后,在 Structure 一欄選擇上一步創建的 Structure (這里為 test )
然后點擊 Launch Editor 按鈕,打開 Template 編輯窗口,按照所需要的格式定義 Template ,如下:
< xsl:stylesheet?xmlns:xsl = " http://www.w3.org/1999/XSL/Transform " ?version = " 1.0 " > ??
?? < xsl:output?method = " html " ?omit - xml - declaration = " yes " /> ??
?? < xsl:template?match = " / " > ?
???? < table?cellpadding = " 0 " ?cellspacing = " 0 " ?border = " 0 " ?width = " 100% " > ?
?????? < tr > ?
???????? < td?colspan = " 2 " >
?????????? < xsl:value - of
?disable - output - escaping = " yes " ?select = " root/dynamic-element[@name='headline']/dynamic-content " />
???????? </ td >
?????? </ tr >
?????? < tr >
???????? < td >
?????????? < img > ?
???????????? < xsl:attribute?name = " src " > ?
?????????????? < xsl:value - of?
disable - output - escaping = " yes " ?select = " root/dynamic-element[@name='image-1']/dynamic-content " /> ?
???????????? </ xsl:attribute > ?
?????????? </ img >
???????? </ td >
???????? < td >
?????????? < xsl:value - of?
disable - output - escaping = " yes " ?select = " root/dynamic-element[@name='caption-1']/dynamic-content " />
???????? </ td >
?????? </ tr >
?????? < tr >
???????? < td?colspan = " 2 " >
?????????? < xsl:value - of?
disable - output - escaping = " yes " ?select = " root/dynamic-element[@name='body-text']/dynamic-content " />
???????? </ td >
?????? </ tr >
?????? < tr >
???????? < td >
?????????? < xsl:value - of?
disable - output - escaping = " yes " ?select = " root/dynamic-element[@name='caption-2']/dynamic-content " />
???????? </ td >
???????? < td >
?????????? < img > ?
???????????? < xsl:attribute?name = " src " > ?
?????????????? < xsl:value - of?
disable - output - escaping = " yes " ?select = " root/dynamic-element[@name='image-2']/dynamic-content " /> ?
???????????? </ xsl:attribute > ?
?????????? </ img >
???????? </ td >
?????? </ tr >
???? </ table > ?
?? </ xsl:template > ?
</ xsl:stylesheet >
下面對該文件進行說明:
1 、這里的 @name=’ 名稱 ’ 必須要和第一步中創建 Structure 中的元素名稱一致,頁面格式根據需求使用 HTML 語言定義即可。
2 、對 text 、 text area 類型的元素輸出時的格式如下:
<xsl:value-of
disable-output-escaping="yes" select="root/dynamic-element[@name='caption-2']/dynamic-content"/>
1、? 對 image 類型的元素輸出時的格式如下:
<img>
? <xsl:attribute name="src">
??? <xsl:value-of
disable-output-escaping="yes" select="root/dynamic-element[@name='image-2']/dynamic-content"/>
? </xsl:attribute>
</img>
第三步、創建 Article ,添寫基本信息后,在 Structure 一欄選擇 test ,對應的 Template 一欄也選擇 test 即可,然后在對應的元素域里添入合適的文本或者圖片,點擊預覽即可以看到如下界面,確定無問題后,點擊保存或者保存并發布按鈕即可完成 content 的定制。
通過以上三個步驟,我們就實現了定制content的功能。使用Journal Portlet,我們可以定制任何不同風格的content來展示必要的信息。
?
【原創】Liferay Portal學習筆記(三):自定義頁面布局Template?????? Liferay Portal 4.0 為我們提供了幾種不同的頁面布局,我們可以通過 Add Content 中的 Template 參數來指定不同的頁面布局,但是,但我們利用 CMS 來定制文章內容的時候,僅有的幾種頁面布局并不能滿足我們的需求,所以我們需要開發能夠滿足特定需求的頁面布局。
??? 我們將開發一個具有下圖風格的頁面布局,該布局中我們指定了7個區域來分別裝配portlet實現獨特的頁面風格。
一、編寫模板文件
??? 我們將該頁面風格名稱定義為1_2_3_2 Columns,在Liferay/html/layouttpl/custom目錄下新建1_2_3_2_columns.tpl文件,內容如下:
<div?id="layout-content-inner-decoration">
????<div?id="layout-content-container">
??????<table?border="0"?cellpadding="0"?cellspacing="0"?width="100%">
????????<tr>
??????????<td?colspan="3"?valign="top">
????????????$processor.processColumn("column-1")
??????????</td>
????????</tr>
????????<tr>
??????????<td?width="79%"?valign="top">
??????????????<table?border="0"?cellpadding="0"?cellspacing="0"?width="100%">
????????????????<tr>
????????????????<td?width="26%"?valign="top">
??????????????????$processor.processColumn("column-2")
????????????????</td>
<td?class="layout-column-spacer"?width="1%">
????????????????????<div> </div>
??????????????????</td>
????????????????<td?width="26%"?valign="top">
??????????????????$processor.processColumn("column-3")
????????????????</td>
??????????????????<td?class="layout-column-spacer"?width="1%">
????????????????????<div> </div>
??????????????????</td>
????????????????<td?width="26%"?valign="top">
??????????????????$processor.processColumn("column-4")
????????????????</td>
????????????????</tr>
??????????????</table>
????????????</td>
??????????<td?class="layout-column-spacer"?width="1%">
????????????<div> </div>
??????????</td>
??????????<td?width="20%"?rowspan="2"?valign="top">
????????????$processor.processColumn("column-5")
??????????</td>
????????</tr>
????????<tr>
??????????<td?colspan="2">
????????????<table?border="0"?cellpadding="0"?cellspacing="0"?width="100%">
??????????????<tr>
????????????????<td?width="50%"?valign="top">
??????????????????$processor.processColumn("column-6")
????????????????</td>
????????????????<td?width="50%"?valign="top">
??????????????????$processor.processColumn("column-7")
????????????????</td>
??????????????</tr>
????????????</table>
????????????</td>
????????</tr>
??????</table>
????</div>
</div>
</div>
??? 文件中前三行定義的 <div> 和最后三行 </div> 是固定的模板格式,從第四行開始就是我們需要定制的頁面風格的 HTML 格式,我們需要將輸出 portlet 區域的 HTML 語句用 $processor.processColumn("column-1") 來替換,“ column-1 ”是該區域的名稱,并且每個區域的名字不能重復,這樣系統在生成模板的時候會自動生成不同的區域來存放我們指定的 portlet 。
二、編寫屬性文件
??? 我們需要在 liferay-layout-templates.xml 文件中配置我們自定義的頁面布局文件 1_2_3_2_columns.tpl ,為了和系統自帶的布局文件區分開,我們創建擴展文件 liferay-layout-templates-ext.xml ,在該文件中指定我們的頁面布局文件,當然也可以在 liferay-layout-templates.xml 文件直接增加定義。
?
liferay-layout-templates-ext.xml :
<? xml?version = " 1.0 " ?><! DOCTYPE?layout - templates?PUBLIC? " -//Liferay//DTD?Layout?Templates?4.0.0//EN " ? " http://www.liferay.com/dtd/liferay-layout-templates_4_0_0.dtd " >
< layout - templates >
???? < custom >
???????? < layout - template?id = " 1_2_3_2_columns " ?name = " 1-2-3-2?Columns " >
???????????? < template - path >/ html / layouttpl / custom / 1_2_3_2_columns.tpl </ template - path >
???????? </ layout - template >
???? </ custom >
</ layout - templates >
參數 id 定義該 template 的 ID 號, name 定義該 template 在 Add Content 中顯示的名稱, template-path 定義該 template 的路徑名。
三、定制頁面
????定制好頁面風格后,需要重新啟動TOMCAT,登陸系統,進入GUEST頻道,點擊Add Content ,在Template中將會顯示我們自定義的頁面布局名稱1-2-3-2 Columns,選擇該Template,然后在頁面中添加Journal Content,按照我們自定義的布局將portlet拖拉到合適的位置,再為每個Journal Content指定Article,最后就完成了各種風格頁面的定制過程。使用這個的方法,我們可以定制各種滿足不同需求的頁面。
?
【原創】Liferay Portal學習筆記(四):搭建開發環境當我們再對 liferay 源代碼進行研究或者對某個類進行修改的時候很不方便,所以我們需要搭建一個開發環境,這樣在修改 liferay 源代碼的時候就更加方便。下面我們會一步步搭建 liferay 的開發環境。
?
一、 準備工作
1 、下載下列文件,下載步驟這里省略:
????? jdk-1_5_0_06-windows-i586-p.exe
????? liferay-portal-tomcat-jdk5-4.0.0.zip
????? liferay-portal-src-4.0.0.zip
????? liferay-portal-sql-4.0.0.zip
2 、安裝 JDK ,具體的安裝及配置過程這里省略。
3 、我們假定 Eclipse 及 Tomcat 插件都已安裝,若還沒有安裝,請參考相關文檔準備好開發工具,這里省略該步驟。
4 、如果對 liferay 安裝過程有疑問,可參考作者的另一篇文章。
????? Liferay Portal學習筆記(一):安裝
二、 搭建開發環境
1、? 在 Eclipse 中新建項目 liferayPortal ,并設置源文件夾為 src ,輸入文件夾名為 liferay/WEB-INF/classes 。
2、? 將 liferay-portal-tomcat-jdk5-4.0.0.zip 解壓縮后并拷貝到項目 liferayPortal 根目錄下,然后改名為 tomcat 。
3、? 將 liferayPortal/tomcat 目錄下的 liferay 目錄剪切到項目 liferayPortal 根目錄下覆蓋原目錄。
4、? 將 liferay-portal-src-4.0.0.zip 解壓縮,然后將 liferay-4.0.0-src/portal-ejb/src 目錄下的 com 文件夾拷貝到項目 liferayPortal/src 目錄下。
5、? 將 liferay-4.0.0-src/util-jsf/src/com/liferay 目錄下的 util 文件夾拷貝到項目 liferayPortal/src/com/liferay/ 目錄下。
6、? 拷貝 liferay-4.0.0-src/portal-ejb/classes 目錄下除 com 文件夾外其他全部的文件夾及文件到項目 liferayPortal/src 目錄下。
7、? 拷貝 liferay-4.0.0-src/portal-ejb/classes/com/liferay/portal 下的 definitions 文件夾到項目 liferayPortal/src/com/liferay/portal 目錄下。
8、? 修改 liferayPortal/tomcat/conf/Catalina/localhost 目錄下的 ROOT.xml 文件中的 docBase 路徑,指向 liferayPortal/liferay 目錄。
9、? 將 liferay-4.0.0-src/lib 目錄下的所有 jar 包全部添加到項目 liferayPortal 中。
10、 將 liferayPortal/liferay/WEB-INF/lib 下的 compression-filter.jar 、 counter-ejb.jar 、 documentlibrary-ejb.jar 、 ext-ejb.jar 、 lock-ejb.jar 、 mail-ejb.jar 、 secure-??filter.jar 、 strip-filter.jar 、 util-java.jar 、 util-taglib.jar 、 util-wsrp.jar 共 11 個包加到項目中。
11、 將 liferayPortal/tomcat/common/lib/ext 目錄下的 portal-shared.jar 包加到項目中。
12、 在 liferayPortal/src 目錄下新建文件 portal-ext.properties ,內容為:
portal.release=professional
13、 在“首選項- >Java — > 已安裝的 JRE ”里選擇之前安裝的 jre1.5.0_06 。
?
14、 在“首選項- >Tomcat ”項中指定 tomcat 的版本為 Version 5.x ,并且指定“ Tomcat home ”路徑為項目 liferayPortal/tomcat 目錄。
15、 在“首選項- >Tomcat - >JVM Settings ”項,設定 JRE 的版本為“ jre1.5.0_06”,并且添加如下幾個JVM Parameters :
???????? -Xms128m
???????? -Xmx512m
???????? -Dfile.encoding=UTF8
???????? -Duser.timezone=GMT+08
?????????-Djava.security.auth.login.config=D:\devtool\eclipse\workspace\liferayPortal\tomcat\conf\jaas.config
??? 這里最后一個參數一定要指明 jaas.config 文件的路徑
?????
三、創建數據庫
1 、本例中我們已 SQL Server 數據庫為例,介紹怎樣連接數據庫。
2 、解壓縮 liferay-portal-sql-4.0.0.zip 文件后,導入目錄 liferay-portal-sql-4.0.0/create 下的 create-sql-server.sql 文件即可建立 liferay 應用在 SQL Server 上的數據庫,數據庫名為 lportal 。
(導入 sql 文件命令參見 C:\Program Files\Microsoft SQL Server\80\Tools\Binn\osql.exe )
3 、修改 liferayPortal/tomcat/conf/Catalina/localhost 目錄下的 ROOT.xml 文件,指定連接 SQLServer 的驅動類名稱、數據庫 URL 及用戶和密碼,修改結果如下:
| <Resource ?????? name="jdbc/LiferayPool" ?????? auth="Container" ?????? type="javax.sql.DataSource" ?????? driverClassName="net.sourceforge.jtds.jdbc.Driver" ?????? url="jdbc:jtds:sqlserver://localhost:1433;DatabaseName=lportal" ?????? username="sa" ??? password="sa" ??? maxActive="100" /> |
4 、拷貝 liferay-4.0.0-src/lib 目錄下的 jtds.jar 包到 liferayPortal/tomcat/common/lib/ext 目錄下。
四、啟動服務器
在 Eclipse 中啟動 Tomcat ,當出現如下畫面時,表示 Tomcat 啟動成功。
?在瀏覽器中訪問:http://localhost:8080即可出現liferay界面。
到此,我們的開發環境已經搭建完成。
?
【原創】Liferay Portal學習筆記之(五):開發主題風格themeLiferay Portal為我們提供了非常靈活的主題風格定制功能,自身帶了四種風格的theme,在官方網站上提供了很多風格theme的下載,這無疑大大增強了主題風格定制的功能。但是,我們完全可以開發具有自己風格的theme,這里,我們將討論怎樣來開發個性的theme。
第一步:我們將以現有風格classic為模板文件創建新的theme,我們將新theme命名為coldtear
1、將liferay/html/themes目錄下的classic文件夾copy一份副本,并修改副本的文件夾名為coldtea
2、在liferay/web-inf目錄下新建liferay-look-and-feel-ext.xml文件,文件liferay-look-and-feel.xml是定義主題風格theme的配置文件,為了加以區分,我們在這里新建了該文件的擴展文件liferay-look-and-feel-ext.xml,該文件內容如下:
<!DOCTYPE?look-and-feel?PUBLIC?"-//Liferay//DTD?Look?and?Feel?4.0.0//EN"?"http://www.liferay.com/dtd/liferay-look-and-feel_4_0_0.dtd">
<look-and-feel>
????<compatibility>
????????<version>4.0.0</version>
????</compatibility>
????<company-limit>
????????<company-includes?/>
????????<company-excludes?/>
????</company-limit>
????<theme?id="coldtear"?name="ColdTear">
????????<root-path>/html/themes/coldtear</root-path>
????????<templates-path>/html/themes/coldtear/templates</templates-path>
????????<images-path>/html/themes/coldtear/images</images-path>
????????<template-extension>jsp</template-extension>
????????<color-scheme?id="01"?name="Blue">
????????????<![CDATA[
????????????????body-bg=#FFFFFF
????????????????
????????????????layout-bg=#FFFFFF
????????????????layout-text=#000000
????????????????layout-tab-bg=#E0E0E0
????????????????layout-tab-text=#000000
????????????????layout-tab-selected-bg=#6699CC
????????????????layout-tab-selected-text=#4A517D
????????????????portlet-title-bg=#6699CC
????????????????portlet-title-text=#4A517D
????????????????portlet-menu-bg=#B6CBEB
????????????????portlet-menu-text=#000000
????????????????portlet-bg=#FFFFFF
????????????????portlet-font=#000000
????????????????portlet-font-dim=#C4C4C4
????????????????portlet-msg-status=#000000
????????????????portlet-msg-info=#000000
????????????????portlet-msg-error=#FF0000
????????????????portlet-msg-alert=#FF0000
????????????????portlet-msg-success=#007F00
????????????????portlet-section-header=#094170
????????????????portlet-section-header-bg=#ADBDFB
????????????????portlet-section-subheader=#405278
????????????????portlet-section-subheader-bg=#91AEE8
????????????????portlet-section-body=#000000
????????????????portlet-section-body-bg=#E2E7FA
????????????????portlet-section-body-hover=#FFFFFF
????????????????portlet-section-body-hover-bg=#AC6CFA
????????????????portlet-section-alternate=#000000
????????????????portlet-section-alternate-bg=#CFD7FB
????????????????portlet-section-alternate-hover=#FFFFFF
????????????????portlet-section-alternate-hover-bg=#AC6CFA
????????????????portlet-section-selected=#7AA0EC
????????????????portlet-section-selected-bg=#FAFCFE
????????????????portlet-section-selected-hover=#00329A
????????????????portlet-section-selected-hover-bg=#C0D2F7
????????????]]>
????????</color-scheme>
????</theme>
</look-and-feel>
這里,注意的是修改theme的id和name,以及root-path、templates-path和images-path的路徑,這樣,我們就可以在主題風格頁面看到我們新的theme了。
第二步、分析classic的主題布局的劃分
1、打開liferay/html/theme/coldtear/templates目錄,該目錄下存放著很多jsp文件,打開portal_normal.jsp文件可以看到,該文件是整個頁面的主體,通過<liferay-util:include />標簽和<%@ include>方法包含了很多jsp文件,其中top.jsp文件定義了頭部信息,navigation.jsp定義了導航菜單,bottom.jsp定義了底部語言標簽信息,而頁面的主體信息是由<liferay-theme:box />標簽定義的,top="portlet_top.jsp"定義了portlet的標題欄信息,bottom="portlet_bottom.jsp"定義了portlet下面的陰影線,portlet的內容則是由<liferay-util:include page="<%= Constants.TEXT_HTML_DIR + tilesContent %>" />定義的。所有的css樣式信息是定義在css_cached.jsp文件中的。
2、liferay portal的頁面定義大部分地方都采用了DIV+CSS的方式,下面將以classic的整個DIV定義框架給出,以說明classic風格的定義方法。
<div?id="layout-inner-side-decoration">
<div?id="layout-box">
????<!--?定義頭部信息?top.jsp?-->
????<div?id="layout-top-banner">
????????<div?id="layout-user-menu"?style="text-align:?right;">
????????????<div?class="font-small"?style="margin-top:?5px;">
????????????????<div?id="layout-my-places">
????????????????????<div?id="p_p_id_49_"?class="portlet-boundary">
????????????????????????<div?class="portlet-borderless-container">
????????????????????????</div>
????????????????????</div>
????????????????</div>
????????????</div>
????????</div>
????</div>
????<!--?定義導航菜單?navigation.jsp?-->
????<div?id="layout-nav-container">
????????<div?class="layout-nav-tabs-box">
????????????<div?class="layout-tab"></div>
????????????<div?class="layout-tab"></div>
????????????<div?class="layout-tab-selected"></div>
????????????<div?class="layout-tab"></div>
????????</div>
????????<div?id="layout-global-search"></div>
????</div>
????<div?class="portlet-bottom-decoration-2"><div><div></div></div></div>
????<!--?定義主體portlet信息部分??-->
????<div?id="layout-content-outer-decoration">
????????<div?id="layout-content-inner-decoration">
????????????<div?id="layout-content-container">
????????????????<div?id="layout-column_column-1">
????????????????????<div?id="p_p_id_73_INSTANCE_9Q28_"?class="portlet-boundary">
????????????????????????<div?class="portlet-container">
????????????????????????????<!--?定義portlet標題欄信息?portlet-top.jsp?-->
????????????????????????????<div?class="portlet-header-bar"?id="portlet-header-bar_73_INSTANCE_9Q28"?onmouseover="PortletHeaderBar.show(this.id)"?onmouseout="PortletHeaderBar.hide(this.id)">
????????????????????????????????<div?class="portlet-wrap-title">
????????????????????????????????</div>
????????????????????????????????<div?class="portlet-small-icon-bar"?style="display:?none;">
????????????????????????????????</div>
????????????????????????????</div>
????????????????????????????<!--?定義portlet內容信息??-->
????????????????????????????<div?class="portlet-box">
????????????????????????????????<div?class="portlet-minimum-height">
????????????????????????????????????<div?id="p_p_body_73_INSTANCE_9Q28"?>
????????????????????????????????????????<div?class="slide-maximize-reference">
????????????????????????????????????????????<div?id="p_p_content_73_INSTANCE_9Q28_"?style="margin-top:?0;?margin-bottom:?0;">
????????????????????????????????????????????</div>
????????????????????????????????????????</div><!--?slide-maximize-reference?-->
????????????????????????????????????</div>
????????????????????????????????</div>
????????????????????????????</div><!--?end?portlet-box?-->
????????????????????????????<!--?定義portlet底部陰影線?portlet-bottom.jsp?-->
????????????????????????????<div?class="portlet-bottom-decoration-2"><div><div></div></div></div>
????????????????????????</div><!--?End?portlet-container?-->
????????????????????</div>
????????????????????<!--?定義一個空的portlet區域?-->
????????????????????<div?class="layout-blank-portlet"></div>
????????????????</div>
????????????</div>
????????</div>
????</div>
????<!--?定義底部信息?bottom.jsp?-->
????<div?id="layout-bottom-container"></div>
</div><!--?End?layout-box?-->
</div>
</div><!--?End?layout-outer-side-decoration?-->
這里我們可以看到classic的整體DIV定義框架,注釋部分對每個部分的定義都做了區分。
第三步、根據這樣一個結構,我們可以設計自定義theme風格的結構,然后將各個區域細化到各個jsp文件中,并配以特定的圖片和樣式就可以實現自定義theme,為了達到更好的顯示效果,需要教好的掌握CSS的各個屬性和使用方法。
Liferay Portal為我們提供了非常靈活的主題風格定制功能,自身帶了四種風格的theme,在官方網站上提供了很多風格theme的下載,這無疑大大增強了主題風格定制的功能。但是,我們完全可以開發具有自己風格的theme,這里,我們將討論怎樣來開發個性的theme。
第一步:我們將以現有風格classic為模板文件創建新的theme,我們將新theme命名為coldtear
1、將liferay/html/themes目錄下的classic文件夾copy一份副本,并修改副本的文件夾名為coldtea
2、在liferay/web-inf目錄下新建liferay-look-and-feel-ext.xml文件,文件liferay-look-and-feel.xml是定義主題風格theme的配置文件,為了加以區分,我們在這里新建了該文件的擴展文件liferay-look-and-feel-ext.xml,該文件內容如下:
<!DOCTYPE?look-and-feel?PUBLIC?"-//Liferay//DTD?Look?and?Feel?4.0.0//EN"?"http://www.liferay.com/dtd/liferay-look-and-feel_4_0_0.dtd">
<look-and-feel>
????<compatibility>
????????<version>4.0.0</version>
????</compatibility>
????<company-limit>
????????<company-includes?/>
????????<company-excludes?/>
????</company-limit>
????<theme?id="coldtear"?name="ColdTear">
????????<root-path>/html/themes/coldtear</root-path>
????????<templates-path>/html/themes/coldtear/templates</templates-path>
????????<images-path>/html/themes/coldtear/images</images-path>
????????<template-extension>jsp</template-extension>
????????<color-scheme?id="01"?name="Blue">
????????????<![CDATA[
????????????????body-bg=#FFFFFF
????????????????
????????????????layout-bg=#FFFFFF
????????????????layout-text=#000000
????????????????layout-tab-bg=#E0E0E0
????????????????layout-tab-text=#000000
????????????????layout-tab-selected-bg=#6699CC
????????????????layout-tab-selected-text=#4A517D
????????????????portlet-title-bg=#6699CC
????????????????portlet-title-text=#4A517D
????????????????portlet-menu-bg=#B6CBEB
????????????????portlet-menu-text=#000000
????????????????portlet-bg=#FFFFFF
????????????????portlet-font=#000000
????????????????portlet-font-dim=#C4C4C4
????????????????portlet-msg-status=#000000
????????????????portlet-msg-info=#000000
????????????????portlet-msg-error=#FF0000
????????????????portlet-msg-alert=#FF0000
????????????????portlet-msg-success=#007F00
????????????????portlet-section-header=#094170
????????????????portlet-section-header-bg=#ADBDFB
????????????????portlet-section-subheader=#405278
????????????????portlet-section-subheader-bg=#91AEE8
????????????????portlet-section-body=#000000
????????????????portlet-section-body-bg=#E2E7FA
????????????????portlet-section-body-hover=#FFFFFF
????????????????portlet-section-body-hover-bg=#AC6CFA
????????????????portlet-section-alternate=#000000
????????????????portlet-section-alternate-bg=#CFD7FB
????????????????portlet-section-alternate-hover=#FFFFFF
????????????????portlet-section-alternate-hover-bg=#AC6CFA
????????????????portlet-section-selected=#7AA0EC
????????????????portlet-section-selected-bg=#FAFCFE
????????????????portlet-section-selected-hover=#00329A
????????????????portlet-section-selected-hover-bg=#C0D2F7
????????????]]>
????????</color-scheme>
????</theme>
</look-and-feel>
這里,注意的是修改theme的id和name,以及root-path、templates-path和images-path的路徑,這樣,我們就可以在主題風格頁面看到我們新的theme了。
第二步、分析classic的主題布局的劃分
1、打開liferay/html/theme/coldtear/templates目錄,該目錄下存放著很多jsp文件,打開portal_normal.jsp文件可以看到,該文件是整個頁面的主體,通過<liferay-util:include />標簽和<%@ include>方法包含了很多jsp文件,其中top.jsp文件定義了頭部信息,navigation.jsp定義了導航菜單,bottom.jsp定義了底部語言標簽信息,而頁面的主體信息是由<liferay-theme:box />標簽定義的,top="portlet_top.jsp"定義了portlet的標題欄信息,bottom="portlet_bottom.jsp"定義了portlet下面的陰影線,portlet的內容則是由<liferay-util:include page="<%= Constants.TEXT_HTML_DIR + tilesContent %>" />定義的。所有的css樣式信息是定義在css_cached.jsp文件中的。
2、liferay portal的頁面定義大部分地方都采用了DIV+CSS的方式,下面將以classic的整個DIV定義框架給出,以說明classic風格的定義方法。
<div?id="layout-inner-side-decoration">
<div?id="layout-box">
????<!--?定義頭部信息?top.jsp?-->
????<div?id="layout-top-banner">
????????<div?id="layout-user-menu"?style="text-align:?right;">
????????????<div?class="font-small"?style="margin-top:?5px;">
????????????????<div?id="layout-my-places">
????????????????????<div?id="p_p_id_49_"?class="portlet-boundary">
????????????????????????<div?class="portlet-borderless-container">
????????????????????????</div>
????????????????????</div>
????????????????</div>
????????????</div>
????????</div>
????</div>
????<!--?定義導航菜單?navigation.jsp?-->
????<div?id="layout-nav-container">
????????<div?class="layout-nav-tabs-box">
????????????<div?class="layout-tab"></div>
????????????<div?class="layout-tab"></div>
????????????<div?class="layout-tab-selected"></div>
????????????<div?class="layout-tab"></div>
????????</div>
????????<div?id="layout-global-search"></div>
????</div>
????<div?class="portlet-bottom-decoration-2"><div><div></div></div></div>
????<!--?定義主體portlet信息部分??-->
????<div?id="layout-content-outer-decoration">
????????<div?id="layout-content-inner-decoration">
????????????<div?id="layout-content-container">
????????????????<div?id="layout-column_column-1">
????????????????????<div?id="p_p_id_73_INSTANCE_9Q28_"?class="portlet-boundary">
????????????????????????<div?class="portlet-container">
????????????????????????????<!--?定義portlet標題欄信息?portlet-top.jsp?-->
????????????????????????????<div?class="portlet-header-bar"?id="portlet-header-bar_73_INSTANCE_9Q28"?onmouseover="PortletHeaderBar.show(this.id)"?onmouseout="PortletHeaderBar.hide(this.id)">
????????????????????????????????<div?class="portlet-wrap-title">
????????????????????????????????</div>
????????????????????????????????<div?class="portlet-small-icon-bar"?style="display:?none;">
????????????????????????????????</div>
????????????????????????????</div>
????????????????????????????<!--?定義portlet內容信息??-->
????????????????????????????<div?class="portlet-box">
????????????????????????????????<div?class="portlet-minimum-height">
????????????????????????????????????<div?id="p_p_body_73_INSTANCE_9Q28"?>
????????????????????????????????????????<div?class="slide-maximize-reference">
????????????????????????????????????????????<div?id="p_p_content_73_INSTANCE_9Q28_"?style="margin-top:?0;?margin-bottom:?0;">
????????????????????????????????????????????</div>
????????????????????????????????????????</div><!--?slide-maximize-reference?-->
????????????????????????????????????</div>
????????????????????????????????</div>
????????????????????????????</div><!--?end?portlet-box?-->
????????????????????????????<!--?定義portlet底部陰影線?portlet-bottom.jsp?-->
????????????????????????????<div?class="portlet-bottom-decoration-2"><div><div></div></div></div>
????????????????????????</div><!--?End?portlet-container?-->
????????????????????</div>
????????????????????<!--?定義一個空的portlet區域?-->
????????????????????<div?class="layout-blank-portlet"></div>
????????????????</div>
????????????</div>
????????</div>
????</div>
????<!--?定義底部信息?bottom.jsp?-->
????<div?id="layout-bottom-container"></div>
</div><!--?End?layout-box?-->
</div>
</div><!--?End?layout-outer-side-decoration?-->
這里我們可以看到classic的整體DIV定義框架,注釋部分對每個部分的定義都做了區分。
第三步、根據這樣一個結構,我們可以設計自定義theme風格的結構,然后將各個區域細化到各個jsp文件中,并配以特定的圖片和樣式就可以實現自定義theme,為了達到更好的顯示效果,需要教好的掌握CSS的各個屬性和使用方法。
?
Liferay Portal學習資料共享在這里將我手頭一些Liferay Portal的學習資料共享一下,希望能夠幫助到更多的初學者。
LiferayPortal二次開發指南.rar
liferay架構.rar
Liferay開發環境配置說明文檔.rar
Liferay代碼研讀.rar
developersguide.rar
userguide.rar
quickstart.rar
liferay-tech.rar
?
?
總結
以上是生活随笔為你收集整理的Liferay Portal学习笔记-coldTear的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Liferay例子学习,如何部署简单的j
- 下一篇: Liferay Portal额外研究-银