Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 4: Criando o template com Facelets.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 4: Criando o template com Facelets.

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Nessa parte do nosso tutorial vamos criar o template para o nosso sistema, quando usamos template criado pelo Facelets não precisamos adicionar em todas a páginas o mesmo componente que queremos que fique sempre visível,  exemplo o header com os menus.

Páginas do tutorial.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 1: Introdução.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 2: Criando o banco de dados.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 3: Criando o projeto com JSF no Maven.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 4: Criando o template com Facelets.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 5: Desenvolvendo a autenticação do sistema.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 6: Desenvolvendo cadastro de pessoa.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 7: Desenvolvendo cadastro via upload de arquivo XML.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 8: Desenvolvendo consulta com PrimeFaces dataTable.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 9: Formatando LocalDateTime.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 10: Editando um registro.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 11: Excluindo um registro.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 12: Consulta com Carousel PrimeFaces.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 13: Consulta com Gráfico PrimeFaces.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 14: Exportando arquivo XML com fileDownload e Jdom.

Criando o Template.

No diretório webapp do nosso projeto vamos criar uma pasta com o nome de template.

22

Agora vamos clicar com o botão direito sobre a pasta template e vamos até New -> Html File.

23

Na tela que foi aberta vamos informar o nome do arquivo como header.xhtml e depois vamos clicar em Next.

Atenção: devemos colocar a extensão das nossas páginas como xhtml, pois foi a extensão que definimos no web.xml para o Faces Servlet.

24

Agora vamos selecionar New Facelet Header e vamos clicar em Finish.

25

Agora vamos deixar o código do nosso header.xhtml igual o código abaixo, no código abaixo estamos criando os menus da nossa aplicação com o componente menubar do PrimeFaces.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html 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">
 
	<h:form>
 
		<p:menubar>
			<p:menuitem value="Home" icon="ui-icon-home" />
			<p:menuitem value="Cadastro" icon="ui-icon-document" />
			<p:menuitem value="Consulta" icon="ui-icon-document" />
			<p:menuitem value="Consulta por Carousel" icon="ui-icon-document" />
			<p:menuitem value="Gráfico tipo Pessoa" icon="ui-icon-document" />
			<p:menuitem value="Exportar XML Pessoa" icon="ui-icon-document" />
 
 
		<f:facet name="options">            
            	        <p:commandButton value="Logout" icon="ui-icon-extlink"/>
        	</f:facet>
		</p:menubar>
 
	</h:form>
 
</html>

Abaixo podemos ver a imagem do nosso arquivo criado e com o código adicionado.

Agora vamos adicionar outro arquivo .xhtml na pasta template, para isso siga os mesmos passos que foram feitos para criação do header.xhtml, crie um arquivo com o nome de footer.xhtml, essa parte do template vai ficar na parte inferior das nossas páginas, depois de adicionar o arquivo vamos adicionar o código abaixo.

1
2
3
4
5
6
7
<html>
<body>
<div style="text-align: center;">
http://www.ciceroednilson.com.br
</div>
</body>
</html>

Na imagem abaixo podemos ver como ficou o nosso arquivo foolter.xhtml.

Agora vamos criar o componente principal do nosso template, nele vamos deixar fixo os arquivos header.xhtml e footer.xhtml, e também vamos criar a parte que vai ser substituída por cada página que implementar o nosso template, então vamos clicar com o botão direito sobre a pasta template e vamos até New -> Html File.

Na tela que foi aberta vamos colocar o nome do nosso arquivo como layoutBase.xhtml e clicar em Next.

28

Agora vamos selecionar New Facelet Template e clicar em Finish.

29

Agora vamos deixar o nosso arquivo layoutBase.xhtml com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
 
<body>
 
<h:head>
 
 
</h:head>
 
 
<div id="header">
    <ui:include src="header.xhtml"/>
</div>
 
