JSP和JSF双剑合并 共同打造完美Web应用

js|web

Java在最近几年逐渐升温,随着Java SE 5和Java SE 6的推出,Java的未来更显得无比辉煌。

但以Java为基础的JSP在Java SE 5推出之前却一直抬不起头来,这最重要的原因就是JSP虽然功能十分强大,但最大的优点也是它的最大缺点,功能强大就意味着复杂,尤其是设计前端界面的可视化工具不多,也不够强大。因此,设计JSP页面就变得十分复杂和繁琐。不过,在Java SE 5推出的同时,Sun为了简化JSP的开发难度,推出了新的JavaServer Faces(简称JSF)规范。从而使JSP走上了康庄大道。

一、什么是JSF

JSF和JSP是一对新的搭档。JSP是用于后台的逻辑处理的技术,而JSF恰恰相反,是使开发人员能够快速的开发基于 Java 的 Web 应用程序的技术,是一种表现层技术。目前,JSF1.2已经正式作为一个标准加入了Java EE 5中。

作为一种高度组件化的技术,开发人员可以在一些开发工具的支持下,实现拖拉式编辑操作,用户只需要简单的将 JSF 组件拖到页面上,就可以很容易的进行 Web 开发了。这是其作为一种组件化的技术所具有的最大好处,我们能用的组件不光是一些比较简单的输入框之类,还有更多复杂的组件可以使用的,比如 DataTable 这样的表格组件, Tree 这样的树形组件等等。

作为一种标准的技术,JSF还得到了相当多工具提供商的支持。同时我们也会有很多很好的免费开发工具可以使用,前不久 Sun Java Studio Creator 2 和 Oracle JDeveloper 10g 作为免费的支持 JSF 的开发工具发布,给 JSF 带来了不小的生气。另外我们也有一些很优秀的商业开发工具可共选择,BEA Workshop (原 M7 NitroX),Exadel,MyEclipse 这样的基于 Eclipse 的插件开发工具,为现在广大的 Eclipse 用户带来了不小的便利,IBM 的 Rational Application Developer 和 Borland 的 JBuilder 也是很不错的支持 JSF 可视化开发的商业开发工具。

JSF和传统的Web技术有着本质上的差别,在传统的Web技术需要用户自己对浏览器请求进行捕捉,保存客户端状态,并且手工控制着页面的转向,等等。而JSF的出现,无疑给我们带来了巨大的便利,JSF 提供了事件驱动的页面导航模型,该模型使应用程序开发人员能够设计应用程序的页面流。与 Struts 的方式向类似的是,所有的页面流信息都定义在 JSF 配置 XML 文件 (faces-config.xml) 中,而非硬编码在应用程序中。这很大程度简化了开发人员开发难度,简化了应用程序的开发。

同时JSF也是一种遵循模型-视图-控制器 (MVC) 模式的框架。实现了视图代码(View)与应用逻辑(Model)的完全分离,使得使用 JSF 技术的应用程序能够很好的实现页面与代码的分离。所有对 JSF 页面的请求都会通过一个前端控制器 (FacesServlet) 处理,系统自动处理用户的请求,并将结果返回给用户。这和传统的 MVC 框架并没有太大的区别。

在JSF中不仅使用了 POJO 技术,而且还使用了类似 Spring 的控制反转(IoC) (或称为依赖注入-DI) 技术,在 JSF 的 Backing Bean 中,我们可以把视图所需要的数据和操作放进一个 Backing Bean 中。同时得益于 JSF 使用的 DI 技术,我们可以在配置文件中初始化 Managed Bean,同时我们也可以通过这样的技术很方便的和使用类似技术的 Spring 进行整合。

二、如何在JSP中使用JSF

JSF只有通过和JSP相结合,才能充分发挥它的功效。JSF是通过标签库和JSP进行集成的。标签库就相当于ASP.NET的服务端组件。JSF提供了非常丰富的标签库,通过这些标签库,可以生成各种客户端模型,如HTML、WML、XML以及JavaScript等。

通过这些标签,你可以很容易建立大规模的客户端模型,并由这些标签自动处理客户端请求。

