将Faces Flow功能与Ajax结合使用

时间:2013-08-23 17:00:14

标签: ajax jsf jsf-2.2 faces-flow

是否可以将新的JSF 2.2 Faces Flow功能与Ajax结合使用?

使用案例:页面上的面板中嵌入了一个向导。当用户单步执行向导时,只会更新面板,而不是整个页面。

3 个答案:

答案 0 :(得分:1)

我自己俯视这条路线并做了一些研究。简短回答是,您可以将ajax用于部分视图处理和部分视图渲染。这是一个有效的例子:

流程定义

@ApplicationScoped
public class MyFlow implements Serializable {

    @Produces @FlowDefinition
    public Flow defineFlow(@FlowBuilderParameter FlowBuilder flowBuilder) {
        flowBuilder.id("", "myFlow");
        flowBuilder.viewNode("flowP1", "/flowPage1.xhtml").markAsStartNode();
        return flowBuilder.getFlow();
    }
}

flowPage1.xhtml(流程中的第一个也是唯一一个视图):

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>View within Flow Ajax test</title>
</h:head>
<h:body>
    <h:form>
        <h:panelGrid columns="2">
            <p:commandButton value="Flow Action Method" action="#{myFlowBean.flowActionMethod}" update="flowText"/>
            <p:commandButton value="View Action Method" action="#{myViewBean.viewActionMethod}" update="viewText"/>
            <h:outputText id="flowText" value="#{myFlowBean.flowValue}" />
            <h:outputText id="viewText" value="#{myViewBean.viewValue}" />
        </h:panelGrid>
    </h:form>
</h:body>
</html>

支持豆

Flow-Scoped Bean

@Named
@FlowScoped("myFlow")
public class MyFlowBean implements Serializable{

    private String flowValue;

    @PostConstruct
    public void init(){
        System.out.println("MyFlowBean PostConstruct");
    }

    public void flowActionMethod(){
        System.out.println("flowActionMethod called");
        //flowValue = "Flow Value Set";
    }

    public String getFlowValue() {
        return flowValue;
    }

    public void setFlowValue(String flowValue){
        this.flowValue = flowValue;
    }
}

View-Scoped Bean

@Named
@ViewScoped
public class MyViewBean implements Serializable {

    private @Inject MyFlowBean flowBean;
    private String viewValue;

    @PostConstruct
    public void init(){
        System.out.println("MyViewBean PostConstruct");
    }

    public void viewActionMethod(){
        System.out.println("viewActionMethod called");
        viewValue = "View Value Set";
        flowBean.setFlowValue("Flow Value Set");
    }

    public String getViewValue() {
        return viewValue;
    }
}

使用“myFlow”作为导航案例从流程外的任何位置导航到Flow。 一旦flowPage1.xhtml呈现,请执行以下操作以演示AJAX用法:

  1. 按“查看操作方法”按钮。这将设置两个bean字段的值,但仅呈现视图范围字段。因此,您只能看到视图范围字段的文本。
  2. 按“Flow Action Method”按钮。这将呈现Flow作用域bean字段,显示已由View bean的action方法设置的值。

答案 1 :(得分:0)

查看关于Faces Flow的basic explanation

  

Faces Flow提供相关视图/页面的封装,其中包含应用程序定义的入口和出口点。例如,结账购物车可以包括购物车页面,信用卡详细信息页面,送货地址页面和确认页面。所有这些页面以及所需的资源和bean可以作为一个模块打包在一起,然后可以在其他应用程序中重用。

就我个人而言,我还没有尝试过,但是它是一个封装视图,这是有道理的,你没有机会使用Ajax进行流转换。

JSF 2.x中的一个视图旨在保持活着,只要它后面的控制器(支持bean)doesn't return a new outcome value。但是,流程本身定义了您在应用程序中允许的结果组合。使用Ajax的唯一方法是不破坏您已有的视图,但流程会为每次转换执行此操作。

要实现您的目标,您应该使用单个@ViewScoped支持bean以及仅包含渲染条件的jsf视图页面来实现您的教程。

答案 2 :(得分:0)

我看到有人在liferay项目中使用(重新命令)这个功能来管理向导基本portlet

http://www.liferay.com/web/neil.griffin/blog/-/blogs/three-cheers-for-jsf-2-2-faces-flows