如何在 JSF 2.0 中访问文件 css答案

【问题标题】：How to get access to file css in JSF 2.0如何在 JSF 2.0 中访问文件 css
【发布时间】：2012-01-07 09:15:20
【问题描述】：

我无法访问文件 css。我的目录结构：

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

我尝试了两种从模板页面 baseLayout.xhtml 获取访问权限的方法：

<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 映射

<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>

有人可以帮我吗？

【问题讨论】：

路径看起来不错。您的问题是在其他地方引起的。显然 CSS 根本没有部署。首先尝试在 webbrowser 中通过其直接 URL 打开 CSS 文件。
我可以毫无问题地通过其直接 URL 在 webbrowser 中打开 CSS 文件
网址是什么？ <h:outputStylesheet> 生成的 HTML 输出是什么？
"localhost:8082/SecondProject/resources/style/…> 没有生成任何内容。标签为空
<h:outputStylesheet> 生成的 HTML 输出是什么？当你调用http://localhost:8082/SecondProject/javax.faces.resource/style.css.xhtml?ln=style 时你会得到什么？编辑：啊，<head> 是空的。你在模板中使用<h:head> 吗？（这并不能解释<link> 不起作用，也许这又是另一个原因）。

标签： java css jsf jsf-2

【解决方案1】：

根据 cmets，您的具体问题最终归结为：

<h:outputStylesheet> 不会在 HTML 输出中呈现任何内容。

考虑到您确实有<h:head>，唯一的原因可能是模板组合中的错误。例如，当您将<h:outputStylesheet> 放在<ui:define> 的<ui:define> 和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>

请注意，它在<h:head> 中引用/resources/style/template.css，因此适用于使用此主模板的所有模板客户端。

模板客户端/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>

请注意，它在<ui:define> 中引用/resources/style/page.css，无论如何都会自动生成<head>。模板客户端中不应该有<h:head>。

（是的，我为 CSS 文件使用了不同的名称，但这只是为了显示您应该将 <h:outputStylesheet> 组件放在哪里。是的，我删除了 library 属性，因为它实际上应该代表一个“主题”，不仅仅是“css”、“js”等内容类型，上面的示例假定“默认”库/主题）

更新：正如猜测的那样，您确实使用了不正确的模板组合。您的问题是由于主模板的<body> 中有<ui:composition> 引起的。您需要删除它。 <ui:composition> 定义模板组合的根组件。 <ui:composition> 之外的任何内容都将在输出中被忽略。

另见：

How to include another XHTML in XHTML using JSF 2.0 Facelets?

【讨论】：

我怎样才能把我的页面扔掉，让你看到它？
您可以编辑您的问题以包括尽可能小的缩减但复制'n'paste'n'runnable sn-ps，但我建议只使用上述模板示例创建一个游乐场项目。如果它适合您，那么将相同的方法移植到您的实际项目中。至少，<h:outputStylesheet>（或其他任何东西）应该不放在外部<ui:define>甚至<ui:composition>。
好的，我改变问题的描述
您确实在接近模板错误。您需要从 baseLayout.xhtml 中删除 <ui:composition> 才能使其正常工作。 <ui:composition> 之外的任何内容都被忽略。有关正确用法，请参阅我的答案中的示例。（可选）还清理您的模板客户端 index.xhtml 以删除 <ui:compositon> 之外的所有 HTML，无论如何都会被忽略。
我发现了我的错误。非常感谢