在JSF <h:outputStylesheet>,<h:outputScript>和<h:graphicImage>组件具有library属性.这是什么以及如何使用它?Web上有很多示例,它们使用如下公共内容/文件类型css,js以及img(或image)作为库名称,具体取决于所使用的标记:
<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="script.js" />
<h:graphicImage library="img" name="logo.png" />
Run Code Online (Sandbox Code Playgroud)
它有用吗?library这些示例中的值似乎只是重复标记名称已经表示的内容.对于<h:outputStylesheet>它来说,基于标签名称已经很明显它代表了一个"CSS库".与以下内容有什么不同,它们的工作方式相同?
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />
Run Code Online (Sandbox Code Playgroud)
此外,生成的HTML输出有点不同.给定URL模式的上下文路径/contextname和FacesServlet映射*.xhtml,前者生成以下HTML,其库名称为请求参数:
<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/style.css.xhtml?ln=css" />
<script type="text/javascript" src="/contextname/javax.faces.resource/script.js.xhtml?ln=js"></script>
<img src="/contextname/javax.faces.resource/logo.png.xhtml?ln=img" alt="" />
Run Code Online (Sandbox Code Playgroud)
而后者在URI的路径中生成以下带有库名的HTML:
<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml" alt="" />
Run Code Online (Sandbox Code Playgroud)
后一种方法在事后看来也比前一种方法更有意义.该library属性究竟有用吗?
我已经完成了关于Facelets模板的教程.
现在我尝试创建一个与模板不在同一目录中的页面.我有页面样式的问题,因为样式用相对路径引用,如下所示:
<link rel="stylesheet" href="style_resource_path.css" />
Run Code Online (Sandbox Code Playgroud)
我可以通过以下开头使用绝对引用/:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
Run Code Online (Sandbox Code Playgroud)
但是,当我将应用程序移动到不同的环境时,这将给我带来麻烦.
所以我想知道在Facelets中引用CSS(以及JS和图像)资源的最佳方法是什么?
我试图在我的JSF应用程序中使用Font Awesome图标.我按照入门说明并将以下内容添加到我的视图部分,取得了一些成功<h:head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet" />
Run Code Online (Sandbox Code Playgroud)
当我使用这个icon-home类时,这给了我一个很好的主页图标:

但是,我不想依赖引导服务器来提供Font Awesome资源,所以我试图将这些与我的战争捆绑在一起,并配置我的视图以使用捆绑的资源.
我正在使用webjars项目创建的预制JAR.我的pom具有以下依赖性:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>3.2.1</version>
</dependency>
Run Code Online (Sandbox Code Playgroud)
这将JAR放在我的WAR的WEB-INF/lib目录中.JAR结构的相关部分是:
META-INF
- MANIFEST.MF
+ maven
- resources
- webjars
- font-awesome
- 3.2.1
- css
- font-awesome.css
- *other css files*
- font
- *font files*
Run Code Online (Sandbox Code Playgroud)
我尝试了以下方法在我的项目中包含图标:
<h:outputStylesheet library="webjars"
name="font-awesome/3.2.1/css/font-awesome.css" />
Run Code Online (Sandbox Code Playgroud)
但是,这会将以前工作的主页图标呈现为:

我的浏览器(Chrome)在控制台中显示以下错误(域/端口/上下文根已更改以保护无辜;):
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found)
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found)
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)
Run Code Online (Sandbox Code Playgroud)
所以看起来虽然正确解析了css文件,但是找不到包含css文件引用的字体的文件.我已在css文件中检查了这些引用,它们是:
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: …Run Code Online (Sandbox Code Playgroud) jsf ×3
jsf-2 ×2
resources ×2
css ×1
facelets ×1
font-awesome ×1
maven ×1
templating ×1
webjars ×1