JSF + PrimeFaces + Facelets

Assuntos Gerais
#1

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

Erro:

Refresh:

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>

#2

Olá Leonardo. Acredito que o problema esteja na chamada da página cadastro.xhtml via ajax. Existe uma maneira de você ter certeza disso: alterando o atributo ajax para false no menu. Assim:

E você também pode tentar carregar os recursos, javascripts e css, do prime na própria página cadastro.xhtml, assim:

<p:resouces />

Tente isso, senão funcionar post aí.

Bom, espero ter ajudado.

#3

Poo… meu brother… funcionou certinho agora! Valeu…
Mais fiquei com uma dúvida:

Pq tenho que utilizar ajax como false? e mesmo assim a página continua sendo carregada via ajax?

não acredito que fiquei tanto tempo parado por conta disso! rsrs tava tentando de tudoo e nao conseguia resolver!

Obrigado

#4

Não continua sendo AJAX. Observe que você acrescentou informou que ação será ajax=false. Isso significa que a requisição não será feita via ajax, mas uma requisição padrão.

#5

Ah sim… entao é pq a página está leve de mais, e acaba renderezando tao rápido que parece ajax… vou tentar fazer utilizando o <p:resources> como você me falou.
Desde já agradeço sua atenção…

#6

Dentro das páginas nao consigo mais fazer minhas requisiçoes, e os componentes do primefaces que utilizam ajax como por exemplo <p:wizard> e <p:selectOneMenu> perderam as funcionalides.
Tentei utilizar o <p:resources /> na página cadastro .xhtml porém não tive sucesso.

<p:selectOneMenu id="tipoPessoa" value="#{pessoaBean.tipoPessoa}" valueChangeListener="#{pessoaBean.trocaMascara}" > <f:selectItems value="#{listasUtil.tipoPessoas}" itemValue="#{listasUtil.tipoPessoas}" /> <p:ajax event="change" update="txtCpfCnpj, labelCpfCnpj"/> </p:selectOneMenu>
Este SelectOneMenu por exemplo que troca a máscara e o label de um input que utilizam ajax nao consigo mais fazê-los funcionar.

será pq? pois só setei ajax false no menuItem…

#7

Ninguem?

#8

Olá leootorres,

Conseguiu resolver o problema? Pois estou com o mesmo problema.
Atualizo a pagina via ajax, e a tela fica bagunçada igual a sua
Preciso que seja via ajax

#9

Seguinte, resolvi o meu problema sim. Mais dessa forma em que o JavaFXMan citou.

Percebi que dessa forma as requisições realizadas a partir do menu deixaram de ser Ajax, porém as demais requisiçoes (<p:wizard>, p:selectOneMenu> e etc) continuaram funcionando com Ajax. Bati a cabeça muito tempo em cima disso, mais acabei desistindo, nao achei solução usando ajax no menu. Caso encontre alguma solução, compartilhe conosco!

Valeu

#10

Se alguém souber utilizando ajax, favor nos ajudar

#11

Alguem conseguiu resolver o problema?

Acredito que isso ocorra por conta do include do facelets, fazendo com que as paginas filhas percam a função ajax. Mas gostaria de outras opniões de como solucionar o problema sem ter que adicionar nenhuma framework no projeto!

Estou utilizando o primefaces 3, não possui o <p:resources />, então haveria outra forma de recuperar o ajax da pagina filha?

#12
ola leotorres vi q vc utiliza dois tipos de mascara um pra cpf e outro pra cnpj, mas como vc utiliza o método trocamascara de acordo com o item selecionado no selectonemenu?

Grato

#13