Problema de renderização no primefaces

9 de fevereiro de 2011 21 respostas

ajinfotec 9 de fevereiro de 2011

pessoal estou usando o primefaces rc2, com mojarra 2.0.3 eestou tendo problemas
de renderização na realização de includes dinamicos, com o prime.
ja testei com o tomcat 7.0.5 e glassfish 3.0.1 e netbeans 6.9

ja teste nos dois conteines executando pelo ide e pela linha de comando mais o problema
de renderização continua. as pagina incluidas dinamicamentes não são carregadas
completatamentes quando do um f5 tudo funciona normal, porem sem o f5 tenho problema
com dialog, tables, e outros componentes não são carregados direito.

segui os codigos:

meus indexTemplate.xhtml

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!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:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Guiaki - Informação na Mão</title>
        <link type="text/css" rel="stylesheet" href="./themes/skin.css"/>        
    </h:head>
    <h:body style="background: #c6deff">
        <p:panel  header="C6 - Soluções em Tecnologia" style="width: 1200px; min-width: 1200px; min-height: 550px; margin: 0 auto;">

            <h:panelGrid columns="1" style="width: 100%">

                <ui:insert name="dadosUsuario"/>

                <ui:insert name="menu"/>

                <ui:insert name="conteudo"/>
                
            </h:panelGrid>
            
        </p:panel>
    </h:body>
</html>

meu index.xhtml

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <ui:composition template="indexTemplate.xhtml">

        <ui:define name="dadosUsuario">
           
        </ui:define>

        <ui:define name="menu">
            <ui:include src="barra-menu.xhtml"/>
        </ui:define>

        <ui:define name="conteudo">
            
            <h:panelGrid columns="1" style="width: 100%">
                <p:outputPanel id="center">
                    <p/>
                    <center>
                        <ui:include src="#{controllerPage.page}"/>                        
                    </center>
                </p:outputPanel>
            </h:panelGrid>
            
        </ui:define>

    </ui:composition>

</html>

a barra de menu.

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!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:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">    
    
    <h:form>
        <p:menubar>

            <p:submenu>
                <f:facet name="label">
                    <p:menuitem value="Home" action="#{controllerPage.setHome}" update="center">

                    </p:menuitem>
                </f:facet>
            </p:submenu>
            <p:submenu label="Clientes">
                <p:menuitem value="Novo" action="#{controllerPage.setCliente}" update="center" target="center">

                </p:menuitem>
                <p:menuitem value="Editar" action="#{controllerPage.setOpcoesCliente}" update="center">

                </p:menuitem>
                <p:menuitem value="Deletar">

                </p:menuitem>
            </p:submenu>


            <p:submenu label="Assinaturas">

                <p:menuitem value="Novo" action="#{controllerPage.setAssinatura}" update="center">

                    </p:menuitem>
                    <p:menuitem value="Editar">

                    </p:menuitem>
                    <p:menuitem value="Deletar">

                    </p:menuitem>

            </p:submenu>

            <p:submenu label="Estabelecimentos">
                <p:menuitem value="Novo" action="#{controllerPage.setEstabelecimento}" update="center">

                </p:menuitem>
                <p:menuitem value="Editar">

                </p:menuitem>
                <p:menuitem value="Deletar">

                </p:menuitem>
            </p:submenu>

            <p:submenu label="Vendedores">
                <p:menuitem value="Novo" action="#{controllerPage.setVendedor}" update="center">

                </p:menuitem>
                <p:menuitem value="Editar">

                </p:menuitem>
                <p:menuitem value="Deletar">

                </p:menuitem>

            </p:submenu>

            <p:submenu label="Cidades">
                <p:menuitem value="Novo" action="#{controllerPage.setCidade}" update="center">

                </p:menuitem>
                <p:menuitem value="Editar">

                </p:menuitem>
                <p:menuitem value="Deletar">

                </p:menuitem>
            </p:submenu>

            <p:submenu label="Regiões">

                <p:menuitem value="Novo" action="#{controllerPage.setRegiao}" update="center">

                </p:menuitem>
                <p:menuitem value="Editar" action="#{controllerPage.setOpcoesRegiao}" update="center">

                </p:menuitem>


                <p:menuitem value="Deletar">

                </p:menuitem>

            </p:submenu>

            <p:submenu label="Guiaki">

                <p:submenu label="Categoria">

                    <p:menuitem value="Novo" action="#{controllerPage.setCategoria}" update="center">
                    </p:menuitem>

                    <p:menuitem value="Editar">
                    </p:menuitem>

                    <p:menuitem value="Deletar">
                    </p:menuitem>

                </p:submenu>

                <p:submenu label="Sub Categoria">

                    <p:menuitem value="Novo" action="#{controllerPage.setSubCategoria}" update="center">
                    </p:menuitem>

                    <p:menuitem value="Editar">
                    </p:menuitem>

                    <p:menuitem value="Deletar">
                    </p:menuitem>

                </p:submenu>                

            </p:submenu>


            <p:submenu>
                <f:facet name="label">
                    <p:menuitem value="Logout" action="#{controllerPage.logout}" ajax="false"/>
                </f:facet>
            </p:submenu>

        </p:menubar>
    </h:form>


