JSF Web資源是在Web應(yīng)用程序中正確呈現(xiàn)所需的資源。它包括圖像,腳本(JS)文件和任何用戶創(chuàng)建的組件庫。
JSF提供了一種存儲Web資源的標(biāo)準(zhǔn)方式。 您可以使用以下任何一種來存儲資源。
它必須存儲在Web應(yīng)用程序根目錄資源目錄的子目錄中:resources/resource-identifier
,如:resources/js
,resources/css
等等。
打包在Web應(yīng)用程序的類路徑中的資源必須位于Web應(yīng)用程序中的META-INF/resources
目錄的子目錄中:META-INF/resources/resource-identifier
。 您可以使用此文件結(jié)構(gòu)在Web應(yīng)用程序中捆綁的JAR文件中打包資源。
JSF(JavaServer Faces)運行時將以該順序查找前面列出的目錄位置中的資源。
JSF提供<h:graphicImage />
標(biāo)簽來訪問Web應(yīng)用程序中的圖片文件。 在以下示例中,首先我們創(chuàng)建了一個名為images
的資源和子文件夾。 創(chuàng)建文件夾后,我們的應(yīng)用程序結(jié)構(gòu)如下所示。
現(xiàn)在,您可以編寫如下代碼。 <h:graphicImage>
標(biāo)簽指定名為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>
在這段代碼中,我們使用兩種方式訪問圖像。第一種是使用表達(dá)式語言中的資源數(shù)組。 第二種,是通過指定庫屬性。
兩個圖像標(biāo)簽產(chǎn)生相同的輸出 -
<h:outputStylesheet>
標(biāo)簽用于訪問Web應(yīng)用程序中的CSS資源。 您必須在資源文件夾內(nèi)創(chuàng)建一個子目錄,如下所示。
在以下示例中,訪問網(wǎng)頁中的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 Yiibai JSF!</h1>
</h:body>
</html>
文件: test.css 的代碼如下所示-
h1 {
color: red;
text-align: center;
}
<h:outputScript>
標(biāo)簽用于訪問Web應(yīng)用程序中的JavaScript文件。 以下截圖顯示了項目中JavaScript文件的位置。
在這里,通過標(biāo)簽的幫助訪問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 Yiibai JSF!");
}