Question

我正在尝试在this post中实现BalusC的答案，但是当我尝试使所需条件取决于Wizard之外的按钮时，它无效，我正在使用控制向导的“后退”和“下一步”。怎么能实现这个目标？

<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();" />

但在这种情况下，我真的没有看到使用自定义导航栏进行向导的重点。

如果你的意思是＆＃34;皮肤＆＃34;通过提及＆＃34; design＆＃34;，正确的方法是覆盖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.

但如果你的意思是＆＃34;设计＆＃34;，就像功能/功能一样，是的，你可以通过它的＆＃34; widget＆＃34;与向导进行交互。和你一样，定义你自己的控件。 在您的具体情况下我没有看到＆＃34; design＆＃34;差异，我看到向导组件的标准行为，其中按下下一个按钮处理当前向导选项卡（并验证其所有组件）。

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

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

根据您在评论中所说的内容，您在该页面中至少有另一个具有ajax行为的组件，例如p:autocomplete，并且您可能正在使用PF＆lt; 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();" />

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

1 个答案: