最近の更新

2012年9月26日水曜日

コンポーネントに引数を渡す方法

【目的】
JSF1.2のFaceletでコンポーネントに引数を渡します。



【手順】
1.「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample036-ComponentParameter」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。

動的
Web
プロジェクト
プロジェクト名JSF12Sample036-ComponentParameter

ターゲット・ランタイムApache Tomcat v6.0
動的 web モジュール バージョン2.5
構成Apache Tomcat v6.0 デフォルト構成
EARメンバーシップチェックなし
ワーキング・セットチェックなし
Javaビルド・パス上のソース・フォルダーsrc
デフォルト出力フォルダーbuild\classes
Web
モジュール
コンテキスト・ルートJSF12Sample036-ComponentParameter

コンテンツ・ディレクトリーWebContent
web.xml デプロイメント記述子の作成チェックあり


2.「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>JSF12Sample036-ComponentParameter</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>

3.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
4.「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF」以下に「facelet」というフォルダを作成。
5.「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「foolprogrammer-taglib.xml」というファイルを作成。
6.「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>customInputText2</tag-name>
        <source>tags/customInputText2.xhtml</source>
    </tag>
</facelet-taglib>

7.「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「tags」というフォルダを作成。
8.「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet/tags」以下に「customInputText1.xhtml」というファイルを作成。
9.「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">
    <h:inputText styleClass="inputText1">
        <c:if test="${not empty value}">
            <f:attribute name="value" value="${value}"/>
        </c:if>
        <c:if test="${not empty style}">
            <f:attribute name="style" value="${style}"/>
        </c:if>
    </h:inputText>
</ui:composition>

10.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
11.「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>

12.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
13.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
14.「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">
<!--
.inputText1{
    background-color: yellow;
    width: 100px;
    height: 30px;
}
-->
</style>
</head>
<body>
    <fp:customInputText2 /><br />
    <fp:customInputText2 value="あいうえお" style="width:200px;" /><br />
    <fp:customInputText2 value="かきくけこ" /><br />
    <fp:customInputText2 style="width:200px;" /><br />
</body>
</html>

15.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
16.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
17.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
18.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample036-ComponentParameter/faces/index.xhtml

19.以下の様に表示されれば成功です。





以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事