JSF1.2のFaceletで中身を持つコンポーネントを作成します。
【手順】
１．「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample035-CompositeComponent」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>JSF12Sample035-CompositeComponent</display-name>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>
/WEB-INF/facelets/foolprogrammer-taglib.xml
</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>
３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF」以下に「facelet」というフォルダを作成。
５．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「foolprogrammer-taglib.xml」というファイルを作成。
６．「foolprogrammer-taglib.xml」を以下の様に入力。
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://foolprogrammer.blogspot.jp/jsf</namespace>
<tag>
<tag-name>customDiv1</tag-name>
<source>tags/customDiv1.xhtml</source>
</tag>
</facelet-taglib>
７．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「tags」というフォルダを作成。
８．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet/tags」以下に「customInputText1.xhtml」というファイルを作成。
９．「customInputText1.xhtml」を以下の様に入力。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<div class="div1">
<ui:insert />
</div>
</ui:composition>
１０．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１１．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
</faces-config>
１２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１３．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
１４．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fp="http://foolprogrammer.blogspot.jp/jsf">
<head>
<style type="text/css">
<!--
.div1 {
background-color: yellow;
width: 100px;
height: 30px;
}
-->
</style>
</head>
<body>
<fp:customDiv1>あああ</fp:customDiv1><br />
<fp:customDiv1>いいい</fp:customDiv1><br />
<fp:customDiv1>ううう</fp:customDiv1><br />
<fp:customDiv1>えええ</fp:customDiv1><br />
<fp:customDiv1>おおお</fp:customDiv1><br />
</body>
</html>
１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample035-CompositeComponent/faces/index.xhtml
１９．以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。