JSF - 自定义标签

更新于 2024/5/31 13:44:25

JSF 为开发人员提供了强大的功能来定义自己的自定义标签，这些标签可用于呈现自定义内容。

在 JSF 中定义自定义标签分为三个步骤。

步骤	描述
1a	创建一个 xhtml 文件并使用 ui:composition 标签定义其中的内容
1b	创建一个标签库描述符 (.taglib.xml 文件) 并在其中声明上述自定义标签。
1c	在 web.xml 中注册标签库描述符

步骤 1a:定义自定义标签内容:buttonPanel.xhtml

<h:body>
   <ui:composition> 
      <h:commandButton type = "submit" value = "#{okLabel}" />
      <h:commandButton type = "reset" value = "#{cancelLabel}" /> 
   </ui:composition>
</h:body>

步骤 1b:定义标签库:tutorialspoint.taglib.xml

顾名思义，标签库就是标签库。下表描述了标签库的重要属性。

S.No	Node &描述
1	facelet-taglib 包含所有标签。
2	namespace 标签库的命名空间，应是唯一的。
3	tag 包含单个标签
4	tag-name 标签名称
5	source 标签实现

<facelet-taglib>
   <namespace>http://tutorialspoint.com/facelets</namespace>
   <tag>
      <tag-name>buttonPanel</tag-name>
      <source>com/tutorialspoint/buttonPanel.xhtml</source>
   </tag>
</facelet-taglib>

步骤 1c:注册标签库:web.xml

<context-param>
   <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
   <param-value>/WEB-INF/tutorialspoint.taglib.xml</param-value>
</context-param>

在 JSF 中使用自定义标记分为两个步骤。

步骤	描述
2a	创建 xhtml 文件并使用自定义标记库的命名空间
2b	将自定义标记用作普通 JSF 标记

步骤 2a:使用自定义命名空间:home.xhtml

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   xmlns:tp = "http://tutorialspoint.com/facelets">

步骤 2b:使用自定义标签:home.xhtml

<h:body>
   <tp:buttonPanel okLabel = "Ok" cancelLabel = "Cancel" /> 		
</h:body>

示例应用程序

让我们创建一个测试 JSF 应用程序来测试 JSF 中的模板标签。

步骤	描述
1	在 com.tutorialspoint.test 包下创建一个名为 helloworld 的项目，如 JSF - 第一个应用程序一章中所述。
2	在 WEB-INF 下创建 com 文件夹目录。
3	在 WEB-INF > com 目录下创建 tutorialspoint 文件夹。
4	在 WEB-INF > com > tutorialspoint 文件夹下创建 buttonPanel.xhtml 文件。按照下面的说明进行修改。
5	在 WEB-INF 文件夹下创建 tutorialspoint.taglib.xml 文件。按照下面的说明进行修改。
6	按照下面的说明修改 WEB-INF 文件夹下的 web.xml 文件。
7	按照下面的说明修改 home.xhtml。保持其余文件不变。
8	编译并运行应用程序以确保业务逻辑按要求运行。
9	最后，以 war 文件的形式构建应用程序并将其部署在 Apache Tomcat Web 服务器中。
10	按照最后一步中的说明，使用适当的 URL 启动您的 Web 应用程序。

buttonPanel.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body>
      <ui:composition> 
         <h:commandButton type = "submit" value = "#{okLabel}" />
         <h:commandButton type = "reset" value = "#{cancelLabel}" /> 
      </ui:composition>
   </h:body>
</html>

tutorialspoint.taglib.xml

<?xml version = "1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">

<facelet-taglib>
   <namespace>http://tutorialspoint.com/facelets</namespace>
   
   <tag>
      <tag-name>buttonPanel</tag-name>
      <source>com/tutorialspoint/buttonPanel.xhtml</source>
   </tag>
</facelet-taglib>

web.xml

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
   <display-name>Archetype Created Web Application</display-name>
   <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
   </context-param>	
   
   <context-param>
      <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
      <param-value>/WEB-INF/tutorialspoint.taglib.xml</param-value>
   </context-param>
   
   <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   </servlet>
   
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.jsf</url-pattern>
   </servlet-mapping>
</web-app>

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:tp = "http://tutorialspoint.com/facelets">
   
   <h:head>
      <title>JSF tutorial</title>			
   </h:head>
   
   <h:body>
      <h1>Custom Tags Example</h1>
      <tp:buttonPanel okLabel = "Ok" cancelLabel = "Cancel" />
   </h:body>
</html>

完成所有更改后，让我们像在 JSF - 第一个应用程序章节中一样编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果。