接下来让我们来看一个如何使JSF和JSP在一起工作的例子。在JSF中有两个库。第一个叫做内核库,在这个库中包含了各种主要的标签,如配置组件、管理事件、验证输入信息等。第二个库的主要功能是将HTML和JSF的各种标签相对应。每一个JSF标签都会对应一个HTML组件。如UIInput标签对应了HTML中的文本框或密码框。

在JSF标签中文本输入框叫做inputText,而密码输入库叫inputSecret。下面是一个简单的JSF和JSP结合的用户接口程序。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><html><head><meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=GB2312"><title>第一个JSF程序</title></head><body> <f:view> <h:form id="simpleForm"> <h:outputText id="favoriteLabel" value="请输入一个数字:"/> <h:inputText id="favoriteValue" value="#{simple.longValue}">  <f:validateLongrange maximum="30" minimum="0"/> </h:inputText> <p/> <h:commandButton id="submit" value="提交" action="#{simple.simpleActionMethod}"/> </h:form> </f:view></body></html>

在上面的代码中,我们可以了解到JSF是如何同JSP集成的。我们首先可以看到一个内核标签:view。然后是几个JSF组件。如form、outputText、inputText以及commandButton。这几个组件被放到form中从而开成了form中的一部分。在程序的最开始,必须使用import导入两个标签库。代码如下。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

上面2行代码声明了JSP中要使用哪一个JSF标签库。内核库使用前缀(prefix)f声明,而HTML库使用前缀(prefix)h声明。这两个前缀并不是必须要使用,而只是一个建议。在程序中,内核库必须要使用,因为view在所有的JSF页中必须使用。而HTML标签在运行时将JSF标签转化为HTML组件,这个h前缀并不是必须的,而是JSF规范推荐使用的,这样,我们使我们的JSF程序更易读。

在声明后是几行标准的HTML语句,本文不再详述。从<f:view>开始,是一段JSF语句。这段代码如下所示:

<f:view><h:form id="simpleForm"><h:outputText id="favoriteLabel" value="请输入一个数字:"/><h:inputText id="favoriteValue" value="#{simple.longValue}"><f:validateLongrange maximum="30" minimum="0"/></h:inputText><p/><h:commandButton id="submit" value="提交"action="#{simple.simpleActionMethod}"/></h:form></f:view>

</f:view>标签预示着JSF的开始,而它的下一个标签form将建立一个HTML Form。而outputText标签相当于HTML中的label组件。inputText标签相当于HTML中的textField组件。而commandButton标签相当于HTML中的submit按钮。

三、JSP如何响应JSF的请求

从上面的例子我们已经知道如何在JSP中使用JSF了,在这一部分让我们来看看在JSF是如何处理请求的。

首先让我们来看一个例子,这个例子是将华氏度转换为摄氏度。当用户点击提交按钮时程序将进行转换。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><html><head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=GB2312"><title>温度转换程序</title></head><body> <f:view> <h:form> <div>  <h:outputText id="fahrenheitLabel" value="请输入华氏温度:"/>  <span>   <h:inputText id="temperature" value="#{tc.fahrenheitTemp}">   <f:validateDoublerange minimum="-100.0" maximum="100.0"/>   <f:valuechangeListener type="tempconv.page.TCChangedListener"/>  </h:inputText>  </span> </div> <div>  <h:outputText id="celsiusLabel" value="摄氏温度:"/>  <span>   <h:outputText id="celsiusValue" value="#{tc.celsiusTemp}">   <f:convertNumber maxFractionDigits="3" type="number"/>  </h:outputText>  </span> </div> <div>  <h:commandButton value="转换" action="#{tc.convert}">  </h:commandButton> </div> </h:form> </f:view></body></html>

在程序的前两行是导入JSF核心库和HTML库,这个在前面已经讨论过,在这里不再详述。

下面让我们来看看JSF标签是如何同后端进行交互的。由于我们是在JSP中使用JSF,因此,这个和正常的JSP没有什么区别;JSP实际上就是Servlet,在JSP第一次运行时由JSP编译器将.JSP文件编译成Servlet后再由Servlet调用,然后由Servlet来接收客户端传过来的数据流。但和一般的JSP程序不同的是,JSF标签是由JSF API负责调用的(这样可以做到逻辑层和表现层分离),除此之外,它们和一般的JSP标签没有任何区别。

