Liferay 6.1开发学习(七):Layout布局模板开发

2012年09月25日 Liferay 评论 8 条 阅读 20,572 views 次

Liferay提供了layout功能,可以方便的自由布局,用户或者管理员可以根据选用的布局模板对页面进行自由布局。Liferay默认中提供了几种常用的layout模板,如单栏目、双栏目(20%/80%,30%/70%)等几种常用的,但是这些布局模板并不能满足我们实际的需求,一些复杂的布局需要自己开发。

LayoutTPL开发

布局模板是一个tpl文件,本身结构非常简单。基于Liferay IDE可以进行可视化的、拖动的形式进行布局TPL的开发。方法如下 :

1、在Eclipse的工具条上,点击New Liferay Project,在plugin type里面选择Layout,点击finish。则完成了Layouttpl工程的建立。

2、工程里面对于开发有用的文件主要有四个:

*.tpl:这个文件是定义PC访问时布局模板的文件。

*.wap.tpl:定义手机访问时的而已模板文件。

*.png:这个图片是用于显示布局模板的缩略图,方便在选择模板的时候预览此模板的样式。

liferay-layout-templates.xml:此文件位于WEB-INF目录下面,用于定义此布局模板的元数据信息。

3、通常情况下,我们只需要编辑*.tpl文件即可。如下图,为我拖出来的一个TPL文件。

liferay-layouttpl

4、可以通过鼠标可视化的形式,添加column(列)、row(行)等,通过控制点来显示列宽的百分比等。

布局模板的发布

主题创建修改完成后,点击ant中的deploy进行发布即可。

其他说明:

layoutTPL的开发非常简单。通过Liferay IDE通够实现快速开发。有一些小技巧

1、可以在一个TPL工程里面建立多个布局模板,只需要在liferay-layout-templates.xml里面对这些文件进行定义描述即可。

2、如果在拖动中不能拖出自己想要的宽度百分比,可以进行source模式,手动的修改这些百分比,为 aui-w24,w后面的数值即是百分比。

3、如果不需要进行移动访问,*.wap.tpl的内容可以不用管。

4、建议添加*.png这个缩略多,方便在添加切换的时候预览。

用户头像

8 条留言  访客:7 条  博主:1 条

  1. 我看了楼主的发的图,我想问的是怎么将一列,划分为二列。

  2. LZ 我想问下: 开发的布局在页面上在哪里进行添加呢,在平时添加的那一堆布局里,我没发现我开发的 ,也部署了。

  3. 6.2

    the current project is using Liferay Portal version 6.2 which uses bootstrap style layouts.this editor does not yet support bootstrap style layouts so the visule page has been disabled.

    可视化工具不能使用

  4. 你好!谢谢你的教程!
    按照教程我发布了上图的布局模板,在选择页面布局列表里也看到新发布的模板,但选择该模板后,发布页面仍是两列式,并不是如图的布局,请问原因?谢谢!

给我留言

您必须 登录 才能发表留言!

Copyright © IT人生录 保留所有权利.   主题设计 知更鸟 滇ICP备16001547号

用户登录

分享到: