JSF Web资源是在Web应用程序中正确呈现所需的资源。它包括图像,脚本(JS)文件和任何用户创建的组件库。
JSF提供了一种存储Web资源的标准方式。 您可以使用以下任何一种来存储资源。
它必须存储在Web应用程序根目录资源目录的子目录中:resources/resource-identifier
,如:resources/js
,resources/css
等等。
打包在Web应用程序的类路径中的资源必须位于Web应用程序中的META-INF/resources
目录的子目录中:META-INF/resources/resource-identifier
。 您可以使用此文件结构在Web应用程序中捆绑的JAR文件中打包资源。
JSF(JavaServer Faces)运行时将以该顺序查找前面列出的目录位置中的资源。
JSF提供<h:graphicImage />
标签来访问Web应用程序中的图片文件。 在以下示例中,首先我们创建了一个名为images
的资源和子文件夹。 创建文件夹后,我们的应用程序结构如下所示。
现在,您可以编写如下代码。 <h:graphicImage>
标签指定名为hello.gif
的图像在目录 pages/resources/images
中。
<h:body> <h:form id="user-form" enctype="multipart/form-data"> <h:graphicImage value="#{resource['images:hello.gif']}"/> <h:graphicImage library="images" name="hello.gif"/> </h:form> </h:body>
在这段代码中,我们使用两种方式访问图像。第一种是使用表达式语言中的资源数组。 第二种,是通过指定库属性。
两个图像标签产生相同的输出 -
<h:outputStylesheet>
标签用于访问Web应用程序中的CSS资源。 您必须在资源文件夹内创建一个子目录,如下所示。
在以下示例中,访问网页中的test.css
文件。文件: index.xhtml 的代码如下所示-
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Web Resources Example</title> <h:outputStylesheet library="css" name="test.css"/> </h:head> <h:body> <h1>Welcome to The zyiz JSF!</h1> </h:body> </html>
文件: test.css 的代码如下所示-
h1 { color: red; text-align: center; }
<h:outputScript>
标签用于访问Web应用程序中的JavaScript文件。 以下截图显示了项目中JavaScript文件的位置。
在这里,通过标签的帮助访问JavaScript文件。文件: index.xhtml 的代码如下所示-
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Web Resources Example</title> <h:outputScript library="js" name="test.js"/> </h:head> <h:body> </h:body> </html>
文件: test.js 的代码如下所示-
window.onload = function(){ alert("Welcome to The zyiz JSF!"); }