ScalaとかHaskellとかの話。あとJavaとか

関数型言語について勉強中です。

JSFについてもう少し調べてみました。

JSF JavaEE

先週やったJJUCの一人ハンズオンでJSFを触ったので、もう少し調べてみたので自分用にメモ。

JavaEE7のJSFは2.2で、JavaEE6のJSF2.0からは機能追加という位置づけらしく2.0を知っていたら2.2もキャッチアップ簡単、ということらしいので2.0から理解してみました。

まず、最初にプロジェクトの作成です。Mavenで作成するので「Maven」の「Webアプリケーション」を選択します。GlassFish3.1.1、JavaEE6で作成です。
f:id:amkt922:20131119200425p:plain

作成後はプロジェクトのプロパティ(プロジェクトを選択し右クリック)から「フレームワーク」で「JavaServer Faces」を追加します。「ライブラリ」「構成」「コンポーネント」はデフォルトのままです。
f:id:amkt922:20131119200512p:plain

以下のweb.xmlがWEB-INFフォルダに作成されます。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 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-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <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>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>


JSF2系からは画面はjspではなくfaceletsで作るのがセオリーだそうで、フレームワーク追加時に新しく作成されたindex.xhtmlを使います。もともとあったindex.jspは不要なので削除します。

この時点でももうプロジェクトは実行可能です。
f:id:amkt922:20131119201643p:plain

今回はここからtwitterもどきのアプリを作っていこうと思います。
EJB・JPAなどの連携はなしで、画面側の処理だけ実装してみようと思います。

まず画面と連携してデータを処理する管理ビーン(ManagedBean)を作成します。
POJOからでも作成可能ですがプロジェクトの右クリックでJSF管理対象Beanを選択し任意のクラスを作成します。
f:id:amkt922:20131119203644p:plain

これが自動生成されたクラスで、ManagedBeanは引数なしのコンストラクタが必要です。

@ManagedBean
@RequestScoped
public class TwitterMgdBean {
    /**
     * Creates a new instance of TwitterMgdBean
     */
    public TwitterMgdBean() {
    }    
}

ここから画面(xhtmlファイル)から渡されるプロパティを定義していきます。
ここでは、画面から渡されるつぶやき情報のtweetsはメモリ上に保持するようにしています。

@ManagedBean
@RequestScoped
public class TwitterMgdBean {
    /**
     * 過去のつぶやき
     */
    private static final List<String> tweets = new ArrayList<String>();
    /**
     * つぶやき
     */
    private String tweet;
    /**
     * Creates a new instance of TwitterMgdBean
     */
    public TwitterMgdBean() {
    }

    public String getTweet() { return tweet; }

    public void setTweet(String tweet) { this.tweet = tweet; }

    public List<String> getTweets() { return this.tweets; }
}

次はxhtml側の実装です。ハンズオンの時と同じようにタグでフォーム部分を実装し、EL式で#{tweeterMgdBean.xxxx}という
感じでManagedBeanと連携するプロパティを記載します。

<?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:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>つぶやき</title>
    </h:head>
    <h:body>
        <h:form>
            <h:outputLabel value="つぶやき"/><br />
            <h:inputTextarea value="#{twitterMgdBean.tweet}"></h:inputTextarea><br />
            <h:commandButton value="つぶやく" action="#{twitterMgdBean.doTweet()}"/>
       </h:form>
        <hr/>
        <h1>過去のつぶやき</h1>
        <c:forEach var="t" items="#{twitterMgdBean.tweets()}">
            <div style="background-color: #9999ff; margin: 10px; padding: 5px;">
                <h:outputText value="#{t}"></h:outputText>
            </div>
        </c:forEach>
    </h:body>
</html>

これだけで一応、画面とサーバ側で連携する実装は完了しました。
つぶやきを入力しつぶやきボタンを押下すると画面に順に表示されていきます。
f:id:amkt922:20131119211730p:plain


ただこれだけでは普通のアプリとも言えないので普通は実装されるであろうバリデーション処理を実装してみます。
単純なバリデートだとアノテーションを使って簡単に定義・実装可能です。

アノテーション@Sizeと条件をプロパティに設定するだけです。

@ManagedBean
@RequestScoped
public class TwitterMgdBean {
    /**
     * 過去のつぶやき
     */
    private static final List<String> tweets = new ArrayList<String>();
    /**
     * つぶやき
     */
    @Size(min = 0, max = 140, message = "140文字以内で入力してください")
    private String tweet;

画面側にもエラー時に表示するタグ

を追加するだけで、エラー発生時に画面に表示することが可能です。
必須設定もrequred="true"の追加だけで設定可能です。

           <h:inputTextarea id="tweet" value="#{twitterMgdBean.tweet}" 
                             required="true" requiredMessage="必須です"></h:inputTextarea><br />

f:id:amkt922:20131119213627p:plain

複雑な条件が必要な場合はカスタムバリデータを実装しバリデートさせることもできます。
カスタムバリデータはjavax.faces.validator.Validatorを実装する必要があり、今までJavaをやってきた人間であれば、特に迷うことなく実装可能かと思います。

ここでは、ツイッターとは関係ないですが郵便番号のバリデーション処理を実装してみます。
不正な値の場合ValidatorExceptionをスローする仕様です。

@FacesValidator(value = "postalCodeValidator")
public class PostalCodeValidator implements Validator {

    @Override
    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        String v = (String)value;
        Pattern p = Pattern.compile("[0-9]{3}-[0-9]{4}");
        Matcher m = p.matcher(v);
        if (!m.matches()) {
            throw new ValidatorException(new FacesMessage("郵便番号形式ではありません"));
        }
    }
}

ここの@FacesValidator(value = "postalCodeValidator")のvalueをxhtmlで指定し画面項目への設定を行います。

            <div><h:message for="postalCode"/></div>
            <h:outputLabel for="postalCode" value="郵便番号"/>
            <h:inputText id="postalCode" value="#{twitterMgdBean.postalCode}" 
                         required="true" requiredMessage="必須です" validator="postalCodeValidator"></h:inputText><br />

このように不正な郵便番号を入力するとエラーメッセージが表示されます。
f:id:amkt922:20131119220323p:plain


ここまでJSFを実装してみましたが、ハンズオンの時と同じように簡単にアプリの実装ができました。
特にここまでサードパーティ製ライブラリを追加することなく実装できるので楽ですね。

この次はJavaEE7のJSF2.2について勉強してみようと思います。

今回もソースかgithubにアップしています。
https://github.com/amkt922/jsf-sample