Your SlideShare is downloading. ×
JSF2.2で簡単webアプリケーション開発
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

14,999
views

Published on


0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,999
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
109
Comments
0
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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