JSF表格组件的制作思路(含源代码)

开发 后端
本博文的作者用JSF做了一个类似于RichFaces的Table控件,并讲述了自己制作这个JSF表格组件的思路和感想。

周二,我兴匆匆去老刘那演示RichFaces的Table控件,可老刘说了,RichFaces太复杂,不适合我们,且还有不少的bug(这些我无法考证:)。于是他拿出一个使用了一堆JSP+Servelet+Bean写的一个表格,跟说我,我很怀疑JSF能做出这个东西来,你使用纯JSF做一个一样的表格组件我就相信JSF能够用在开发平台(注:我是此Eclipse开发平台的兼职架构师)上。我心里琢磨,既然你是用JSP/Servlet搞出来的,而JSF是基于Servlet的技术,怎么可能实现不了呢? 三天做出来!我一直相信,技术在于使用技术的人,而不是技术本身。

下载JSF表格组件

先看图吧:

JSF表格组件 

再看看对应的JSF标记

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. < html xmlns="http://www.w3.org/1999/xhtml" 
  3.     xmlns:h="http://java.sun.com/jsf/html" 
  4.     xmlns:f="http://java.sun.com/jsf/core" 
  5.     xmlns:ui="http://java.sun.com/jsf/facelets" 
  6.     xmlns:cby="http:/www.lifesting.com/jsf"> 
  7.  
  8. < ui:composition template="/tpl.xhtml"> 
  9.  
  10.     < ui:define name="pageTitle">表格展示< /ui:define> 
  11.     < ui:define name="pageHeader">国家< /ui:define> 
  12.     < ui:define name="body"> 
  13.  
  14.     < h:form> 
  15.             < h:panelGrid columns="1"> 
  16.                 < h:message for="mytable" /> 
  17.             < /h:panelGrid> 
  18.             < cby:rns text="页面设置" tableFor="mytable" /> 
  19.             < cby:filter text="过滤策略" tableFor="mytable" /> 
  20.             < cby:delete tableFor="mytable" /> 
  21.             < cby:table id="mytable" var="rec" checkable="true" idField="code" 
  22.                 bean="Country"> 
  23.                 < cby:column field="name" sortable="true" filterable="true" 
  24.                     width="200" value="名称"> 
  25.                     < h:outputText value="#{rec.wrapped.name}">< /h:outputText> 
  26.                 < /cby:column> 
  27.                 < cby:column field="region" sortable="true" filterable="false" 
  28.                     width="100" value="区域"> 
  29.                     < h:outputText value="#{rec.wrapped.region}">< /h:outputText> 
  30.                 < /cby:column> 
  31.                 < cby:column field="surfaceArea" sortable="false" filterable="true" 
  32.                     width="150" value="表面积"> 
  33.                     < h:outputText value="#{rec.wrapped.surfaceArea}">< /h:outputText> 
  34.                 < /cby:column> 
  35.                 < cby:column field="population" sortable="true" filterable="true" 
  36.                     width="100" value="人口"> 
  37.                     < h:outputText value="#{rec.wrapped.population}">< /h:outputText> 
  38.                 < /cby:column> 
  39.                 < cby:ds /> 
  40.             < /cby:table> 
  41.         < /h:form> 
  42.     < /ui:define> 
  43. < /ui:composition> 
  44.  
  45. < /html> 

因为开发平台最终是以BO为核心,所以此表格组件是通过设置 bean,然后再通过Hibernate来获取数据的。

这个JSF表格组件除采用JSF +Facelet之外,没有其它页面技术,代码简洁,无抽象,且里面还有注释,初学者可以参考一下。

JSF表格组件主要功能:
1 设置column的filterable属性(true/false)来过滤数据(目前实现为左匹配,比如输入Sa,就是Sa开头的)
2 分页导航
3 设置column的sortable属性(true/false)用来对某列进行 正/反 排序
4 改变页记录大小,默认为20条/页
5 设置table的checkable属性为true,表格将会多一列用来选择。
6 可以批量删除被checked的记录。

这个组件只考虑了功能,并没有考虑到美观,如果你觉得可以用,改改它的html属性设置。

安装:

1 附件是一个Maven项目,必须安装有maven。
2 安装MySQL数据库,启动MySQL,运行
create database world
3 找到项目下面的world.sql,假设其路径为/a/b/c/world.sql,使用MySQL的source命令
use world
source /a/b/c/world.sql
4修改项目下的hibernate.cfg.xml中MySQL数据库用户名/密码。
5 执行mvn jetty:run 启动
6 浏览器输入 http://localhost:8080/jsftry/ 就可以看到效果了

关于调试:
1 下载一个Eclipse JEE版本
2  在项目目录下执行 mvn eclipse:clean eclipse:eclipse -DdownloadSources=true -Dwtpversion=1.5
3 在eclipse workspace中import此项目

虽然工作中不用Java很久了,但拿起来玩玩还是觉得Java真的很有生产力。JSF,Hibernate,Maven,Eclipse一个比一个牛比。

【编辑推荐】

  1. JSP换行问题解决办法一览
  2. JSP开发框架JSF对比基于Servlet的Tapestry
  3. JSP像乌云般挡住了JSF的光芒
  4. JSF技术详细介绍
  5. 学习JSP的基础概念之九个隐含对象
责任编辑:yangsai 来源: BlogJava
相关推荐

2009-06-25 13:03:48

JSF的UI组件

2009-06-29 13:22:19

JSF技术JSF组件

2009-06-24 13:06:41

JSF组件Facelets

2009-06-22 13:27:01

JSF组件模型

2009-06-24 14:59:00

图形bean组件JSF图形组件

2009-06-22 13:41:58

FaceletsJSF组件

2014-06-19 13:47:55

PongoJavaScript

2009-06-24 17:05:10

2009-06-11 11:22:40

JSFJSPJSF的UI组件

2009-06-24 16:30:21

JSF组件模型

2009-06-24 15:13:36

自定义JSF组件

2023-12-08 09:15:53

Java单表树形结构Tree

2009-06-25 14:53:35

自定义UI组件JSF框架

2010-06-09 09:15:58

JSF 2Ajax组件

2023-11-23 08:07:31

Css​Web​

2009-06-25 11:11:25

控制JSF切入点

2009-04-03 08:28:39

2009-06-22 15:07:45

原则和技巧JSF自定义复合组件

2022-03-09 12:45:15

时间线

2010-09-10 13:24:21

DIV表格
点赞
收藏

51CTO技术栈公众号