Liferay Hook使用范例

今天UI组有个需求,需要把Liferay的默认的header改为自定义的header,并且用ext-js来展示动态header的效果,于是我们想到了用Liferay Hook的功能。

展示效果

初始状态:


当鼠标滚轮往下滚动时候,header会缩成一条横杠:

当鼠标滚轮往上滚动时,header会恢复为初始状态:


 

实现:

为了实现这个功能,我们必须创建一个Liferay Hook功能, 然后我们在META-INF下创建一个目录叫modify_liferay_defaults作为我们需要更改的部分。与此同时,我们配置liferay-hook.xml,让其指向这个目录:

<?xml version="1.0"?> <!DOCTYPE hook PUBLIC "-//Liferay//DTD Hook 6.1.0//EN" "http://www.liferay.com/dtd/liferay-hook_6_1_0.dtd">  <hook>     <custom-jsp-dir>/META-INF/modify_liferay_defaults</custom-jsp-dir> </hook>

 

紧接着,我们必须在modify_liferay_defaults目录下面建立和ROOT的html目录结构完全相同的目录结构来起到覆盖作用:

因为我们要加上自己的header,而Liferay自带的header在/html/themes/classic/templates/portal_normal.vm中,所以我们也在modify_liferay_defaults目录中建立相同的文件结构和文件,然后吧内容修改为我们要的,见第27-84行:

 

<!DOCTYPE html>  #parse ($init)  <html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">  <head>     <title>$the_title - $company_name</title>      $theme.include($top_head_include) </head>  <body class="$css_class">  $theme.include($body_top_include)  #if ($is_signed_in)     #dockbar() #end  <div id="wrapper">     <a href="#main-content" id="skip-to-content">#language("skip-to-content")</a>          <header id="banner" role="banner">         <div id="heading">                      <p>Charles has modified the header by Hook.</p>                      <div id="PtHpg" class="PtHpg">                 <div id="control-bar" class="">                     <div class="Hedr" id="Hedr">                         <div class="HdNav">                             <div id="Lg" class="rf reflect"><a href="" class="Logo"></a></div>                                                      <div class="NavTR">                                 <a href="">                                          Welcome to <b>Joe Doe</b>                                        </a>                                 <span class="DWARR"></span>                                 <a href="">Change View</a>                             </div>                                                  </div>                                                  <div class="NavMT">                             <ul id="Nav" class="MTBox">                                 <li><a href="">All Apps</a></li>                                 <li class="MTNOn"><a href="">Dashboard</a>                                 </li>                                 <li><a href="">Polaris</a>                                 </li>                                    <li><a href="">Page Builder</a></li>                                 <li><a href="">Analytics</a>                                                              <ul class="Nav2L">                                     <li class="InSS"><span class="MTSC"></span></li>                                     <li><a href="">Homepage</a></li>                                     <li><a href="">Department</a><span class="NavSA"></span>                                         <ul class="Nav3L">                                             <li class="ML5"><a href="">Conversion</a></li>                                             <li><a href="">Click through</a></li>                                             <li><a href="">A/B</a></li>                                             <li><a href="">Funnel</a></li>                                             <li><a href="">Page views</a></li>                                         </ul>                                     </li>                                     <li><a href="">Category</a></li>                                     <li><a href="">Search</a></li>                                     <li><a href="">Browse</a></li>                                     <li><a href="">Item</a></li>                                     <li><a href="">Checkout</a></li>                                 </ul>                                 </li>                             <li><a href="">PCS</a></li>                             <li><a href="">Notifications</a></li>                         </ul>                         </div>                         <div class="CLNav" id="CLNav"><span id="resizer"></span></div>                         </div>                 </div>                 <div id="control-bar-mini" class="">                 <div class="BShdw"><div class="SNav"><div class="SNBox"><span class="SLogo"></span><span class="SNavL"><a href="###">EMS - US Market</a></span><span class="FR">Logged in as <a href="###">Jon Doe</a></span></div></div></div>             </div>             </div>              <h2 class="page-title">                 <span>$the_title</span>             </h2>         </div>          #if (!$is_signed_in)             <a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>         #end          #if ($has_navigation || $is_signed_in)             #parse ("$full_templates_path/navigation.vm")         #end     </header>      <div id="content">           ...    </div>      <footer id="footer" role="contentinfo">         <p class="powered-by">             #language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>         </p>     </footer> </div>  $theme.include($body_bottom_include)  </body>  $theme.include($bottom_include)  </html>

 

光有内容还不够,我们还需要有样式和javascript,我们想用单独的文件去管理这些自定义和ext-js库的样式和 js来避免和Liferay自带的冲突:

所以我们在/html/common目录下建了2个文件,addExtraCss.jsp是放入引入外部css文件,而addExtraJs.jsp是放入引入外部的js文件:

addExtraCss.jsp如下(它包含了自定义css和ext-js库的css):

<link rel="stylesheet" href="/html/themes/classic/css/layout.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="/html/themes/classic/css/default.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="/html/themes/classic/css/ie.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="/html/themes/classic/extjs/resources/css/ext-all.css"  type="text/css" />

addExtraJs.jsp如下(它包含了自定义的js和ext-js库):

<script type="text/javascript" src="/html/themes/classic/extjs/ext-all.js"></script> <script type="text/javascript" src="/html/themes/classic/js/Scroll_header.js"></script>

 Scroll_header.jsp是可以显示头部滚动效果的js:

 

Ext.onReady(function(){             var showMiniFlag = true;             ...                         SetScrollEvent();             SetMouseleave();             SetMouseEnterMiniBar();             SetMouseEnterBar();             Resizer();                                    ...}

然后我们在/html/common/init.jsp的最后2行引入这2个jsp页面 ,见第33和34行:

<%-- /**  * Copyright (c) 2000-2012 Liferay, Inc. All rights reserved.  *  * This library is free software; you can redistribute it and/or modify it under  * the terms of the GNU Lesser General Public License as published by the Free  * Software Foundation; either version 2.1 of the License, or (at your option)  * any later version.  *  * This library is distributed in the hope that it will be useful, but WITHOUT  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more  * details.  */ --%>  <%@ taglib uri="http://displaytag.sf.net" prefix="display" %>  ...<%@ taglib uri="http://struts.apache.org/tags-tiles-el" prefix="tiles-el" %>  <%@ page contentType="text/html; charset=UTF-8" %>  ... <%@ page import="org.apache.commons.math.util.MathUtils" %>  <liferay-theme:defineObjects />  <%@ include file="/html/common/init-ext.jsp" %>   <!-- edited by charles to use hook to add self defined css and js --> <%@ include file="/html/common/addExtraCss.jsp" %> <%@ include file="/html/common/addExtraJs.jsp" %>

 

最后我们把所有的资源文件(css,js,images)都按照目录结构放置好,并且处理彼此之间的 引用关系,最终的项目图如下:

编译,部署,运行Liferay服务器,我们就可以看到期望的结果了。

你可能感兴趣的:(liferay,hook)