在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属性究竟有用吗?
我正在使用以下源代码结构的Java EE Web应用程序:
src/main/java <-- multiple packages containing java classes
src/test/java <-- multiple packages containing JUnit tests
src/main/resources <-- includes properties files for textual messages
src/main/webapp/resources <-- includes CSS, images and all Javascript files
src/main/webapp/WEB-INF
src/main/webapp/WEB-INF/tags
src/main/webapp/WEB-INF/views
Run Code Online (Sandbox Code Playgroud)
我感兴趣的是WEB-INF- 它包含web.xml用于设置servlet的XML文件,Spring bean连接上下文以及JSP标记和视图.
我试图理解什么约束/定义这个结构.例如JSP文件总是必须在WEB-INF其他地方或者它们可能在其他地方吗?还有其他可能进入的地方WEB-INF吗?维基百科的WAR文件条目提到classes了Java类和libJAR文件 - 除了其他源文件位置之外,还不确定我是否完全掌握了这些文件.
我已经完成了关于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和图像)资源的最佳方法是什么?
对不起,如果没有正确询问问题.图像在struts项目中显示得很好,但在JSF2项目中没有.所有的CSS和按钮都渲染得很好except image that has url in css.
文件夹结构
resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png
Run Code Online (Sandbox Code Playgroud)
bootstrap.min.css
background-image: url("../img/glyphicons-halflings.png");
Run Code Online (Sandbox Code Playgroud)
1 -
如果我使用的<h:outputStylesheet library="css" name="bootstrap.min.css"/>是背景图像,则生成的url http://localhost:8000/img/glyphicons-halflings.png因此图像无法加载.它应该是http://localhost:8000/resources/img/glyphicons-halflings.png
2 -如果我使用<link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/>比
Firefox - > Firebug - > Net tab {资源添加多次}
http://localhost:8000/resources/resources/img/glyphicons-halflings.png
Run Code Online (Sandbox Code Playgroud)
不知道如何加载css中的图像并应用于类.
将EDIT图标显示为链接以单击下一页.
<h:outputLink value="edit.xhtml" >
<i class="icon-edit" ></i>
<f:param name="id" value="#{person.id}"/>
</h:outputLink>
Run Code Online (Sandbox Code Playgroud)

