鍍金池/ 教程/ HTML/ JSF Web資源
JSF數(shù)據(jù)表(h:dataTable)添加刪除
JSF <h:commandLink>標(biāo)簽
JSF應(yīng)用程序入門示例
JSF數(shù)據(jù)表(ui:repeat)創(chuàng)建表
JSF列表框
JSF數(shù)據(jù)表(h:dataTable)DataModel排序數(shù)據(jù)
JSF復(fù)合組件
JSF <h:inputText>標(biāo)簽
JSF表單組合框
JSF <h:messages>標(biāo)簽
JSF <h:message>標(biāo)簽
JSF轉(zhuǎn)換日期時間
JSF JDBC連接
JSF <h:inputHidden>標(biāo)簽
JSF多選列表框
JSF <h:inputSecret>標(biāo)簽
JSF自定義轉(zhuǎn)換器
JSF <f:ajax>標(biāo)簽
JSF生命周期
JSF可重定位資源
JSFJSF用戶界面組件模型
JSF <h:attribute>標(biāo)簽
JSF驗證器標(biāo)簽
JSF驗證字符串長度
JSF轉(zhuǎn)換器標(biāo)簽
JSF托管bean(Managed Bean)
JSF值變化的事件
JSF UI組件示例
JSF MySQL CURD實例
JSF數(shù)據(jù)表(h:dataTable)排序數(shù)據(jù)
JSF <h:graphicImage>標(biāo)簽
JSF <f:convertNumber>標(biāo)簽
JSF教程
JSF托管Bean
JSF輸出腳本
JSF <h:outputText>標(biāo)簽
JSF操作事件
JSF驗證正則表達(dá)式
JSF數(shù)據(jù)表(h:dataTable)行號
JSF <h:setPropertyActionListener>標(biāo)簽
JSF注入托管bean實例
JSF <h:commandButton>標(biāo)簽
JSF Web資源
JSF <h:inputFile>標(biāo)簽
JSF驗證浮點數(shù)值范圍
JSF Facelets視圖
JSF是什么?
JSF Facelets模板
JSF的特性(特點)
JSF自定義驗證器類
JSF單選按鈕
JSF輸出樣式
JSF數(shù)據(jù)表(h:dataTable)更新數(shù)據(jù)
JSF HTML5友好標(biāo)記
JSF表單復(fù)選框(CheckBox)示例
JSF <h:form>標(biāo)簽
JSF Facelets技術(shù)介紹
JSF輸出格式化
JSF <h:inputtextarea>標(biāo)簽
JSF驗證整數(shù)范圍
JSF <h:panelGrid>標(biāo)簽

JSF Web資源

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 Web資源示例:訪問圖片文件

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)生相同的輸出 -

JSF Web資源示例:訪問CSS文件

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

JSF Web資源示例:訪問JavaScript文件

<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!");  
}

上一篇:JSF Facelets視圖下一篇:JSF輸出腳本