Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JSF2.2で簡単
Webアプリケーション開発
自己紹介
加藤田 益嗣
アイエックス・ナレッジ株式会社
twitter:Den @den2sn
ブログ:http://den2sn.hatenablog.com/
仕事
●
SIer(社内Javaフレームワーク開発)
●
GlassFish勉強会
●
Oracle社セミナー&インタビュー記事
JSF2.2のアップデートの
話はしません
本日話すこと
●
昔話
●
アプリを作る際のポイント
JSFとは
JSFとは
●
Java Server Faces
●
Java標準のWebアプリケーション
ユーザインターフェースフレームワー
ク
JSF≠Struts
JSFの開発はとても簡単
Strutsの場合
<html:form action=”/act1”>
<html:submit value=”act1”/>
</html:form>
<html:form action=”/act2”>
<html:submit valu...
JAX-RSの場合
<form action=”/act1”>
<input type=”submit” value=”act1”/>
</form>
<form action=”/act2”>
<input type=”submit” val...
JSFの場合
<h:form>
<h:commandButton type=”submit”
value=”act1” action=”#{actBean.act1}”/>
<h:commandButton type=”submit”
valu...
どうしてこんな事が
出来るのか
コンポーネントベース
●
一般的なWebのリクエストベースの開発では
なくコンポーネントベースの仕組みを採用して
いる。
VBチックななにか
ボタン 処理
コンポーネントツリー
ブラウザ サーバ
HTTP
html
body
form
input
input
button
html
body
form
input
input
button
UIViewRoot
Bean
value1
value2...
JSFの歴史
JSFの歴史
●
JSR127
– JSF 1.0(2004年3月)
– JSF 1.1(2004年5月)
●
JSR252
– JSF 1.2(2006年5月)
●
Java EE 5
JSFの歴史
●
JSR314
– JSF 2.0(2009年6月)
●
Java EE 6
– JSF 2.1(2010年10月)
●
メンテナンスリリース
●
JSR344
– JSF 2.2(2013年03月)
●
Java EE 7
JSFと私
JSFとの出会い
●
2008年
●
JSF1.2
開発環境
●
GlassFish v2
– Sun Java System Application Server 9.1
●
NetBeans5.5
頼みの綱
●
きしだのはてな
– NetBeansの情報は基本ここにしかなかった。
JSF1系はいけてない
なぜ?
考え方の違い
●
JSF1系=IDEを使用したGUI前提の仕様
●
対.NET
●
画面遷移、マネージドビーンすべてXMLで定
義
様々な問題点
●
重い
– JSFの実装、GUIの開発環境共に遅い
●
機能不足
●
開発者はGUIを求めていなかった
嫌われるJSF
JSF2.0
大きなパラダイムシフト
JSF2.0の思想
●
ユーザのニーズを大きく取り入れる
●
CoCの導入により画面遷移やマネージドビーン
のXML定義が不要に
●
GUI不要な仕様
●
対Spring、Rails等のLL系フレームワーク
JSFは2.0からGUIが必要ない
簡単にアプリケーションが
開発出来る
フレームワークとなりました
昔話はこれくらいにして
JSF開発時のポイント
ここからはアプリを実際作ってみる
感じの流れで説明
環境
環境
●
JavaとNetBeansを入れる
(GlassFishを入れる)
●
アプリケーションを作る
– 「Maven > Webアプリケーション」がおすすめ
初期設定
web.xml
●
FacesServletの設定はJSF2.1から不要
●
error-pageのおすすめ
– javax.faces.application.ViewExpiredException -> 408
●
JSFでセッションが切...
faces-config.xml
●
JSFの設定ファイル
●
「locale-config > default-locale」にjaを指定
glassfish-web.xml
●
GlassFishサーバ用の設定ファイル
●
<parameter-encoding default-
charset="UTF-8"/>
を追加
– SetCharacterEncodingFilter...
リソースファイルの配置
●
css、js、imgファイル
●
resourcesフォルダ内に配置
●
jQueryとかBootstrapとかも使える
– jQueryはJSFが生成するidに「:」が含まれていた
りサーバ側のコンポーネントツリー...
開発
JSFの主要要素
●
Facelets
– 画面、JSPみたいなもの、xhtml
●
CDI
– POJO、処理を記載
●
EL
– 画面出力、CDIとの紐付け
画面遷移の仕組み
●
URL=Facelets名
– /faces/index.xhtmlでindex.xhtmlを表示
●
処理の返り値
– 処理の返り値として文字列を返す
– indexという文字列を返すとindex.xhtmlに遷移
●
...
テンプレート
●
faceletsテンプレート
– Apache Tiles的ななにか
テンプレート
●
テンプレート(template.xhtml)
●
利用側(templateClient.xhtml)
データの表示
●
EL式で表示
– デフォルトでHTMLエスケープされる。
– エスケープしたくない時は
h:outputTextのescape="false"を使用
データの表示
●
バッキングビーン
●
Facelets
繰り返し
●
繰り返しでデータを表示
– ui:repeatタグで繰り返し
– h:dataTableもあるがやや融通はきかない
繰り返し
●
JSTLはJSFと相性が悪いので使わない方が良い
(実行タイミングが違う)
– c:forEach → ui:repeat
– c:set → ui:param
– c:if → rendered属性等
処理の実行
●
h:commandLinkまたはh:commandButton
●
action属性に実行するバッキングビーンのメ
ソッドを指定
●
普通の移動はh:linkやh:buttonを使う
詳細画面に直接アクセス
●
ブックマーカビリティ
– ライフサイクルの最初は画面描画しかできないので
データの取得等の処理が出来ない。
– 初期処理用のコンポーネントを使用する。
ブックマーカビリティ
●
f:viewParam
– クエリーストリングの値をバッキングビーンにセッ
トできる
●
f:viewAction(f:event + preRenderView)
– 初回画面表示時に処理を実行できる
ブックマーカビリティ
●
f:metadataタグで囲む
●
例
– ?id=1でアクセスするとバッキングビーンのid
フィールドに1がセットされた後initメソッドが実
行される。
入力処理
●
h:inputTextを使う
●
バッキングビーン内のentityなどとデータの
マッピングをする
入力処理
●
入力系のタグ
– h:inputText
– h:inputTextarea
– h:inputSecret
– h:inputHidden
– h:selectOneMenu
– h:selectOneRadio
– H:sel...
日付型の入力処理
●
コンバータ
– f:convertDateTimeタグを使用
– DateとStringの相互変換を行う
– timeZoneを指定しないと9時間ずれるので注意
関連クラスを選択
●
カスタムコンバータ
– 本が所属するカテゴリーを選択したい
– キー名とオブジェクトを相互変換
– h:selectOneMenuで選択
本 カテゴリー
n 1
カスタムコンバータ
●
コンバータクラス
●
Facelets
カスタムコンバータ
●
JSF2.2だとコンバータクラスで@Injectが使え
る→実装上の問題がありJSF2.3に持ち越し
●
JSF2.1の場合はCDIでインジェクトする
入力チェックしたい
●
バリデーション
– JSFのバリデータ。f:validateLength等
(今時は使わない)
– Beanバリデーション
●
@Size(min = 4)で4文字以上
入力チェックしたい
●
エラーメッセージの表示
– h:messagesで全メッセージ表示
– h:messageで指定箇所にメッセージを表示
メッセージバンドル
●
なんかDateの入力エラーメッセージがおかし
い?
– JSF初期のエラーメッセージは冗長
変なのついてる 長い
メッセージバンドル
●
Facesメッセージの変更
– javax.faces-2.2.0.jarから
javax.faces.Messages.propertiesを取得
– 修正してクラスパスに配置
– faces-config.xmlにm...
Beanバリデーションのメッセージ
●
Beanバリデーションのメッセージも変えたい
– バリデーションのロケール指定
– ValidationMessages.propertiesをクラスパスに
配置
●
Hibernate Validato...
メッセージのロケール化
●
なんなら全文字列プロパティ化したい
– メッセージ用プロパティファイルを配置
– faces-config.xmlにresource-bundleを指定
メッセージのロケール化
●
リソースバンドルの使用
– FaceletsではELで参照
– ソース内では
●
長い...
FacesContext fc = FacesContext.getCurrentInstance();
fc.getAp...
cc:複合コンポーネント
●
Faceletsを部分的に部品化
●
コンポーネントとして使用できる
cc:複合コンポーネント
●
複合コンポーネントを
resources/comp/sample.xmlに配置した場合
カスタムコンポーネント
●
Javaでコンポーネントを作成
●
UIComponentBaseクラス等を継承して作成す
る
●
ライフサイクル単位で細かい処理が可能
Ajax
●
画面を部分更新したい
●
f:ajaxタグを使う
– executeで送信データ、renderで書き換える部分
を指定
– 複数指定する場合はスペース区切り
– 「:」を付けるとルートからの指定
– executeには@this,...
Ajax
●
例
– messageを送信してresult部分のみを更新
Ajaxのハンドリング
●
Ajax実行時にJavaScriptの処理を実施したい
●
jsf.ajax.addOnEventを使用する
●
事前処理やセッションタイムアウトが発生した
際の処理等が書ける
– data.responseCode...
処理でRequestにアクセスしたい
●
FacesContext
– 処理内でHTTPServletRequestやSessionにアクセ
スしたい
– FacesContextを使う
– Request以外にも様々な情報にアクセス出来る
これくらい知ってれば大体大丈夫!
最後にJSFの問題点
JSFの問題点
●
動的な画面の生成が難しい
– クライアントサイドだけで処理出来ない
– もっと読むとか
●
パフォーマンス
– まだやや遅い
– JSF1が10秒、JSF2が2秒、アクション系フレーム
ワークが1秒くらいのイメージ
– 昔よ...
是非、JSF試してみて下さい
Upcoming SlideShare
Loading in …5
×

