Jsf-custom-tag
提供:Dev Guides
JSF-カスタムタグ
JSFは、カスタムコンテンツをレンダリングするために使用できる独自のカスタムタグを定義する強力な機能を開発者に提供します。
JSFでのカスタムタグの定義は、3ステップのプロセスです。
Step | Description |
---|---|
1a | Create a xhtml file and define contents in it using *ui:composition *tag |
1b | Create a tag library descriptor (.taglib.xml file) and declares the above custom tag in it. |
1c | Register the tag libray descriptor in 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:タグライブラリを定義する:finddevguides.taglib.xml
名前が示すように、タグライブラリはタグのライブラリです。 次の表に、タグライブラリの重要な属性を示します。
S.No | Node & Description |
---|---|
1 |
すべてのタグが含まれます。 |
2 |
namespace タグライブラリの名前空間。一意である必要があります。 |
3 |
tag 単一のタグが含まれています |
4 |
tag-name タグの名前 |
5 |
source タグの実装 |
=
<facelet-taglib>
<namespace>http://finddevguides.com/facelets</namespace>
<tag>
<tag-name>buttonPanel</tag-name>
<source>com/finddevguides/buttonPanel.xhtml</source>
</tag>
</facelet-taglib>
手順1c:タグライブラリ:web.xmlを登録する
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/finddevguides.taglib.xml</param-value>
</context-param>
JSFでのカスタムタグの使用は、2段階のプロセスです。
Step | Description |
---|---|
2a | Create a xhtml file and use custom tag library’s namespace |
2b | Use the custom tag as normal JSF tags |
ステップ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://finddevguides.com/facelets">
ステップ2b:カスタムタグの使用:home.xhtml
<h:body>
<tp:buttonPanel okLabel = "Ok" cancelLabel = "Cancel"/>
</h:body>
応用例
テストJSFアプリケーションを作成して、JSFのテンプレートタグをテストしましょう。
Step | Description |
---|---|
1 | Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter. |
2 | Create com folder under WEB-INF directory. |
3 | Create finddevguides folder under WEB-INF > com directory. |
4 | Create buttonPanel.xhtml file under WEB-INF > com > finddevguides folder. Modify it as explained below. |
5 | Create finddevguides.taglib.xml file under WEB-INF folder. Modify it as explained below. |
6 | Modify web.xml file under WEB-INF folder as explained below. |
7 | Modify home.xhtml as explained below. Keep rest of the files unchanged. |
8 | Compile and run the application to make sure business logic is working as per the requirements. |
9 | Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver. |
10 | Launch your web application using appropriate URL as explained below in the last step. |
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>
finddevguides.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://finddevguides.com/facelets</namespace>
<tag>
<tag-name>buttonPanel</tag-name>
<source>com/finddevguides/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/finddevguides.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://finddevguides.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-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。 すべてがアプリケーションで問題ない場合、次の結果が生成されます。