我多年来一直在使用前缀映射,并决定切换到后缀映射,只是为了/faces真正摆脱url.在我挖洞之前,我只是想检查一下我是否朝着正确的方向前进,因为有一些意想不到的事情正在发生.我改变了这个:
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
Run Code Online (Sandbox Code Playgroud)
对此:
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
Run Code Online (Sandbox Code Playgroud)
然后我看到所有内容FacesServlet都.xhtml
附加到它上面,因此浏览器正在请求background.png.xhtml文件,
style.css.xhtml文件 - 这是正确的吗?我认为它被称为后缀映射,但它看起来有些凌乱,我试图说服自己这是要走的路.
在我引用URI的CSS文件中,我还必须附加.xhtml:
background-image: url(images/background.png.xhtml);
Run Code Online (Sandbox Code Playgroud)
然后我看到BalusC的一篇帖子提供了一个解决方案,可以防止资源下载而无需通过FacesServlet:
<security-constraint>
<display-name>Restrict raw XHTML docs</display-name>
<web-resource-collection>
<web-resource-name>XHTML</web-resource-name>
<url-pattern>*.xhtml</url-pattern>
</web-resource-collection>
<auth-constraint/>
</security-constraint>
Run Code Online (Sandbox Code Playgroud)
当我添加这个时,只有真实.xhtml文件加载到页面上,所有其他资源(尽管已经.xhtml附加)不显示.
我想知道的是:
这是否适用.xhtml于一切正常(对不起,如果这几年最愚蠢的问题)
为什么'限制原始xhtml文档'安全约束会阻止加载CSS,JavaScript和图像等资源?
感谢您的任何反馈.我在Glassfish 3.1上使用Mojarra 2.1.2.
根据JSF 2.0规范,有三种方法可以使用h:graphicImage,具体取决于JSF生成HTML标记的"src"属性的方式:
<h:graphicImage value="#{resource['images:next.gif']}"/>
<h:graphicImage library="images" name="next.gif"/>
<h:graphicImage url="/resources/images/next.gif"/>
Run Code Online (Sandbox Code Playgroud)
规范声明前两个应该呈现完全相同的标记.在我的JSF实现(MyFaces 2.0.2)中,这里是生成的输出HTML:
<img src="/AppName/faces/javax.faces.resource/next.gif?ln=images">
<img src="/AppName/faces/javax.faces.resource/next.gif?ln=images">
<img src="/AppName/resources/images/next.gif">
Run Code Online (Sandbox Code Playgroud)
所以,如果我使用(名称,库)或(值)属性,那么图像总是会被JSF的servlet流式传输到客户端.如果我使用(url)属性,我可以直接链接到没有servlet干预的资源.
对我来说,第二种方法 - 直接服务器URL到资源,更快.
在什么情况下使用第一种方法 - 指定(名称,库)或(值)属性?
简单地说,我试图通过FireBug在生成的HTML中查看组件的名称,之后我在JSF项目中手动定义的css中更改它,但无法覆盖PrimeFaces的CSS定义.提前感谢任何想法.
我是JavaServer Faces的新手,我正在尝试执行以下操作:
模板文件"/template.xhtml"使用加载样式表
<h:outputStylesheet library="style" name="default.css" />
Run Code Online (Sandbox Code Playgroud)
在那个CSS文件中我想链接到这样的图像:
... background-image: url(LINK_TO_MY_IMAGE) ...
Run Code Online (Sandbox Code Playgroud)
如何引用该图像(我应该写入LINK_TO_MY_IMAGE)?我已经尝试使用直接链接(/contextroot/resources/images/foo.png)和JSF资源表示法(/contextroot/faces/javax.faces.resource/foo.png?ln=images).
我的目录结构:
/resources/images => contains image files
/resources/style/default.css
/WEB-INF/web.xml
/WEB-INF/faces-config.xml
/template.xhtml
/demoPage.xhtml => uses the template.xhtml
Run Code Online (Sandbox Code Playgroud)
所以,到目前为止,我的问题是我总是得到一个"404 Not Found"来加载图像.
我正在JBoss AS 6.1.0.Final中使用JSF2.1和RichFaces 4.1.现在,我专注于重写URL.在尝试了不同的方法之后,我决定坚持使用PrettyFaces,因为它非常直观易用(并在几分钟内完成).
有一个问题很难.脚本/ css的相对链接搞砸了,因为URL已更改,相对路径最终在404.我可以使用绝对路径但这会强制我更改许多页面并在页面的源代码中公开应用程序的结构.
我正在考虑一个暂时的解决方法:给予支持bean管理这些相对链接的不同级别的责任,但重新使用bean使这成为一个微妙的问题.
我的问题是,在重写URL时是否有定义的方法或最佳实践来管理这些相对路径?
编辑
h:outputStylesheet和h:outputScript就像一个魅力.剩下的就是解决以相对方式引用图像的CSS的一个小问题.采取这种结构:
-------/resources
|
---_img
|
---_css
|
---_js
Run Code Online (Sandbox Code Playgroud)
文件夹中的CSS文件_css引用image1.png位于_img具有相对路径的文件夹中的图像../_img/image1.png.问题是这最终会在404中找到,因为它找不到图像/myApp/javax.faces.resource/_img/image1.png.
更改每../对#{request.contextPath}/resources的CSSS里面似乎工作得很好,但我不知道是否有更好的方式来做到这一点.相对路径方法不起作用对我来说似乎很奇怪.
jsf-2 ×7
jsf ×6
resources ×4
css ×3
facelets ×2
image ×1
java ×1
java-ee ×1
prettyfaces ×1
primefaces ×1
servlets ×1
templating ×1
war ×1
web-inf ×1