Partial View PrimeFaces

Este conceito não existe no JSF tal como no Rails.
Isso porque no JSF não existe a liberdade de “montar” o HTML, a árvore de componentes está instanciada e o que se faz é atualizar o estado de determinados componentes e re-renderiza-los

Para conseguir o efeito desejado, o negócio é ir se acostumando com o “jeito JSF” de fazer as coisas. Por exemplo, os seguintes recursos podem ser úteis:

• Facelets template : Seria o equivalente ao Layout do rails, pode ser usado para montar a página a partir de fragmentos reutilizáveis.

• Construção de componentes customizados: é uma maneira de criar um pedaço de view reaproveitavel. Não recomendado devido a complexidade.

• Construção de Composite Components: Uma pequena facilitada que o JSF2.0 deu para se criar componentes. Claro que não facilitou o suficiente hehe
  (aqui chegamos a conclusão que criar componentes não é praticável na maioria dos casos… daí a necessidade de usar uma boa biblioteca como o PrimeFaces)

• AJAX:
  Sua pergunta era especificamente sobre Ajax…
  não dá para fazer do jeito que você queria originalmente, mas é simples, é só questão de se adaptar.
  Ao invés de requisitar ao server um fragmento da página e inseri-lo no HTML, o que se faz é atualizar um componente existente. Veja exemplos aqui: http://www.primefaces.org/showcase/ui/ajaxHome.jsf

Desde já obrigado pela resposta!

Entendi a explicação…tenho que fazer templates e componentes então.

Tentei fazer uma navegação dessa forma no menuitem do PrimeFaces:

<p:menuitem value=“Cadastro” action=“aluno/cadastro” update=“main_container” ajax=“false”/>

Mas ele não está carregando o conteúdo dentro do componente “main_container”, ele redireciona para outra aba do navegador.

O que estou fazendo erado? rsrs

Obrigado!

Este conceito não existe no JSF tal como no Rails.
Isso porque no JSF não existe a liberdade de “montar” o HTML, a árvore de componentes está instanciada e o que se faz é atualizar o estado de determinados componentes e re-renderiza-los

Alguns provedores de JSF fizeram alguns componentes AJAX que simularam isso:

• No richafaces 3.x tinhamos o a4J:include…mas acho que naõ tem mais na nova versão
• no prime temos os wizards - http://www.primefaces.org/showcase/ui/wizard.jsf

Então vamos supor que eu tenha um layout padrão e tenha um <p:layoutUnit /> central, onde eu queira injetar conteúdo.

O conteúdo injetado seria por exemplo uma pagina.xhtml.

Como eu faria para exibir esse conteúdo dentro do componente?

Estou tentando entender é se tem jeito de fazer isso.

Pois queria ter um container central onde eu pudesse carregar alguns formulários de acordo com o menu.

Thanks!

igorvinnicius:

Então vamos supor que eu tenha um layout padrão e tenha um <p:layoutUnit /> central, onde eu queira injetar conteúdo.

O conteúdo injetado seria por exemplo uma pagina.xhtml.

Como eu faria para exibir esse conteúdo dentro do componente?

Estou tentando entender é se tem jeito de fazer isso.

Pois queria ter um container central onde eu pudesse carregar alguns formulários de acordo com o menu.

Thanks!

Essa é a questão = Não é possível fazer isso nativamente = ou vc troca de pagina que é HTTP FULL ou manipula o DOM!
AJAX = vc retorna um pedaço da pagina, uma div por exemplo…remove todos os objetos do DOM daquele região antiga e adicionar os novos DINAMICAMENTE!!

Isso significa que eu teria que ter meu layout completo em todas as minhas páginas?

Layout completo??? não entendi

Ter (header, footer, menu principal), em todas as páginas da aplicação.

Tê-los escritos em todas as páginas…

Por exemplo:

Quero sair da pagina principal da minha aplicação e ir para um cadastro de clientes.

Então no cadastro de clientes tenho que ter todo o layout escrito novamente e mudad para a página cadastro_cliente.xhtml?

Pois quero ter só o formulário de cadastro e carrega-lo em um container da página principal.

Estava lendo pesquisando para vc…
Para fazer parcial navegator…use FACELET com <ui:include with src="#{someEL}">
Coloque para renderizar dentro do retorno ajax…
Aqui um artigo do Ilya Shaikovsky que é responsavel pelo richfaces = http://www.jroller.com/a4j/entry/richfaces_4_wizard_like_behavior
Ou vc pode usar o componente wizard do prime…ja indicado.
T+

vc pode montar vários templates, e aí dizer que um xhtml extende do template A, outro do template B e assim por diante, e aí você vai montando seus composites que no final vão gerar as páginas

O padrão ao se trabalhar com JSF2/Facelets é:

• existe um layout padrão *, com header, footer, paineis laterais, etc
• a pagina1.xhtml referencia este layout, e implementa apenas a parte do conteudo principal, o “miolo”.
• a pagina2.xhtml também referencia o layout e implementa o miolo.

