JSF - 自定义标签
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 - 第一个应用程序章节中一样编译并运行应用程序。如果您的应用程序一切正常,这将产生以下结果。