Sabe qual a diferença entre os três? insert include e define
<ui:define name="corpo">
<div id="conteudo">
<ui:insert name="corpo"/>
</div>
Sabe qual a diferença entre os três? insert include e define
<ui:define name="corpo">
<div id="conteudo">
<ui:insert name="corpo"/>
</div>
Segue um exemplo de outro projeto
O name que esta dento de define este exemplo <ui:define name=“conteudo”>
conteudo é o nome onde vai aparecer esse layout no template templatSistema.xhtml.
repare que no topo da pagina de exemplo produtoGrupo.xhtml esta sendo chamado o template de nome
templatSistema.xhtml.
na pagina templatSistema.xhtml. tem a tag <ui:insert name=“conteudo” /> onde aparecera
o conteudo que vc colocou dentro da tag <ui:define name=“conteudo”> da pagina produtoGrupo.xhtml.
no pagina templateSistema.xhtml tem exemplo de include
<ui:include src=“sisMenu.xhtml”/>
esse include faz aparecer dentro da pagina produtoGrupo.xhtml que chamou o template, oconteudo que esta dentro da pagina
<ui:include src="sisMenu.xhtml"/>
Pèsquise sobre exemplos de como udar facelets com prime faces para
aprender ouso em um projeto de exemplo para dominar o assunto caso nao domine ainda.mais nao é dificil
----pagina templateSistema.xhtmll —
<!DOCTYPE html> <!-- e avisado aos browses que tipo de documento ele esta prestes a carregar
No html5 voce utilizara apenas essa linha acima-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
lang="pt-br"> <!-- indica qual o idioma do texto que escrevemos -->
<h:head>
<title> <ui:insert name="titulo"/> </title>
<f:facet name="first">
</f:facet>
<link rel="stylesheet" type="text/css" href="resources/ws/styles/layoutSis.css" media="screen"/>
</h:head>
<h:body >
<section class="cssSisMenu">
<ui:include src="sisMenu.xhtml"/>
</section>
<section class="templatPrincSis">
<div style="font-size: 16px;">
<ui:insert name="tituloPag"/>
</div>
<br/>
<ui:insert name="conteudo" />
</section>
<h:form>
<!-- global="true" pode ser reutilizado em outros botoes do projeto-->
<p:confirmDialog global="true">
<p:commandButton value="Nao" icon="fa fa-remove"
styleClass="ui-confirmdialog-no"/>
<p:commandButton value="Sim" icon="fa fa-check"
styleClass="ui-confirmdialog-yes"/>
</p:confirmDialog>
</h:form>
</h:body>
</html>
-----------Pagina produtoGrupo.xhtml-------------------
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:jsf="http://xmlns.jcp.org/jsf"
template="/WEB-INF/template/templatSistema.xhtml">
<ui:define name="titulo">
Cadastro de Grupo de Produtos
</ui:define>
<ui:define name="tituloPag">
Cadastro de Grupo de Produtos
</ui:define>
<ui:define name="conteudo">
<f:metadata>
<f:viewAction action="#{produtoGrupoBean.todosGruposDeProdutos}"/>
</f:metadata>
<h:form id="frmCadProdutoGrupo">
<p:messages id="messPrincipal" closable="true">
<p:autoUpdate/>
</p:messages>
<ui:include src="produtogrupo_Pesq.xhtml"/>
<p:spacer height="10px"/>
<p:toolbar id="toolBar" rendered="#{usuarioControle.usuarioEdit.idnivelusuario == 2}">
<f:facet name="left">
<p:commandButton value="Pesquisar" icon="fa fa-search"
actionListener="#{produtoGrupoBean.pesquisar}" update="dTableProdutoGrupo messPrincipal"
process="@this gridPesquisa"
/>
<span class="ui-separator">
<span class="ui-icon ui-icon-grip-dotted-vertical" />
</span>
<p:commandButton value="Novo" icon="fa fa-plus"
actionListener="#{produtoGrupoBean.preparaNovoProdutoGrupo}"
oncomplete="PF('grupoProdutoDialogWV').show()"
update="grupoProdutoDialog" process="@this">
<p:resetInput target="grupoProdutoDialog"/>
</p:commandButton>
<span class="ui-separator">
<span class="ui-icon ui-icon-grip-dotted-vertical" />
</span>
<p:commandButton title="Editar" icon="fa fa-edit"
disabled="#{not produtoGrupoBean.produtoGrupoSelecionada}"
oncomplete="PF('grupoProdutoDialogWV').show()"
update="grupoProdutoDialog" process="@this">
<p:resetInput target="grupoProdutoDialog"/>
</p:commandButton>
<p:commandButton title="Excluir" icon="fa fa-trash"
disabled="#{not produtoGrupoBean.produtoGrupoSelecionada}"
actionListener="#{produtoGrupoBean.excluir}"
update="messPrincipal dTableProdutoGrupo toolBar"
process="@this">
<p:confirm icon="ui-icon-alert" header="Confirmação de Exclusão"
message="Posso excluir o Grupo de Produto ?"/>
</p:commandButton>
<span class="ui-separator">
<span class="ui-icon ui-icon-grip-dotted-vertical" />
</span>
<p:commandButton title="Exportar para o Excel" icon="fa fa-file-excel-o" />
<!--
<p:commandButton type="button" value="Open" icon="pi pi-folder-open" />
-->
</f:facet>
</p:toolbar>
<p:spacer height="10px"/>
<p:dataTable id="dTableProdutoGrupo" value="#{produtoGrupoBean.listaProdutoGrupo}" var="produtoGrupo"
emptyMessage="Nenhuma informação a ser exibida" paginator="true" rows="3"
paginatorPosition="bottom" selectionMode="single" selection="#{produtoGrupoBean.produtoGrupo}" rowKey="#{produtoGrupo.idprodutogrupo}">
<p:ajax event="rowSelect" update="frmCadProdutoGrupo:toolBar"/>
<p:ajax event="rowUnselect" update="frmCadProdutoGrupo:toolBar"/>
<p:column headerText="Codigo" sortBy="#{produtoGrupo.idprodutogrupo}">
<h:outputText value="#{produtoGrupo.idprodutogrupo}"/>
</p:column>
<p:column headerText="Descrição" sortBy="#{produtoGrupo.sprodutogrupo}">
<h:outputText value="#{produtoGrupo.sprodutogrupo}"/>
</p:column>
<p:column headerText="Ativo" sortBy="#{produtoGrupo.fativo}">
<h:outputText value="#{produtoGrupo.fativo}"/>
</p:column>
</p:dataTable>
<!-- resizable=false nao permiti que a dialog seja redimensionada
closeOnEscape=true fecha modal com a tecla esc
{produtoGrupoBean.produtoGrupo ne null} nao deixa panelGrid renderizaar antes a propriedade grupoEmpresa esteja instanciada obs que no botao novo tem q colocar update="grupoProdutoDialog"
defaultCommand target="commandSalvarProdutoGrupo" scope="grupoProdutoDialog. quando precionar enter aciona(executa) o comamdBottom commandSalvarProdutoGrupo como padrao e somente quando o foco estiver em algum componente dentro da Dialog grupoProdutoDialog video 4.13
-->
<p:dialog id="grupoProdutoDialog"
header="Grupo de Produto"
widgetVar="grupoProdutoDialogWV"
modal="true" resizable="false" closeOnEscape="true">
<p:messages id="messCadastro" closable="true"/>
<p:defaultCommand target="commandSalvarProdutoGrupo" scope="grupoProdutoDialog"/>
<h:panelGrid id="gridGrupoProduto" columns="2"
rendered="#{produtoGrupoBean.produtoGrupo ne null}">
<p:outputLabel value="Ativo:" for="fativo"/>
<p:selectBooleanCheckbox
id="fativo"
value="#{produtoGrupoBean.produtoGrupo.fativo}"/>
<p:outputLabel value="Grupo do Produto:" for="sprodutogrupo"/>
<p:inputText
id="sprodutogrupo"
value="#{produtoGrupoBean.produtoGrupo.sprodutogrupo}"
onkeyup="value=value.toUpperCase()"
size="36"
maxlength="60"
required="true"
requiredMessage="Nome do Grupo é obrigatório"/>
<p:outputLabel/>
<p:commandButton actionListener="#{produtoGrupoBean.salvar}"
id="commandSalvarProdutoGrupo"
value="salvar"
update="dTableProdutoGrupo messCadastro"
oncomplete="if (!args.validationFailed) PF('grupoProdutoDialogWV').hide()" process="grupoProdutoDialog"/>
</h:panelGrid>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
----Pagina pagina SisMenu.xhtml----
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:form>
<!--
<p:growl id="messages"/>
-->
<p:menubar>
<p:submenu label="Cadastro">
<p:menuitem value="Grupo de Produtos" action="produtoGrupo?faces-redirect=true" icon="pi pi-angle-double-left" />
<p:menuitem value="Marca" action="marca?faces-redirect=true" icon="pi pi-angle-double-left" />
<p:menuitem value="Tipo de Produtos" action="produtoTipo?faces-redirect=true" icon="pi pi-angle-double-right" />
<p:menuitem value="Produtos" action="produto?faces-redirect=true" icon="pi pi-angle-double-right" />
</p:submenu>
<p:submenu label="Vendas">
<p:menuitem value="Clientes" action="cliente?faces-redirect=true" icon="pi pi-angle-double-left" />
</p:submenu>
<p:menuitem value="LojaVirtual" action="principal?faces-redirect=true" />
</p:menubar>
</h:form>
</ui:composition>