JSF Composite Component和Ajax事件，使用内部和嵌套的Ajax侦听器

问题描述

我正在尝试创建一个复合组件，允许用户输入日期（通过质数日历组件）和/或一个整数（通过质数输入数字组件）来表示参考日期和日期之间的间隔（以天为单位）用户输入了一个。 calendar和inputNumber组件已链接，每个组件都应在其他组件更改时呈现。

这是它的样子：

问题似乎是嵌套的p：ajax接管了同一事件的内部p：ajax。这是正常行为吗？有没有一种方法可以让一个事件有两个侦听器，一个侦听器在复合组件内部，并且在必要时嵌套一个侦听器？

inputDateEcart.xhtml-组件及其内部

的定义

<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:h="http://xmlns.jcp.org/jsf/html"
              xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
              xmlns:p="http://primefaces.org/ui"
              xmlns:cc="http://xmlns.jcp.org/jsf/composite">
    <cc:interface componentType="inputDateEcart">
        <cc:attribute name="value" type="java.time.LocalDate" shortDescription="Selected date" required="true" />
        <cc:attribute name="reference" type="java.time.LocalDate" shortDescription="Reference date" required="true" />
        <cc:attribute name="disabled" type="java.lang.Boolean" />
        <cc:attribute name="style" type="java.lang.String" />
        <cc:attribute name="styleClass" type="java.lang.String" />
        <cc:clientBehavior name="change" default="true" targets="interval date" event="change" />
    </cc:interface>

    <cc:implementation>
        <div id="#{cc.clientId}" style="#{cc.attrs.style}" class="ui-inputgroup #{cc.attrs.styleClass}">
            <span class="ui-inputgroup-addon">After</span>
            <p:inputNumber id="interval"
                           binding="#{cc.interval}"
                           decimalPlaces="0"
                           disabled="#{cc.attrs.disabled}"
                           required="#{cc.attrs.required}"
                           style="max-width: 50px;">
                <p:ajax process="@this" update="date,weekDay" listener="#{cc.updateDate}" />
            </p:inputNumber>
            <h:outputText id="weekDay" binding="#{cc.weekDay}" styleClass="ui-inputgroup-addon" style="text-align: start"/>
            <p:calendar id="date"
                        binding="#{cc.date}"
                        navigator="true"
                        mindate="#{cc.attrs.reference}"
                        disabled="#{cc.attrs.disabled}"
                        required="#{cc.attrs.required}">
                <p:ajax process="@this" update="interval,weekDay" listener="#{cc.updateInterval}" />
                <p:ajax event="dateSelect" process="@this" update="interval,weekDay" listener="#{cc.updateInterval}"  />
            </p:calendar>
        </div>
    </cc:implementation>
</ui:component>

index.xhtml-复合组件及其嵌套的

<h:form id="intervalForm">
    <p:outputLabel for="next" label="Next date" />
    <cc:inputDateEcart id="next"
                       value="#{index.next}"
                       reference="#{index.date}">
        <p:ajax process="@this" update="intervalForm:test" />
    </cc:inputDateEcart>
    <p:outputPanel id="test" styleClass="test" style="margin-top: 15px">
        Now : <h:outputText value="#{index.Now}" style="font-weight: bold" /> -
        Next : <h:outputText value="#{index.next}" style="font-weight: bold" />
    </p:outputPanel>
</h:form>

您可以在这里https://github.com/Pilpin/mwe-compositecomponent

中找到一个最小的工作示例。

运行mwe，您将发现嵌套的p：ajax捕获了“ change”事件，从而阻止了内部p：ajax的执行及其对cc.updateDate或cc.updateInterval的调用。但是dateSelect未被捕获，并且间隔已更新。

我实际上还有第二个问题，我还没有尝试解决所有问题，但是如果您有答案，我会接受：在index.xhtml中，此行<p:ajax process="@this" update="intervalForm:test" />似乎没有更新备用bean中的值#{index.next}，我是否在想错什么？

非常感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）