将 Faces Flow 功能与 Ajax 相结合答案

【问题标题】：Combine Faces Flow feature with Ajax将 Faces Flow 功能与 Ajax 相结合
【发布时间】：2013-08-23 17:00:14
【问题描述】：

是否可以将新的 JSF 2.2 Faces Flow 功能与 Ajax 结合起来？

用例：页面的面板中嵌入了一个向导。当用户逐步完成向导时，只有面板会被更新，而不是整个页面。

【问题讨论】：

【解决方案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>

支持 Bean

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;
    }
}

视图范围的 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”作为导航案例从流程之外的任何地方导航到流程。渲染 flowPage1.xhtml 后，执行以下操作来演示 AJAX 用法：

按“查看操作方法”按钮。这将设置两个 bean 字段的值，但仅呈现视图范围的字段。因此，您只会看到视图范围字段的文本。
按“流动作方法”按钮。这将呈现 Flow 范围的 bean 字段，显示已由 View bean 的操作方法设置的值。

【讨论】：

【解决方案2】：

查看这个关于 Faces Flow 的 basic explanation：

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

我个人还没有尝试过，但是作为一个视图封装，你将没有机会使用 Ajax 进行流转换是有道理的。

JSF 2.x 中的视图被设计为只要其控制器（支持 bean）在其后面 doesn't return a new outcome value 就保持活动状态。但是，流程本身定义了您将在应用程序中允许的结果组合。使用 Ajax 的唯一方法不是破坏您已经拥有的视图，而是流程会为每个单独的转换执行此操作。

要实现您想要的，您应该使用单个 @ViewScoped 支持 bean 和仅带有渲染条件的 jsf 视图页面来实现您的教程。

【讨论】：

【解决方案3】：

我看到 Liferay 项目中的人使用（推荐）此功能来管理向导基础 portlet

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

【讨论】：