--- title: スタンドアローンJSF2.2+PrimeFaces入門メモ tags: ["JSF", "Java", "PrimeFaces"] categories: ["Programming", "Java", "JavaServerFaces", "PrimeFaces"] date: 2014-05-22T22:12:20Z updated: 2014-05-22T22:12:20Z --- フルスタック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に以下のように修正します。折角なのでコピペできるように全文貼っておきます。 4.0.0 com.mycompany.app hello-jsf war 1.0.0 hello-jsf Maven Webapp http://maven.apache.org com.sun.faces jsf-api 2.2.6 com.sun.faces jsf-impl 2.2.6 junit junit 4.11 test hello-jsf ### web.xmlを修正する `mvn archetype:generate`で吐かれるweb.xmlはゴミなので、以下に置換します。 JSF Web Application index.xhtml Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet *.xhtml ### Facelets作成 src/main/webapp/index.xhtmlを作成します。 IntelliJ IDEAを使う場合はwebappsで右クリックして「JSF/Facelets」をクリック。「Kind」を"Facelets file"にする。 ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/33696f45-273c-0bc6-5b03-dcba9519c14e.png) 中身はこんな感じ(IDEAが出力したもの) Simple JSF Facelets page Place your content here `mvn archetype:generate`で吐かれたindex.jspは捨ててください。 ### デプロイ JSFしか扱っていないのでAPサーバーはなんでもいいっす。ドラ猫でおk。 くそ丁寧にIDEAでのTomcat設定方法を貼っておきます。 ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/5156b73e-39a3-3ba7-ddcb-99dae5f1ef98.png) ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/72a70cb6-cc04-a1cc-f79a-d6185a938b03.png) 起動しましょう。 ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/3e6e2480-3a3e-8e22-0068-eba8dd89a273.png) さくっと動きました! ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/56841e6d-9918-c06e-812f-fa0906d1d1fb.png) ### エコーアプリ作成 #### 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修正 Simple JSF Facelets page
redeployします。↓な感じのアプリができます。 ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/287095e6-6ee7-c80d-1f00-ebae6880b9e0.png) #### 素のHTMLっぽくする JSF2.2からjsf属性が使えるようになったので、専用タグ使わなくてもHTMLで記述できるようになりました。こっちだとWebブラウザで直接XHML開けていいですね。こっちの場合も`#{}`内の補完が効きます。 Simple JSF Facelets page

#{helloBean.output}
ちなみにXHTMLの変更は ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/082ed42d-1233-5d36-ea58-317ce8b63b33.png) で反映してます。 ### Prime Facesを導入。 ここまで前置き。僕が本当に使いたいのは[PrimeFaces](http://www.primefaces.org/)です。 この豊富なコンポーネント群を使って、このブログの管理画面をBackbone.jsゴリゴリからJavaで書き換えたいのです。 #### pom.xml修正 pom.xmlに org.primefaces primefaces 5.0 を追加します。 全文はっておきます。 4.0.0 com.mycompany.app hello-jsf war 1.0.0 hello-jsf Maven Webapp http://maven.apache.org com.sun.faces jsf-api 2.2.6 com.sun.faces jsf-impl 2.2.6 org.primefaces primefaces 5.0 junit junit 4.11 test hello-jsf ライブラリを追加したらredeployが必要。 #### Facelets修正 さっきのXHTMLを公式ページの[Getting Started](http://www.primefaces.org/gettingStarted)のサンプルで上書きしちゃいます。 ![image](https://qiita-image-store.s3.amazonaws.com/0/1852/cf21f34d-6a4f-d88d-4ae8-2f6771ac7be8.png) できた! ---- 今日はここまで。 次はJavaScript MV*フレームワークのようにJSFからREST APIにアクセスします。 JAX-RS Client APIを使いたいところですが、依存関係がすっきりしなくなるし使いにくいので、[Retrofit](/#/entries/260)使います。 そして[組み込みjar](/#/entries/261)にして、RESTサーバーとして独立したサービスを作りたいと思います。 併せて読みたい
Introduction of CategoLJ2 #jjug_ccc from makingx