Introdução

Uma boa prática para o desenvolvimento de aplicações web é a utilização do padrão MVC (Model-View-Controller) onde a aplicação (e suas responsabilidades) é separada entre seu domínio (Model), sua apresentação (View) e como as ações de entrada do usuário, através da View, refletem no domínio (Controller).

No mundo Java, existem algumas centenas (ou milhares) de frameworks para desenvolvimento web que seguem esse padrão, entre os mais conhecidos estão o Apache Struts, o Spring e o JavaServer Faces (JSF). Para entender melhor a diferença entre eles, sugiro a leitura do artigo “Entenda os mvcs e os frameworks action e component based” que encontra-se nas referências. Entre algumas dessas diferenças, encontra-se a maneira como os recursos (css, javascript, imagens, etc.) são carregados por eles para a camada de visão (a View do MVC). Aí ocorreu um problema muito chato comigo ao desenvolver aplicações utilizando o JSF 2.0.

Problema

Ao utilizar o padrão do JSF 2.0 para gerar a camada de visão (arquivos .xhtml), simplesmente as imagens de fundo ou imagens carregadas pelos arquivos CSS não apareciam! Pensei que fosse algum problema com meus arquivos, mas ao utilizar o Twitter Bootstrap em outro projeto, framework front-end para desenvolvimento de páginas web, verifiquei que o mesmo problema continuava. Mesmo seguindo os padrões de desenvolvimento do JSF (colocar todos os recursos dentro de uma pasta /resource, separando-os em pastas de acordo com seu tipo), as imagens nunca eram carregadas!

Solução

Em seus arquivos CSS, sempre que for utilizar uma imagem através deles, simplesmente troque:

url("../images/caminhoParaOArquivo/arquivo.png");

por:

url("#{facesContext.externalContext.requestContextPath}/caminhoParaOArquivo/arquivo.png");

onde caminhoParaOArquivo/arquivo.png é o caminho onde está o arquivo da imagem. Em um projeto JSF 2.0, geralmente fica “/resources/images/nomeDoArquivo.png“.

Essa mudança faz-se necessária devido ao funcionamento do ciclo de vida do JSF, como visto aqui.

Referências:

MVC

JavaServer Faces

Outras

Anúncios