JSF2.2で簡単webアプリケーション開発

28,042 views

Published on

  • Be the first to comment

JSF2.2で簡単webアプリケーション開発

  1. 1. JSF2.2で簡単 Webアプリケーション開発
  2. 2. 自己紹介 加藤田 益嗣 アイエックス・ナレッジ株式会社 twitter:Den @den2sn ブログ:http://den2sn.hatenablog.com/
  3. 3. 仕事 ● SIer(社内Javaフレームワーク開発) ● GlassFish勉強会 ● Oracle社セミナー&インタビュー記事
  4. 4. JSF2.2のアップデートの 話はしません
  5. 5. 本日話すこと ● 昔話 ● アプリを作る際のポイント
  6. 6. JSFとは
  7. 7. JSFとは ● Java Server Faces ● Java標準のWebアプリケーション ユーザインターフェースフレームワー ク
  8. 8. JSF≠Struts
  9. 9. JSFの開発はとても簡単
  10. 10. Strutsの場合 <html:form action=”/act1”> <html:submit value=”act1”/> </html:form> <html:form action=”/act2”> <html:submit value=”act2”/> </html:form> JSP Act1Action Act1Form Act2Form Act2Action <struts-config> <form-beans> <form-bean name=”act1Form”/> <form-bena name=”act2Form”/> </form-beans> <action-mappings> <action path=”act1”/> <action path=”act2”/> </action-mappings> </struts-config> struts-config.xml
  11. 11. JAX-RSの場合 <form action=”/act1”> <input type=”submit” value=”act1”/> </form> <form action=”/act2”> <input type=”submit” value=”act2”/> </form> HTML @Path public class ActResource { @POST @Path(“act1”) @Produces(“text/html”) public Viewable act1() { //... } @POST @Path(“act2”) @Produces(“text/html”) Public Viewable act2() { //... } }
  12. 12. JSFの場合 <h:form> <h:commandButton type=”submit” value=”act1” action=”#{actBean.act1}”/> <h:commandButton type=”submit” value=”act2” action=”#{actBean.act2}”/> </h:form> Facelets @Named @RequestScoped public class ActBean { public String act1() { //... } public String act2() { //... } }
  13. 13. どうしてこんな事が 出来るのか
  14. 14. コンポーネントベース ● 一般的なWebのリクエストベースの開発では なくコンポーネントベースの仕組みを採用して いる。 VBチックななにか ボタン 処理
  15. 15. コンポーネントツリー ブラウザ サーバ HTTP html body form input input button html body form input input button UIViewRoot Bean value1 value2 exec() BackingBean SessionBean EntityFacelets 重要
  16. 16. JSFの歴史
  17. 17. JSFの歴史 ● JSR127 – JSF 1.0(2004年3月) – JSF 1.1(2004年5月) ● JSR252 – JSF 1.2(2006年5月) ● Java EE 5
  18. 18. JSFの歴史 ● JSR314 – JSF 2.0(2009年6月) ● Java EE 6 – JSF 2.1(2010年10月) ● メンテナンスリリース ● JSR344 – JSF 2.2(2013年03月) ● Java EE 7
  19. 19. JSFと私
  20. 20. JSFとの出会い ● 2008年 ● JSF1.2
  21. 21. 開発環境 ● GlassFish v2 – Sun Java System Application Server 9.1 ● NetBeans5.5
  22. 22. 頼みの綱 ● きしだのはてな – NetBeansの情報は基本ここにしかなかった。
  23. 23. JSF1系はいけてない
  24. 24. なぜ?
  25. 25. 考え方の違い ● JSF1系=IDEを使用したGUI前提の仕様 ● 対.NET ● 画面遷移、マネージドビーンすべてXMLで定 義
  26. 26. 様々な問題点 ● 重い – JSFの実装、GUIの開発環境共に遅い ● 機能不足 ● 開発者はGUIを求めていなかった
  27. 27. 嫌われるJSF
  28. 28. JSF2.0
  29. 29. 大きなパラダイムシフト
  30. 30. JSF2.0の思想 ● ユーザのニーズを大きく取り入れる ● CoCの導入により画面遷移やマネージドビーン のXML定義が不要に ● GUI不要な仕様 ● 対Spring、Rails等のLL系フレームワーク
  31. 31. JSFは2.0からGUIが必要ない 簡単にアプリケーションが 開発出来る フレームワークとなりました
  32. 32. 昔話はこれくらいにして
  33. 33. JSF開発時のポイント
  34. 34. ここからはアプリを実際作ってみる 感じの流れで説明
  35. 35. 環境
  36. 36. 環境 ● JavaとNetBeansを入れる (GlassFishを入れる) ● アプリケーションを作る – 「Maven > Webアプリケーション」がおすすめ
  37. 37. 初期設定
  38. 38. web.xml ● FacesServletの設定はJSF2.1から不要 ● error-pageのおすすめ – javax.faces.application.ViewExpiredException -> 408 ● JSFでセッションが切れた際に発生 – javax.persistence.EntityNotFoundException -> 404 ● JPAでデータが見つからない場合に発生 – 動的な画面にしたいような場合はExceptionHandlerクラス を作成する
  39. 39. faces-config.xml ● JSFの設定ファイル ● 「locale-config > default-locale」にjaを指定
  40. 40. glassfish-web.xml ● GlassFishサーバ用の設定ファイル ● <parameter-encoding default- charset="UTF-8"/> を追加 – SetCharacterEncodingFilter的なもの
  41. 41. リソースファイルの配置 ● css、js、imgファイル ● resourcesフォルダ内に配置 ● jQueryとかBootstrapとかも使える – jQueryはJSFが生成するidに「:」が含まれていた りサーバ側のコンポーネントツリーを考慮する必要 があったりとやや相性が悪い
  42. 42. 開発
  43. 43. JSFの主要要素 ● Facelets – 画面、JSPみたいなもの、xhtml ● CDI – POJO、処理を記載 ● EL – 画面出力、CDIとの紐付け
  44. 44. 画面遷移の仕組み ● URL=Facelets名 – /faces/index.xhtmlでindex.xhtmlを表示 ● 処理の返り値 – 処理の返り値として文字列を返す – indexという文字列を返すとindex.xhtmlに遷移 ● 文字列指定 – ボタンのactionやoutcomeに文字列で指定 – indexでindex.xhtmlに遷移
  45. 45. テンプレート ● faceletsテンプレート – Apache Tiles的ななにか
  46. 46. テンプレート ● テンプレート(template.xhtml) ● 利用側(templateClient.xhtml)
  47. 47. データの表示 ● EL式で表示 – デフォルトでHTMLエスケープされる。 – エスケープしたくない時は h:outputTextのescape="false"を使用
  48. 48. データの表示 ● バッキングビーン ● Facelets
  49. 49. 繰り返し ● 繰り返しでデータを表示 – ui:repeatタグで繰り返し – h:dataTableもあるがやや融通はきかない
  50. 50. 繰り返し ● JSTLはJSFと相性が悪いので使わない方が良い (実行タイミングが違う) – c:forEach → ui:repeat – c:set → ui:param – c:if → rendered属性等
  51. 51. 処理の実行 ● h:commandLinkまたはh:commandButton ● action属性に実行するバッキングビーンのメ ソッドを指定 ● 普通の移動はh:linkやh:buttonを使う
  52. 52. 詳細画面に直接アクセス ● ブックマーカビリティ – ライフサイクルの最初は画面描画しかできないので データの取得等の処理が出来ない。 – 初期処理用のコンポーネントを使用する。
  53. 53. ブックマーカビリティ ● f:viewParam – クエリーストリングの値をバッキングビーンにセッ トできる ● f:viewAction(f:event + preRenderView) – 初回画面表示時に処理を実行できる
  54. 54. ブックマーカビリティ ● f:metadataタグで囲む ● 例 – ?id=1でアクセスするとバッキングビーンのid フィールドに1がセットされた後initメソッドが実 行される。
  55. 55. 入力処理 ● h:inputTextを使う ● バッキングビーン内のentityなどとデータの マッピングをする
  56. 56. 入力処理 ● 入力系のタグ – h:inputText – h:inputTextarea – h:inputSecret – h:inputHidden – h:selectOneMenu – h:selectOneRadio – H:selectOneListbox – h:selectBooleanCheckbox – h:selectManyCheckbox – h:selectManyManu – h:selectManyListBox
  57. 57. 日付型の入力処理 ● コンバータ – f:convertDateTimeタグを使用 – DateとStringの相互変換を行う – timeZoneを指定しないと9時間ずれるので注意
  58. 58. 関連クラスを選択 ● カスタムコンバータ – 本が所属するカテゴリーを選択したい – キー名とオブジェクトを相互変換 – h:selectOneMenuで選択 本 カテゴリー n 1
  59. 59. カスタムコンバータ ● コンバータクラス ● Facelets
  60. 60. カスタムコンバータ ● JSF2.2だとコンバータクラスで@Injectが使え る→実装上の問題がありJSF2.3に持ち越し ● JSF2.1の場合はCDIでインジェクトする
  61. 61. 入力チェックしたい ● バリデーション – JSFのバリデータ。f:validateLength等 (今時は使わない) – Beanバリデーション ● @Size(min = 4)で4文字以上
  62. 62. 入力チェックしたい ● エラーメッセージの表示 – h:messagesで全メッセージ表示 – h:messageで指定箇所にメッセージを表示
  63. 63. メッセージバンドル ● なんかDateの入力エラーメッセージがおかし い? – JSF初期のエラーメッセージは冗長 変なのついてる 長い
  64. 64. メッセージバンドル ● Facesメッセージの変更 – javax.faces-2.2.0.jarから javax.faces.Messages.propertiesを取得 – 修正してクラスパスに配置 – faces-config.xmlにmessage-bundleを指定
  65. 65. Beanバリデーションのメッセージ ● Beanバリデーションのメッセージも変えたい – バリデーションのロケール指定 – ValidationMessages.propertiesをクラスパスに 配置 ● Hibernate ValidatorのJarファイルの org.hibernate.validatorパッケージ等から取得する。
  66. 66. メッセージのロケール化 ● なんなら全文字列プロパティ化したい – メッセージ用プロパティファイルを配置 – faces-config.xmlにresource-bundleを指定
  67. 67. メッセージのロケール化 ● リソースバンドルの使用 – FaceletsではELで参照 – ソース内では ● 長い... FacesContext fc = FacesContext.getCurrentInstance(); fc.getApplication().getResourceBundle(fc, "msg").getString("message.text"); #{msg['message.text']}
  68. 68. cc:複合コンポーネント ● Faceletsを部分的に部品化 ● コンポーネントとして使用できる
  69. 69. cc:複合コンポーネント ● 複合コンポーネントを resources/comp/sample.xmlに配置した場合
  70. 70. カスタムコンポーネント ● Javaでコンポーネントを作成 ● UIComponentBaseクラス等を継承して作成す る ● ライフサイクル単位で細かい処理が可能
  71. 71. Ajax ● 画面を部分更新したい ● f:ajaxタグを使う – executeで送信データ、renderで書き換える部分 を指定 – 複数指定する場合はスペース区切り – 「:」を付けるとルートからの指定 – executeには@this, @form, @all, @noneも指定で きる
  72. 72. Ajax ● 例 – messageを送信してresult部分のみを更新
  73. 73. Ajaxのハンドリング ● Ajax実行時にJavaScriptの処理を実施したい ● jsf.ajax.addOnEventを使用する ● 事前処理やセッションタイムアウトが発生した 際の処理等が書ける – data.responseCodeとかでコードが取れる
  74. 74. 処理でRequestにアクセスしたい ● FacesContext – 処理内でHTTPServletRequestやSessionにアクセ スしたい – FacesContextを使う – Request以外にも様々な情報にアクセス出来る
  75. 75. これくらい知ってれば大体大丈夫!
  76. 76. 最後にJSFの問題点
  77. 77. JSFの問題点 ● 動的な画面の生成が難しい – クライアントサイドだけで処理出来ない – もっと読むとか ● パフォーマンス – まだやや遅い – JSF1が10秒、JSF2が2秒、アクション系フレーム ワークが1秒くらいのイメージ – 昔よりかなり早くなった
  78. 78. 是非、JSF試してみて下さい

×