programação para web i desenvolvendo templates com facelets · 1. o cascading style sheets (css)...
TRANSCRIPT
Programação para Web I
Desenvolvendo templates
com Facelets
Prof. Eder de Lima Lacerda
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
