kra*_*mir 53 resources jsf facelets templating jsf-2
我已经完成了关于Facelets模板的教程.
现在我尝试创建一个与模板不在同一目录中的页面.我有页面样式的问题,因为样式用相对路径引用,如下所示:
<link rel="stylesheet" href="style_resource_path.css" />
我可以通过以下开头使用绝对引用/:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
但是,当我将应用程序移动到不同的环境时,这将给我带来麻烦.
所以我想知道在Facelets中引用CSS(以及JS和图像)资源的最佳方法是什么？
Bal*_*usC 110
正确的JSF 2.x的方式使用<h:outputStylesheet>,<h:outputScript>并且<h:graphicImage>具有name相对于Web应用程序的路径指/resources的文件夹.这样您就不必像在JSF 1.x中那样担心上下文路径.另请参见如何在JSF 1.x中包含相对于上下文路径的CSS？
掉落的CSS/JS /图像文件在/resources公共web内容的文件夹,如下(只需创建一个如果在同一水平不存在/WEB-INF和/META-INF).
WebContent
|-- resources
| |-- css
| | |-- other.css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- images
| |-- background.png
| |-- favicon.ico
| `-- logo.png
|-- META-INF
| `-- MANIFEST.MF
|-- WEB-INF
| |-- faces-config.xml
| `-- web.xml
|-- page.xhtml
:
在Maven的情况下,它应该在/main/webapp/resources,因此不是 /main/resources(那些是Java资源(properties/xml/text/config文件),它们必须最终在运行时类路径中,而不是在webcontent中).另请参阅Maven和JSF webapp结构,其中正确放置JSF资源.
最终,这些资源可以在任何地方获得,无需摆弄相对路径:
<h:head>
...
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
</h:head>
<h:body>
...
<h:graphicImage name="images/logo.png" />
...
</h:body>
该name属性必须表示相对于/resources文件夹的完整路径.它不需要从头开始/.你不会需要library你不喜欢发展这是由多个web应用共享PrimeFaces或通用模块JAR文件组件库,只要属性.
您可以在<h:outputStylesheet>任何地方,也可以在<ui:define>模板客户端中引用,而无需额外的<h:head>.它将通过<h:head>主模板的组件自动最终生成<head>.
<ui:define name="...">
<h:outputStylesheet name="css/style.css" />
...
</ui:define>
您也<h:outputScript>可以在任何地方引用它,但默认情况下它将完全在您声明它的HTML中.如果您希望它以<head>via 结尾<h:head>,则添加target="head"属性.
<ui:define name="...">
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
或者,如果你希望它在年底结束<body>(右前</body>,使得例如window.onload和$(document).ready()通过等是没有必要的)<h:body>,然后添加target="body"属性.
<ui:define name="...">
<h:outputScript name="js/script.js" target="body" />
...
</ui:define>
HeadRenderer如果你正在使用PrimeFaces,HeadRenderer它将如上所述弄乱默认的<h:head>脚本排序.您基本上被迫通过PrimeFaces强制执行订单<f:facet name="first|middle|last">,这可能会导致混乱和"无法模板"的代码.您可能需要按照此答案中的说明关闭它.
您甚至可以将资源打包到JAR文件中.另请参阅具有共享代码的多个JSF项目的结构.
您可以在EL中使用#{resource}映射让JSF基本上打印资源URL,/context/javax.faces.resource/folder/file.ext.xhtml?ln=library以便您可以将其用作CSS背景图像或favicon.唯一的要求是CSS文件本身也应该作为JSF资源提供,否则EL表达式将不会被评估.另请参见如何将JSF图像资源引用为CSS背景图像URL.
.some {
background-image: url("#{resource['images/background.png']}");
}
这是一个@import例子.
@import url("#{resource['css/other.css']}");
这是favicon的例子.另请参阅将favicon添加到JSF项目并在<link>中引用它.
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
加载第三方CSS文件通过#这反过来参考字体和/或图像可能需要进行修改,以使用\在上一节中描述的表达式,否则<h:outputStylesheet>将被安装在为了能够服务于使用JSF这些需求.另请参阅ao Bootsfaces页面显示在浏览器中没有任何样式和如何使用JSF的Font Awesome 4.x CSS文件？浏览器找不到字体文件.
如果您打算通过将整个#{resource}文件夹移动到公共访问中来隐藏资源UnmappedResourceHandler,那么您可以从JSF 2.2中选择性地通过新的/resources上下文参数更改webcontent-relative路径,如下所示:
.some {
background-image: url("\#{resource['images/background.png']}");
}
在较旧的JSF版本中,这是不可能的.
假设您正在运行Web应用程序的子目录中.你可以尝试这样:
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
该'${facesContext.externalContext.requestContextPath}/'链接将帮助您立即返回上下文的根目录.
在相对URL中,前导斜杠/指向域根.因此,如果例如http://example.com/context/page.jsf请求JSF页面,则CSS URL绝对指向http://example.com/styles/decoration.css.要知道有效的相对URL,您需要知道JSF页面和CSS文件的绝对URL,并从另一个中提取一个.
假设您的CSS文件实际位于http://example.com/context/styles/decoration.css,那么您需要删除前导斜杠,使其相对于当前上下文(页面之一). JSP):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
| 归档时间： |
|
| 查看次数： |
62151 次 |
| 最近记录： |