jsp jstl el tag 视图层技术总结

     最近做些前台页面表现层的工作，对这些东西好久没有接触了。遇到一些问题，总结一下：

 

    * 自定义标签文件：

           在用自定义标签实现功能时候总是报错，如下：

javax.servlet.jsp.JspException: javax.el.PropertyNotFoundException: Property 'header' not found on type java.lang.String

具体代码如下：

 

<%@tag pageEncoding="UTF-8" body-content="empty" import="com.express.platform.model.system.*"%> 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ attribute name="module"  required="true" rtexprvalue="true" %>  
  
   
   
<div class="index_model">
	 <div class="index_model_head">
		   <c:if test="${not empty module.header }">
			  	<c:if test="${not empty module.header.url }">
			  		<a href="${module.header.url }">
			  	</c:if>
			  	<c:if test="${not empty  module.header.text }">
			  		 ${module.header.text }
			  	</c:if>
			  	<c:if test="${not empty module.header.url }">		
			  		</a>
			  	</c:if>	
		  </c:if>
	 </div>
	   
	 <c:forEach items="${module.tabSelector }" var="tab">
	  	 <c:if test="${not empty tab.tab && not empty tab.tab.text}">
	  	 	<c:set  value="true" var="isShow" scope="page"></c:set>
	  	 </c:if> <c:remove var="tab"/>
	 </c:forEach>
	  
	 <c:if test="${not empty isShow && isShow == \"true\"}">
		 <div class="index_model_tab">
		 	<c:forEach items="${module.tabSelector }" var="tab">
		 		<div>${tab.tab.text }</div>
		 	</c:forEach>
		 </div> <c:remove var="tab"/>
	 </c:if>
	   
	 
	 <div class="clear"></div>
	 
	 <div class="index_model_content">
		 <c:forEach items="${module.tabSelector }" var="tab">
	 	 	<div class="index_model_tab_content">
		 	 	 <table> 
					<tr>
						<c:forEach items="${tab.columnsWidth }" var="colWidth">
							<td width="${colWidth }"></td>
						</c:forEach>
					</tr>
					
					 <c:forEach items="${tab.tableData }" var="rowData">
					 	<tr>
					 		<c:forEach items="${rowData }" var="colData" varStatus="index">
					 			<c:choose>
					 				<c:when test="${colData.type.type == \"url\" || colData.fold }">
					 					<td   class="index_model_column_main">
					 				</c:when>
					 				<c:otherwise>
					 					<td  >
					 				</c:otherwise> 
					 			</c:choose>
					 				<c:choose>
					 					<c:when test="${colData.type.type == \"img\" }">
					 						<img src="${colData.url }" />
					 					</c:when>
					 					<c:when test="${colData.type.type == \"url\"  }">
					 						<a href="${colData.url  }" title="${colData.text }">${colData.text }</a>
					 					</c:when>
					 					<c:otherwise>
					 						${colData.text }
					 					</c:otherwise>
					 				</c:choose> 
					 			</td>
					 		</c:forEach>
					 	</tr>
					 </c:forEach>
					 
				 </table>  
	   		</div> 
	   </c:forEach>
     </div>
   
	 <div class="clear"></div>  
   	 <div class="index_model_foot">
   	 	<c:forEach items="${module.footer }" var="footer" >
 				<c:choose>
 					<c:when test="${footer.type.type == \"img\" }">
 						<img src="${footer.url }" />
 					</c:when>
 					<c:when test="${footer.type.type == \"url\" }">
 						<a href="${footer.url  }" title="${footer.text }">${footer.text }</a>
 					</c:when>
 					<c:otherwise>
 						${footer.text }
 					</c:otherwise>
 				</c:choose>&nbsp;&nbsp;&nbsp;  		 
		</c:forEach>
   	 </div>
   	 
  </div>
  
  
  
  

 

从异常信息看，貌似是module中没有header属性，仔细看了下代码，没有错，module对象中的确有header这个属性，再在页面中通过${module}打印数据，发现数据能够完整展示，怪了。怎么会这么样了。在仔细看看你异常： 

javax.servlet.jsp.JspException: javax.el.PropertyNotFoundException: Property 'header' not found on type java.lang.String

貌似是说在String中没有找到header属性，但我的el代码是${module.header},莫非el将module当成了String来处理，但打印时候又正常，能取到对应的内容，通过jsp script <%  %>方式一切都正常， 在尝试在tag里面通过   ${module.class.name }打印传入module的类型，结果显示java.lang.String ，my god，原来如此，接着就是想想办法在el里面将module 转换成自己真正的类型，查了下资料在<%@attribute 指令 中有一个type属性，可以指定传入到tag里面参数的类型，将module的type类型指定后，结果一切正常。自定义标签在处理数据的时候，假如我们不在attribute指定参数的类型，那么参数会以String的形式传递进来，只有手动指定传入的类型，才能在tag里面正常使用。最红attribute代码如下：

 

<%@ attribute name="module"  required="true" rtexprvalue="true"  type="com.express.platform.model.system.UserModule" %>  

 

