Внешний CSS для JSF - PullRequest
Новая
       24

Внешний CSS для JSF

12 голосов
/ 29 ноября 2009

Что такое синтаксис для добавления внешнего файла CSS в jsf?

Пробовал в обе стороны. Не помогло.

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>

Ответы [ 5 ]

11 голосов
/ 29 ноября 2009

Полагаю, у BalusC может быть ваш ответ.

Однако я бы хотел добавить несколько дополнительных пунктов:

Предположим, что вы работаете в подкаталогах веб-приложения. Как показывает мой опыт, вы можете попробовать это: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

Ссылка '${facesContext.externalContext.requestContextPath}/' поможет вам немедленно вернуться к корню контекста.

РЕДАКТИРОВАТЬ : Удалено начиная с / из 'href="/${facesContext.ex...'. Если приложение выполняется в корневом контексте, URL-адрес CSS начинается с //, и браузеры не могут найти CSS, поскольку он интерпретируется как http://css/style.css.

7 голосов
/ 29 ноября 2009

Я никогда не использовал первое, но второе синтаксически допустимо и должно работать технически. Если это не работает, то относительный URL в атрибуте href просто неверен.

В относительных URL-адресах косая черта / указывает на корень домена. Так, если страница JSF, например, запрашивается http://example.com/context/page.jsf, URL-адрес CSS будет абсолютно указывать на http://example.com/styles/decoration.css. Чтобы узнать действительный относительный URL-адрес, необходимо знать абсолютный URL-адрес как страницы JSF, так и CSS-файла и извлечь один из другого.

Предположим, что ваш CSS-файл действительно расположен в http://example.com/context/styles/decoration.css, тогда вам нужно удалить начальную косую черту, чтобы она относилась к текущему контексту (одному из page.jsp): 

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
5 голосов
/ 28 июня 2012

Обновленный метод JSF 2.0 немного опрятнее. Вместо: 

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

теперь вы делаете это: 

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

и ресурс таблицы стилей должен быть размещен в resources\css. Где ресурсы находятся на том же уровне, что и WEB-INF.

3 голосов
/ 16 января 2010

Я думаю, что проблема Серджони двоякая.

Во-первых, верно, что так называемый корневой родственник, как сказал BalusC, фактически относительный домен, поэтому в данном примере это относительное значение http://example.com/, а не http://example.com/context/.

Таким образом, вы должны указать 

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

Кстати, BalusC, поздравляю, я впервые вижу, что это правильно объяснено! Я изо всех сил пытался обнаружить это.

Но, если вы хотите упростить и предложить: 

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

Если предположить, что стиль dir является родственным элементом вашей текущей страницы, то у вас может возникнуть вторая проблема:

Затем вы используете метод относительного URL, и, если вы пришли на эту страницу с помощью переадресации, а не перенаправления, ваш браузер может быть обманут и не может следовать по относительному пути.

Чтобы решить эту вторую проблему, вы должны добавить это: 

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

Базовый элемент должен предшествовать любой ссылке.

С помощью базовой команды вы сообщаете браузеру, где вы на самом деле.

Надеюсь, это поможет.

И, кстати, еще одна странная вещь в этом чудесном мире JSF:

для ссылки со страницы на шаблон лицевой стороны, корневая относительная ссылка IS, на этот раз, включая контекст, так: 

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

это действительно ссылка на http://example.com/context/layouts/layout.xhtml

, а не http://example.com/layouts/layout.xhtml, как для <a> или <link>.

Жан-Мари Галлио

1 голос
/ 21 февраля 2011

Попробуйте код ниже, чтобы импортировать CSS на страницу JSF. Это будет работать точно. 

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

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

</style>
...