`
jayung
  • 浏览: 58991 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jsp页面代码复用组件工具：easylayout

easylayout jsp页面复用 
阅读更多

Easylayout是通过借鉴Java里的继承和重写思想，最大可能复用页面代码。

适用场景：多个页面，页面布局一致，比如上方header，下方footer，中间左边菜单栏，中间右边为主要内容，只有主要内容不同，解决用include无法解决或不方便解决问题。

优点：低依赖(仅依赖commons-logging.jar)，低侵入(无需在web.xml里定义，或其他额外配置文件)，对其他框架无影响，无需考虑与其他框架的集成。

缺点：欢迎补充......

页面需申明标签：

<%@ taglib prefix="layout" uri="/easy-layout.tld"%>

 

jar包很简单很小，约37Kb，总共三个标签：

1. layout:definition  定义模板页，供其他引用页使用，相当于建一个父类。

2. layout:component

 在模板页里，代表将要被其他引用页重写的部分，相当于在Java里父类里定义方法；

 在引用页里，将重写模板页里将应申明的标签内容，相当于在Java里子类里重写父类的方法。

3. layout:render 申明需要引用的模板页，相当于在Java里引用需要的父类。

 

在附件的demo里

layout.jsp 模板页

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="layout" uri="/easy-layout.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!-- layout:definition 定义模板，相当于Java里的创建父类 -->
<layout:definition>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
<%-- layout:component 申明要被重写的部分，可以有默认值 --%>
<layout:component name="title">欢迎使用stripes-layout</layout:component>
</title>
<link rel="shortcut icon" href="${ctx}/style/favicon.ico" type="image/icon" />
<link type="text/css" rel="stylesheet" href="${ctx}/style/global.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/style/common.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/style/demo.css" />
<!-- layout:component 申明要被重写的部分，可以无内容，由引用页实现具体内容 -->
<layout:component name="style"></layout:component>
<layout:component name="script"></layout:component>
</head>
<body>
<div id="container" style="margin:0em auto;width:1000px;">
   <div id="header">Header部分</div>
   <div>
   <table class="mainTable">
      <tr>
         <td style="width: 180px;vertical-align: top;margin-left:0;">
            <ul class="ulList">
               <li><a href="${ctx}/">我的首页</a></li>
               <li><a href="${ctx}/hello.jsp">Hello World</a></li>
               <li>个人信息</li>
               <li>我要XXXX</li>
               <li>我的XXXX</li>
               <li>XXXXXXXX</li>
               <li>退出登录</li>
            </ul>
         </td>
         <td>
            <fieldset class="fieldset">
               <legend>
                                                   当前位置：<layout:component name="legend">无</layout:component>
               </legend>
               <layout:component name="content">这里是想重写的部分</layout:component>
            </fieldset>
         </td>
      </tr>
   </table>
   </div>
   <div id="footer">footer:  填内版权等 Copyright (C) ...</div>
</div>
</body>
</html>
</layout:definition>

 

index.jsp, hello.jsp 引用了layout.jsp，并重写部分内容。

hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="layout" uri="/easy-layout.tld"%>
<!-- layout:render 申明要引用的模板页，相当于Java里要继承的父类 -->
<layout:render name="/layout.jsp">
   <!-- layout:component 重写模板页里对应的内空，相当于Java里重写父类的方法 -->
   <layout:component name="title">Hello World：欢迎使用stripes-layout</layout:component>
   <layout:component name="legend">Hello World,欢迎使用stripes-layout</layout:component>
   <layout:component name="content">
      <br />Hello，欢迎使用Easylayout<br/>1.<br/>2.<br/>3.<br/>...</layout:component>
</layout:render>

 

附件名：easylayout-demo

 

0
顶
0
踩
分享到：
| spring mvc + spring + mybatis+json整合
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics