Shale Clay Plugin その４ MyFaces Tomahawkを使う

本日，Clay Pluginに修正が入ったようです．

  <component jsfid="h:outputText" extends="outputText"/>

このように，JSFの見慣れた名前で定義されました．
この修正によって，HTMLを見て何のコンポーネントを設定しているかが見やすくなった（と思う）ので，
今後は，これにあわせて以下のように開発していくことにします．

hello.html

<?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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>こんにちは</title>
</head>
<body>
<span jsfid="h:messages" style="color:red;" allowBody="false" globalOnly="false" showDetail="true">Error Message</span>
<form id="helloForm">
名前:<input type="text" id="name" value="#{@managed-bean-name.name}" required="true" />
<input type="submit" id="go" action="#{@managed-bean-name.doSetName}" value="go" />
</form>
こんにちは． <span jsfid="h:outputText" id="outName" allowBody="false" 
                value="#{@managed-bean-name.name}">sample</span>さん．
</body>
</html>

なんとなく，FaceletsやS2JSFに似てきました．
個人的には，S2JSFのような名前空間を使用するほうが好きなんですが．

MyFaces Tomahawkを使う

では，今回のメインであるMyFaces Tomahawkを使用してみようと思います．
Tomahawkは，Apache MyFaces で公開されている，オープンソースのコンポーネントです．
ファイルアップロードの機能を提供するコンポーネントやカレンダーコンポーネント，ツリー表示のコンポーネントなどが揃っています．

では，早速使用してみることにします．

ダウンロード

ここで，一つ気をつけることがあります．
Shaleで使用されているMyFacesのバージョンは，なんとMyFaces1.1.1なんですね．
試しに，最新版のTomahawkを導入してみましたが，失敗しました．
ここで，悩みました．

MyFacesのバージョンを上げてみる
MyFacesのバージョンにTomahawkをあわせる

ま，どっちも手間は変わらないので，今回はTomahawkのバージョンをMyFacesにあわせることにします．

では，http://archive.apache.org/dist/myfaces/binaries/ から，Tomahawk1.1.1をDLして下さい．
次に，commons-lang,commons-fileuploadに依存している為DLします．
http://jakarta.apache.org/site/downloads/downloads_commons-lang.cgi
http://jakarta.apache.org/site/downloads/downloads_commons-fileupload.cgi
これで，準備は終了です．

設定ファイルを修正する

web.xml

