Question

我想在底部使用完成按钮实现Primefaces向导。示例代码：

<h:form>

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

                    <p:wizard flowListener="#{newSensor.onFlowProcess}">
                        <p:tab id="personal" title="General">
                            <p:panel header="Sensor Details">
                                <p:messages />
                                <h:panelGrid columns="2" columnClasses="label, value">
                                    ......

                                    <h:outputText value="Enabled " />
                                    <h:selectBooleanCheckbox value="#{newSensor.sensor.enabled}" />
                                </h:panelGrid>
                            </p:panel>
                        </p:tab>

                        <p:tab id="confirm" title="Confirmation">
                            <p:panel header="Confirmation">
                                <h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid">
                                    <h:panelGrid columns="2" columnClasses="label, value">
                                        ......

                                        <h:outputText value="Age: " />
                                        <h:outputText value="#{newSensor.sensor.enabled}" styleClass="outputLabel"/>
                                    </h:panelGrid>
                                </h:panelGrid>

                                <p:commandButton value="Submit" actionListener="#{newSensor.save}" update="growl" process="@this"/>
                            </p:panel>
                        </p:tab>
                    </p:wizard>

                </h:form>

想要得到这个视觉效果：

我如何获得这种视觉效果？

Answer 1

我认为最好为导航实现自己的用户界面，并在显示“提交”按钮时进行控制。

首先隐藏导航栏：

<p:wizard showNavBar="false" widgetVar="wiz">
...
</p:wizard>

然后只为NEXT,BACK,SUBMIT, ETC.

创建一些代码

<p:outputPanel id="updateAsNeeded">
<h:outputLink value="#" onclick="PF('wiz').next();">Next</h:outputLink>
<h:outputLink value="#" onclick="PF('wiz').back();">Back</h:outputLink>
<p:commandButton value="Submit" rendered="#{bean.isEndReached}">Submit</p:commandButton>
</p:outputPanel>

然后定义一个FlowListener来确定：

<p:wizard flowListener="#{bean.handleFlow}">
...
</p:wizard>

对于你的bean：

public String handleFlow(FlowEvent event) {
String currentStepId = event.getCurrentStep();
String stepToGo = event.getNextStep();


//check if stepToGo is on the last page
//endReached = true;

RequestContext.update("updateAsNeeded");

return event.getNextStep();
}

希望这有助于或指导您前进。

最后放置完成按钮

1 个答案: