Como carregar uma página xhtml dentro de uma <p:tab. JSF 2 com PrimeFaces

7 de abril de 2011 8 respostas

donny 7 de abril de 2011

Boa tarde!

Tenho uma p:tabView com várias p:tab. Dentro de cada p:tab quer carregar uma página *.xhtml. Tentei usar Facelets mas não deu certo. Quando entro na página principal não carrega as páginas *.xhtml dentro das p:tab.

Segue abaixo o código que estou usando:

inicio.xhtml:

<p:tabView effect="opacity" effectDuration="normal"  style="width:100%;">
	<p:tab title="Limite" >
		<h:panelGrid columns="1" cellpadding="10">
			 <div id="limit">
                    		<ui:insert name="limite" />
                	</div>	
		</h:panelGrid>
	</p:tab>
   ...
																
</p:tabView>

formulario.xhtml: Essa página deve ser carregada dentro da tab da página início.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">

<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="/paginas/inicio.xhtml">
	<ui:define name="limite">
		<f:view>
       ...
               </f:view>
	</ui:define>
</ui:composition>
</html>

Att,

8 Respostas

ronnytds 7 de abr. de 2011

desse jeito não vai funcionar pq da forma que vc fez com facelets, vc definiu a página inicio.xhtml como um template para o resto das páginas, então a página formulário.xhtml não vai aparecer dentro da tab da página inicio.xhtml, ela vai apenas reaproveitar o código, apenas acrescentando o que for definido dentro de ui:define.

donny 7 de abr. de 2011

Blz ronnytds! Você têm alguma sugestão de como eu poderia resolver isso?

ronnytds 7 de abr. de 2011

cara, tem algum motivo específico para vc querer carregar uma página dentro da p:tab?
tipo… pq não colocar o código dos componentes direto na
p:tab?
mas de qualquer forma vc pode criar fazer com outra tag, a tag ui:include, mais ou menos assim:

<ui:include src="formulario.xhtml"/>

lembrando que na pagina formulario.xhtml estariam apenas as tags dos componentes necessários, ou seja, a pagina formulario.xhtml não pode conter toda a estrutura de uma pagina normal, com as tags html, h:body e etc. nela vc coloca apenas os componentes que vão aparecer dentro da p:tab

donny 7 de abr. de 2011

Deixa eu explicar o pq disso:
Tenho que fazer na web uma tela do oracle que tem duas partes:
1- Uma painel com filtros
2- Um painel com 10 abas: e algumas abas tem mais abas dentro dela, ou seja, dois nível de abas, no total 18 abas. Se ele mudar algum valor de algum campo dos filtros devo atualizar todas as abas com os novos valores da pesquisa.

Att,

ronnytds 7 de abr. de 2011

entendi, então tenta ai com a ui:include e ve se resolve o que vc quer.

dsm 24 de mai. de 2012

vc resolveu com include? No meu sistema eu incluo a pagina, porem nao ocorre a acao para navegacao…

donny 24 de mai. de 2012

Aqui vai o xhtml da minha página principal, onde reúne todas as Abas. Ela está dividida em dua pares: bloco de filtros e bloco de resultados. As abas estão no bloco de resultados.

