JSF/Facelets:使用 <h:outputStylesheet> 标记无法识别 CSS 文件

Posted

技术标签:

【中文标题】JSF/Facelets:使用 <h:outputStylesheet> 标记无法识别 CSS 文件【英文标题】:JSF/Facelets : CSS file is not being recognized using <h:outputStylesheet> tag 【发布时间】:2012-08-30 04:43:07 【问题描述】:

我正在开发一个使用 JSF/Facelets 的项目。我想在我的 View Xhtml 上做一些 CSS 更改,但是当我在我的 Tomcat 服务器中部署我的 Web 应用程序时没有任何反应。我尝试了很多技巧,但我得到了相同的结果。

无论如何,这是我的“styles.css”:

body  width: 750px; 

#header 

width:              100%;
font-size:          36px;
font-weight:        bold;
line-height:        48px;
background-color:   navy;
color:              white;


#footer

width:              100%;
font-weight:        bold;
background-color:   navy;
color:              white;

这是主模板“Template.html”,包括“Header.html”和“Footer.html”,我在其中使用标签放置了“styles.css”:

<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<h:outputStylesheet name="css/styles.css" />
    <!-- i've also tried this one, using the "library" attribute -->
    <!--
     <h:outputStylesheet library="css" name="styles.css" />
    -->
</head>
<h:body>
<h:panelGroup id="page" layout="block">

    <h:panelGroup id="header" layout="block">
        <ui:insert name="header">
            <ui:include src="Header.html" />
        </ui:insert>
    </h:panelGroup>

    <h:panelGroup id="container" layout="block">
        <h:panelGroup id="content" layout="block">
            <ui:insert name="content">CONTENT</ui:insert>
        </h:panelGroup>
    </h:panelGroup>

    <h:panelGroup id="footer" layout="block">
        <ui:insert name="footer">
            <ui:include src="Footer.html" />
        </ui:insert>
    </h:panelGroup>

</h:panelGroup>

</h:body>
</html>

Anf 最后是我的“Main.xhtml”,其中包含模板“Template.html”:

 <?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">
 <ui:composition 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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" template="Template.html">
<h:body>
    <ui:define name="content">
        <h:form>
            <h:inputText title="inputText"></h:inputText>
            <h:commandButton value="OK"></h:commandButton>
        </h:form>
    </ui:define>
</h:body>
 </ui:composition>

提前致谢:)

【问题讨论】:

您能否在浏览器中验证您的 CSS 是否已加载。 在浏览器中右键单击页面并查看源代码和/或在 Chrome/IE9/Firebug 中按 F12 并检查“网络”部分。 【参考方案1】:

WebContent

下添加resources文件夹

内部资源创建css文件夹

然后像这样访问文件

h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" 在您未添加的h:head 部分下

【讨论】:

我投了反对票,因为我认为这是垃圾邮件,这与 BalusC 的答案相同,删除了单词,3 年后才回答。【参考方案2】:

&lt;h:outputStylesheet&gt;(和&lt;h:outputScript&gt;)需要&lt;h:head&gt;,但你有&lt;head&gt;。相应地修复它。

<h:head>
    <h:outputStylesheet name="css/styles.css" />
</h:head>

此外,您需要确保将css/styles.css 文件放在公共网络内容的/resources 子文件夹中。

WebContent
 |-- resources
 |    `-- css
 |         `-- styles.css
 :

至于您尝试使用library 属性,请注意这一点,在这种情况下使用library="css" 并不完全正确。另见:What is the JSF resource library for and how should it be used?

【讨论】:

是的,我之前检查过这个,我已经把我的 styles.css 放在你说的同一路径中:WebContent/resources/css/styles.css 在树中,不应该是WebContent/resources/css/styles.css 而不是WebContent/resources/css/style.css 如果是合成,在ui:composition标签内添加css

以上是关于JSF/Facelets:使用 <h:outputStylesheet> 标记无法识别 CSS 文件的主要内容,如果未能解决你的问题,请参考以下文章

JSF/Facelets/JSTL 条件显示最佳实践

如何在 Eclipse 中查看 jsf/facelets 元素的文档

JSF/Facelets:为啥将 JSF/Facelets 与 HTML 标签混合不是一个好主意?

找不到 http://java.sun.com/jsf/facelets 的标记库描述符

如何迭代List 并渲染JSF Facelets中的每个项目

java中的Web开发存在哪些Spring+JSF/Facelets的替代品?