JSF 2.0 com primefaces - Erro no template e p:dialog

8 de dezembro de 2010 8 respostas

rjunior 8 de dezembro de 2010

Olá, estou começando a trabalhar com jsf e primefaces e estou enfrentando um problema que aparentemente parece bobo, mas não estou conseguindo decifar onde está o erro.
Conto com a ajuda de vocês.

O erros são os seguintes:
1 - criei um template padrão e as paginas que o utilizam estão quase perfeitas a não ser pelo fato de as imagens do skin que baixei do site do primefaces não carregam.
2 - Utilizando esse mesmo template criei um form que tem uma dataTable e um botão para inserir um novo registro, criei um p:dialog modal, e quando ele aparece toda a tela fica inacessivel inclusive o p:dialog, se alguem puder me ajudar agradeço.
Segue o código

templateMaster.xhtml

Loja virtual

<p:resources/>

</h:head>
<h:body style=“font-size:11px; border: 0px”>
<h:outputStylesheet name=“css/skin.css” />
<p:layout fullPage=“true”>
<p:layoutUnit position=“top” height=“100” header=“cabecalho”>

</p:layoutUnit>

	<p:layoutUnit position="left" width="160" header="Menu">
		<ui:include src="/admin/menuEsquerdo.xhtml" />
	</p:layoutUnit>
	<p:layoutUnit position="center">
		<ui:insert name="conteudo"/>
	</p:layoutUnit>

	<p:layoutUnit position="bottom" height="50" header="rodape">
	
	
	</p:layoutUnit>
</p:layout>

</h:body>
</f:view>

MenuEsquerdo.xhtml

<ui:composition>
	<p:menu>
		<p:submenu>
			<p:menuitem value="Home" url="/admin/index.xhtml"/>
			<p:menuitem value="Categoria" url="/admin/categoria.xhtml"/>
		</p:submenu>
	</p:menu>
</ui:composition>

cadastro.xhtml

<ui:composition template="/templates/templateMaster.xhtml">

<ui:define name=“conteudo”>

<h:form prependId=“false”>

<p:panel header=“Lista de categorias”>

<p:commandButton value=“Novo” ajax=“true” update=“panel” oncomplete=“cadastro.show();”/>

</p:panel>

</h:form>

<p:dialog widgetVar="cadastro" id="cadastro"  position="center" >
		<p:panel id="panel" header="Cadastro de categorias" footer="" >
			<h:outputLabel value="Descrição: *" for="descricao" />
		</p:panel>
	</p:dialog>
</ui:define>

</ui:composition>

8 Respostas

facundo 8 de dez. de 2010

Rjunior, eu posso te ajudar no problema do Eu ja passei por esse problema. Uma solção é colocar o dialog no template fora dos tags do layout da seguinte manera

templateMaster.xhtml
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view>
<h:head>
<title>Loja virtual</title>

<p:resources/>

</h:head>
<h:body style="font-size:11px; border: 0px">
<h:outputStylesheet name="css/skin.css" />
<p:layout fullPage="true">
<p:layoutUnit position="top" height="100" header="cabecalho">

</p:layoutUnit>

<p:layoutUnit position="left" width="160" header="Menu">
<ui:include src="/admin/menuEsquerdo.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="conteudo"/>
</p:layoutUnit>

<p:layoutUnit position="bottom" height="50" header="rodape">


</p:layoutUnit>
</p:layout>

   <!-- AQUI O DIALOG E NÂO ONDE ESTAVA ANTES-->
<p:dialog widgetVar="cadastro" id="cadastro" position="center" >
<p:panel id="panel" header="Cadastro de categorias" footer="" >
<h:outputLabel value="Descrição: *" for="descricao" />
</p:panel>
</p:dialog>



</h:body>
</f:view>
</html>



MenuEsquerdo.xhtml
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

<ui:composition>
<p:menu>
<p:submenu>
<p:menuitem value="Home" url="/admin/index.xhtml"/>
<p:menuitem value="Categoria" url="/admin/categoria.xhtml"/>
</p:submenu>
</p:menu>
</ui:composition>
</html>

cadastro.xhtml

<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

<ui:composition template="/templates/templateMaster.xhtml">
<ui:define name="conteudo">
<h:form prependId="false">
<p:panel header="Lista de categorias">
<p:commandButton value="Novo" ajax="true" update="panel" oncomplete="cadastro.show();"/>
</p:panel>
</h:form>

</ui:define>
</ui:composition>
</html>

Facundo Larrosa
[url]www.sasex.com.br[/url]

aluisiodsv 8 de dez. de 2010

Na documentação do primefaces para o JSF 2 diz q não pode mais utilizar a tag p:resources. Deve apenas conter na página a tag h:head.

No JSF 2, se não me engano, não se usa a tag f:view.

rjunior 8 de dez. de 2010

Obrigado Facundo, só me tira uma dúvida. O arquivo onde está o dialog é um arquivo aparte e eu utilizo o template para que na parte central do layout seja exibido o cadastro. Então como você resolveu o seu problema?

facundo 9 de dez. de 2010

Junior, não entendi sua pergunta, não funcionou fazendo o que eu sugeri? O dialog ficaria no template, ee o template e carregado antes de carregar cadastro.xhtml, de esta manera o p:dialog que é carregado lado do cliente fica pronto antes de ser chamado por o cadastro. Não resolveu ainda nada?

Facundo Larrosa
www.sasex.com.br

rjunior 9 de dez. de 2010

Facundo, eu desisti de usar o layout do primefaces, e estou utilizando divs, e com o mesmo esta funcionando.
Com o layout do primefaces tanto o template como o dialog ficavam inativos.

Agora estou sofrendo com as images do primefaces que não aparecem utilizando os skins do site.

Estou colocando o <h:outputStyleSheet no template e somente as cores de background aparecem, já as imagens não aparecem de forma alguma.

Obs: coloquei o comando apos o body do template.

facundo 14 de dez. de 2010

Desculpa a demora, muita correría. Agora , me deixa pensando que que você não consegueu aquelo . Sua observação na que fala que o comando foi colocado fora dos tags do body, se você estaria falando do <h:outputStyleSheet ? Se for assim eu nunca usei esse comando , eu simplesmente coloco o parametro “style” para definir estilos de algums itens em particular , ou assigno-le uma “styleClass” e defino a classe no head ou um outro archivo assignado por o sempre <link …> no head.
As veces tambem ajuda muito usar o plug-in firebug do mozzilla, para analisar de onde esta recebendo o estilo cada elemento, ja usou ele? Facilita muito no caso de primefaces.

Facundo Larrosa.
SASEX - Soluções em Transporte e Logísitca

rjunior 15 de dez. de 2010

Vou verificar, obrigado.

thyagotosin 10 de jul. de 2013

Olá, estou desenvolvendo uma aplicação e me deparei com seu mesmo problema, resolvi inserindo appendToBody=“true” no dialog.
Ficando assim:
<p:dialog header="#{msgs.relacaoPessoas}" widgetVar=“dlgPessoas” modal=“true” appendToBody=“true”>
</p:dialog>

Criado 8 de dezembro de 2010

Ultima resposta 10 de jul. de 2013

Respostas 8

Participantes 4

8 Respostas

Topicos relacionados