当UIComponent标签收到doStartTag方法时,JSF将使用这些属性来设置标签的值。如本例中的inputText标签将按它的属性值来设置。下面是JSF的代码片段。

<h:inputText id="temperature" value="#{tc.fahrenheitTemp}">

 <f:validateDoublerange minimum="-100.0" maximum="100.0"/>

 <f:valuechangeListener type="tempconv.page.TCChangedListener"/>

</h:inputText>

inputText标签根据相应的值设置了id和value的属性。在JSF中是通过setAttribute(String name, Object value)设置每一个属性值的。但我们需要注意的是JSF标签可以指定相应的默认值。这有些类似java中的系统属性,如果你给了一个属性名子,那系统将返回这个属性的值,如果指定它的默认值,并且这个属性不存在的话,将返回这个默认值。

接下来让我们来看看上面程序的最重要的部分,也就是UIInput组件的事件处理。

<f:valuechangeListener type="tempconv.page.TCChangedListener"/>

在JSF中事件处理是由valuechangeListener标签完成的。这个标签所表示的事件在文本框的值发生变化时引发事件。但有意思的是这个事件并不马上提交,而是要等到用户点击"提交"按钮后这个事件连同相应的数据才提交给后端。因此,这个事件请求也叫做预提交。最后,让我们看看UICommand的代码实现。

<div>

 <h:commandButton value="转换" action="#{tc.convert}">

 </h:commandButton>

</div>

上面的代码将convert()方法和UICommand连接了起来,也就是说,点击"提交"按钮后,将执行convert()方法。在遇到view标签后,JSF程序结果,JSFAPI最后调用doEnd方法来结束JSF程序。JSF引擎在解析这段程序后,将相应的JSF标签转换为HTML组件。

最后,让我们来看看JSP是如何响应JSF事件的。下面是一段响应JSF事件的Java代码。

public class TCChangedListener implements ValueChangeListener { public TCChangedListener()  {  super(); } // 事件处理 public void processValueChange(ValueChangeEvent event)throws AbortProcessingException  {   UIComponent comp = event.getComponent();  Object value = event.getNewValue();  if (null != value)   {   float curVal = ((Number) value).floatValue();   Map values = comp.getAttributes();   if (curVal < 0)    {    values.put("styleClass", "red");   }    else    {    values.put("styleClass", "black");   }  }}

要想响应JSF事件,必须要实现JSF库中的ValueChangeListener接口。上面的程序要注意的是最后根据输入的值来设置相应的颜色。这些值并不依赖JSP。当然,你也可以将它们设置成null,而由JSP 标签来设置它们的颜色。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jsp
, 标签
, 组件
, jsf
, spring mvc +h
, value
一个
jsf jsp、jsf与jsp的区别、jsf 映射 jsp、jsf和jsp、jsf jsp include,以便于您获取更多的相关知识。

时间: 2024-10-02 21:07:27

JSP和JSF双剑合并 共同打造完美Web应用的相关文章

JSP和JSF合并 打造完美Web层应用

Java在最近几年逐渐升温,随着Java SE 5和Java SE 6的推出,Java的未来更显得无比辉煌.但以Java为基础的JSP在Java SE 5推出之前却一直抬不起头来,这最重要的原因就是JSP虽然功能十分强大,但最大的优点也是它的最大缺点,功能强大就意味着复杂,尤其是设计前端界面的可视化工具不多,也不够强大.因此,设计JSP页面就变得十分复杂和繁琐... Java在最近几年逐渐升温,随着Java SE 5和Java SE 6的推出,Java的未来更显得无比辉煌.但以Java为基础的J

JSP和JSF合并打造完美Web应用

Java在最近几年逐渐升温,随着Java SE 5和Java SE 6的推出,Java的未来更显得无比辉煌.但以Java为基础的JSP在Java SE 5推出之前却一直抬不起头来,这最重要的原因就是JSP虽然功能十分强大,但最大的优点也是它的最大缺点,功能强大就意味着复杂,尤其是设计前端界面的可视化工具不多,也不够强大.因此,设计JSP页面就变得十分复杂和繁琐.不过,在Java SE 5推出的同时,Sun为了简化JSP的开发难度,推出了新的JavaServer Faces(简称JSF)规范.从而

Photoshop打造完美长腿名模 如何四步骤P出大长腿