</html>

exemplo de um arquivo incluido dinamicamente:

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!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:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">


    <h:form>
        <p:panel id="regiao-panel" closable="false" header="Cadastro de Regiões" style="width: 800px">
            
            <h:panelGrid columns="3" cellpadding="4" cellspacing="8">
                
                <h:outputLabel value="Nome: *" for="regiao-nome"/>
                <h:inputText id="regiao-nome" value="#{regiaoBean.regiao.nome}" size="45" required="true" requiredMessage="O Campo [Nome] é obrigatório.">
                </h:inputText>
                <p:message for="regiao-nome">
                    <p:effect event="load" type="pulsate">
                        <f:param name="mode" value="'Show'"/>
                    </p:effect>
                </p:message>

                <h:outputLabel value="Estado: *" for="regiao-estado"/>
                <h:selectOneMenu id="regiao-estado" value="#{regiaoBean.estado.uf}" required="true" requiredMessage="O Campo [Estado] é obrigatório.">
                    <f:selectItem itemLabel="Selecione o Estado"/>
                    <f:selectItems
                        value="#{estadoBean.estados}"
                        var="estado"
                        itemLabel="#{estado.nome}"
                        itemValue="#{estado.uf}"/>
                </h:selectOneMenu>
                <p:message for="regiao-estado">
                    <p:effect event="load" type="pulsate">
                        <f:param name="mode" value="'Show'"/>
                    </p:effect>
                </p:message>
                
            </h:panelGrid>

            <center>
                <p:commandButton style="width: 100px" value="Salvar" update="regiao-panel" action="#{regiaoBean.salvar}" />
            </center>
            
        </p:panel>
    </h:form>

</html>

ai pessoal o que pode ser ja use o mojarra 2.0.4 e tambem da no mesmo.

21 Respostas

ajinfotec 10 de fev. de 2011

iai pessoal deu para entender a pergunta.
esta acontecendo o seguinte guando faço uso
do ajax para atualizar a região central da pagina
ele não carrega por completo tenho problemas com
actions, datatable, dialo e outros.

alguem ja passou por isso.

bobfroes 3 de mar. de 2011

Rapaz, Tb passei por este perrengue! Até desisti por enquanto desse negócio.

Algumas pessoas aqui ficam dizendo que fizeram todos os testes possíveis e nada de resolver!

Fiz muita coisa pra resolver este problema…vou resolver outras coisas aqui e quem sabe alguem realmente faça testes e resolva essa parada!

Valews!

ajinfotec 10 de mar. de 2011

rapaz tentei tudo que imaginei e nada de resolver
então desisti dos includes dinamicos.

agora estou dando reload na pagina toda.

fica mais lento, mas fazer o que.

vlw.

fernandogodoy18 11 de mar. de 2011

tive problemas com perca de desempenho ao utilizar ajax para renderizar componentes em paginas utilizando a tag p:ajax do primefaces

Porém resolvi tudo trocando o p:ajax por f:ajax ,
Como o ajax é nativo do jsf a tag f:ajax tem essa vantagem
ja a do primefaces pelo que entedi sobrescreve o ajax do jsf o que dexa mais lento a renderização e caso ocorra problema ate a má renderização da pagina…
Não tenho ctz se o p:ajax do primefaces funciona desta forma mesmo só estou comentando o que li em blogs.

fica a dica!

ajinfotec 14 de mar. de 2011

cara as vezes o f:ajax não renderiza direito os componentes
do primefaces. pelo menos em meus testes.
não sei ao certo mas ja aconteceu de o componente so renderizar
completamente com o p:ajax

fernandogodoy18 14 de mar. de 2011

