5

Estou desenvolvendo um aplicativo Web que visa trabalhar como o Facebook. Durante a navegação a página não é recarregada, carregando via AJAX apenas o conteúdo central.

Estou usando o PrimeFaces 4.0 e PrimeFaces Extension 1.2.1

Mas quando minha página (do conteúdo central) contém pe:masterDetail ele causa um erro no servidor

O erro é esse:

Severe:   Error Rendering View[/index.xhtml]
java.lang.NullPointerException
        at org.primefaces.extensions.component.masterdetail.MasterDetailRenderer.getMenuItemByLevel(MasterDetailRenderer.java:284)
        at org.primefaces.extensions.component.masterdetail.MasterDetailRenderer.updateBreadcrumb(MasterDetailRenderer.java:208)
        at org.primefaces.extensions.component.masterdetail.MasterDetailRenderer.renderBreadcrumb(MasterDetailRenderer.java:186)
        at org.primefaces.extensions.component.masterdetail.MasterDetailRenderer.encodeMarkup(MasterDetailRenderer.java:138)
        at org.primefaces.extensions.component.masterdetail.MasterDetailRenderer.encodeEnd(MasterDetailRenderer.java:101)
        at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:919)

Criei uma página simples para simular o erro que acontece em minha aplicação:

Index.xhtml:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Test</title>
    </h:head>
    <h:body >
        <h:form>
            <p:commandButton action="#{theBean.goToPage('masterDetailPage.xhtml')}" update=":centerContent"/>
        </h:form>

        <h:form id="centerContent">
            <ui:include src="#{theBean.page}"/>
        </h:form>    


    </h:body>
</html>

TheBean.java:

package br.edu.utfpr.projetoteste;

import java.io.IOException;
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named
@SessionScoped
public class TheBean implements Serializable {

    private static final long serialVersionUID = 1L;

    String page = "test.xhtml"; //Simple blank page for this test

    public TheBean() {
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    public void goToPage(String page) throws IOException {
        this.setPage(page);
    }
}

masterDetailPage.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">
<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:pe="http://primefaces.org/ui/extensions">


    <pe:masterDetail id="masterDetail" >

        <pe:masterDetailLevel level="1" levelLabel="Master">
            Test
        </pe:masterDetailLevel >
        <pe:masterDetailLevel level="2" levelLabel="Detail">
            Test
        </pe:masterDetailLevel>


    </pe:masterDetail>


</ui:composition>

Quando eu recarrego via F5 a página, o conteúdo central carrega certinho, sem causar erro.

O que verifiquei via Debug é que o BreadCrumb fica null na primeira vez que executa o updateBreadcrumb(), e fica com valor quando recarrega a página.

Mas eu não quero recarregar a página. Como proceder para que funcione em caso do fragmento da página ser carregada via AJAX?

2 Respostas 2

0

Tenta colocar os

    <h:form>
        <p:commandButton action="#{theBean.goToPage('masterDetailPage.xhtml')}" update=":centerContent"/>
    </h:form>

    <h:form id="centerContent">
        <ui:include src="#{theBean.page}"/>
    </h:form>   

dendro de outro form, por exemplo:

<h:form>
    <h:form>
        <p:commandButton action="#{theBean.goToPage('masterDetailPage.xhtml')}" update=":centerContent"/>
    </h:form>

    <h:form id="centerContent">
        <ui:include src="#{theBean.page}"/>
    </h:form>  
</h:form>

Depois remove os dois pontos ":" de

update=":centerContent"

Ficando apenas

update="centerContent"

Para utilizar update com id o botão precisa estar dentro do mesmo form que o componente que você precisa atualizar.

Se ainda não der certo você pode tentar substituir o

<h:form>
    <p:commandButton action="#{theBean.goToPage('masterDetailPage.xhtml')}" update=":centerContent"/>
</h:form>

Por apenas

    <p:commandButton action="#{theBean.goToPage('masterDetailPage.xhtml')}" update=":centerContent"/>

Tenta lá e manda o resultado do teste.

Segue um exemplo de um projeto que eu fiz e funcionou a parte o AJAX:

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

<ui:composition template="/resources/templates/interna.xhtml">
    <ui:define name="corpo">               
        <h:form id="meio">

                    <h:panelGrid columns="2">   
                        <h:form id="edicao">
                            <p:panelGrid columns="6">
                                <f:facet name="header">Cadastro/Ediçao de Obras</f:facet>
                                <h:outputLabel value="Solid:" for="txt_solid"></h:outputLabel>  
                                <p:inputText id="txt_solid" value="#{obrasBean.obras.solid}" required="true" label="ID de solicitação Embratel.">
                                    <f:validateLength minimum="1" maximum="11" />
                                </p:inputText>
                                <h:outputLabel value="Nome:" for="txt_nome"></h:outputLabel>  
                                <p:inputText id="txt_nome" value="#{obrasBean.obras.nome}" required="true" label="Nome do cliente">
                                    <f:validateLength minimum="1" maximum="50" />
                                </p:inputText>  
                                <h:outputLabel value="CNL da cidade:" for="txt_cnl"></h:outputLabel>  
                                <p:inputText id="txt_cnl" value="#{obrasBean.obras.cnl}" required="true" label="CNL da Cidade. Ex: Curitiba = CTA" size="4">
                                    <f:validateLength minimum="3" maximum="4" />
                                </p:inputText>
                                <h:outputLabel value="Endereço:" for="txt_end"></h:outputLabel>  
                                <p:inputText id="txt_end" value="#{obrasBean.obras.end}" required="true" label="Endereço. EX: R dos Loucos, 0">
                                    <f:validateLength minimum="1" maximum="60" />
                                </p:inputText>  
                            </p:panelGrid>
                        </h:form>
                        <p:commandButton value="Salvar" action="#{obrasBean.salvar}" style="margin:10px 0" id="btnAdd" update="edicao,listagem" icon="ui-icon-disk" />  
                    </h:panelGrid>
            <!--<h:messages/>-->
            <h:form id="listagem">
                <p:dataTable value="#{obrasBean.lista}" var="obra"  rules="rows" cellpadding="5" paginator="true" rowsPerPageTemplate="5,10,15,20">
                    <f:facet name="caption">
                        A listagem abaixo exibe a relação de todas as obras
                    </f:facet>
                    <f:facet name="header">Fila de Obras</f:facet>
                    <f:facet name="footer">Final da listagem</f:facet>
                    <p:column style="width:16px">  
                        <p:rowToggler />  
                    </p:column>
                    <p:column>
                        <f:facet name="header">Solid</f:facet>
                        <h:outputText value="#{obra.solid}" />
                    </p:column>
                    <p:column>
                        <f:facet name="header">Nome</f:facet>
                        <h:outputText value="#{obra.nome}" />
                    </p:column>
                    <p:column>
                        <f:facet name="header">Cidade</f:facet>
                        <h:outputText value="#{obra.cnl}" />
                    </p:column>
                    <p:column>
                        <f:facet name="header">Endereço</f:facet>
                        <h:outputText value="#{obra.end}" />
                    </p:column>
                    <p:column>
                        <f:facet name="header">Data</f:facet>
                        <h:outputText value="#{obra.data}">
                            <f:convertDateTime dateStyle="medium"/>
                        </h:outputText>
                    </p:column>
                    <p:column>
                        <h:commandButton action="#{obrasBean.excluir}" onclick="if (!confirm('Confirma a exclusão da Obra #{obra.nome}?')) return false;" 
                                             title="Excluir" image="/resources/png/16x16/delete.png">
                            <f:ajax execute="@this" render="@form" />
                                <f:setPropertyActionListener target="#{obrasBean.obras}" value="#{obra}"/>
                        </h:commandButton>
                    </p:column>

                </p:dataTable>

            </h:form>
        </h:form>
    </ui:define>        
</ui:composition>

Repare que existe um formulário meio que engloba outros dois formulário edicao e listagem. O commandButton está fora de edica e listagem porem dentro do meio e quando clica no commandButton o mesmo salva a Obra e atualiza a listagem.

5
  • Usei os 2 casos, e o erro persiste... 6/02/2014 às 0:05
  • Eu editei a minha resposta, dá uma olhada lá, e inseri um exemplo. Se você der uma olhada na documentação do PrimeFaces os componentes devem sempre ficar dentro de um form para funcionar adequadamente. O PrimeFaces Extension não é diferente, tenta colocar os pe:masterDetail dentro de um form também.
    – brunowff
    6/02/2014 às 12:52
  • Tenho outras páginas que funcionam com AJAX também, mas quando tem o componente pe:MasterDetail não funciona, retornando o erro que está na questão. 7/02/2014 às 21:07
  • Mas você chegou a colocar os componentes pe:MasterDetail dentro do form?
    – brunowff
    10/02/2014 às 11:28
  • Fiz um pouco diferente... A solução postei como resposta a questão... Obrigado mesmo assim @brunowff 15/02/2014 às 16:15
0

Existe uma solução para isso:

Em vez de colocar um form para dar Update, colocar um h:panelGroup:

<h:body >
    <h:form>
        <p:commandButton action="#{theBean.goToPage('masterDetailPage.xhtml')}" update=":centerContent"/>
    </h:form>

    <h:panelGroup id="centerContent">
        <ui:include src="#{theBean.page}"/>
    </h:panelGroup>    

</h:body>

e dentro da página que tem o MasterDetail colocar 1 form:

<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
    xmlns:pe="http://primefaces.org/ui/extensions">

    <h:form>
        <pe:masterDetail id="masterDetail" >

            <pe:masterDetailLevel level="1" levelLabel="Master">
                Test
            </pe:masterDetailLevel >
            <pe:masterDetailLevel level="2" levelLabel="Detail">
                Test
            </pe:masterDetailLevel>


        </pe:masterDetail>
    </h:form>
</ui:composition>

Espero ter ajudado quem teve o mesmo problema que eu...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .