Liferay的布局、主题题及Hook胡启稳稳 手机：15925232137 QQ：68304399 博客：http:/www.huqiwen.com提纲1Liferay的布局模板2Liferay的主题开发方法3Liferay中的Hook简介Liferay的布局模板布局模板的作用定义页面的大概的布局结构（此结构可以 使用CSS进行详细控制）方面的管理portlet所在页面中的位置如果页面使用布局模板被删除，则页面不 能正常显示布局模板的开发*.tpl:这个文件是定义PC访问时布局模板的文件，可以通过IDE使用拖拽的方式进行编辑。*.wap.tpl:定义手机访问时的而已模板文件。*.png:这个图片是用于显示布局模板的缩略图，方便在选择模板的时候预览此模板的样式，需要自己手动制作IDE不会生成。liferay-layout-templates.xml：此文件位于WEB-INF目录下面，用于定义此布局模板的元数据信息。Liferay的布局模板提纲1Liferay的布局模板2Liferay的主题开发方法3Liferay中的Hook简介主题调整的位置 可以让某一个站点使用一个主题 可以让一个页面使用一个主题 可以让多个站点使用同一个主题主题的开发步骤效果图设计界面设计人员，根据需求，设 计界面效果图/界面原型效果图分析根据效果图，使用了几种布局 使用了几种页面风格效果图实现将效果图使用HTML实现 个人推荐先将效果图使用 HTML实现 此步骤可以根据实现情况取舍开发部署将HTML实现的代码移植到 Liferay中 对界面进行调试修改/兼容性 测试 部署主题1布局分析1.对已经确认的设计稿进行分析归类. 2.在每张设计稿的页头和页尾都会出现的相同的东西我们把他列为 页头和页脚,这个需要在文件中来实现. 3.分析出设计稿中一共出现了多少种布局和风格. 4.下图有助你对设计稿的分析.页头正文内容1内容2内容3内容4页脚页头内容1内容2内容3内容4页脚页头内容1内容2内容3内容4页脚页头内容1内容2内容3页脚Page1Page2Page3Page4分析结果:上图共使用了三种不同的布局,三种不同的风格: 布局1:Page1,Page3;布局2:Page2;布局3:Page4 风格1:Page1,Page2;风格2:Page3;风格3:Page4主题工程的目录结构CSSCSS里面的文件是分模块组织，如forms.css里面是定义的表单相关的，navigation.css里面是定义的导航相关的，layout.css是定义的布局相关的等等。比如我们需要修改导航的样式，则在_diffs目录下面建立css目录，并将上面的navigation.css复制到_diffs/css/下面。我们在此文件上修改，liferay IDE会自动的编译覆盖原先的内容。如果我们需要定义的CSS内容，不是liferay本身提供的，而是我们自己新建立的样式，则推荐将此样式写在_diffs/css/custom.css里面。JS当前主题使用JS文件，可以根据情况放当前主题所使用的相关JS文件，如主题的导航的JS等。images将和当前主题相关的图片存于images目录下面。如果需要在代码中引用，可以使用String imgpath = themeDisplay.getPathThemeImages();这里取到的imgpath，即为images目录。templates模板文件，用以定义页面的结构，也是分模块分开，如portlet、导航、弹出层、页面等。可以根据自己的实际需求进行修改，使用的是Velocity，如果对于Velocity不熟悉的，可以大概了解一下，和普通的HTML没有太大的区别。一般主题开发方式创建工程使用Liferay IDE的主题创建向导，创建一个Theme工程 在_diffs目录下面创建css、images、js、template等目录复制代码在_diffs/css目录下面创建custom.css文件（或者将css/custom.css复制过来 ） 将template下面的navigation.vm和portal_normal.vm复制到 _diffs/template目录下面调整模板和CSS查看portal_normal.vm和navigation.vm的页面结构和我们效果图的差异，修 改成效果图一样的结构 将相应的CSS内容复制或者写在custom.css的文件里面提纲1Liferay的布局模板2Liferay的主题开发方法3Liferay中的Hook简介HOOK简介Hook原意 HOOK可以翻译为钩子，原意为Widows消息处理机制一个平 台。常见于Windows平台的应用程序Liferay Hook工程 Liferay的HOOK工程是提供一种在不直接修改Liferay源码的基 础上，对Liferay核心功能进行覆盖的方法。HOOK的作用 可以通过Hook来修改覆盖源代码中的相应的JSP文件覆盖源程序JSP Liferay中有些中文翻译不够准确，可以使用Hook来进行修改扩展扩展语言包 Liferay中很多配置参数放在Portal.properties里面，可以使用Hook覆盖相应的参数修改门户的属性配置参数 Liferay的核心工程中有许多Service层的方法，可以通过此Hook来进行覆盖覆盖Liferay中Service里面的方法 Liferay的核心都是使用Struts 1，可以通过hook来覆盖或者修改Liferay核心功能的这些Action层 的代码添加或者修改Struts Action 如程序启动事件（application.startup.events）、登录注销事件（login.events.pre、 login.events.post）、session的创建销毁事件等覆盖事件处理程序覆盖源程序JSP扩展语言包修改门户属性参数覆盖Liferay Service里面的方法Q&A胡启稳 QQ：68304399 TEL：15925232137 WebSite:www.huqiwen.com