Programação para Web I Desenvolvendo templates com Facelets. Prof. Eder de Lima Lacerda

Transcrição

1 Programação para Web I Desenvolvendo templates com Facelets Prof. Eder de Lima Lacerda ederlacerda@gmail.com

2 HOJE FALAREMOS SOBRE 1. Veremos como funciona a tecnologia de Facelets do Java Server Faces

3

4 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.

5 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.

6 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.

7 1. No seu projeto, dentro de WebContent crie uma nova pasta chamada resources e dentro uma pasta chamada css; 1. Feito isso, clique com o botao direito sobre a pasta css, escolha a opção new > other O arquivo deverá se chamar estilos.css;

8 1. Vamos criar uma classe no css que irá tratar do titulo da página;

9 1. Vamos definir agora a formatação do componente cujo id será cabecalho;

10 1. Vamos definir um estilo para a barra que ficará a esquerda onde estará nosso menu;

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

12 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...

13 1. Crie uma nova pasta detro de WebContent chamada templates; 2. Crie uma nova pagina xhtml dentro da pasta templates chamada menu.xhtml;

14 1. Crie uma nova pagina xhtml dentro da pasta templates chamada cabecalho.xhtml;

15 1. Crie uma nova pagina xhtml dentro da pasta templates chamada template.xhtml;

16 Facelets

17 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;

18 1. Crie dentro de webcontent uma nova pagina xhtml chamada index.xhtml;

19 Facelets

20 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.

21 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;

22 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;

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

24 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;

25 1. Vamos adicionar no menu uma chamada para esta página de componentes que acabamos de criar;

26 1. Vamos adicionar no menu uma chamada para esta página de componentes que acabamos de criar;

27 1. Agora vamos criar um novo componente chamado mensagem.xhtml;

28 1. Agora vamos adicionar uma chamada ao componente mensagem na pagina meuscomponentes.xhtml;

29 Facelets

30 1. Utilizando menu do PrimeFaces;

31 Facelets

32 Adicionando temas do PrimeFaces 1. No site é 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.

33 Adicionando temas do PrimeFaces 1. Primeiramente devemos fazer o download de um dos diversos temas disponibilizados pelo primefaces. Para isso devemos visitar o site 2. Entre os diversos temas disponíveis temos: afterdark, afternoon, afterwork, black-tie, bluesky, bootstrap, cupertino, flick, hot-sneaks, pepper-grinder, themes-project, etc.

34 Adicionando temas do PrimeFaces 1. Adicionar o.jar baixado em nossa pasta lib;

35 Adicionando temas do PrimeFaces 1. Agora só adicionar o tema no arquivo web.xml;

36 Adicionando temas do PrimeFaces 1. Ao executar;

37 Prof. Eder Lacerda Obrigado ;)