<div id="content" style="margin-top:5%;" >
  <ui:insert name="content">    	
  </ui:insert>
</div>
 
<div id="footer">      	
	<ui:include src="footer.xhtml"/>  
</div>
 
</body>
 
</html>

Podemos ver no código acima na linha 16 que incluímos o nosso arquivo header.xhtml e na linha 25 incluímos o arquivo footer.xhtml, na linha 20 temos a tag ui:insert que vamos usar para adicionar as nossas páginas em tempo de execução.

Agora na pasta webapp vamos adicionar uma pasta com o nome de resources, e nessa pasta vamos adicionar duas pastas, uma com o nome de css e outra de imagens.

Agora no diretório css vamos adicionar um arquivo com o nome de default.css, depois vamos adicionar o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*tamanho da fonte dos componentes do primefaces*/
.ui-widget {  
    font-size: 12px !important;  
} 
 
html,
body {
   margin:0;
   padding:0;
   height:100%;   
}
#content {
 
   min-height:93%;
   position:relative;
}
#header {
   padding:0px;
}
#body {
 
   padding:10px;
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:20px;  
   background:#BDBDBD;
}

Agora vamos voltar ao nosso arquivo layoutBase.xhtml e na tag h:head vamos adicionar a linha de código abaixo.

1
 <h:outputStylesheet library="css" name="default.css"/>

Podemos perceber que não colocamos o caminho completo do nosso arquivo css, pois quando usamos a pasta resources precisamos apenas informar a biblioteca e o arquivo que vai ser usado, veja como ficou nosso arquivo depois de alterado na imagem abaixo.

Agora em webapp vamos criar um diretório com o nome de sistema, nesse diretório vamos adicionar as páginas que vão precisar ter um usuário logado no sistema para ter acesso.

Agora no diretório sistema vamos criar um arquivo .xhtml com o nome de home.xhtml, para isso vamos clicar com o botão direito sobre o diretório sistema e vamos até New-> Html File.

Na tela que foi aberta informe o nome do arquivo e click em Next.

34

Agora em templates vamos selecionar New Facelet Composition Page e clicar em Finish.

Agora vamos deixar o código da nossa página home.xhtml com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core">
 
 
<ui:composition template="/template/layoutBase.xhtml">
 
	<ui:define name="content">
 
	    Sistema para cadastro de pessoas
 
	</ui:define>
 
</ui:composition>
</html>

Podemos ver no código acima na linha 10 que estamos fazendo referência ao nosso template que criamos, e na linha 12 estamos adicionando o código da nossa página que vai ser inserido na tag ui:insert name=”content” do arquivo layoutBase.xhtml.

Pronto, já temos o nosso template pronto e a página inicial do nosso sistema, então vamos realizar o deploy da nossa aplicação para ver se está tudo funcionando, vamos clicar com o botão direito sobre o nosso projeto e vamos até Run As -> Run on Server.

Na tela que foi aberta basta selecionat o Tomcat e clicar em Finish.

Depois de publicar a nossa aplicação no servidor vamos abrir um browser e acessar a url abaixo.

URL: http://localhost:8081/Appjsf/sistema/home.xhtml.

Atenção: na url que coloquei estou usando a porta 8081, a porta default que vem no Tomcat é a 8080.

É isso ai amigos, nessa parte do nosso tutorial montamos o template que vamos usar em nosso projeto, na próxima parte do nosso tutorial vamos desenvolver a parte de autenticação do nosso sistema.

Comentários

Name of author

Name: ciceroednilson@gmail.com

16 thoughts on “Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 4: Criando o template com Facelets.

  • Olá,
    Estou seguindo o tutorial(passo-a-passo) e aqui, no momento de rodar o template no browser, encontrei o seguinte erro:

    HTTP Status 404 – /index.xhtml Not Found in ExternalContext as a Resource

    Poderias por favor me dizer onde estou errando?(sou iniciante em java).

    Por outra, este é o melhor tutorial de JSF que já encontrei em toda a internet. Parabéns!

    Reply
    • ciceroednilson@gmail.com Post author

      Obrigado por visitar o blog Manuel,

      Esse erro pode ser por conta de várias coisas, na última parte do meu tutorial tem o código fonte dessa aplicação, faz o download e tenta verificar se tem alguma coisa diferente no projeto, se resolver posta o problema para ajudarmos outros amigos.

      Reply
  • Leonardo Souza Faria

    Coloque todo o diretório, ex: /WEB-INF/template/layoutBase.xhtml ao invés de /layoutBase.xhtml
    Olhe também se a classe está com o mesmo nome, lembrando de olhar o espaçamento caso você copiou daqui pro seu ECLIPSE. Aqui deu esse problema por causa de um espaço e também por não especificar toda a URL.
    Abraço

    Reply
  • Excelente! 😀

    Reply
    • ciceroednilson@gmail.com Post author

      Obrigado Alysson, não deixe de visitar o blog, sempre que posso estou postando novos tutoriais.

      Reply
  • Douglas Eleuterio Ferreira

    Problema no Tomcat.

    Boa tarde professor.
    Obrigado pelo post explicadissimo.
    Estou com problema no tomcat, já busquei em tantos lugares mas não consigo uma solução.

    Quando chego no passo de rodar a aplicação, o tomcat não sobe.
    Consigo inicializa-lo na mão, fora do Eclipse usando o $ sh startup.sh
    Porém quanto tento subir pelo projeto não funciona.

    Tenho outros projetos no netbeans que consigo que fucione, creio que seja alguma coisa que ficou errado, já voltei e refiz todos os passos, porém o erro persiste.

    Estou usando seu projeto para deixa-lo como base para todos os meus projetos futuros.
    Inclusive estou usando o Git para documentar e acompanhar salvar o projeto.
    Estou enviando o Endereço, caso consiga um tempo para me ajudar ficarei agradecido de mais.

    Abraço

    https://github.com/DouglasEleuterio/ProjetoPadraoJavaWeb.git

    Reply
    • ciceroednilson@gmail.com Post author

      Ola Douglas,

      Qual é o erro apresentando no log da ferramenta? Se você já resolveu poderia postar no comentário para ajudar outros leitores?

      Abraços,
      Cícero Ednilson

      Reply
  • Estou com o seguinte erro na hora de executar, segue abaixo:

    HTTP Status 404 – /Appjsf/
    type Status report
    message /Appjsf/
    description The requested resource is not available.
    Apache Tomcat/8.0.36

    O que pode ser ?

    Outra duvida, no pom.xml, a tag:
    war
    Está com vermelho com a mensagem -> web.xml missing and is set to true.

    Abç.

    Reply
  • Galera,seguinte: tanto no tomcat 8 como no 8.5 está inicializando normal o server, mas na hora de ir no browser e digitar o endereço, vem o seguinte erro:

    HTTP Status 404 – Not Found
    Type Status Report
    Message /Appjsf/sistema/home.xhtml
    Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
    Apache Tomcat/8.5.16

    já mudei o caminho mas continou como mesmo problema, o que será que pode ser hem?

    Grato desde já. Abraços!!!

    Reply
    • ciceroednilson@gmail.com Post author

      Alessandro,

      Teria que dar uma olhada na sua aplicação, 404 pode ser varias coisas!

      Reply
      • Realmente Cicero, mas felizmente consegui aqui resolver o problema, simplesmente baixei a IDE STS(Spring Tool Suite) que já vem com o server “Pivotal tc Server Developer Edition v3.2” e rodou perfeitamente o projeto.

        Sou muito fã do ecossistema Spring, e essa IDE pra pessoas como eu que estou aprendendo é uma mão na roda, pois vem tudo praticamente configurado. Agora posso continuar :) Obrigado pela atenção. Abraço. E vamos que vamos :)

        Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×