ti-enxame.com

Como fazer referência ao recurso de imagem CSS/JS/no modelo Facelets?

Eu fiz tutorial sobre modelos de facelets

Agora eu tentei criar uma página que não está no mesmo diretório do modelo. Eu tenho problemas com o estilo da página, porque os estilos são referenciados com o caminho relativo assim:

<link rel="stylesheet" href="style_resource_path.css" />

Eu posso usar referências absolutas começando com /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

Mas isso me trará problemas quando eu estiver movendo o aplicativo para um contexto diferente.

Então, eu estou querendo saber qual é a melhor maneira de referenciar recursos de CSS (e JS e imagem) no Facelets?

50
kravemir

Suponha que você esteja executando os subdiretórios do aplicativo da web. Você pode tentar assim:

 <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

O link '${facesContext.externalContext.requestContextPath}/' ajudará você a retornar imediatamente à raiz do contexto.

Em URLs relativas, a barra principal/aponta para a raiz do domínio. Portanto, se a página JSF for solicitada por exemplo por http://example.com/context/page.jsf , o URL CSS apontará absolutamente para http://example.com/styles/decoration.css . Para conhecer o URL relativo válido, você precisa conhecer a URL absoluta da página JSF e do arquivo CSS e extrair um do outro.

Vamos adivinhar que seu arquivo CSS está realmente localizado em http://example.com/context/styles/decoration.css , então você precisa remover a barra inicial para que seja relativo ao contexto atual (aquele da página.jsp):

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
7
Abimaran Kugathasan

Essas respostas me ajudaram a corrigir o mesmo problema. Embora meu problema fosse mais complexo desde que eu estava usando SASS e GULP.

Eu tive que mudar (por favor, note o "\" na frente do #. Provavelmente efeito colateral do gole:

 <h:outputStylesheet library="my_theme" name="css/default.css"/>  

 background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");
2
Mircea Stanciu

O resourcehandlers.UnmappedResourceHandler ajuda a mapear recursos JSF em um padrão de URL de /javax.faces.resource/*.

Para mim, estas duas configurações xml em faces-config.xml: Org.omnifaces.resourcehandler.UnmappedResourceHandler

e no web.xml:

<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

ajudou com css e imagens. 

0
Behruz Zaripov