Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS)...
Transcript of Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS)...
![Page 1: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/1.jpg)
Programação para Web I
Desenvolvendo templates
com Facelets
Prof. Eder de Lima Lacerda
![Page 2: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/2.jpg)
HOJE
FALAREMOS
SOBRE
1. Veremos como funciona a
tecnologia de Facelets do
Java Server Faces
![Page 3: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/3.jpg)
Facelets
![Page 4: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/4.jpg)
1. Facelets foi desenvolvido originalmente no JSF 1.x como
alternativa ao handler de visualização baseado em JSP.
2. Ele possui varias tags para criação de templates, que serão o
assunto desta aula.
Facelets
Criando Template
![Page 5: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/5.jpg)
1. Será criado um template, com cabeçalho, menu e área para o
conteúdo, com duas áreas editáveis, o titulo da pagina e o
conteúdo.
2. Utilizaremos CSS para definição do layout e veremos como
definir as regiões editáveis, e como fazer a chamada ao css
criado no template, definindo o visual das regiões da pagina.
Facelets
Criando Template
![Page 6: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/6.jpg)
1. O cascading Style Sheets (CSS) é uma "folha de estilo"
composta por “camadas” e utilizada para definir a
apresentação (aparência) em páginas da internet que adotam
para o seu desenvolvimento linguagens de marcação (como
XML, HTML e XHTML).
2. O CSS define como serão exibidos os elementos contidos no
código de uma página da internet e sua maior vantagem é
efetuar a separação entre o formato e o conteúdo de um
documento.
Facelets
Criando Template
![Page 7: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/7.jpg)
1. No seu projeto, dentro de WebContent crie uma nova pasta
chamada resources e dentro uma pasta chamada css;
Facelets
Criando Template
1. Feito isso, clique com o
botao direito sobre a
pasta css, escolha a
opção new > other...
2. O arquivo deverá se
chamar estilos.css;
![Page 8: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/8.jpg)
1. Vamos criar uma classe no css que irá tratar do titulo da
página;
Facelets
Criando Template
![Page 9: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/9.jpg)
1. Vamos definir agora a formatação do componente cujo id
será cabecalho;
Facelets
Criando Template
![Page 10: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/10.jpg)
1. Vamos definir um estilo para a barra que ficará a esquerda
onde estará nosso menu;
Facelets
Criando Template
![Page 11: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/11.jpg)
1. E para o conteudo também definiremos um estilo no css;
Facelets
Criando Template
![Page 12: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/12.jpg)
1. Agora vamos criar alguns arquivos para suportar as
definições do css, primeiramente dois arquivos um para o
menu e um para o cabeçalho;
2. E uma arquivo que será o template com as áreas editáveis,
teremos área editável para o titulo da página, para o
conteúdo etc...
Facelets
Criando Template
![Page 13: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/13.jpg)
1. Crie uma nova pasta detro de WebContent chamada
templates;
2. Crie uma nova pagina xhtml dentro da pasta templates
chamada menu.xhtml;
Facelets
Criando Template
![Page 14: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/14.jpg)
1. Crie uma nova pagina xhtml dentro da pasta templates
chamada cabecalho.xhtml;
Facelets
Criando Template
![Page 15: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/15.jpg)
1. Crie uma nova pagina xhtml dentro da pasta templates
chamada template.xhtml;
Facelets
Criando Template
![Page 16: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/16.jpg)
Facelets
Criando Template
![Page 17: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/17.jpg)
1. Agora vamos criar paginas utilizando nosso template;
2. Primeiramente temos que criar um novo index, entao
renomeie seu index.xhtml atual para index_old.xhtml;
Facelets
Criando Template
![Page 18: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/18.jpg)
1. Crie dentro de webContent uma nova pagina xhtml chamada
index.xhtml;
Facelets
Criando Template
![Page 19: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/19.jpg)
Facelets
Criando Template
![Page 20: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/20.jpg)
1. Veremos agora como criar tags customizadas, na forma de
componentes compostos (composite components).
2. Componentes compostos são componentes que podemos
criar utilizando os componentes já existentes do Java Server
Faces. Assim podemos criar a nossa própria biblioteca de
componentes, possibilitando reuso e facilitando a
manutenção de um sistema.
3. Nas versões 1.x do JSF, esta tarefa era extremamente
complexa, porem nas versões a partir da 2.0, se tornou
extremamente simples criarmos nossos próprios
componentes.
Facelets
Criando Template
![Page 21: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/21.jpg)
1. O primeiro passo é criar uma pasta em webContent dentro de
resources onde vamos colocar nossos componentes;
2. Crie essa pasta com o nome de unic;
Facelets
Criando Template
![Page 22: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/22.jpg)
1. Vamos criar nosso primeiro componente, dentro de unic crie
um novo arquivo xhtml chamado
meuPrimeiroComponente.xhtml;
2. É importante lembrar de
3. informar que esse arquivo
4. é um JSF Composite
5. Component;
Facelets
Criando Template
![Page 23: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/23.jpg)
1. A página deverá conter a seguinte implementação;
Facelets
Criando Template
![Page 24: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/24.jpg)
1. Agora vamos criar na raiz de webContent uma pagina xhtml
comum para adicionarmos nossos componentes utilizando o
template da aula passada, a página irá se chamar
meusComponentes.xhtml;
Facelets
Criando Template
![Page 25: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/25.jpg)
1. Vamos adicionar no menu uma chamada para esta página de
componentes que acabamos de criar;
Facelets
Criando Template
![Page 26: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/26.jpg)
1. Vamos adicionar no menu uma chamada para esta página de
componentes que acabamos de criar;
Facelets
Criando Template
![Page 27: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/27.jpg)
1. Agora vamos criar um novo componente chamado
mensagem.xhtml;
Facelets
Criando Template
![Page 28: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/28.jpg)
1. Agora vamos adicionar uma chamada ao componente
mensagem na pagina meusComponentes.xhtml;
Facelets
Criando Template
![Page 29: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/29.jpg)
Facelets
Criando Template
![Page 30: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/30.jpg)
1. Utilizando menu do PrimeFaces;
Facelets
Criando Template
![Page 31: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/31.jpg)
Facelets
Criando Template
![Page 32: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/32.jpg)
1. No site http://primefaces.org/themes é possível ver alguns
exemplos de temas que podemos aplicar em nosso software,
nesta versão que usamos podemos utilizar os temas da
sessão COMMUNITY.
Facelets
Adicionando temas do PrimeFaces
![Page 33: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/33.jpg)
1. Primeiramente devemos fazer o download de um dos
diversos temas disponibilizados pelo primefaces. Para isso
devemos visitar o site
http://repository.primefaces.org/org/primefaces/themes/.
2. Entre os diversos temas disponíveis temos: afterdark,
afternoon, afterwork, black-tie, bluesky, bootstrap, cupertino,
flick, hot-sneaks, pepper-grinder, themes-project, etc.
Facelets
Adicionando temas do PrimeFaces
![Page 34: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/34.jpg)
1. Adicionar o .jar baixado em nossa pasta lib;
Facelets
Adicionando temas do PrimeFaces
![Page 35: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/35.jpg)
1. Agora só adicionar o tema no arquivo web.xml;
Facelets
Adicionando temas do PrimeFaces
![Page 36: Programação para Web I Desenvolvendo templates com Facelets · 1. O cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação](https://reader033.fdocumentos.tips/reader033/viewer/2022043017/5f396111e669e55a7176a92d/html5/thumbnails/36.jpg)
1. Ao executar;
Facelets
Adicionando temas do PrimeFaces