深入Beehive标签库系列教程(7) - 数据分页显示标签组

时间：2006-06-21
作者：肖菁
浏览次数： 1226
本文关键字：Beehive, NetUI, Taglib, 标签, 表单, 教程 文章工具
 推荐给朋友
 打印文章

前提条件基本NETUI标签表单：文本框和按钮表单：单选框表单：多选框表单：下拉框使用标签遍历数据数据分页显示标签组基于模版的页面组装技术
数据的分页显示是Web应用中重点关注的内容之一，NETUI中提供了netui-data:dataGrid标签和一些相关的标签如：netui-data:configurePager 、netui-data: renderPager、netui-data: header、netui-data:rows等，它们组合起来使用可以完成数据分页显示功能。
netui-data:dataGrid标签
用于指定要显示的数据，主要属性包括dataSource和name。
dataSource
dataSource属性用于将netui-data:dataGrid标签绑定到要显示的数据，被绑定的数据可以是数组、Hashtable、Collection等类型的对象。
name
name属性是一个字符串，它是netui-data:dataGrid标签在应用环境中的唯一标识符，我们在实现排序、过滤的功能时需要使用这个属性来查找当前处理的netui-data:dataGrid标签对应的数据模型。
netui-data:configurePager标签
用于设置分页显示的相关信息如默认每页显示的记录数目、导航内容等，主要的属性包括pagerFormat、pageSize、pageAction。
pagerFormat
用于设置导航区要显示的样式，有两个选项：firstPrevNextLast或者prevNext，使用后者在导航区只能看到上一页和下一页的超链接，而使用前者将还包括第一页和最后一页的连接。
pageSize
用于设置每页要显示的记录数目。
pageAction
用于设置生成导航链接的目标地址。默认情况下生成的导航目标地址是当前JSP页面，但是通常情况下页面流的导航目标都是Action，我们可以通过设置pageAction属性将导航连接的目标地址转向Action。
netui-data: renderPager标签
netui-data:configurePager标签的pagerFormat属性仅仅是设置了导航区要显示的样式，并没有设置导航区显示的具体位置，我们需要通过netui-data: renderPager标签设定导航区的位置。
netui-data: header标签
用于显示表格的头信息。
netui-data:headerCell
用于显示表格头的列，如果表格需要排序，排序的参数也通过netui-data:headerCell标签对应的属性提供。支持的主要属性包括value、sortExpression、sortAction。
value
表格中要显示的内容。
sortExpression
排序的表达式。netui-data:dataGrid标签支持嵌入式排序功能，不过他并没有提供默认的排序实现，只是提供了相关的属性和接口。sortExpression属性中可以设置排序时使用的表达式，开发者可以通过接口获得这个表达式，然后自己将内容排序后返回给netui-data:dataGrid标签显示。
sortAction
用于设置生成排序链接的目标地址。默认情况下生成的排序链接目标地址是当前JSP页面，但是通常情况下页面流的目标都是Action，我们可以通过设置sortAction属性将排序链接的目标地址转向Action。
netui-data:rows标签
用于遍历数据的每一条记录。我们可以在netui-data:rows标签下面嵌套netui-data:anchorCell、netui-data:imageAnchorCell、netui-data:imageCell、netui-data:spanCell、netui-data:templateCell标签显示表格的列。
netui-data:anchorCell
该标签用于显示超链接内容的列。主要属性包括value、action、href。Value属性用于指定超链接的显示内容，action属性指定该超链接目标action的名称，如果超链接指向JSP内容，我们需要使用href属性指定超链接的目标。
netui-data:imageAnchorCell
该标签用于显示带超链接的图片。主要属性包括src、action、href。src属性用于指定显示图片的位置，action属性指定该超链接目标action的名称，如果超链接指向JSP内容，我们需要使用href属性指定超链接的目标。
netui-data:imageCell
该标签用于显示简单的图片。主要的属性包括src，用于提供显示图片的位置。
netui-data:spanCell
该标签用于显示简单的文字列。主要属性是value，用于指定该列的显示内容。
netui-data:templateCell
该标签用于需要显示复杂内容的列。在netui-data:templateCell中可以显示任意的HTML内容、NETUI标签或者其他任意内容。
我们来看一个简单的例子，以前面显示的10个UserBean对象为例，如果我们每页显示5个对象信息，使用netui-data:dataGrid显示这些数据的代码如下。

