随笔-9  评论-168  文章-266  trackbacks-0

Ajax4jsf所提供的灵活度是非常高。例如a4j:support等。通过实战,这里想重点介绍一下a4j:jsFuction和a4j:actionparam两个标签.

a4j:jsFuction的有趣在于,它提供了一个客户端request前,和request后的js功能的截取添加。为了理解这个概念。首先,把a4j:jsFuction看作一个js fuction.名字由name属性来定义。如果我们给这个js fuction添加参数的话,可以在a4j:jsFuction里面加上 a4j:actionparam.作为一个函数参数,这里我们可以用el绑定server端的一个property。

我们也可以定义它的返回值。这里用data属性。也有EL绑定server端的property。这样一个完整的js功能函数就完成了。从这里看到,函数的逻辑完全是server端代理的。展开来讲就是,server端通过a4j:actionparam设定了一个property A,并根据这个property A的设定,返回另一个propety B。而这个property B我们是通过data属性来得到的。(如果在server端两个property的关系是通过一个logic 函数来完成的话,我们可以直接用actionExpression属性来调用这个函数。那么这里,在a4j:jsFuction函数body的定义就是通过actionExpression.)

最后,调用a4j:jsFuction定义的function。如同一般的js fuction,我们可以在任意dhtml event中调用,譬如在一个jsf tag中添加onClick来调用。

依此,可以看到a4j:jsFuction主要是加了个js的功能外壳。(必须注意的是,它必须在一个form里。象这样必须在form中的ajax4jsf tag还有很多,譬如a4j:poll)。之所以说它灵活是因为,我们可以通过oncomplete这个属性,来使用从server端来的返回值作为任意js函数的参数,并调用这个js函数。如果页面有需要update的控件的话,还可以用reRender属性来重新render一下各别需要更新的页面控件。

可见,a4j:jsFunction如同一个外部js库和内部java bean的熔接点。可以非常方便的使用例如google,yahoo提供的js服务。

下面为一个Demo:

<script language="javascript">
function changeBegin(){
   alert("good");
   var _name = "good";
   processMethod(_name);
}
function changeFinish(data){
   alert("finish");
   alert(data);
}
</script>

<body>
<h:form>
   <a4j:jsFunction oncomplete="changeFinish(data);" name="processMethod"
    data="#{valueChangeTest.name},#{valueChangeTest.age}"
    actionListener="#{valueChangeTest.ActionListenerTest}"
    action="#{valueChangeTest.valueChange}">

    <a4j:actionparam name="param1" value="what"
     assignTo="#{valueChangeTest.name}" />
   </a4j:jsFunction>

<a4j:commandButton type="submit" value="good" onclick="changeBegin();" />
</h:form>
</body>

Backing bean:

public class ValueChangeTest {

private String name = "张三";
private String age = "23";
private Log log = LogFactory.getLog(ValueChangeTest.class);

public String getName() {
   return name;
}

public void setName(String name) {
   this.name = name;
}

public String getAge() {
   return age;
}

public void setAge(String age) {
   this.age = age;
}

public void valueChange() {
   setName("李四");
   log.info("value change invoke!");
}

public void ActionListenerTest(ActionEvent e){
   log.info("action event invoke!");
}

public void valueAction(ActionEvent e) {
   log.info("age: "+ getAge());
   log.info("name: "+ getName());
}
}

result: 会以次弹出good\李四\finish\(李四,23) 等记录

这个tag还有其他的一些有用属性,那都已经是锦上添花的事了。

posted on 2008-05-28 16:27 紫蝶∏飛揚↗ 阅读(5404) 评论(4)  编辑  收藏 所属分类: JSF

评论:
# re: [转]a4j:jsFunction的使用 2013-04-26 11:07 | MM
菜鸟,非常感谢  回复  更多评论
  
# re: [转]a4j:jsFunction的使用[未登录] 2013-04-26 14:12 | sam
恩 谢谢 虽然没有实践,但看明白了  回复  更多评论
  
# re: [转]a4j:jsFunction的使用[未登录] 2014-06-16 14:29 | cjy
@sam
李四怎么打印出来的  回复  更多评论
  
# re: [转]a4j:jsFunction的使用 2014-08-18 20:27 | 啥都
到时候啥的  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: