programação para web i desenvolvendo templates com facelets · 1. o cascading style sheets (css)...

Programação para Web I

Desenvolvendo templates

com Facelets

Prof. Eder de Lima Lacerda

ederlacerda@gmail.com

HOJE

FALAREMOS

SOBRE

1. Veremos como funciona a

tecnologia de Facelets do

Java Server Faces

Facelets

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

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

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

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;

1. Vamos criar uma classe no css que irá tratar do titulo da

página;

Facelets

Criando Template

1. Vamos definir agora a formatação do componente cujo id

será cabecalho;

Facelets

Criando Template

1. Vamos definir um estilo para a barra que ficará a esquerda

onde estará nosso menu;

Facelets

Criando Template

1. E para o conteudo também definiremos um estilo no css;

Facelets

Criando Template

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

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

1. Crie uma nova pagina xhtml dentro da pasta templates

chamada cabecalho.xhtml;

Facelets

Criando Template

1. Crie uma nova pagina xhtml dentro da pasta templates

chamada template.xhtml;

Facelets

Criando Template

Facelets

Criando Template

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

1. Crie dentro de webContent uma nova pagina xhtml chamada

index.xhtml;

Facelets

Criando Template

Facelets

Criando Template

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

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

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

1. A página deverá conter a seguinte implementação;

Facelets

Criando Template

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

1. Vamos adicionar no menu uma chamada para esta página de

componentes que acabamos de criar;

Facelets

Criando Template

1. Vamos adicionar no menu uma chamada para esta página de

componentes que acabamos de criar;

Facelets

Criando Template

1. Agora vamos criar um novo componente chamado

mensagem.xhtml;

Facelets

Criando Template

1. Agora vamos adicionar uma chamada ao componente

mensagem na pagina meusComponentes.xhtml;

Facelets

Criando Template

Facelets

Criando Template

1. Utilizando menu do PrimeFaces;

Facelets

Criando Template

Facelets

Criando Template

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

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

1. Adicionar o .jar baixado em nossa pasta lib;

Facelets

Adicionando temas do PrimeFaces

1. Agora só adicionar o tema no arquivo web.xml;

Facelets

Adicionando temas do PrimeFaces

1. Ao executar;

Facelets

Adicionando temas do PrimeFaces

Obrigado ;)

Prof. Eder Lacerda

ederlacerda@gmail.com