【PrimeFaces】JSF + PrimeFaces環境でjQueryを使いたい

　前提

最近、JavaEE環境でJSF2.xとPrimeFacesを触る事が増えてきましたので、
これからそういった構成でシステムを構築する方のために記録として書いておきます。
先に釘を刺しておきますが、JSF環境ではJavaScriptを多用する事はオススメしません。

　　　JSF

JSFはJavaEE標準機能のモジュールドリブンなMVCフレームワークです。
JSF２系になり、かなり実用性が増していると思います。
JSF1.xのバージョンではxmlベースでのマッピングであるのに対し、
２系ではアノテーションベースで簡易に関連付けが出来るようになっています。

　　 　PrimeFaces

PrimeFacesはJSFを前提にして、リッチなUIライブラリを提供するものです。
基本的にJSFのタグライブラリを全てラップするような形でPrimeFacesのタグライブラリが作られています。
PrimeFacesのjarの内部には関連するJavaクラスとjs、cssが内包されています。
JavaScriptでは内部的にjQueryが利用されています。



多分、説明するより、ソースを見た方が早いですね。
GitHubにソースが上がっています。META-INF内にJsファイルは格納されています。
GitHub - primefaces/primefaces

独自にjQueryのjsファイルをダウンロードしてきて、xhtml上から読み込もうとすると、
conflict(衝突)します。
では、どうしたらいいのでしょう。

　解決方法

さて、本題ですが、jQueryをJSF + PrimeFaces上で利用する方法はとても簡単です。

<h:outputScript library="primefaces" name="jquery/jquery.js" />

これを書くだけ。

つまり、PrimeFacesの内包するjquery.jsを読み込めば良いのです（当然すぎますが(^^;)）
これにより、JavaScript上でjQueryを使えるようになります。



こんな感じで唐突にjQueryを書き始めても問題なしです。

 <script type="text/javascript">

// button要素から任意のIDの エレメントを取得し、クリック
$("button").filter(function(){
    return " 取りたいID" === $(this).attr("id")
}).click();

</script>

出典はもちろんStack Overflowです。

how to use jquery with primefaces

　その他、おまけ

PrimeFacesのjsフレームワークはPrimeFacesという大きなオブジェクト内にWidgetクラスをストックしています。
最終的にwindowオブジェクトに対してPrimeFacesオブジェクトを格納しているため、JavaScript上ならどこからでも参照出来ます。
例えばこんな感じです。

 <script type="text/javascript">
    // ウィジェットの取得
    var dialog = window.PrimeFaces.widgets("widgetVarDialogName");
    // ウィジェット表示（例）
    dialog.show(hoge);
    // submit
    window.PrimeFaces.submit("formId");
</script>

これでPrimeFacesの共通functionのsubmitを実行出来ます（実際、使う必要はありませんし、推奨しません。ただの例です。）

　前提

今回は、JSF + PrimeFaces環境でのjQueryの環境整備についての記事でした。 しかし、今更ながら釘を刺しておきたいのはJSFは基本的に

JavaScriptを利用する必要がない

ということです。
JSFの設計上、htmlとタグライブラリ、EL式で完結するような設計がされています。
したがって、JavaScriptを使う事はほとんどありません。


今回、あえて奥の手としてのJavaScript、jQueryの利用についてを書いたつもりです。


どうしてもPrimeFacesのフレームワーク拡張や、部品挙動に無い要求仕様が発生した場合、
JavaScriptを使わざるをえない状況もあると思います。

その際の一助になればと思っています。

機会があれば、PrimeFacesのJavaScriptクラスのライフサイクルなどについても書きます。