&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;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"&gt;
&lt;ui:composition template="/templates/interna.xhtml"&gt;
	&lt;ui:define name="corpo"&gt;
		&lt;f:view&gt;
			&lt;h:head&gt;
				&lt;title&gt;Empresa&lt;/title&gt;
				&lt;link type="text/css" rel="stylesheet"
					href="#{facesContext.externalContext.requestContextPath}/css/aristo/theme.css" /&gt;
			&lt;/h:head&gt;
			&lt;script language="javascript" type="text/javascript"&gt;
				function capturarTecla(event) {
					if (event.keyCode == 38) {
						document.getElementById('categoriaForm:cursor').value = event.keyCode;
					}
					if (event.keyCode == 40) {
						document.getElementById('categoriaForm:cursor').value = event.keyCode;
					}
				}
				function handleDlg1Request(xhr, status, args) {
					if (!args.validationFailed)
						dlg1.hide();
				}
				function fecharTela() {
					//alert("fechar tela");
						window.close();
					}
			&lt;/script&gt;

			&lt;h:body style="font-size: 9pt;"&gt;
				&lt;h:form id="categoriaForm"&gt;
					&lt;center&gt;
						<br />
						&lt;p:panel id="painelCadastro" style="text-align:left;width:100%;"&gt;
							&lt;h:inputHidden id="cursor" value="#{tabViewControle.cursor}"&gt;
							&lt;/h:inputHidden&gt;
							&lt;p:messages id="mensagens" globalOnly="true" /&gt;
							&lt;p:focus /&gt;
							&lt;table border="0px"&gt;
								&lt;tr&gt;
									&lt;td style="text-align: right;"&gt;
									&lt;h:outputText value="Nr. Fluxo:" /&gt;&lt;/td&gt;
									&lt;td&gt;
									&lt;h:inputText id="inputNrFluxo"
											value="#{tabViewControle.principal.id}" size="10"
											style="text-align: right; display:block;"&gt;
											&lt;f:ajax id="ajaxNrFluxo" event="keyup"
												onevent="capturarTecla(event)" render="@form"
												listener="#{tabViewControle.teclou}"
												execute=":categoriaForm:painelCadastro" /&gt;
										&lt;/h:inputText&gt;
									&lt;/td&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Data início Fluxo:" style="text-align: right;" /&gt;&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.dataAlteracaoLimite}"&gt;
											&lt;f:convertDateTime pattern="dd/MM/yyyy" /&gt;
										&lt;/h:inputText&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;h:selectOneRadio id="situacao"
											value="#{tabViewControle.principal.idSituacaoFluxo}"
											rendered="false"&gt;
											&lt;f:selectItem itemLabel="Pendente" itemValue="0" /&gt;
											&lt;f:selectItem itemLabel="Finalizado" itemValue="1" /&gt;
										&lt;/h:selectOneRadio&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;/td&gt;
									&lt;td&gt;&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Cliente:" /&gt;&lt;/td&gt;
									&lt;td colspan="1"&gt;
									&lt;h:inputText
											value="#{tabViewControle.principal.cliente.baseCliente}"
											size="10" style="text-align: right; display:block;" /&gt;&lt;/td&gt;
									&lt;td colspan="3"&gt;
									&lt;h:inputText
											value="#{tabViewControle.principal.cliente.cgcCpf}" size="3"
											style="width:5%;" /&gt; &lt;h:inputText
											value="#{tabViewControle.principal.cliente.descricao}"
											size="35" style="width:90%" /&gt;&lt;/td&gt;
									&lt;td style="text-align: right;"&gt;
									&lt;h:outputText
											value="Capital Social:" style="text-align: right;" /&gt;&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.valorCapitalSocial}"
											style="text-align: right; display:block;" /&gt;
									&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Grupo Cliente:" /&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.clienteDivisaoGerencial.grupoCliente.codigoGrupoCliente}"
											size="10" style="text-align: right; display:block;" /&gt;
									&lt;/td&gt;
									&lt;td colspan="3"&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.clienteDivisaoGerencial.grupoCliente.descricao}"
											size="15" style="width:97%;" /&gt;
									&lt;/td&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Data Ficha:" style="text-align: right;" /&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.dataFichaCliente}"&gt;
											&lt;f:convertDateTime pattern="dd/MM/yyyy" /&gt;
										&lt;/h:inputText&gt;
									&lt;/td&gt;
								&lt;/tr&gt;
								&lt;tr&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Situação Crédito:" /&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.tipoSitCreditoCli.id}"
											size="10" style="text-align: right; display:block;" /&gt;&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.tipoSitCreditoCli.descricao}"
											size="15" /&gt;&lt;/td&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Data Renovação Ficha:" /&gt;&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.clienteDivisaoGerencial.dataAnaliseRen}"&gt;
											&lt;f:convertDateTime pattern="dd/MM/yyyy" /&gt;
										&lt;/h:inputText&gt;
									&lt;/td&gt;
									&lt;td style="text-align: right;"&gt;&lt;h:outputText
											value="Fundação:" /&gt;
									&lt;/td&gt;
									&lt;td&gt;&lt;h:inputText
											value="#{tabViewControle.principal.cliente.dataFundacao}"&gt;
											&lt;f:convertDateTime pattern="dd/MM/yyyy" /&gt;
										&lt;/h:inputText&gt;
									&lt;/td&gt;
								&lt;/tr&gt;
							&lt;/table&gt;
							&lt;center&gt;
								&lt;p:commandButton id="botaoAprovar" value="Aprovar"
									rendered="#{tabViewControle.principal.botaoAprovar}"
									actionListener="#{tabViewControle.buscarAprovadores}"
									onclick="dlg1.show();" update="painelParecer"&gt;
								&lt;/p:commandButton&gt;
								&lt;p:commandButton id="botaoReprovar" value="Reprovar"
									rendered="#{tabViewControle.principal.botaoReprovar}"
									actionListener="#{tabViewControle.buscarAprovadores}"
									onclick="dlg1.show();" update="painelParecer" /&gt;
								&lt;p:commandButton id="botaoExecao" value="Exceção"
									rendered="#{tabViewControle.principal.botaoExcecao}"
									actionListener="#{tabViewControle.buscarAprovadores}"
									onclick="dlg1.show();" update="painelParecer" /&gt;
								&lt;p:commandButton id="botaoComplementar" value="Complementar"
									rendered="#{tabViewControle.principal.botaoComplementar}"
									actionListener="#{tabViewControle.buscarAprovadores}"
									onclick="dlg1.show();" update="painelParecer" /&gt;
							&lt;/center&gt;
						&lt;/p:panel&gt;

						&lt;!-- Abas da aplicacao --&gt;
						&lt;p:panel id="painelConsulta" style="text-align:left;width:100%;"&gt;
							&lt;p:tabView id="tbViewPrincipal" dynamic="true" cache="false"
								effect="opacity" effectDuration="normal"
								tabChangeListener="#{tabViewControle.onTabChange}"&gt;
								&lt;p:tab title="Limite" id="tabLimite"&gt;
									&lt;div id="divLimit"&gt;
										&lt;ui:include src="/paginas/limite/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab title="Inf. Mercado" id="tabInfMercado"&gt;
									&lt;div id="divInfMercado"&gt;
										&lt;ui:include src="/paginas/informacaoMercado/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab title="Cisp" id="tabCisp"&gt;
									&lt;div id="divCisp"&gt;
										&lt;ui:include src="/paginas/cisp/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab title="Hist. Empresa" id="tabHistoriaEmpresa"&gt;
									&lt;div id="divHistEmpresa"&gt;
										&lt;ui:include src="/paginas/historiaEmpresa/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab title="Ficha" id="tabFicha"&gt;
									&lt;div id="divFicha"&gt;
										&lt;ui:include src="/paginas/ficha/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab id="tabInfFian" title="Inf. Finan."&gt;
									&lt;div id="divInfFinan"&gt;
										&lt;ui:include
											src="/paginas/informacaoFinanceira/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab id="tabBalanco" title="Balanço"&gt;
									&lt;ui:include src="/paginas/balanco/formulario.xhtml" /&gt;
								&lt;/p:tab&gt;
								&lt;p:tab id="tabSocioGrupo" title="Sócios/Grupo"&gt;
									&lt;div id="divSocioGrupo"&gt;
										&lt;ui:include src="/paginas/socioGrupo/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab id="tabGarantia" title="Garantia"&gt;
									&lt;div id="divGarantia"&gt;
										&lt;ui:include src="/paginas/garantia/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
								&lt;p:tab id="tabParecer" title="Parecer"&gt;
									&lt;div id="divParecer"&gt;
										&lt;ui:include src="/paginas/parecer/formulario.xhtml" /&gt;
									&lt;/div&gt;
								&lt;/p:tab&gt;
							&lt;/p:tabView&gt;
						&lt;/p:panel&gt;
					&lt;/center&gt;
				&lt;/h:form&gt;
				&lt;p:dialog id="dlgParecerAprovar" header="Parecer" widgetVar="dlg1"
					showEffect="explode" hideEffect="explode" height="340" width="340"
					modal="true"&gt;
					&lt;h:form id="dialogoForm"&gt;
						&lt;p:outputPanel id="painelParecerAprovar" autoUpdate="true"&gt;
							&lt;p:messages id="msg" showDetail="true" showSummary="false" /&gt;
							&lt;h:outputText value="Descrição:"
								rendered="#{tabViewControle.campoDescricaoParecer}" /&gt;
							<br></br>
							&lt;h:inputTextarea id="parecer"
								rendered="#{tabViewControle.campoDescricaoParecer}"
								value="#{tabViewControle.principal.descricaoParecer}" rows="10"
								style="width:90%" required="true"
								requiredMessage="Favor informar um parecer no campo 'Descrição'"&gt;
							&lt;/h:inputTextarea&gt;
							<br></br>
							&lt;h:outputText value="Selecionar Próximo Aprovador:"
								rendered="#{!empty tabViewControle.listaUsuarios}" /&gt;
							<br></br>
							&lt;h:selectOneMenu id="idUserAprovador"
								value="#{tabViewControle.principal.usuario}"
								rendered="#{!empty tabViewControle.listaUsuarios}"
								required="true"
								requiredMessage="Favor selecionar próximo aprovador."&gt;
								&lt;f:selectItems value="#{tabViewControle.listaUsuarios}" /&gt;
							&lt;/h:selectOneMenu&gt;
							<br></br>
							<br></br>
							&lt;center&gt;
								&lt;p:commandButton value="Confirmar" ajax="true"
									actionListener="#{tabViewControle.confirmaParecer}"
									update="categoriaForm, dialogoForm"
									oncomplete="handleDlg1Request(xhr, status, args)" /&gt;
								&lt;p:commandButton value="Cancelar"
									action="#{tabViewControle.cancelar}" onclick="closed();"
									update="categoriaForm, dialogoForm" /&gt;
							&lt;/center&gt;
						&lt;/p:outputPanel&gt;
					&lt;/h:form&gt;
				&lt;/p:dialog&gt;
			&lt;/h:body&gt;
		&lt;/f:view&gt;
	&lt;/ui:define&gt;
&lt;/ui:composition&gt;
&lt;/html&gt;

Esse foi o meu primeiro projeto web. Espero que ajude.

andreluiz_sh 10 de jul. de 2012

eu também estou com este problema, mas para mim o conteúdo deve ser adicionado de forma dinamica a medida que o usuario vai clicando nos menus vai aparecendo as abas…

alguem teria um ideia de como posso fazer isso

estou utilizando jsf + primefaces

Criado 7 de abril de 2011

Ultima resposta 10 de jul. de 2012

Respostas 8

Participantes 4

8 Respostas

Topicos relacionados