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