0

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

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

4

3 回答 3

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

视图范围的 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 用法：

  1. 按“查看操作方法”按钮。这将设置两个 bean 字段的值，但仅呈现视图范围的字段。因此，您只会看到视图范围字段的文本。
  2. 按“流动动作方法”按钮。这将呈现 Flow 范围的 bean 字段，显示已由 View bean 的操作方法设置的值。
于 2013-10-15T16:04:54.650 回答
0

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

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

于 2014-03-05T16:08:40.710 回答
0

查看有关 Faces Flow的基本解释：

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

就我个人而言，我还没有尝试过，但是由于它是对视图的封装，所以你没有机会使用 Ajax 进行流转换是有道理的。

JSF 2.x 中的视图旨在保持活动状态，只要其背后的控制器（支持 bean）不返回新的结果值。但是，流程本身定义了您将在应用程序中允许的结果组合。使用 Ajax 的唯一方法不是破坏您已经拥有的视图，而是流程会为每个单独的转换执行此操作。

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

于 2013-08-24T16:35:42.137 回答