→Java関連
→JBoss Seam関連
→[[JSP関連]]
#contents
*概要 [#q19dc5fa]
-JSFはWebアプリケーションのインターフェイスを構築するためのフレームワーク
-JSFはMVCにおけるVとCの機能を提供する
--View→JSFのタグライブラリで拡張されたJSPを用いてWebインターフェイスを記述
--Control→Managed Beanと設定ファイルによってコントローラを実装
--Model→EJB
---Entityはデータモデル
---SessionBeanはイベントリスナー
--JSFでは画面から受け取ったアクションをfaces-config.xmlで指定されたManaged Bean(%%=Backing Beanとも言う?%%)によって処理する。
---※追記：バッキングBeanはもともとマネージドBeanの属性になるBeanのことらしい(しかしマネージドBeanと同じ意味でも使ってることがあるので文脈次第か）
--ビジネスロジックの実装にEJB3を使用する場合、Managed BeanからEJB3コンポーネントをルックアップ、データの受け渡しが必要
--JavaEE5ではJSFとEJBをつなぐ標準の方法が用意されていない
--そこでJBoss Seamが登場し、両者を統合、管理してシームレスにつなぐことを可能とした
--JBoss SeamではManaged Beanの設定を外部ファイルでなくソース内のアノテーションで行う
--Seamコンポーネントを自動的に適切なManaged Beanにマッピング
--「JSF (JavaServer Faces)」は、ユーザによりブラウザ等で表示されるページ(UI)とJavaBeans(ビジネスロジック)の間のやり取りをプログラムレスにし、簡単にWebアプリケーションを開発することを可能とするフレームワークです。
--Strutsは画面遷移(MVCモデルのC)に強いのに対して、JSFはユーザインタフェース(MVCモデルの V)に強い
-JSFの特徴
--Webアプリケーションのフォームを簡単に開発可能
--UIとデータのやり取りを簡単に実現
--UIコンポーネントに入力されたデータの型変換、妥当性チェックを標準でサポート
--ページ間の画面遷移をXMLで一括管理可能(Strutsと同様)
--UIコンポーネントとビジネスロジックを分離開発可能
*関連Web [#m7abc452]
-http://java.sun.com/javaee/javaserverfaces/
-[[JamesHolmes.com Java Server Faces Resources >http://www.jamesholmes.com/JavaServerFaces/]]
-http://www.jsfcentral.com/
-[[Oracle ADF:http://www.oracle.com/technology/products/adf/adffaces/index.html]]
--Oracle ADF Faces is a rich set of user interface components based on the JavaServer Faces JSR (JSR-127). The Oracle ADF Faces Components provide various user-interface components with built-in functionality - such as data tables, hierarchical tables, and color and date pickers - that can be customized and re-used in your application.
-[[Faces Console>http://www.jamesholmes.com/JavaServerFaces/console/]]
--The Faces Console is a FREE standalone Java Swing application for developing and managing JavaServer Faces-based applications. With the Faces Console you can visually edit JavaServer Faces configuration files as well as JSP Tag Library files.
--The Faces Console also plugs into multiple, popular Java IDEs for seamless management of JavaServer Faces applications from one central development tool.
*解説記事 [#efcc8cb4]
-[[JSF ライフサイクルはソース見るのが手っ取り早い>http://etc9.hatenablog.com/entry/2017/01/19/205853]] 2017.1
-[[JSF2.0 Ajaxで部分レンダリング>http://jarngreipr.blog106.fc2.com/blog-entry-5.html]] 2017.3
--<f:ajax>タグ
--execute属性でサーバにPOSTするコンポーネントのIDを指定
--親タグのIDを指定すれば子タグのIDは指定する必要はない
--render属性で通信後に再描画するコンポーネントのIDを指定
--onevent属性で通信前後に実行するjavascriptのファンクションを指定
--renderやexecuteに指定可能なのはJSFコンポーネントのIDでJSFコンポーネントではない（jsfc属性指定がない、もしくはh:やf:でないコンポーネント）HTMLのIDでは駄目
--executeやrender属性の指定では、f:ajaxが所属しているformに所属するコンポーネントのIDだけが指定可能
--ManagedBean内の@PostConstructを指定されたメソッドが必ず実行される
-[[JSFのデバッグって…？>http://kikutaro777.hatenablog.com/entry/2013/08/09/231158]] 2013.8
--<ui:debug>の使い方など
-[[JSFをきちんと理解しよう。>http://qiita.com/san_yamagami/items/1b9d7d98c6476d5b1508]] 2015.7
--ライフサイクルをきちんと理解することが非常に重要
--タグ属性を正確に理解する
-[[JSF MyFacesを使ってみる>http://muimi.com/j/jsf/myfaces/]]
--MyFacesはオープンソースのJSF実装です
--http://www.myfaces.org/
-[[JSF入門>http://dream.mods.jp/first_jsf/part1.html]]
-[[JSFがくる>http://muimi.com/j/jsf/]]
-[[JSFによるWebアプリケーション開発>http://www.wakhok.ac.jp/~tomoharu/jsf2004/text/index_c6.html]]
--Managed Bean = Backing Bean
--Managed Beanとは、アプリケーションのWeb層とビジネス層の間のデータ管理に使用されるJavaBeans、らしい
-[[JSFの構造を探る:http://www.atmarkit.co.jp/fjava/special/jsf01/jsf01.html]]
--コンポーネントタグライブラリ(UIのJSPカスタムタグライブラリ)
--コアタグライブラリ(イベントハンドラ、バリデータ、コンバータのJSPカスタムタグライブラリ)
--サーバサイドでステートフルオブジェクトとして表現されるUI
--イベントハンドラ、バリデータ、コンバータ
--JavaBean(データモデル=モデルオブジェクト)
--サーバサイドヘルパークラス
--JSFページ
-[[JavaServer Facesを理解する>http://www.atmarkit.co.jp/fjava/special/jsf01/jsf01.html]]
--[[(後編)>http://www.atmarkit.co.jp/fjava/special/jsf02/jsf02_04.html]]
-[[JSF紹介>http://www.iplatform.org/develop/jsf/jsf.htm]]
*タグライブラリ [#a58bec60]
-JSFのタグライブラリはHTMLタグとcoreタグに別れる
-HTMLタグ
--HTML生成を行う
--ネームスペース <h:〜 で表される
-coreタグ
--HTMLと直接関連しないユーティリティを提供？
--ネームスペース <f:〜 で表される
**自前Converterタグライブラリを作る例 [#s04dade5]
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.GregorianCalendar;
import java.util.Locale;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
public class MyFormatConverter implements Converter {
public Object getAsObject(FacesContext context, UIComponent component, String value) {
// valueをコンバートしたObjectを返す
}
public String getAsString(FacesContext context, UIComponent component, Object value) {
// valueをコンバートした Stringを返す
}
}
-使用例
<h:outputText
value="#{hogeCompo.hogeValue}"
converter="myFormatConverter" />
*Facelets [#de5991af]
-[[Facelets Developer Documentation>https://facelets.dev.java.net/nonav/docs/dev/docbook.html]]
-[[Faceletsとは>http://journal.mycom.co.jp/special/2006/seam/007.html]]
--FaceletsはJSFアプリケーションを作成するためのフレームワーク(PDL)である。
--Faceletsを使用することで、JSFのビューに対してテンプレートを適用できるようになるほか、HTMLタグをJSFコンポーネントのように利用できるなど、いくつかの強力な機能を使用できるようになる。
--JSPコンテナに依存しない
--ネームスペース <ui:〜 で表される
**<ui:fragment>を使ってタグのレンダリングを制御 [#j8df3940]
-既存のhtmlタグをjsfで手っ取り早く表示非表示制御するには<ui:fragment>タグで囲って rendaer 属性で制御すれば良い。<a> タグを <h:commandLink> に書き換えるのが面倒だったり時間がなかったりするときに使える
**ui:compositionのtemplate属性の使い方 [#gc578455]
-ページの全体デザインのテンプレートみたいなページを用意し、そこにページの中身を差し込むことが可能。
-ui:composition のtemplate属性にその(テンプレートとなる）xhtmlのパスを指定
-以下のようになることが多い
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="https://ajax4jsf.dev.java.net/ajax"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
template="/layout/template.xhtml">
-/layout/template.xhtml側では、適当にページをデザインした後、中身を差し込みたい場所に
<ui:insert name="body"/>
などと書いておく。nameの値は任意。
-テンプレートを呼び出す側のページにはui:insertの場所に差し込む内容として、ui:define で name="body"としたブロックを用意する。
<ui:define name="body">
（〜適当に差し込みたい中身）
</ui:define>
-ここでui:insertに指定したnameと同じnameでui:defineすることがポイント。
-名前が違うとスルーされてテンプレートの中に何も表示されない(中身なしのページになる）ので注意
-つまり、テンプレートを適用される側のページは、
<ui:composition ...
template="/layout/template.xhtml">
<ui:define name="body">
...
（〜適当に差し込みたい中身）
...
</ui:define>
</ui:composition>
と言う感じになる。
-参考になるページ:http://otjwave.itbdns.com/~okamura/SeamProjects/Project02/SeamProject02-01.html
*faces-config.xml [#ld811e31]
-jsfのメイン設定ファイル
-WEB-INF直下におかれる
-以下のようなものを設定する
--Managed Bean定義
--ナビゲーション＝画面遷移
--ロケール
-[[Conditional Navigation Rule in JSF 2.0>http://www.mkyong.com/jsf2/conditional-navigation-rule-in-jsf-2-0/]]
--faces-config.xml で条件付遷移の記述が可能な例
<navigation-rule>
<from-view-id>start.xhtml</from-view-id>
<navigation-case>
<from-outcome>payment</from-outcome>
<if>#{paymentController.orderQty < 100}</if>
<to-view-id>ordermore.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>payment</from-outcome>
<if>#{paymentController.registerCompleted}</if>
<to-view-id>payment.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>payment</from-outcome>
<to-view-id>register.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
*Tips [#scbb8086]
-[[JSFでJavaScriptのwindow.openを利用する>http://akuneshi.exblog.jp/1622568/]]
<script>
function launchPopUp() {
<c:if test="${param.popup != ''}">
window.open(<c:out value="/jsp/${param.popup}"/>);
</c:if>
};
</script>
<body onLoad="launchPopUp();"/>
<h:form>
<input type="hidden" name="popup" value=""/>
<h:commandButton action="#{bean.action}" onClick="document.form[0].popup.value='somePage.jsf'"/>
</h:form>
-[[JSF 2.2ではf:eventのpreRenderViewではなくf:viewActionを使う？>http://den2sn.hatenablog.com/entry/2013/06/24/221358]] 2013.6
-[[JSFでバッキングBeanに@PostConstructを付けたメソッドが画面表示時とサブミット時に二度呼ばれて困ったときの話>http://qiita.com/opengl-8080/items/00f98061cdecb4f88631]] 2014.11
--解決１：FacesContext#isPostback()==falseのときだけ初期化処理をする（isPostback()はサブミットされたときにtrueになる）
--解決２：@ViewScoped にする
--解決２の方が自然な解決法のように思われる
-[[JSFでactionListener内の判定結果に応じてactionの画面遷移を止める方法>http://kikutaro777.hatenablog.com/entry/2013/03/27/235725]] 2013.3
--actionListenerで判定して、その結果、actionの画面遷移を有効・無効に
-[[ブックマーク可能な URL (GET リクエスト) のサポートと動的パラメータ設定>http://yoshio3.com/2011/02/16/jsf-bookmarkable-url-suppor/]] 2011.2
-JSFのBeanメソッドへのリンクにGETパラメータを付ける
<s:link action="#{hogeBean.hoge()}" value="hoge">
<f:param name="hogeParam" value="xxx" />
</s:link>
-すべてのJSFツリーの起点には<f:view>タグが必要
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
