Estou desenvolvendo uma página utilizando o componente <p:wizard> do primefaces que contém um cadastro de usuários. Segui o ShowCase: http://www.primefaces.org/showcase-labs/ui/wizard.jsf
Bom, o problema está quando acesso pela primeira vez a página de cadastro, o p:wizard vem totalmente desfigurado, mais ao fazer um refresh na página, tudo volta ao normal, e se navegar entre outras páginas e voltar para o cadastro ele estará sem problemas algum. OBS.: Nenhum erro ocorre no console.
Imagino que esteja ocorrendo o problema pq a página cadastro.xhtml está sendo está sendo chamada via ajax. Pois quando defino no backBean de controle a cadastro como principal, o problema nao ocorre, mais a página de cadastro nao pode ser a principal do site.
Alguem já passou por isso? alguma dica de como corrigir? ou será um bug?
valeu
cadastro.xhtml
[code]ui:composition
Cadastre-se
<h:form>
<p:wizard widgetVar="cadastro">
<p:tab title="Passo 1">
<p:panel header="Dados Pessoais" >
<h:messages errorClass="error" />
<p:selectOneMenu id="tipoPessoa" value="#{pessoaBean.tipoPessoa}" valueChangeListener="#{pessoaBean.trocaMascara}">
<f:selectItems value="#{listasUtil.tiposPessoa}" itemValue="#{listasUtil.tiposPessoa}" />
<p:ajax event="change" update="txtCpfCnpj, labelCpfCnpj" />
</p:selectOneMenu>
<h:outputLabel value=" " />
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<h:outputLabel value="Nome:" />
<p:inputText id="nome" size="45" />
<p:outputPanel id="labelCpfCnpj">
<h:outputLabel value="#{pessoaBean.labelCpfCnpj}" />
</p:outputPanel>
<p:outputPanel id="txtCpfCnpj" >
<p:inputMask id="CpfCnpj" value="#{pessoaBean.pessoa.cpf_cnpj}" mask="#{pessoaBean.mascaraCpfCnpj}" />
</p:outputPanel>
<h:outputLabel value="e-Mail: " />
<p:inputText id="eMail" size="45" />
<h:outputLabel value="telefone:" />
<p:inputText id="telefone" />
<h:outputLabel value="Cep" />
<p:inputText id="cep" />
</h:panelGrid>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</ui:composition>[/code]
menu_sistema.xhtml
[code]ui:composition
<h:form id=“menu”>
<p:growl id="messages"/>
<p:menubar autoSubmenuDisplay="true">
<p:menuitem value="Home" action="#{controller.setHome}" update="outPanelConteudo"/>
<p:submenu label="Correspondente">
<p:menuitem value="Cadastro de correspondente" action="#{controller.setCadastro}" update="outPanelConteudo" />
<p:menuitem value="Pesquisa Correspondente" />
</p:submenu>
<p:submenu label="Escritório">
<p:menuitem value="Cadastro de Escritório" />
<p:menuitem value="Pesquisa Escritório" />
</p:submenu>
</p:menubar>
</h:form>
</ui:composition>[/code]
index.xhtml
<ui:composition template="/template/template.xhtml">
<ui:define name="conteudo">
<p:outputPanel id="outPanelConteudo">
<ui:include src="#{controller.paginaAtual}"/>
</p:outputPanel>
</ui:define>
</ui:composition>