netui-data:dataGrid标签的更多属性的应用请参考清单1，清单3 给出了格式化netui-data:dataGrid标签的css文件的内容。
需要指出的是，使用netui-data:dataGrid标签分页显示数据仅针对数据量不大的情况，因为netui-data:dataGrid标签中要显示的数据使用Java对象保存，对于大数据量的情况，由于过大的Java对象在多用户访问时很容易引起系统性能问题，严重的话会引起OutOfMemoryError，导致系统无法正常运行，这种情况下，不推荐直接使用netui-data:dataGrid标签完成分页。而是应该由开发者实现数据的逐页提取，借助于netui-data:dataGrid标签来显示当前页的数据，这样才能保证系统平稳运行。
我们不能在大数据量的情况下完全使用netui-data:dataGrid标签实现数据分页显示，而应该由开发者完成分页逻辑，仅仅借助于netui-data:dataGrid标签显示数据。
将%NETUI_HOME%目录下的Web应用编译、发布到Tomcat后(上下文路径netui)，可以使用http://localhost:8080/netui/dataGridExamples.do访问这个netui:dataGrid标签的例子。
和分页显示数据相关的JSP文件的完整内容请参考清单1。
清单1 web\dataGridExample.jsp
<%@ page language="java" contentType="text/html;charset=gb2312"%> <%@ page import="org.vivianj.beehive.examples.beans.UserBean" %> <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0" prefix="netui-data"%> <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0" prefix="netui"%> <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0" prefix="netui-template"%> 使用标签分页显示数据的例子

简单分页的例子	简单分页的例子--在表格中显示复杂内容
简单分页的例子--应用CSS格式化显示

