JavaEE 7教程
JSF入门实战 (2)
Ajax
JSF提供给网页添加AJAX功能支持。
有两种方法支持：
- 编程使用JavaScript资源
- 声明使用F：AJAX
第一种方式需要使用JSF资源库包中的jsf.js，在页面通过如下激活使用：
<h:body>
<!-- . . . -->
<h:outputScript
name="jsf.js" library="javax.faces" target="body"/>
<!-- . . . -->
</h:body>
对服务器的异步请求：
<h:form prependId="false">
<h:inputText value="#{user.name}" id="name"/>
<h:inputText value="#{user.password}" id="password"/>
<h:commandButton value="Login" type="button" actionListener="#{user.login}"
onclick="jsf.ajax.request(this, event, {execute:
'name password', render: 'status'}); return false;"/>
<h:outputText value="#{user.status}" id="status"/>
</h:form>
命令按钮有一个ActionListener定义接受异步请求的ｕｓｅｒ这个类的login方法，当单击该按钮时jsf.ajax.request发送异步请求到服务器的User类的login方法。请求分两个部分：execute和render部分，execute是将name和password值通过其对应的组件User的setter方法注入，render是定义异步请求结束后，需要输出的显示部分。
相应的组件user bean如下：
@Named
@SessionScoped
public class User implements Serializable {
private String name;
private String password;
private String status;
. . //ActionListener监听方法. 异步请求调用的方法
public void login(ActionEvent evt) {
if (name.equals(password))
status = "Login successful";
else
status = "Login failed";
}
}
使用AJAX更新的案例：
<h:form prependId="false">
<h:inputText value="#{user.name}" id="name"/>
<h:inputText value="#{user.password}" id="password"/>
<h:commandButton value="Login" type="button" actionListener="#{user.login}">
<f:ajax execute="name password" render="status"/>
</h:commandButton>
<h:outputText value="#{user.status}"
id="status"/>
</h:form>
输入name password，输出更新status.
可以设置延迟，如果在延迟时间内有多个请求发送，只有最近的请求被发送，其他丢弃。
<f:ajax delay="200" ...>
. . .
</f:ajax>
另外一种写法：
<f:ajax listener="#{user.checkFormat}">
<h:inputText value="#{user.name}" id="name"/>
<h:inputText value="#{user.password}" id="password"/>
</f:ajax>
这是异步调用bean的checkFormat方法:
public void checkFormat(AjaxBehaviorEvent evt) {
//. . .
}
验证数据
如下一个页面：
<h:form>
Name: <h:inputText value="#{myBean.name}"/>
Age: <h:inputText value="#{myBean.age}"/>
Zip: <h:inputText value="#{myBean.zip}"/>
<h:commandButton value="Submit"/>
其对应的Bean可以对输入进行验证，用注解：
@Named
@SessionScoped
public class MyBean implements Serializable {
@Size(min = 3, message = "At least 3 characters")
private String name;
@Min(18)
@Max(25)
private int age;
@Pattern(regexp = "[0-9]{5}")
private String zip;
//. . .
}
导航规则
JSF定义了显式和隐式两种导航定义。
隐式导航：
<h:commandButton action="login" value="Login"/>
点按这个按钮将输出同一个目录下的login.xhtml。
在faces-config.xml中显式使用<navigation-rule>：
<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/login.xhtml</to-view-id>
<if>#{user.isPremium}</if>
</navigation-case>
</navigation-rule
如果user.isPremium为真，那么从index.xhtml导航到login.xhtml页面。
Faces Flow流
face流提供了相关的页面和相应的后台bean封装作为一个模块，该模块具有良好可以定义的入口和出口，设计一个face流场景是：用户完成一个任务需要在多个不同的视图输入，比如购物车功能，不断在不同商品页面挑选加入同一个购物车，然后下订单，支付等流程。