艾彬的JAVA博物馆
希望通过这里结交更多的朋友.MSN:axu18@hotmail.com;QQ:18306739
登录
注册
全站
当前博客
空间
博客
好友
相册
留言
用户操作
[即时聊天]
[发私信]
[加为好友]
孙旭
ID:axu20
共
16253
次访问,排名
7253(1)
好友
0
人,关注者
1
人
axu20的文章
原创 16 篇
翻译 0 篇
转载 44 篇
评论 29 篇
艾彬的公告
本站刚刚建立,内容不是很多,都是收录一些自己平时遇到过问题的解决方法和自己喜欢的技术方面.如有什么问题希望大家一起讨论研究多多留言!
最近评论
holmess:
的确如此
iq263:
程序员后花园,累了来看看 http://bbs.iq263.cn/
xwj1003:
一起学习吧。不过我想找一些异步刷新的例子。
例如,添加,修改,删除,不用刷新页面的那种。
你有吗?没有就写一个吧
梁轩:
旧的已经过去.记住美好的事和忘记不开心的事.从新开始新的想路.
时间有限是要我们好好把握的.努力在努力一定要干出个样来.这是有人告诉我的.我向她保正过我一定要干出个样来.你说男人是不是要这样呀.
要在学习中进步,在磨练中成长.
相信我们自己一定能不要让关心和爱我们的人失忘.
yaopf:
相当的好啊
文章分类
JAVA 应用技术
(RSS)
Portal技术
(RSS)
常见问题或配置问题
(RSS)
框架技术
(RSS)
容器技术
(RSS)
数据库技术
(RSS)
页面技术
(RSS)
收藏
技术文章
休闲文章
相册
喜欢的图片
友情连接
iReport学习
冷裂
小姜的网
自己的bolg
存档
2008年09月(2)
2008年08月(1)
2008年07月(1)
2008年06月(2)
2008年05月(5)
2007年11月(5)
2007年10月(2)
2007年08月(2)
2007年07月(10)
2007年06月(19)
2007年05月(4)
软件项目交易
订阅我的博客
Liferay Portal 学习(五)
收藏
新一篇: asp的分页
|
旧一篇: Liferay Portal 学习(四)
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,该文件内容如下:
<?
xml version
=
"
1.0
"
?>
<!
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-outer-side-decoration
"
>
<
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的各个属性和使用方法。
发表于 @
2007年07月26日 13:25:00
|
评论(
loading...
)
|
编辑
新一篇: asp的分页
|
旧一篇: Liferay Portal 学习(四)
评论
#
快乐小生 发表于2007-11-13 08:43:40 IP: 218.27.167.*
楼主,写得很好,我也正在学习liferay,但是我现在遇到一个问题,就是我在开发的时候用hibernate的时候,liferay是怎么用的,能不能给出个例子啊,我以前都是用**.hbm.xml去配实体关系的,现在不知道怎么干了,谢谢啊!
#
axu20 发表于2007-11-14 09:02:43 IP: 125.33.197.*
谢谢你的评论,但是我也是个初学者,这个文章也是转来,置于你的问题,不好意思,帮不了你了~实在是爱莫能助!
发表评论
姓 名:
主 页:
校验码:
看不清,换一张
登录