个性化阅读
专注于IT技术分析

JSF Web资源

点击下载

本文概述

JSF Web资源是在Web应用程序中正确呈现所需的资源。它包括图像, 脚本文件和任何用户创建的组件库。

JSF提供了一种存储Web资源的标准方法。你可以使用以下任何一种来存储资源。

  • 它必须存储在Web应用程序根目录下资源目录的子目录中:resources / resource-identifier。
  • Web应用程序的类路径中打包的资源必须位于Web应用程序内META-INF / resources目录的子目录中:META-INF / resources / resource-identifier。你可以使用此文件结构将资源打包到Web应用程序中捆绑的JAR文件中。

JavaServer Faces运行时将按上述顺序在前面列出的位置中查找资源。


JSF Web资源示例:访问图像文件

JSF提供<h:graphicImage />标记来访问Web应用程序中的Image。在下面的示例中, 首先我们创建了一个资源和一个名为images的子文件夹。创建文件夹后, 我们的应用程序结构如下所示。

JSF Web资源1

现在, 你可以像下面这样编写代码。 <h:graphicImage>标记指定名为hello.gif的图像在目录网页/资源/图像中。

// index.xhtml

<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>

在这段代码中, 我们通过两种方式访问​​图像。一种是使用表达语言中的资源数组。其次, 通过指定库属性。

输出:

两个图像标签均产生相同的输出。

JSF Web资源2

JSF Web资源示例:访问CSS文件

<h:outputStylesheet>标记用于访问Web应用程序中的CSS资源。你必须在资源文件夹内创建一个子目录, 如下所示。

JSF Web资源3

在以下示例中, 我们正在访问网页中的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 srcmini!</h1>
</h:body>
</html>

// test.css

h1 {
color: red;
text-align: center;
}

输出:

JSF Web资源4

JSF Web资源示例:访问JavaScript文件

<h:outputScript>标记用于访问Web应用程序中的JavaScript文件。以下屏幕快照显示了JavaScript文件在项目中的位置。

JSF Web资源5

在这里, 我们正在借助标签访问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 JavaScript");
}

输出:

JSF Web资源6

赞(0)
未经允许不得转载:srcmini » JSF Web资源

评论 抢沙发

评论前必须登录!