Ao navegar da pagina1 para pagina2, a tela é recarregada totalmente, porém (1) Visualmente é como se trocasse apenas o painel do conteudo principal, pois todo o resto permanece igual. (2) Nao é preciso duplicar código do layout da página, que me parece que é o seu receio.

Essa é a maneira usual de se trabalhar, se precisa realmente recarregar apenas o miolo da página, é algo um pouquinho mais sofisticado. Veja se as idéias que foram passadas atendem a sua necessidade.

• Pode ter mais de um layout também… cada página diz qual ela usa.

Um adendo: pelo que estou vendo na documentação, aparentemente o menu do Primefaces suporta renderização parcial com ajax, mas não tenho certeza, nunca fiz.

Na documentação constam os seguintes atributos, que parecem estar relacionados com esse comportamento:

ajax - Boolean - Specifies submit mode.
async - Boolean - When set to true, ajax requests are not queued.
process - String - Component id(s) to process partially instead of whole view.
update - String - Client side id of the component(s) to be updated after async partial submit request.

Cara…vi em um post uma maneira de fazer isso da seguinte forma:

Menu Item:

<p:menuitem value=“Servidor” actionListener="#{navBean.requestPage(‘servidor’)}" update=“centerContent” />

Layout Unit que quero atualizar:

<p:layoutUnit id=“centerContent” position=“center” style=“border: none;” scrollable=“true” gutter=“0” zindex="-1" styleClass=“body bodyCadastro”>
<ui:include src="#{navBean.viewedPage}" />
</p:layoutUnit>

ManagedBean:

@ManagedBean(name = “navBean”)

@SessionScoped

public class NavigationBean implements Serializable {

private String viewedPage;  

public NavigationBean() {  
    viewedPage = "home.xhtml";  
}  

public String getViewedPage() {  
    return viewedPage;  
}  

public void setViewedPage(String viewedPage) {  
    this.viewedPage = viewedPage;  
}  

public void requestPage(String pageName) {  
    viewedPage = pageName + ".xhtml";  
}

}

Parece que funciona, pois consigo ver no Firebug o xhtml recuperado pela chamada ajax, mas quando a requisição finaliza o Layout Unit some da tela! rsrs
Se eu olhar o código fonte da página o trecho html está lá renderizado corretamente, mas não é mostrado na tela.

E outra se eu der um refresh, aí sim aparece o conteúdo, porque a viewedPage está com o valor que passei.

Só falta fazer a aparecer na tela…rsrs

O que vc acha desse método?

E sabe o por que não está aparecendo na tela?

Cara desculpe a confusão e a perguntação…mas to mesmo precisando aprender isso…rsrs!

igorvinnicius:

Cara…vi em um post uma maneira de fazer isso da seguinte forma:

Menu Item:

<p:menuitem value=“Servidor” actionListener="#{navBean.requestPage(‘servidor’)}" update=“centerContent” />

Layout Unit que quero atualizar:

<p:layoutUnit id=“centerContent” position=“center” style=“border: none;” scrollable=“true” gutter=“0” zindex="-1" styleClass=“body bodyCadastro”>
<ui:include src="#{navBean.viewedPage}" />
</p:layoutUnit>

ManagedBean:

@ManagedBean(name = “navBean”)

@SessionScoped

public class NavigationBean implements Serializable {

private String viewedPage;  

public NavigationBean() {  
    viewedPage = "home.xhtml";  
}  

public String getViewedPage() {  
    return viewedPage;  
}  

public void setViewedPage(String viewedPage) {  
    this.viewedPage = viewedPage;  
}  

public void requestPage(String pageName) {  
    viewedPage = pageName + ".xhtml";  
}

}

Parece que funciona, pois consigo ver no Firebug o xhtml recuperado pela chamada ajax, mas quando a requisição finaliza o Layout Unit some da tela! rsrs
Se eu olhar o código fonte da página o trecho html está lá renderizado corretamente, mas não é mostrado na tela.

E outra se eu der um refresh, aí sim aparece o conteúdo, porque a viewedPage está com o valor que passei.

Só falta fazer a aparecer na tela…rsrs

O que vc acha desse método?

E sabe o por que não está aparecendo na tela?

Cara desculpe a confusão e a perguntação…mas to mesmo precisando aprender isso…rsrs!

talvez se vc der um update no id do layout todo, ele consiga fazer o update e mostrar o conteúdo (que é o que parece que está faltando)

igorvinnicius, por acaso conseguiu resolver o teu problema?

Estou com algo muito parecido, mas o meu problema está na hora de carregar, ele carrega os xhtmls, porem, quando clico na opçao do menuitem 1 ele nao carrega, quando clico no 2, ele carrega o 1, ou seja, sempre carregando o processo anterior

Se tiver alguma luz!

obrigado!

Olá, pessoal não sei se conhecem, mas entrem neste portal ai… tem muita coisa boa…
http://aprendacomigo.com.br/videos/category/java/82