tente fazer o seguinte com o f:ajax

public void nomeMetodo(AjaxBehaviorEvent event) throws AbortProcessingException {
        //Instruções

    }

Esta assinatura vc usa quando precisa disparar um metodo por ajax…

bobfroes 14 de mar. de 2011

Olá Fernando,

Vc está usando ui:include dinâmico? Renderizando somente partes da página?

fernandogodoy18 14 de mar. de 2011

Cara quando comecei meu projeto ate usei,
Mais depois de um tempo eu desisti de usar pois estava tendo problema com modal,

clebiovieira 14 de mar. de 2011

Eu tenho um tópico exatamente para mesma dúvida. :evil:

Já tentei de tudo, muito bizarro…

fernandogodoy18 14 de mar. de 2011

então eu desisti de usar include dinamico por isso aii,
vi muita gente falando que dava pal em tudo,

Eu optei por renderizar pagina a partir de uma seleção, e funciona bem principalmente no meu caso que tenho varios modal em uma unica pagina!
de repente seria uma solução pra vcs tambem!

clebiovieira 14 de mar. de 2011

fernandogodoy18:
então eu desisti de usar include dinamico por isso aii,
vi muita gente falando que dava pal em tudo,

Eu optei por renderizar pagina a partir de uma seleção, e funciona bem principalmente no meu caso que tenho varios modal em uma unica pagina!
de repente seria uma solução pra vcs tambem!

Então, como vc faz ? como assim por seleção ?

fernandogodoy18 14 de mar. de 2011

No meu caso deu pra aplicar esse por seleção por causa da regra de negocio,
mais a ideia é simples.

você pode cria um selectOneMenu ou selectOneRadio por exemplo;
e seu form vc envolve em um panel,
quando selecionado a opção vc manda rendezira o panel…

nada complicado,
isso eh um exemplo fulerinha!
só pra simplificar a ideia!

clebiovieira 14 de mar. de 2011

fernandogodoy18:
No meu caso deu pra aplicar esse por seleção por causa da regra de negocio,
mais a ideia é simples.

você pode cria um selectOneMenu ou selectOneRadio por exemplo;
e seu form vc envolve em um panel,
quando selecionado a opção vc manda rendezira o panel…

nada complicado,
isso eh um exemplo fulerinha!
só pra simplificar a ideia!

Mas funciona mesmo com o panel rederizado dinamicamente, o ajax do prime funciona no formulário ?
Vou testar denovo… Ahh Outra coisa, já aconteceu de vc usar o rendered e o maldito panel não fechar, mesmo com o rendered vira false ?

Abraços

Mr.style 14 de mar. de 2011

também estou com alguns problemas com ajax.
mas só um detalhe que reparei...
esse trecho do código foi depreciado...

&lt;f:facet name="label"&gt;  
                     &lt;p:menuitem value="Home" action="#{controllerPage.setHome}" update="center"&gt;  
   
                     &lt;/p:menuitem&gt;  
                 &lt;/f:facet&gt;

Depois dá um analisada nisto.

fernandogodoy18 14 de mar. de 2011

Clebio…
Funciona perfeitamente, eu tenho em alguns casos o seguinte
um SelectOneMenu que ao selecionado renderiza mais 3 que dependendo da opção podem selecionar varios campos que utilizar ajax,
como exemplo de calculo onde eu preencho o valor em alguns campos e por ajax rendeziro outro com o valor total…

Desde que esteja sendo renderizado certo nunca acontenceu de não renderizar!
tanto com o panel quanto com panelgrid e o fieldset

E Mr. Style

faço da seguinte forma:

<p:submenu label="CADASTRO">
   <p:menuitem value="NomeCadastro" url="URLCadastro"></p:menuitem>
</p:submenu>

clebiovieira 14 de mar. de 2011

fernandogodoy18:
Clebio…
Funciona perfeitamente, eu tenho em alguns casos o seguinte
um SelectOneMenu que ao selecionado renderiza mais 3 que dependendo da opção podem selecionar varios campos que utilizar ajax,
como exemplo de calculo onde eu preencho o valor em alguns campos e por ajax rendeziro outro com o valor total…

Desde que esteja sendo renderizado certo nunca acontenceu de não renderizar!
tanto com o panel quanto com panelgrid e o fieldset

E Mr. Style

faço da seguinte forma:

<p:submenu label="CADASTRO"> <p:menuitem value="NomeCadastro" url="URLCadastro"></p:menuitem> </p:submenu>

Fiz um ultimo teste aqui. Olha só isso. :shock:

Se eu usar o ajax do primefaces ele caga pro meu botão, se eu colocar como no código abaixo, NÃO funciona.
Olha o final do meu código.

<p:commandButton id="btnSalvar" value="Gravar" actionListener="#{usuarioBean.grava}" update="@form"/>

[color=blue]ISSO AQUI FUNCIONA PESSOAL, chupa essa manga !!![/color]

<p:commandButton id="btnSalvar" value="Gravar" ajax="false"
						actionListener="#{usuarioBean.grava}"
						update="@form">
						<f:ajax render="formUsuarioCad" />
					</p:commandButton>

<h:form id="formMenu">
		<p:growl showDetail="true" sticky="true"/>	
		<p:menubar>
			<p:submenu label="Iniciar">
				<p:menuitem value="Início"  action="#{menuController.setPrincipal}" url="mainpage.xhtml" ajax="false"/>
				<p:menuitem value="Logout"  action="#{loginBean.doLogout}" ajax="false"/>								
			</p:submenu>
			<p:submenu label="Cadastro">
				<p:menuitem value="Usuários"    action="#{menuController.chamaUsuario}"    ajax="false"/>
				
				<p:menuitem value="Usuários teste"  action="#{menuController.setUsuario}"  update="bola"/>
								
				<p:menuitem value="Questões"    action="#{menuController.setQuestao}"      ajax="false" />				
				<p:menuitem value="Compilação"  action="#{menuController.setCompilacao}"   ajax="false" />
				<p:menuitem value="Professores" action="#{menuController.setProfessor}"    ajax="false" />					
				<p:menuitem value="Disciplinas" action="#{menuController.chamaDisciplina}" ajax="false"/>
			</p:submenu>
			<p:submenu label="Configurações">
				<p:menuitem value="Sobre o Sistema"/>				
			</p:submenu>
		</p:menubar>
	</h:form>		
	

	<p:outputPanel id="bola" >

		<h:form id="formUsuarioCad" rendered="#{menuController.paginaAtual=='usuario'}">
			<p:panel id="xota" closable="true" header="Cadastro de Usuário">

				<h:panelGrid columns="2">
					<h:outputLabel value="Código:"
						rendered="#{usuarioBean.usuario.id != null}" />

					<p:inputText id="codigo" value="#{usuarioBean.usuario.id}"
						rendered="#{usuarioBean.usuario.id != null}" />

					<h:outputLabel value="Nome p/ Login:" />

					<p:inputText id="login" required="true"
						value="#{usuarioBean.usuario.login}"
						requiredMessage="Campo [Nome p/ login] obrigatório" />

					<h:outputLabel value="Senha:" />

					<p:password value="#{usuarioBean.usuario.senha}" minLength="6"
						promptLabel="Digite uma senha segura" goodLabel="Boa"
						weakLabel="Razoável" strongLabel="Excelente" />

					<p:commandButton id="btnSalvar" value="Gravar" ajax="false"
						actionListener="#{usuarioBean.grava}"
						update="@form">
						<f:ajax render="formUsuarioCad" />
					</p:commandButton>

				</h:panelGrid>
			</p:panel>
		</h:form>
		
	</p:outputPanel>

ajinfotec 14 de mar. de 2011

public void nomeMetodo(AjaxBehaviorEvent event) throws AbortProcessingException {  
        //Instruções  
   
    }

fernandogodoy18 rapaz o que deve ser colocado nas instruções.

bobfroes 14 de mar. de 2011

Clebio,

Eu costumo deixar tudo dentro de um único form, ou seja, de cabo a rabo. Daí coloco no botão "process=id_componente" e "update=componente_de_saída". Isso funciona perfeitamente.

fernandogodoy18 15 de mar. de 2011

vc vai colocar o que vc deseja que seu metodo execute…

ajinfotec 15 de mar. de 2011

como assim o componente a ser renderizado.

giorgialberto 16 de jan. de 2012

Pessoal estou construindo uma aplicação onde tenho um template full page e no top desse layout tenho um menubar. Quero quando acionar o menuitem (ajax) o meu contener central atualize (apenas ele). Teria como alguém me ajudar? Exemplos? Grato pela atenção de todos.

Criado 9 de fevereiro de 2011

Ultima resposta 16 de jan. de 2012

Respostas 21

Participantes 6

21 Respostas

Topicos relacionados