Как получить доступ к файлу CSS в JSF 2.0 - PullRequest
Новая
       21

Как получить доступ к файлу CSS в JSF 2.0

3 голосов
/ 27 ноября 2011

У меня проблемы с получением доступа к файлу css.Моя структура каталогов: 

/resources/style/style.css
/resources/faces/template/baseLayout.xhtml
/WEB-INF/web.xml
/WEB-INF/faces-config.xml

Я попробовал 2 способа получить доступ со страницы шаблона baseLayout.xhtml:

1) 

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

2) <h:outputStylesheet library="style" name="style.css" />

Но оба варианта не работают. Отображение сервлета в Web.xml 

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>

baseLayout.xhtml 

<?xml version="1.0" encoding="UTF-8"?>

<!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:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="style" name="style.css"></h:outputStylesheet>
    </h:head>

<body id="newsManagement">
    <ui:composition>
        <div id="allContent">
            <div id="header">
                <ui:insert name="header">
                    <ui:include src="header.xhtml"></ui:include>
                </ui:insert>
            </div>
            <div id="menu">
                <ui:insert name="menu">
                    <ui:include src="menu.xhtml"></ui:include>
                </ui:insert>
            </div>
            <div id="body">
                <span id="newsLoc"> 
                    <span id="newsLocWord">
                        <h:outputText value="#{msg['body.news']}"> </h:outputText>          
                    </span>
                    <h:outputText value="#{msg['body.signs']}"> </h:outputText> 
                </span>
                <ui:insert name="body" />
            </div>
        </div>
    </ui:composition>
</body>
</html>

index.xhtml 

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
    <head>

    </head>
    <body>
        <ui:composition template="/resources/faces/template/baseLayout.xhtml"> </ui:composition>

    </body>
</html>

Может ли кто-нибудь мне помочь?

1 Ответ

4 голосов
/ 28 ноября 2011

Исходя из комментариев, ваша конкретная проблема в конечном итоге сводится к:

<h:outputStylesheet> ничего не выводит в вывод HTML.

Учитывая тот факт, что у вас есть <h:head>, единственной причиной может быть ошибка в композиции шаблона. Это может произойти, например, когда вы поместили <h:outputStylesheet> вне <ui:define> из <ui:composition> с template. Не видя ваших реальных композиций, трудно точно определить истинную причину вашей проблемы, но следующий исходный пример должен дать вам новое понимание и решить для вас.

Мастер шаблона, /WEB-INF/template.xhtml: 

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
        <h:outputStylesheet name="style/template.css" />
    </h:head>
    <h:body>
        <div id="header">Header</div>
        <div id="menu">Menu</div>
        <div id="content"><ui:insert name="content">Default content</ui:insert></div>
        <div id="footer">Footer</div>
    </h:body>
</html>

Обратите внимание, что оно относится к /resources/style/template.css внутри <h:head>, что, таким образом, относится ко всем клиентам шаблона, использующим этот мастер-шаблон.

Шаблон клиента, /page.xhtml: 

<ui:composition template="/WEB-INF/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="title">
        New page title here
    </ui:define>
    <ui:define name="content">
        <h:outputStylesheet name="style/page.css" />
        <h1>New content here</h1>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

Обратите внимание, что это относится к /resources/style/page.css внутри <ui:define>, что в любом случае автоматически приведет к сгенерированному <head>. Вы не должны иметь <h:head> в шаблонном клиенте.

(Да, я использовал разные имена для файлов CSS, но это просто для того, чтобы показать, где именно вы должны были разместить компоненты <h:outputStylesheet>. Да, я удалил атрибут library, потому что это должно фактически представлять "theme", а не только тип контента, такой как "css", "js" и т. д., приведенные выше примеры предполагают использование библиотеки / темы по умолчанию)

Обновление : как вы уже догадались, вы действительно неправильно используете композицию шаблонов. Ваша проблема вызвана наличием <ui:composition> в <body> основного шаблона. Вам нужно удалить это. <ui:composition> определяет корневой компонент композиции шаблона. Все, что находится за пределами <ui:composition>, будет игнорироваться на выходе.

Смотри также:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...