<!-- MyFaces Extensions Filter -->
<filter>
    <filter-name>extensionsFilter</filter-name>
    <filter-class>
        org.apache.myfaces.component.html.util.ExtensionsFilter
    </filter-class>
    <init-param>
        <param-name>uploadMaxFileSize</param-name>
        <param-value>100m</param-value>
    </init-param>
    <init-param>
        <param-name>uploadThresholdSize</param-name>
        <param-value>100k</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>extensionsFilter</filter-name>
    <url-pattern>*.html</url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name>extensionsFilter</filter-name>
    <url-pattern>/faces/*</url-pattern>
</filter-mapping>

最新のTomahawkの設定とは，異なるので注意してください．
最新版Tomahawk web.xml

<filter>
    <filter-name>MyFacesExtensionsFilter</filter-name>
    <filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
    <init-param>
        <param-name>maxFileSize</param-name>
        <param-value>20m</param-value>
        <description>Set the size limit for uploaded files.
            Format: 10 - 10 bytes
                    10k - 10 KB
                    10m - 10 MB
                    1g - 1 GB
        </description>
    </init-param>
</filter>

<!-- extension mapping for adding <script/>, <link/>, and other resource tags to JSF-pages  -->
<filter-mapping>
    <filter-name>MyFacesExtensionsFilter</filter-name>
    <!-- servlet-name must match the name of your javax.faces.webapp.FacesServlet entry -->
    <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

<!-- extension mapping for serving page-independent resources (javascript, stylesheets, images, etc.)  -->
<filter-mapping>
    <filter-name>MyFacesExtensionsFilter</filter-name>
    <url-pattern>/faces/myFacesExtensionResource/*</url-pattern>
</filter-mapping>

以上でTomahawkを使用するための設定は終了です．

Clay コンポーネントとして登録する

このままでは，TomahawkのコンポーネントをHTML Viewから使用することは出来ません．
（JSPなら，以上で設定は終了です）
では，どのようにしたらHTML Viewで使用することが出来るでしょうか？
これまでの日記で，お気づきでしょうがclay-config.xmlに登録する必要がありそうです．

clay-config.xml

    <component jsfid="t:inputCalendar"
        componentType="org.apache.myfaces.HtmlInputCalendar"
        extends="baseOutput">
        <attributes>
            <set name="id" bindingType="VB" />
            <set name="binding" bindingType="VB" />
            <set name="immediate" bindingType="VB" />
            <set name="required" bindingType="VB" />
            <set name="validator" bindingType="MB" />
            <set name="valueChangeListener" bindingType="MB" />
            <set name="accesskey" bindingType="VB" />
            <set name="align" bindingType="VB" />
            <set name="alt" bindingType="VB" />
            <set name="disabled" bindingType="VB" />
            <set name="maxlength" bindingType="VB" />
            <set name="onblur" bindingType="VB" />
            <set name="onchange" bindingType="VB" />
            <set name="onfocus" bindingType="VB" />
            <set name="onselect" bindingType="VB" />
            <set name="readonly" bindingType="VB" />
            <set name="size" bindingType="VB" />
            <set name="tabindex" bindingType="VB" />
            <set name="enabledOnUserRole" bindingType="VB" />
            <set name="visibleOnUserRole" bindingType="VB" />
            <set name="forceId" bindingType="VB" />
            <set name="forceIdIndex" bindingType="VB" />
            <set name="monthYearRowClass" bindingType="VB" />
            <set name="weekRowClass" bindingType="VB" />
            <set name="dayCellClass" bindingType="VB" />
            <set name="currentDayCellClass" bindingType="VB" />
            <set name="renderAsPopup" bindingType="VB" />
            <set name="addResources" bindingType="VB" />
            <set name="popupDateFormat" bindingType="VB" />
            <set name="popupButtonString" bindingType="VB" />
            <set name="popupGotoString" bindingType="VB" />
            <set name="popupTodayString" bindingType="VB" />
            <set name="popupWeekString" bindingType="VB" />
            <set name="popupScrollLeftMessage" bindingType="VB" />
            <set name="popupScrollRightMessage" bindingType="VB" />
            <set name="popupSelectMonthMessage" bindingType="VB" />
            <set name="popupSelectYearMessage" bindingType="VB" />
            <set name="popupSelectDateMessage" bindingType="VB" />
            <set name="renderPopupButtonAsImage" bindingType="VB" />
        </attributes>
    </component>

org.apache.myfaces.custom.calendar.HtmlInputCalendarクラスを見て，設定ファイルを作成します．

baseOutput

   <component jsfid="baseOutput" extends="baseHtml">
     <description>Abstract component definition that extends baseHtml and
      is subclassed by outputLink, outputLabel and outputFormat.</description>
     <attributes>
        <set name="value" bindingType="VB">
           <description></description>
        </set>
        <set name="converter" bindingType="VB">
           <description></description>
        </set> 
     </attributes>
  </component>

このように定義しています．
componentType には，カレンダーコンポーネントを指定します．
そして，attributes に属性を指定していきます．
結構地道な作業です．．．
bindingType にVBとかMBとかありますが，これらはそれぞれValueBinding,MethodBindingを指します．

以上で，設定は終了です．

カレンダーを使う

calendar.html

<?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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>カレンダーサンプル</title>
</head>
<body>
<h1>カレンダーサンプル</h1>
<span jsfid="messages" style="color:red" allowBody="false" globalOnly="false" showDetail="true">Error Message</span>
<form id="calendarForm">
<span id="cal" jsfid="t:inputCalendar" value="#{@managed-bean-name.date}" renderAsPopup="true" popupDateFormat="yyyy/MM/dd" allowBody="false" required="true">
<input type="text" /><input type="button" value="..." />
</span>
<input type="submit" value="送信" action="#{@managed-bean-name.doSubmit}" />
</form>
<span jsfid="h:outputText" value="#{@managed-bean-name.dateString}" allowBody="false">2000年05月01日</span>
</body>
</html>

sample.CalendarBean

package sample;

import java.text.SimpleDateFormat;
import java.util.Date;

public class CalendarBean {

    private Date date_;

    public Date getDate() {
        return date_;
    }

    public void setDate(Date date) {
        date_ = date;
    }

    public String doSubmit() {
        return null;
    }

    public String getDateString() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日");
        String str = null;
        try {
            str = sdf.format(date_);
        } catch (Exception e) {
            e.printStackTrace();
        }

        return str;
    }

}

faces-config.xml

<managed-bean>
    <managed-bean-name>calendar</managed-bean-name>
    <managed-bean-class>sample.CalendarBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

それでは，表示してみます．

http://localhost:8080/sample/calendar.html

無事に表示されましたか？

以上で終了です．

Tomahawkを登録

さて，Tomahawkを使用するために，一個ずつコンポーネントをclay-config.xmlに登録していたら，
日が暮れてしまいすよね．．．だるいし．．．

そこで，探してみたらありましたよ．．．
http://issues.apache.org/struts/browse/SHALE-24
ここから tomahawk-view-config.xml をDLして下さい．
これを/WEB-INF/直下にコピーして，web.xmlを修正します．

web.xml

<!-- Clay Common Configuration Resources -->
<context-param>
    <param-name>
        org.apache.shale.clay.COMMON_CONFIG_FILES
    </param-name>
    <param-value>/WEB-INF/clay-config.xml,/WEB-INF/tomahawk-view-config.xml</param-value>
</context-param>

先ほど，clay-config.xmlに登録したコンポーネントは削除しておきます．
先ほど作成したcalendar.htmlにもう一度アクセスすると，正しく表示できます．

さて，ここまでで自作のコンポーネントの登録方法もわかってきました．
clay-config.xmlの詳細については，今後ということで．