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";
var _age = "24";
processMethod(_name,_age);
}
function changeFinish(data){
alert("finish");
alert(data);
}</script>
<body>
<h:form>
<a4j:jsFunction oncomplete="changeFinish(data);" name="processMethod"
data="#{jsFunctionBean.name},#{jsFunctionBean.age}"
actionListener="#{jsFunctionBean.ActionListenerTest}"
action="#{jsFunctionBean.valueChange}">
<a4j:actionparam name="param1" value="what"
assignTo="#{jsFunctionBean.name}" />
<a4j:actionparam name="param2" value="what"
assignTo="#{jsFunctionBean.age}" />
</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) 等记录
分享到:
相关推荐
3. **请求和响应处理**:A4J使用`<a4j:jsFunction>`来定义JavaScript函数,这些函数可以触发AJAX请求,并处理服务器返回的响应。 4. **区域更新**:A4J提供了`<a4j:region>`标签,可以定义页面上的特定区域,当AJAX...
- **注意事项**:使用`a4j:region`时,如果没有设置`status`属性,则无法获取到该区域的状态。 ### a4j:status - **状态指示器**:用于显示AJAX请求的开始和结束状态。 - **配置项**: - `startText`:开始时显示...
`<a4j:jsFunction>`允许定义一个JavaScript函数,这个函数可以直接与服务器端进行通信,触发AJAX请求。开发者可以指定此函数的参数,以及调用后执行的服务器端方法。这提供了在客户端执行服务器操作的能力。 3. **...
- **Basic usage**:介绍如何使用 `<a4j:jsFunction>` 嵌入JavaScript代码。 - **Parameters and JavaScript**:说明如何通过参数和JavaScript来配置 `<a4j:jsFunction>`。 - **Referencedata**:给出具体示例和参考...
`<a4j:jsFunction>`定义了一个JavaScript函数`drawChart`,该函数调用后端的Java方法`#{chartBean.drawChart}`并传递数据。在后端,`chartBean`是一个 Managed Bean,负责处理数据并生成Highcharts配置对象。配置...
##### 3.6 <a4j:jsFunction> - **基本用法**: 定义客户端 JavaScript 函数,并通过 AJAX 调用。 - **参数与 JavaScript**: 如何定义函数参数以及如何调用 JavaScript 函数。 - **引用数据**: 如何引用和传递数据到...
- **<a4j:jsFunction>** - **Basic usage**:JavaScript函数的基础使用方法。 - **Parameters and JavaScript**:参数传递和JavaScript代码的结合。 - **Referencedata**:与组件相关的数据引用信息。 - **<a4j:...
#### `<a4j:jsFunction>` - **功能概述**:解释该组件的作用。 - **示例用法**:给出具体的应用场景。 通过以上内容,我们不仅深入了解了JSF框架及RichFaces组件库的技术细节,还掌握了其实际应用场景和技术要点。...
##### 6.3 `<a4j:jsFunction>` 用于定义JavaScript函数的组件,可以实现复杂的行为逻辑。 ##### 6.4 `<a4j:status>` 状态指示组件,可以在执行长时间操作时显示进度或状态信息。 通过以上详细介绍,我们可以看到...
**定义**: DOM4J是一个轻量级的Java库,用于处理XML文档,类似于DOM,但更易于使用且性能更高。 **应用场景**: 当需要简单、快速地处理XML文档时,DOM4J是一个很好的选择。 **核心概念**: - **Document**: 表示...