jsf f ajax 实现局部刷新,JSF生命周期及AJAX局部刷新

(转载http://www.emlog.net/fei/tb.php?sc=91da2&id=41)

看了core JSF里详细描述的JSF的生命周期,基本上可以划分为六个周期.

1:Restore View(恢复视图)

所谓的视图也就是一些基本的GUI组件.也就是常说的HTML控件吧.视图一般来说分为三种实例:新视图,原始视图,后视图三种.所谓的新视图就是你第一次请求所呈现给你的.而原始视图也就是你已经进入了这个页面.只是刷原有页面.而后视图呢也就是你点后退按钮回到的那个页面.(它只负责从恢复内容,不刷新内容.)Restore

View phase recreates the server-side component tree when you

revisit a JSF page.

2;Apply Request Values(应用请求值)

在这阶段主要数据接收.SUN在自己出版的core JSF中是这样说的.The Apply Request Values phase

copies request parameters into component

submitted values.

3:Process Validations(执行验证)

根据接收到的数据进行转换验证.The Process Validations phase first converts those

submitted values and validates the converted value.

4:Update Model Values(更新模型)

开始给控件赋新值.The Update Model Values phase copies (converted and

validated) values to the model, which is typically denoted in JSF

pages with value reference expressions

5:Invoke Application(调用程序)

这个阶段主要进行actionListener 和 action

处理.先调用ActionListener 然后再进行Action 操作.The Invoke Application phase

invokes action listeners and actions, in that order, for command

components.

6:Render Respose(进行响应)

返回一个新的请求视图.the Render Response phase saves state and loads the next

view.从下图你能清楚的知道JSF的六个生命周期是如何的运行的.

在下面的测试中,你需要对faces-config.xml: 进行如下的设置:

net.emlog.fei.PhaseEventListener

在实现生命周期的监听的时候,你需要编写一个生命监听的类.PhaseEventListener他实现了

javax.faces.event.PhaseListener接口.在这个接口中,需要实现这两具方法beforePhase(PhaseEvent

e)和afterPhase(PhaseEvent e).需进行后台的bean则显得简单.

大体的,你可以根据以下几个值来更改生命周期的执行.(1).immediate="true"(2)调用FacesContext.renderResponse()(3):调用FacesContext.responseComplete()这三者是有一定的区别的.

正常运行的情况下,它的生命周期是这样进行的:

开始调用 APPLY_REQUEST_VALUES 2事件.

然后,APPLY_REQUEST_VALUES 2事件响应了

开始调用 PROCESS_VALIDATIONS 3事件.

在getInput方法中得到input值为123

值改变事件发生,开始设置input值为1

在setInput方法中设置input值为1

在setOutput方法中设置output值为1

然后,PROCESS_VALIDATIONS 3事件响应了

如下面的代码片段:(没有使用局部刷新)

id="input" value="#{vcl.input}"

valueChangeListener="#{vcl.changeAction}"

immediate="true" οnchange="submit()">

value="#{vcl.output}">

public void changeAction(ValueChangeEvent vc){

String string = vc.getNewValue().toString();

System.out.println("值改变事件发生,开始设置input值为" + string);

setInput(string);

setOutput(string);

FacesContext fc = FacesContext.getCurrentInstance();

//fc.responseComplete();

//fc.renderResponse();

}

上面的方法中,由于将immediate设为true,所以它会将

开始调用 APPLY_REQUEST_VALUES 2事件.

在getInput方法中得到input值为123

值改变事件发生,开始设置input值为1

在setInput方法中设置input值为1

在setOutput方法中设置output值为1

然后,APPLY_REQUEST_VALUES 2事件响应了

开始调用 PROCESS_VALIDATIONS 3事件.

然后,PROCESS_VALIDATIONS 3事件响应了.

仅仅将immediate设置为true用户不大的.因为最后他还是要走完所有的六个生命周期.我们结合

FacesContext.renderResponse()

和FacesContext.responseComplete()来看看他们有什么区别.

FacesContext.responseComplete()情况:

开始调用 APPLY_REQUEST_VALUES 2事件.

在getInput方法中得到input值为123

值改变事件发生,开始设置input值为1

在setInput方法中设置input值为1

在setOutput方法中设置output值为1

然后,APPLY_REQUEST_VALUES 2事件响应了(后面没了,它甚至不会Render

Response)所以你会看到一个空白的页面.

FacesContext.renderResponse() 情况就不同啦:

开始调用 APPLY_REQUEST_VALUES 2事件.

在getInput方法中得到input值为123

值改变事件发生,开始设置input值为1

在setInput方法中设置input值为1

在setOutput方法中设置output值为1

然后,APPLY_REQUEST_VALUES 2事件响应了

开始调用 RENDER_RESPONSE 6事件.

在getOutput方法中得到output值为1

然后,RENDER_RESPONSE 6事件响应了(相对于responseComplete()他进行了Render

Response操作.)OK.希望说到这你能对所谓的六大生命周期有一个简单的认识.如何我们只是进行一次简单的WEB开发的话,那么,关注3,5两个阶段的实现就可,如果需要自己编写UI,则需要对生命周期有一个清楚的认识.也许,从下面的图你能看得更加的清楚.

当然,我们的重点还是在于局部刷新.AJAX是一个时下比较时兴的技术.局部刷新有很多的好处,在此不在细说.在上面的例子里,我们需要实现在输入框里的值改变后,输入框的值也随着改变.但是我们调用的却是全局刷新.使用submit()事件来实现.接下来我们就来看看如何使用AJAX来实现局部刷新,以及局部刷的一些细节问题.如下代码段:具体的richfaces请参见http://labs.jboss.com/jbossrichfaces/此处不细说配置.

valueChangeListener="#{vcl.changeAction}">

reRender="input,abs"/>

 

value="#{vcl.output}">

OK.运行代码后,我们发现结果是这样的:

开始调用 APPLY_REQUEST_VALUES 2事件.

在getInput方法中得到input值为123

值改变事件发生,开始设置input值为1

在setInput方法中设置input值为1

在setOutput方法中设置output值为1

然后,APPLY_REQUEST_VALUES 2事件响应了

开始调用 RENDER_RESPONSE 6事件.

在getOutput方法中得到output值为1

然后,RENDER_RESPONSE 6事件响应了

在应用值及进行响应阶段我们只是对output进行了响应.虽然在reRender设置了两个响应目标.但实现上如你所现,真正响应的只是output控件的get方法.同样的,在值改变事件前,也只是对input控件进行了get响应.这两个很重要.这也就是说.如果在两个都为input控件的时候,事件就有点复杂.因为set事件

他所取的时input = string

参数string是取决于你显示出来给用户的.正因为如何,当两个事件都进行响应的时候,两个输入控件的值是不一样的.在同为input的时候,我们需要加上在开发文件中的定义是这样的:The

component defines an

area that is decoded on the server after Ajax

submission.当然.在有两个input控件的情况下,你需要按照以下形式编写.

id="input" value="#{vcl.input}"

valueChangeListener="#{vcl.changeAction}">

event="onchange" limitToList="true"

reRender="input,abs"/>

id="abs"

value="#{vcl.output}">

这样我们就能保证在进行局部刷新提交的时候,不会将后一个input的值也提交上去,从而实现同时改变的功能.希望说到这你能明白些什么.生命周期的运行是这样的:在有事件响应的时候,只会有输入控件的get方法.在返回响应的时候,只会调用输出控件的set方法.嗯,就是这样的.

OK.基本上完毕了.还记得开始时说的那个恢复视图里的后视图吗?这个东西他是不刷新的.如果我在后面修改了怎么办呢,返回来的结果并不会在后视图里显示出来.有两种方法,一种是页面不缓存...另一种则是载入页面的时候进行刷新.我选择了第二种.第一种有点不有好...不过对于一些很重要的权限控制还是用第一种吧.第二种的处理方法是在页面的load事件里加上javascript的刷新页面代码.经测试,下面这个代码是可行的.

function

refresh(){ if(self.name !=

"index.faces"){

self.name

= "index.faces";

self.location.reload();

}

else{

self.name

= "";

}

}

但是如何在你的第一个页面里也有第二个页面的功能.则第二个页面的功能在第一个页面功能被使用后不再有效.这个是由jsf的生命周期决定的.没有找到什么好方法来解决.下图为JSF与AJAX在一起的处理流程.