省时又省力 分页无刷新切换
技术与开发
我在新浪财经网页上看到有两个并列的新闻列表，我在它们之间切换时没有进行刷新就直接显示了，这个功能非常实用，不用为更新网页中的部分内容而刷新页面，可是我不知道它是怎么设计的。我想在自己的网站上在切换不同分页时（例如切换第二页和第三页）也能实时显示，这又该怎么办呢？
使用这个功能的网站不是很多，看起来很难设计，其实利用JSF的分页组件就可以快速实现这个效果。首先我们要在现成网页中，利用分页组件导入文字或图片内容，然后用CSS样式表美化一下这一部分，最后为了让现有的程序支持我们的分页组件，还需要引入一个JSF的配置文件，因为我们的组件都是基于JSF技术开发的，所以要能识别并调用它还需要在配置文件中进行设置。
完成相关步骤之后，我们还可以把相关代码打成JAR包，如果想实现本例的效果，只需要引入本例生成的JAR包即可（下载地址：http://www.cpcw.com/bzsoft）。分页组件的功能是方便用户实现分页功能，只需要设置好分页的数据源，设定页面要显示的条数即可实现分页功能。它可以应用在所有支持Java的程序之中。
小知识：JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准Java框架。它提供了一种以组件为中心来开发 Java Web 用户界面的方法，从而简化了开发步骤。
第一步：在现成页面中导入内容
打开开发工具MyEclipse，执行菜单“New”下的“Web Project”命令，导入要实现无刷新效果的Web项目。打开要设置效果的具体页面，然后在页面中添加使用分页组件的相关代码（代码下载地址：http://www.cpcw.com/bzsoft）。
第二步：美化分页数据
分页的数据将会采用IE默认的设置显示在页面上。然而在开发中，总是需要去限定字体的大小、颜色、背景颜色等，在HTML中进行这些修饰总是由CSS去完成。在JSF中也是如此，所以对于分页数据需要引入CSS样式表。鼠标右键单击项目中的WebRoot节点，新建一个Styles.css文件，在其中输入如下代码：
.titleLiNews_bg {
width: 511px;
heigh: 266px;
background-image: url(images/bg.png);
}
.titleLiNews_txt {
font-size: 12px;
line-height: 21px;
color: #FFFFFF;
text-decoration: none;
background-repeat: no-repeat;
margin: 0px 10px 0px 20px;
padding: 0px;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
list-style-position: inside;
list-style-type: disc;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #0051A2;
}
＜h:dataTable id="timezones" value="#{bb.data}" var="row" rows="3"
styleClass="titleLiNews_bg"＞
＜ul class="titleLiNews_txt"＞
＜h:column＞
＜li class="titleLiNews_txt"＞
＜h:outputText value="#{row}" styleClass="titleLiNews_txt"/＞
＜/li＞
＜/h:column＞
＜/ul＞
＜/h:dataTable＞
第三步：设置配置文件
为了让程序知道如何调用分页的导航信息，我们还要设置配置文件。将工程目录展开，打开工程中WebRoot节点下的WEB-INF节点，用鼠标双击Faces-config.xml，然后将其中的代码替换为下列内容：
＜faces-config＞
＜render-kit＞
＜renderer＞
＜component-family＞javax.faces.Output＜/component-family＞
＜renderer-type＞com.corejsf.Pager＜/renderer-type＞
＜renderer-class＞com.corejsf.PagerRenderer
＜/renderer＞
＜/render-kit＞
＜managed-bean＞
＜managed-bean-name＞bb＜/managed-bean-name＞
＜managed-bean-class＞com.corejsf.BackingBean＜/managed-bean-class＞
＜managed-bean-scope＞session＜/managed-bean-scope＞
＜/managed-bean＞
＜/faces-config＞
当项目准备完毕之后，编译并运行此程序后，在地址栏中输入http://localhost:8080/jsfdemo/index.faces,就能看到效果图了。
总结
通过本例的学习，读者朋友可以知道，利用JSF分页组件进行编程能够提高代码的重用率和优化率，提高编码的质量。除此之外，Ajax也能实现这个功能，但是相对而言要繁琐一点，有兴趣的朋友可以试试。