使用 Prime Faces 3.3.1 向导答案

【问题标题】：Using Prime Faces 3.3.1 Wizard使用 Prime Faces 3.3.1 向导
【发布时间】：2012-07-11 15:54:27
【问题描述】：

这是我第一次将 prime 3.3.1 与 JSF 2.1 一起使用。我有所有必要的罐子来制作主要面孔，我正在使用他们网站上的向导https://www.primefaces.org/showcase/ui/panel/wizard.xhtml。

这是我的代码：

wizard.xthml：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
    lang="en" xml:lang="en" style="padding-bottom: 8px;">


    <h:form>

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

        <p:wizard widgetVar="wiz" flowListener="#{userWizard.onFlowProcess}">

            <p:tab id="personal" title="Personal">

                <p:panel header="Personal Details">

                    <h:messages errorClass="error" />

                    <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
                        <h:outputText value="Firstname: *" />
                        <p:inputText required="true" label="Firstname" value="#{userWizard.user.firstname}" />

                        <h:outputText value="Lastname: *" />
                        <p:inputText required="true" label="Lastname" value="#{userWizard.user.lastname}" />

                        <h:outputText value="Age: " />
                        <p:inputText value="#{userWizard.user.age}" />

                        <h:outputText value="Skip to last: " />
                        <h:selectBooleanCheckbox value="#{userWizard.skip}" />
                    </h:panelGrid>
                </p:panel>
            </p:tab>

            <p:tab id="address" title="Address">
                <p:panel header="Adress Details">

                    <h:messages errorClass="error" />

                    <h:panelGrid columns="2" columnClasses="label, value">
                        <h:outputText value="Street: " />
                        <p:inputText value="#{userWizard.user.street}" />

                        <h:outputText value="Postal Code: " />
                        <p:inputText value="#{userWizard.user.postalCode}" />

                        <h:outputText value="City: " />
                        <p:inputText value="#{userWizard.user.city}" />

                        <h:outputText value="Skip to last: " />
                        <h:selectBooleanCheckbox value="#{userWizard.skip}" />
                    </h:panelGrid>
                </p:panel>
            </p:tab>

            <p:tab id="contact" title="Contact">
                <p:panel header="Contact Information">

                    <h:messages errorClass="error" />

                    <h:panelGrid columns="2" columnClasses="label, value">
                        <h:outputText value="Email: *" />
                        <p:inputText required="true" label="Email" value="#{userWizard.user.email}" />

                        <h:outputText value="Phone: " />
                        <p:inputText value="#{userWizard.user.phone}" />

                        <h:outputText value="Additional Info: " />
                        <p:inputText value="#{userWizard.user.info}" />
                    </h:panelGrid>
                </p:panel>
            </p:tab>

            <p:tab id="confirm" title="Confirmation">
                <p:panel header="Confirmation">

                    <h:panelGrid id="confirmation" columns="6">
                        <h:outputText value="Firstname: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.firstname}" />

                        <h:outputText value="Lastname: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.lastname}" />

                        <h:outputText value="Age: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.age}" />>  

                    <h:outputText value="Street: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.street}" />

                        <h:outputText value="Postal Code: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.postalCode}" />

                        <h:outputText value="City: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.city}" />

                        <h:outputText value="Email: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.email}" />

                        <h:outputText value="Phone " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.phone}" />

                        <h:outputText value="Info: " />
                        <h:outputText styleClass="outputLabel" value="#{userWizard.user.info}" />

                        <h:outputText />
                        <h:outputText />
                    </h:panelGrid>

                    <p:commandButton value="Submit" update="growl" actionListener="#{userWizard.save}" />

                </p:panel>
            </p:tab>

        </p:wizard>

    </h:form>

</div>

UserWizard.java：

package com.verisign.vcc.program.marketing.mbean;

import javax.faces.event.ActionEvent;

import org.primefaces.event.FlowEvent;

public class UserWizard
{
    private boolean skip;

    public void save(ActionEvent actionEvent)
    {
        // Persist user
    }

    public boolean isSkip()
    {
        return skip;
    }

    public void setSkip(boolean skip)
    {
        this.skip = skip;
    }

    public String onFlowProcess(FlowEvent event)
    {
        if (skip)
        {
            skip = false; // reset in case user goes back
            return "confirm";
        }
        else
        {
            return event.getNewStep();
        }
    }
}

当我访问wizard.xhtml 时，我得到的向导没有样式。

但在 Prime Faces 网站上是这样的：

你能告诉我我错过了什么吗？

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

问题在于您使用了无效的 Facelets 标记。您不应该使用普通的 html div 标签并在其中粘贴命名空间声明。

为此，您应该使用以html 开头的页面，其中包含h:head 和h:body 标记，或者使用ui:composition 进行模板化。

在下面的示例中，JSF 资源和 PrimeFaces 主题将被正确添加。

XHTML 页面

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
</h:head>

<h:body>
<!-- your code here -->
</h:body>

</html>

希望对你有帮助。

【讨论】：