•  08-07-2019
  •  | 
  •  

Pergunta

O que é a sintaxe para adicionar o arquivo CSS externo para jsf?

Tentei tanto ajuda ways.Didn't.

1. 

<head>
<style type="text/css">
    @import url("/styles/decoration.css");
</style>
</head>

2. 

<head>
    <link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
Foi útil?

Solução

Eu acho que BalusC pode ter sua resposta.

No entanto, gostaria de acrescentar alguns pontos adicionais:

Suponha que você está executando o nos sub-diretórios da aplicação web. Como a minha experiência, você pode querer tentar o seguinte: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

O link '${facesContext.externalContext.requestContextPath}/' irá ajudá-lo a voltar imediatamente para a raiz do contexto.

Editar : Removido / a partir 'href="/${facesContext.ex...'. Se o aplicativo é executado no contexto de raiz, os CSS URL começa com // e os navegadores não conseguiu encontrar o CSS, uma vez que é interpretado como http://css/style.css.

Outras dicas

Eu nunca usei o primeiro, mas o segundo é sintaticamente válido e deve tecnicamente trabalho. Se ele não funciona, então o URL relativo no atributo href é simplesmente errado.

Em URL do parente, os principais barra / aponta para a raiz do domínio. Então, se a página JSF é, por exemplo solicitado pelo http://example.com/context/page.jsf, o URL CSS será absolutamente apontam para http://example.com/styles/decoration.css. Para saber a URL relativa válido, você precisa saber a URL absoluta de ambos página do JSF e o arquivo CSS e extrair o um do outro.

Let suposição de que o arquivo CSS é realmente localizado na http://example.com/context/styles/decoration.css, então você precisa remover a barra à esquerda para que ele é relativo ao atual de contexto (o da page.jsp): 

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

O método JSF 2.0 atualizado é um pouco mais arrumado. Em vez de: 

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>

Agora você fazer isso: 

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

e o recurso de estilo deve ser colocado em resources\css. Onde os recursos está no mesmo nível que o WEB-INF.

Eu acho que o problema Sergionni é duas vezes.

Em primeiro lugar, é verdade que a raiz chamada relativa é, como BalusC disse, de fato domínio relativo, assim, no exemplo é relativo ao http://example.com/ e não http://example.com/context/.

Então, você deve especificar 

<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />

BTW BalusC, parabéns, esta é a primeira vez que vejo esse explicou corretamente! Lutei muito para descobrir isso.

Mas, se você quiser simplificar e sugerir: 

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

assumindo que o dir estilo é uma sibbling da sua página atual, então você pode ter o segundo problema:

Está, então, para o método de URL relativa e, eu você veio a esta página por um atacante e não um redirecionamento, o navegador pode ser enganado e não é capaz de seguir o caminho relativo.

Para resolver este segundo problema, você deve adicionar o seguinte: 

<head>
    <base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />

O elemento de base deve preceder qualquer link.

No comando base, você diga a seu browser onde você está realmente.

Hope isso ajuda.

E BTW outra coisa bizarra neste mundo jsf wondeful:

a ligação de uma página para seu modelo facelet, a raiz ligação relativa é, neste momento, incluindo o contexto assim: 

<ui:composition template="/layouts/layout.xhtml">

este links realmente http://example.com/context/layouts/layout.xhtml

e não para http://example.com/layouts/layout.xhtml como para <a> ou <link>.

Jean-Marie Galliot

Tente o código abaixo para importar o css na sua page.It jsf vai funcionar com certeza. 

<style media="screen" type="text/css">

  @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"

</style>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top