posts - 19,  comments - 123,  trackbacks - 0
       Liferay Portal 4.0 为我们提供了几种不同的页面布局,我们可以通过 Add Content 中的 Template 参数来指定不同的页面布局,但是,但我们利用 CMS 来定制文章内容的时候,仅有的几种页面布局并不能满足我们的需求,所以我们需要开发能够满足特定需求的页面布局。
    我们将开发一个具有下图风格的页面布局,该布局中我们指定了7个区域来分别装配portlet实现独特的页面风格。
1.JPG
一、编写模板文件
    我们将该页面风格名称定义为1_2_3_2 Columns,在Liferay/html/layouttpl/custom目录下新建1_2_3_2_columns.tpl文件,内容如下:
<div id="layout-content-outer-decoration">
<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>&nbsp;</div>
                  
</td>
                
<td width="26%" valign="top">
                  $processor.processColumn(
"column-3")
                
</td>
                  
<td class="layout-column-spacer" width="1%">
                    
<div>&nbsp;</div>
                  
</td>
                
<td width="26%" valign="top">
                  $processor.processColumn(
"column-4")
                
</td>
                
</tr>
              
</table>
            
</td>
          
<td class="layout-column-spacer" width="1%">
            
<div>&nbsp;</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,最后就完成了各种风格页面的定制过程。使用这个的方法,我们可以定制各种满足不同需求的页面。

posted on 2006-08-04 18:02 韩泪 阅读(4355) 评论(10)  编辑  收藏 所属分类: Liferay学习


FeedBack:
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-07 13:49 | robertpi
不错,不错,希望继续写下去.  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-07 17:16 | 韩泪
非常感谢您的支持,我一定坚持下去  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-17 13:47 | trevol
楼主加油!  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-18 13:38 | chu xue zhe
谢谢搂主,但是我的这个上边为什么没有配置自定义模板属性的文件呢?怎样找到???  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-18 13:40 | chu xue zhe
在哪里找“我们需要在 liferay-layout-templates.xml 文件中配置我们自定义的页面布局文件 1_2_3_2_columns.tpl ”?  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-18 14:40 | 韩泪
@chu xue zhe
页面布局文件 1_2_3_2_columns.tpl 这个文件是我们自己定义的,用来定义你自己的布局风格  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-18 15:21 | chu xue zhe
终于找到了,搂主理解错我的一次了。我的版本跟你的不一样,这个是刚下载的,4.0版本。在C:\liferay-portal-tomcat\webapps\ROOT\WEB-INF里面。谢谢!  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2006-08-21 10:21 | Spike Wang
谢谢希望相互交流

我也是liferay 爱好者,希望相互勉励。

我的MSN : hk2000c@hotmail.com

  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template
2007-04-09 17:33 | ericLiu
谢谢~你的文章写的很详细~~,很感谢你的共享  回复  更多评论
  
# re: 【原创】Liferay Portal学习笔记(三):自定义页面布局Template[未登录]
2007-09-29 16:38 | Bruce
我想问一下,为什么我的按上面的操作,布局6和7没有出现?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

虚其心,可解天下之问; 专其心,可治天下之学; 静其心,可悟天下之理; 恒其心,可成天下之业。

常用链接

留言簿(12)

随笔分类(19)

随笔档案(19)

搜索

  •  

最新评论

阅读排行榜