最近做些前台页面表现层的工作,对这些东西好久没有接触了。遇到一些问题,总结一下:
* 自定义标签文件:
在用自定义标签实现功能时候总是报错,如下:
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>
</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
- 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。对应的脚本特性为textOverflow。
- text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
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选择器
- 元素选择器
- 派生选择器
- 属性选择器
- 子元素选择器
- 相邻兄弟选择器
- 选择器分组
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 浮动属性就是让该元素脱离原先的文档流,然后向左或者向右浮靠,直到碰到其他元素的边框。