通过自定义标签、struts 标签 ，attribute 等指令 定义的变量数据，如<c:set var="xx".... 、 attribute 的name="xxx" 可以再<% %>里面直接引用，编译后的文件如下：

 

  public void setJspContext(JspContext ctx) {
    
  private com.express.platform.model.system.UserModule module;

  public com.express.platform.model.system.UserModule getModule() {
    return this.module;
  }

  public void setModule(com.express.platform.model.system.UserModule module) {
    this.module = module;
    jspContext.setAttribute("module", module);
  }
  。。。。。。

 通过编译后的文件可以看出，module也就是在struts 、attribute指令 、jstl 中定义的变量,该变量在页面里面一个全局变量，所以在<%  %>可以直接引用，在set注入时，会放到jspContext中，所以可以再page里面找到该变量。

 

 

 

*el表达式是使用

   el表达式只能去对象的属性，并且是提供了get方法的属性，不能调用对象的方法，要判断对象是否为null ，字符串是否长度为0， 集合是否为空集合，在el里面可以使用empty ，如上脚本: ${empty data}  、 ${not empty data}都是用于为空性判断。

 

*jstl 保准标签库

core 包括： set  、remove  、out 、 if  、 choose 、 when 、otherwise  、 forEach 、 forTokens、 redirect

 

c:redirect <c:redirect url="/main.jsp" context="/mvc" />

c:forTakens 对字符串进行截断运算

<c:forTakens items="zhang:san:li:hao" var="info" delims=":">

<c:out value="${info}" />

</c:forTakens>

 

sql 包括：  datasource  、 query 、 delete  、update 其中update可以调用存储过程

 

format 标签包括： fmt:formatNumber value="" pattern=".000" fmt:formatDate value="" type="date time both"

 

 

 

* 特殊CSS

clear:left / right / both; 由于div float 以后脱离了原来的页面流，导致原来的内容围绕在float元素周围，为了清除这种围绕可以使用clear属性，有时为了让float在视觉上围绕父容器，也可以再float元素下添加一个clear元素的div让父容器包含float元素

 

overflow:scroll / hidden / visible; 当内容溢出的时候，该如何显示,scroll 是折行滚动， visiable 是直接显示不剪切，hidden是溢出的内容自动切除，不显示，此属性一般用在div上，用在table上不管用。

 

text-overflow：clip / ellipsis 

1. 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
2. text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

 <td nowrap="nowrap">asdfasfdasfd</td> nowrap="nowrap" 用于控制td里面的数据部折行显示，经常结合overflow使用；

 

table-layout：fixed，用于控制表格布局，如下：

 

固定表格布局：

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

自动表格布局：

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容

 

 

要让表格里面的内容在溢出的时候显示为...，需要定义表格 的tablelayout：fixed，定义td的overflow：hidden; text-overflow:ellipsis;

  -o-text-overflow: ellipsis 和 text-overflow 的作用一样，只是为了兼容oper显示...而设置的。

 

控制表格数据内容溢出时候需要下面样式结合：

table{

table-layout:fixed;

}

 

 

td{

white-space: nowrap;

overflow: hidden;

        -o-text-overflow: ellipsis;    

        text-overflow:    ellipsis;  

}

 

 

表格数据内容溢出时就会显示为....

 

word-wrap:normal / break-word;

控制容器里面字符到到容器边界是否自动换行；

normal控制连续文本换行。 显示效果会换行，但到边界的时候如果是一个英文单词，这个英文单词不会换行，即词内换行不会发生。

break-word：

内容将在边界内换行。如果需要，词内换行（word-break）也会发生。

*css 选择器概述

    css 选择器类型：

• id选择器
• class选择器
•   元素选择器
• 派生选择器
• 属性选择器
• 子元素选择器
• 相邻兄弟选择器
• 选择器分组

    id 选择器（#ss）、class选择器（.ss）、元素选择器 都没有什么好说的，是最最基本的选择器。其他选择器是复合选择器，是以上选择器的组合，其他选择器一一解释：

      

    派生选择器，例子:

  派生选择器

div p a{
   ....
}

上面的样式应用于 div 下面所以的子元素 为p的里面的超链接，这样可以通过祖先元素限制css应用访问。

子元素选择器

   子元素选择器是派生选择器的一种特殊类型，其限制是派生选择器应用的是所有子孙元素，而子元素选择器仅仅对父元素的子元素有效

div > .nav_menu{
.......
}

 

相邻兄弟选择器

   相邻兄弟元素选择器是派生选择器的一种特殊类型，其限制是派生选择器应用的是所有子孙元素，而相邻兄弟选择器仅仅对某一元素后面的兄弟元素有效

div + .nav_menu{
.......
}

 

选择器分组：

   一类元素拥有同样的css属性。

div,a,p,.menu{
.....
}

 并列元素处理

 

属性选择器

通过元素的属性过滤元素，这个用的比较少.

 

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

 通过[]表明元素的属性，来过滤元素应用css属性。

 

[title='contnet']{
......
}

 

 

下面例子表示带menuclass属性的div，设置字体为红色。

 

div.menu{
	color:red;
}

 

 

 

下面例子标准id为menu的div，设置字体为红色

div#menu{
	color:red;
}

 上面两种写法是对属性选择器的变形方式。理解就好了。

 * css 定位属性：

         position：  static  、 fixed 、 relative 、 absolute.

        四种定位解释如下：

       static: 正常的页面流布局，从左至右，从上到下， 块级元素正常生成一个矩形框，行级元素会生成一个或多个行级框。填充父元素，正常的显示在窗口中。

       relative：相对定位，相对元素本应该出现的位置定位， 利用top、right、left、bottom属性定位元素，其中top、right、left、bottom是相对原来出现位置的值，该定位方式中。元素只是相对本应该出现的位置移位了。但元素原来的空间依然占据，只是元素本身位置移动了。所以元素会覆盖其他元素。原来位置还一样不变。切记。

       absolute: 元素完全脱离文档流，相对于其父元素定位，脱离文档流就是元素原来的位置完全关闭，然后相对父元素绝对定位，元素定位后的位置就覆盖原先在该位置的元素。

       fixed:  该方式是absolute的特殊方式，在absolute中父元素是窗口本身时，就是fixed方式定位。

* float ： left、 right

    浮动属性就是让该元素脱离原先的文档流，然后向左或者向右浮靠，直到碰到其他元素的边框。