必需的验证取决于在向导中不起作用的特定按钮

Question

我试图在这篇文章中实现BalusC的答案,但当我尝试使所需的条件取决于向导外部的按钮时,它无法正常工作,我用来控制"后退"和"下一步"向导 怎么能实现这个？

<h:form id="form" enctype="multipart/form-data" acceptcharset="ISO-8859-1" >  

    <p:growl id="growl" sticky="true" showDetail="true"/>  

    <p:wizard id="wizard" flowListener="#{myBean.onFlowProcess}" showNavBar="false" widgetVar="wizardWV"> 

        <p:tab id="tab1" title="Tab 1"  >  
            <p:panel header="Panel for tab 1">  

                <p:message for="year" />
                <br /> 

                <table>
                    <tr>
                        <td>
                            <h:outputLabel value="Year: "  />
                        </td>
                        <td>
                            <p:inputMask 
                                id="year"
                                value="#{myBean.year}" 
                                required="#{not empty param[nextPanel.clientId]}"
                                requiredMessage="Year is required!"
                                style="width:70px;"  
                                mask="9999" 
                                maxlength="4" 
                            />
                        </td>
                    </tr>
                </table>
            </p:panel>
        </p:tab>

        <p:tab id="tab2" title="Tab 2"  >  
            <p:panel header="Panel for tab 2">  
            </p:panel>
        </p:tab>

    </p:wizard>

    <p:commandButton id="backPanel"  value="Back" onclick="PF('wizardWV').back();" styleClass="internalButton"  />
    <p:commandButton id="nextPanel" binding="#{nextPanel}" value="Next" onclick="PF('wizardWV').next();" styleClass="internalButton" />

</h:form> 

Answer 1

为什么这个问题还没有得到解答？就像@BalusC说的，答案很简单，只要把@process="this"

<h:form>
    <p:wizard id="wizard" showNavBar="false" widgetVar="wizardWV">
        <p:tab id="tab0" title="Tab 0">
            <p:panel header="Panel for tab 0">
                blablabla
            </p:panel>
        </p:tab>

        <p:tab id="tab1" title="Tab 1">
            <p:panel header="Panel for tab 1">
                <p:message for="year" />
                <br />

                <h:panelGrid columns="2">
                    <h:outputLabel value="Year: " />
                    <p:inputMask id="year" value="#{myBean.year}" required="true"
                        requiredMessage="Year is required!" style="width:70px;" mask="9999"
                        maxlength="4" />
                </h:panelGrid>
            </p:panel>
        </p:tab>

        <p:tab id="tab2" title="Tab 2">
            <p:panel header="Panel for tab 2">
                blablabla
            </p:panel>
        </p:tab>
    </p:wizard>

    <p:commandButton value="Back" onclick="PF('wizardWV').back();" />
    <p:commandButton process="@this" value="Next" onclick="PF('wizardWV').next();" />
</h:form>

或者更好，以避免重复的 ajax 请求

<p:commandButton type="button" value="Back" onclick="PF('wizardWV').back();" />
<p:commandButton type="button" value="Next" onclick="PF('wizardWV').next();" />

但在这种情况下，我真的不明白为向导使用自定义导航栏有什么意义。

如果您通过提及“设计”来指“皮肤”，则正确的方法是覆盖 PF CSS 样式：

Wizard resides in a container element that style and styleClass attributes apply.
Following is the list of structural css classes.

Selector               Applies
.ui-wizard             Main container element.
.ui-wizard-content     Container element of content.
.ui-wizard-step-titles Container of step titles.
.ui-wizard-step-title  Each step title.
.ui-wizard-navbar      Container of navigation controls.
.ui-wizard-nav-back    Back navigation control.
.ui-wizard-nav-next    Forward navigation control.

但是，如果您真正指的是“设计”，例如特性/功能，是的，您可以通过向导的“小部件”与向导进行交互，并且像您一样定义自己的控件。 在您的具体情况下，我没有看到“设计”差异，我看到了向导组件的标准行为，其中在按下下一个按钮时处理当前向导选项卡（及其所有组件均经过验证）。

仅触发验证针对已处理的组件（位于执行列表内）process="..."，并且您可以使用任何 ajax 组件/事件的属性控制此列表。

您可能想要的是更改该页面中处理的另一个组件的默认行为@all或@form。

根据您在评论中所说的内容，该页面中至少有另一个具有 ajax 行为的组件，例如p:autocomplete并且您可能正在使用 PF < 4.0。

在这种情况下，您可以添加process="@this"到p:autocomplete向导选项卡中以防止处理（然后验证）其他组件，例如您的p:inputMask.

@Erick，我首先想到的是：

<p:wizard binding="#{wizardComponent}" ...>
    <p:tab id="tab0" ...>
        ...
    </p:tab>
    ...
</p:wizard>
<p:commandButton rendered="#{wizardComponent.step != 'tab0'}" value="Back" onclick="PF('wizardWV').back();" />