Importando CSS/Imagens/JavaScript como biblioteca
Após a aplicação receber uma requisição do usuário (chamado de “request”) uma resposta (chamada de “response”) é preparada para ser enviada para o usuário.
Na resposta enviada para o usuário contém textos, diversas imagens, gifs, comandos javascript que devem ser interpretados pelo browser do usuário; imagens, gifs, javascript são conhecidos como recursos. O JSF trabalha com um componente chamado ResourceHandler para facilitar o acesso a esses recursos.
O ResourceHandler nada mais é do que a definição de uma estrutura de diretórios para facilitar a localização de cada recurso. Para mapear os esses recursos o ResourceHandler irá verificar cada pasta/arquivo presente no diretório “/WebContent/resources”. Cada pasta será tratada como se fosse uma biblioteca que fica a disposição da aplicação. Caso você tenha uma pasta “/WebContent/resources/meujavascript” o JSF terá a sua disposição uma “biblioteca” chamada “meujavascript”.
O ResourceHandler pode inclusive criar versões de cada recurso. Você poderia criar o diretório “/WebContent/resources/meujavascript” e depois “/WebContent/resources/meujavascript/1_0”, “/WebContent/resources/meujavascript/1_1”. Será utilizada pelo JSF a última versão encontrada.
Para utilizar o recurso de bibliotecas em nosso exemplo, dentro da pasta /WebContent crie uma pasta chamada “resources“. Dentro da pasta “resources” crie uma pasta chamada “css” e outra chamada “images“. Crie um arquivo chamado “estilo.css” dentro da pasta “css” e coloque uma imagem dentro da pasta “images” chamada de “imagem01″ (pode ser qualquer imagem que você escolher). A imagem abaixo mostra como deve ficar a estrutura de páginas:
O código do arquivo “estilo.css” abaixo definirá apenas como será o formato da nossa tag <h1> do HTML:
h1 {
color: blue;
text-align: left;
}
Para utilizar a biblioteca mapeada pelo ResourceHandler vamos criar uma página chamada “index.xhtml” dentro da pasta “/WebContent”. Com tag “h:outputStylesheet” do JSF é possível acessar o arquivo css de dentro da página sem precisar passar o caminho físico, mas sim informando em qual “biblioteca” se encontra o nosso arquivo css. Confira no código abaixo como ficará o código da página “index.xhtml”. Repare que no código abaixo utilizamos a tag graphicImage para exibir uma imagem; os dados informados são a biblioteca e o nome do arquivo. Tanto para o css e a imagem não foi necessário passar o caminho físico para o arquivo.
<!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://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <h:outputStylesheet library="css" name="estilo.css"/> <title>Olá</title> </h:head> <h:body> <h1>Real Madrid, Campeão!</h1> <h:graphicImage library="images" name="imagem01.png" /> </h:body> </html>
No Eclipse, vá à aba onde se encontra o servidor (aba “Servers”) e dê o start. Para acessar o projeto acesse a aplicação pelo endereço: http://localhost:8080/ProjetoJSF/faces/index.xhtml. Um texto com o estilo descrito no arquivo css e a imagem que se encontra na pasta “images” irão aparecer na página exibida. Perceba que em nenhum momento apontamos um caminho físico como “/WebContent/resources/estilo.css” para o estilo ou para a imagem.
Para se importar um arquivo javascript o conceito é o mesmo. Crie a pasta “/WebContent/resources/js” e dentro dela coloque o seu código javascript. Para importar seu arquivo para dentro da página, basta utilizar a seguinte tag: <h:outputScriptname=”meuArquivo.js” library=”js” />.
Ainda não li tudo, mas pelo que eu já vi estou achando excelente.
Você poderia fazer também um mini livro de JPA.
Marcelo, boa noite.
Já existe aqui no blog um mini livro de JPA. Existe também um chamado Consultas e Dicas só com diversas funções de Pesquisa no JPA.
Até mais.
Parabéns pelo artigo. Esclareceu muitas dúvidas. Sucesso!
Fagner, obrigado pelo apoio. =D
Excelentes artigos! Good Job!
Geverson, obrigado pelo apoio. [=