フルスタックJava EEじゃなくてJSFだけ使いたいぜってときのメモ。 というかPrimeFacesを単品で使いたいんです。フロントエンド構築用にJavaScript MV*フレームワークの代替にしたいんです。
mavenで雛形プロジェクトを作る
$ mvn -B archetype:generate -DgroupId=com.mycompany.app -DartifactId=hello-jsf -Dversion=1.0.0 -DarchetypeArtifactId=maven-archetype-webapp
JSF(mojarra)のdependencyを追加
pom.xmlに以下のように修正します。折角なのでコピペできるように全文貼っておきます。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.mycompany.app</groupId>
<artifactId>hello-jsf</artifactId>
<packaging>war</packaging>
<version>1.0.0</version>
<name>hello-jsf Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<!-- ここからMojarra -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.6</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.6</version>
</dependency>
<!-- ここまでMojarra -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<!-- 無駄にJUnitのバージョンを変えておく -->
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>hello-jsf</finalName>
</build>
</project>
web.xmlを修正する
mvn archetype:generate
で吐かれるweb.xmlはゴミなので、以下に置換します。
<?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">
<display-name>JSF Web Application</display-name>
<!-- Welcome -->
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
<!-- JSF Servlet -->
<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>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
Facelets作成
src/main/webapp/index.xhtmlを作成します。
IntelliJ IDEAを使う場合はwebappsで右クリックして「JSF/Facelets」をクリック。「Kind」を"Facelets file"にする。
中身はこんな感じ(IDEAが出力したもの)
<?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">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
Place your content here
</h:body>
</html>
mvn archetype:generate
で吐かれたindex.jspは捨ててください。
デプロイ
JSFしか扱っていないのでAPサーバーはなんでもいいっす。ドラ猫でおk。
くそ丁寧にIDEAでのTomcat設定方法を貼っておきます。
起動しましょう。
さくっと動きました!
エコーアプリ作成
Managed Bean作成
CDIとか使いません。だまってjavax.faces
パッケージのアノテーションを使います。
僕にとってJSFはクライアントサイドフレームワークであり、JavaScriptの代替なので複雑にしたくないからです。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.io.Serializable;
@ManagedBean
@RequestScoped
public class HelloBean implements Serializable {
private String name;
private String output;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void greet() {
output = "Hello " + name;
}
public String getOutput() {
return output;
}
}
Facelets修正
<?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">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<h:form id="hello">
<h:inputText value="#{helloBean.name}"/>
<h:commandButton value="say" action="#{helloBean.greet()}"/>
<br/>
<h:outputText value="#{helloBean.output}"/>
</h:form>
</h:body>
</html>
redeployします。↓な感じのアプリができます。
素のHTMLっぽくする
JSF2.2からjsf属性が使えるようになったので、専用タグ使わなくてもHTMLで記述できるようになりました。こっちだとWebブラウザで直接XHML開けていいですね。こっちの場合も#{}
内の補完が効きます。
<?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:jsf="http://xmlns.jcp.org/jsf">
<head>
<title>Simple JSF Facelets page</title>
</head>
<body>
<form jsf:id="hello">
<input type="text" jsf:value="#{helloBean.name}"/>
<input type="submit" value="say" jsf:action="#{helloBean.greet()}"/>
<br/>
#{helloBean.output}
</form>
</body>
</html>
ちなみにXHTMLの変更は
で反映してます。
Prime Facesを導入。
ここまで前置き。僕が本当に使いたいのはPrimeFacesです。 この豊富なコンポーネント群を使って、このブログの管理画面をBackbone.jsゴリゴリからJavaで書き換えたいのです。
pom.xml修正
pom.xmlに
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>
を追加します。
全文はっておきます。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.mycompany.app</groupId>
<artifactId>hello-jsf</artifactId>
<packaging>war</packaging>
<version>1.0.0</version>
<name>hello-jsf Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<!-- ここからMojarra -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.6</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.6</version>
</dependency>
<!-- ここまでMojarra -->
<!-- ここからPrimeFaces -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>
<!-- ここまでPrimeFaces -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<!-- 無駄にJUnitのバージョンを変えておく -->
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>hello-jsf</finalName>
</build>
</project>
ライブラリを追加したらredeployが必要。
Facelets修正
さっきのXHTMLを公式ページのGetting Startedのサンプルで上書きしちゃいます。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:spinner/>
</h:body>
</html>
できた!
今日はここまで。
次はJavaScript MV*フレームワークのようにJSFからREST APIにアクセスします。 JAX-RS Client APIを使いたいところですが、依存関係がすっきりしなくなるし使いにくいので、Retrofit使います。
そして組み込みjarにして、RESTサーバーとして独立したサービスを作りたいと思います。
併せて読みたい