清单2 web\Controller.java
import javax.servlet.http.HttpSession; import org.apache.beehive.netui.pageflow.Forward; import org.apache.beehive.netui.pageflow.PageFlowController; import org.apache.beehive.netui.pageflow.annotations.Jpf; import org.vivianj.beehive.examples.beans.UserBean; import java.util.List; import java.util.ArrayList; import org.apache.beehive.netui.databinding.datagrid.api.DataGridState; import org.apache.beehive.netui.databinding.datagrid.api.DataGridStateFactory; import org.apache.beehive.netui.databinding.datagrid.api.sort.Sort; import org.apache.beehive.netui.databinding.datagrid.api.sort.SortDirection; import java.lang.reflect.Method; import java.lang.reflect.InvocationTargetException; import java.beans.Introspector; import java.beans.BeanInfo; import java.beans.PropertyDescriptor; import java.beans.IntrospectionException; import java.util.Comparator; import java.util.Collections; @Jpf.Controller( simpleActions={ @Jpf.SimpleAction(name="begin", path="index.jsp") }, sharedFlowRefs={ @Jpf.SharedFlowRef(name="shared", type=shared.SharedFlow.class) } ) public class Controller extends PageFlowController { @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "pageInputExample.jsp") }) public Forward pageInputExamples() { Forward f = new Forward("success"); /* 向JSP页面传递数据 */ f.addActionOutput("hellostring", "Hello World!"); String[] strings = new String[]{"Hello World!","Hello Beehive!"}; /* 向JSP页面传递数组 */ f.addActionOutput("strings", strings); /* 向JSP页面传递自定义对象 */ UserBean userBean = new UserBean(); userBean.setId(100); userBean.setName("UserBean100"); f.addActionOutput("userbean", userBean); /* 向JSP页面传递List对象 */ List list = new ArrayList(); list.add(userBean); UserBean userBean1 = new UserBean(); userBean.setId(101); userBean.setName("UserBean101"); list.add(userBean1); f.addActionOutput("userbeans", list); return f; } @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "cellRepeaterExample.jsp") }) public Forward cellRepeaterExamples() { Forward f = new Forward("success"); ArrayList list = new ArrayList(); for( int i = 0;i<10;i++){ UserBean user = new UserBean(); user.setId(i); user.setName("name" + i); list.add(user); } f.addActionOutput("userbeans", list); return f; } @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "repeaterExample.jsp") }) public Forward repeaterExamples() { Forward f = new Forward("success"); ArrayList list = new ArrayList(); for( int i = 0;i<10;i++){ UserBean user = new UserBean(); user.setId(i); user.setName("name" + i); list.add(user); } f.addActionOutput("userbeans", list); return f; } @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "dataGridExample.jsp") }) public Forward dataGridExamples() { Forward f = new Forward("success"); List list = new ArrayList(); for( int i = 0;i<10;i++){ UserBean user = new UserBean(); user.setId(i); user.setName("name" + i); list.add(user); } DataGridState dataGridState = DataGridStateFactory.getInstance(getRequest()).getDataGridState("user"); final List sorts = (List)dataGridState.getSortModel().getSorts(); if(sorts != null && sorts.size() < 2) { Sort sort = (Sort)sorts.get(0); SortByPropertyComparator sorter = new SortByPropertyComparator(sort); Collections.sort(list, sorter); } f.addActionOutput("userbeans", list); return f; } protected void onCreate() { } protected void onDestroy(HttpSession session) { } private class SortByPropertyComparator implements Comparator { private Sort _sort = null; SortByPropertyComparator(Sort sort) { _sort = sort; } public int compare(Object o1, Object o2) { int comparison = 0; Object value1 = extractPropertyValue(o1, _sort.getSortExpression()); Object value2 = extractPropertyValue(o2, _sort.getSortExpression()); assert value1 instanceof Comparable; comparison = ((Comparable) value1).compareTo(value2); if (_sort.getDirection() == SortDirection.ASCENDING) return comparison; else if (_sort.getDirection() == SortDirection.DESCENDING) return -1 * comparison; else return 0; } private Object extractPropertyValue( Object object, String propertyName) { assert object != null; assert propertyName != null && !propertyName.equals(""); Method propAccessor = lookupPropertyAccessor(object.getClass(), propertyName); if (propAccessor == null) throw new IllegalStateException("Unable to find” + “property accessor matching property name \"" + propertyName + "\""); Object value = null; try { value = propAccessor.invoke(object, (Object[])null); } catch (IllegalAccessException e) { throw new IllegalStateException("Exception occurred “ + ”invoking property getter \"" + propAccessor.getName() + "\""); } catch (InvocationTargetException e) { throw new IllegalStateException("Exception occurred “ + ”invoking property getter \"" + propAccessor.getName() + "\""); } return value; } private Method lookupPropertyAccessor( Class clazz, String propertyName) { BeanInfo beanInfo = null; try { beanInfo = Introspector.getBeanInfo(clazz); } catch (IntrospectionException e) { throw new IllegalStateException("Unable to find “ + ”property named \"" + propertyName + "\" on type \"" + clazz.getName() + "\"", e); } for (PropertyDescriptor pd : beanInfo.getPropertyDescriptors()) { if (pd.getName().equalsIgnoreCase(propertyName)) return pd.getReadMethod(); } return null; } } }
清单3 web\css\dataGrid.css
.vivianj{ font: 12px; } .vivianj-header { color: #FFFFFF; background-color: #585858; } .vivianj-footer { color: #0000FF; background-color: #FFFFFF; } .vivianj-even { background-color: #E1E1E1; } .vivianj-odd { background-color: #C0C0C0; }
数据分页显示中的中文问题
使用netui-data:dataGrid标签显示数据时，默认生成导航超链接和其他提示信息都是英文内容，我们需要为它们提供对应的中文内容。NETUI中使用基于资源文件和Local机制的国际化处理策略，我们只需要提供对应的资源文件即可。
netui-data:dataGrid标签使用的资源文件位于org\apache\beehive\netui\databinding\datagrid\runtime\util\ data-grid-default.properties文件中，我们需要在WEB-INF\classes目录下创建org\apache\beehive\netui\databinding\datagrid\runtime\util\目录，然后在该目录下建立data-grid-default_zh_CN.properties文件，在该文件中提供对应的中文信息即可。下面是提供中文内容的data-grid-default_zh_CN.properties文件的例子。
清单4 src\org\apache\beehive\netui\databinding\datagrid\runtime\util\
data-grid-default_zh_CN.properties
datagrid.resource.path=resources/beehive/version1/images datagrid.msg.nodata=\u6ca1\u6709\u5408\u9002\u7684\u5185\ u5bb9\ u7528\ u4e8e\ u663e\ u793a sort.asc.img=/sortdown.gif sort.desc.img=/sortup.gif sort.none.img=/sortable.gif pager.msg.first=\ u7b2c\ u4e00\ u9875 pager.msg.previous=\ u4e0a\ u4e00\ u9875 pager.msg.next=\ u4e0b\ u4e00\ u9875 pager.msg.last=\ u6700\ u540e\ u4e00\ u9875 pager.fmt.banner=\ u7b2c{0}\ u9875 \ u5171{1}\ u9875 filter.sql.none= \ u6ca1\ u6709\ u8fc7\ u6ee4\ u5668 filter.sql.equal= \ u7b49\ u4e8e filter.sql.notequal= \ u4e0d\ u7b49\ u4e8e filter.sql.greaterthan= \ u5927\ u4e8e filter.sql.lessthan= \ u5c0f\ u4e8e filter.sql.greaterthanorequal= \ u5927\ u4e8e\ u7b49\ u4e8e filter.sql.lessthanorequal= \ u5c0f\ u4e8e\ u7b49\ u4e8e filter.sql.isoneof= \ u5c5e\ u4e8e filter.sql.startswith= \ u4ee5\ u5b57\ u7b26\ u5f00\ u59cb filter.sql.contains= \ u5305\ u542b filter.sql.isempty= \ u7a7a\ u503c filter.sql.isnotempty= \ u975e\ u7a7a\ u503c
资源文件中的中文内容必须以UNICODE编码格式提供，否则无法显示，如何实现中文内容到UNICODE编码的转化请参考《应用页面流开发Web应用》章节中关于国际化部分的内容