  Photoshop打造完美长腿名模  如何四步骤P出大长腿         这次PS教程就是教大家如何在四步之内将腿部修长,变成长腿美人.好吧,先看看下图这位正妹虽然身材不错但是比例上还可以更完美,若是学会腿拉长这招就可以变身长腿名模啦. 图01 双击图层解锁.因为下面的版面位置不够我拉腿,所以使用裁切工具,将版面向下延伸(拉超出版面),至于延伸多少看你想把腿拉多长. 图02 用矩形选取工具,圈选腿部范围. 图03 选单选择(编辑.内容感知比率),将变形区域往下拉到满版.然后ENTER确定,

如何为平板打造完美的网站页面

据调研公司Gartner预测,平板的销量每周都在增加,到2016年,全世界平板的销量将达到6.65亿台.随着以苹果iPad为代表的平板电脑风暴越演越烈,相信移动设备取代个人电脑的霸主地位,成为接入网络的首选设备只是时间问题. Adobe最近发布的数字营销报告显示,使用平板电脑浏览网站的用户比普通PC访客的每笔交易金额高出20%.这些数据意味着对于电子商务企业来说,设计对平板电脑友好的网站非常重要. iPad的横空出世让原本死寂沉沉的平板市场重新焕发生机,可整整两年时间过去了,很多网站还是没有专门

打造完美网站布局设计

Claudio Guglieri 在纽约广告公司 B-Reel 任职总监,他撰写了本网站设计培训指南,旨在帮助您了解设计网站布局的全过程. 开始讲述设计网站布局的主题之前,我想先分享自己多年从事设计工作中看到的一些常见错误,尤其是"网站设计培训"中所述的实习生和新手们的通病. 本文罗列了打造完美网站布局的步骤,旨在涵盖开始新项目前以及项目设计过程中的各项应知应会,适合数字广告公司内就职的所有网站设计师新人阅读. 以下原则不仅包含各种设计细节,还提供了常规工作流程,从而帮助您出色地完成工

网站布局的全过程:20步打造完美网站布局设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 Claudio Guglieri 在纽约广告公司 B-Reel 任职总监,他撰写了本网站设计培训指南,旨在帮助您了解设计网站布局的全过程. 开始讲述设计网站布局的主题之前,我想先分享自己多年从事设计工作中看到的一些常见错误,尤其是"网站设计培训"中所述的实习生和新手们的通病. 本文罗列了打造完美网站布局的步骤,旨在涵盖开始新项目前以及项目设计过程中的各项应知应会,适合数字广告公司内就职的所有网站设计师新人阅读. 以下原则不仅包含各种设计细

关于jsp订单状态的合并

问题描述 关于jsp订单状态的合并 怎么合并这两条记录 解决方案 订单合并是不是 要加入到新的表中 对应一对多?

如何打造完美的网站导航系统

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 清晰的网站导航,是网站设计中一个重要的组成部分,可以更好的降低网站跳出率,使访问网站的用户更完整的了解网站结构.那么,如何打造完美的网站导航系统,本文从网站优化的角度,描述网站导航设计的五个要点. 第一.导航使用文字编辑 分析:导航栏使用文字编辑,一个最主要的目的就是可以让搜索引擎蜘蛛更容易爬行,使其更清楚的明白网站的结构,及当前所处的位置.

谷歌内部研究揭秘:如何打造完美团队

 3月1日,谷歌(微博)由数百个团队组成,有的团队一飞冲天,有的团队却始终磕磕绊绊.纽约时报调查记者.普利策奖获得者查尔斯·杜希格(Charles Duhigg)刊文揭秘了谷歌的亚里士多德项目,解释打造完美成功团队的秘诀.全文摘要如下: 像大多数25岁年轻人一样,朱莉亚·罗佐夫斯基(Julia Rozovsky)不知道自己一生想要做什么.她曾在咨询公司工作过,但她觉得不太合适.此后,她成为哈佛大学的研究员,尽管工作很有趣,但却令人觉得孤独.或许,大公司或快速成长的初创企业更适合她.罗佐夫斯基唯一