Java Day Tokyo 2017 ダウンロード資料

Transcription

1 Java EE ではじめる Web アプリケーション開発 日本オラクル株式会社オラクルユニバーシティ岡田大輔 Java Day Tokyo 年 5 月 17 日

2 Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle s products remains at the sole discretion of Oracle. 2

3 本日お話したいこと 1 Java EE とは? Java EE の概要と開発環境の準備 2 Web アプリケーションの開発 画面の作成方法 管理 Bean の作成方法 3

4 Java EE とは? Java EE の概要と開発環境の準備 4

5 Java Platform, Enterprise Edition とは? Java SE をベースにした企業システム向けのフレームワーク オープンな Web システムの構築を支える機能群の標準仕様 コミュニティ主導のエンタープライズ ソフトウェア標準 コンポーネント仕様とサービスアクセスのための各種 API を規定 Java EE Java SE 企業システム向けの機能を提供する API 群 Java 言語の基本機能を提供する API 群 5

6 Java EE 7 仕様群 Web Profile Full Profile Java SE JSF Servlet EJB Lite JPA Bean Validation Interceptors EJB JMS XML Messaging JAX-WS Web プロファイル Web アプリケーション開発で必要となる API セット JSP WebSocket CDI JAX-RS Common Annotation JDBC Batch Concurrency Utilities JAX-RPC JAXR フルプロファイル Web プロファイルを含むすべての Java EE API セット Expression Language JSTL JSON JTA JMX StAX JAXB JAXP JavaMail JASPI プロファイル is 何? 特定の技術をサポートする Java EE 技術をまとめたもの Web アプリケーション開発者に軽量ランタイムを提供できる 6

7 Web アプリケーションとは? ユーザー ( 主に Web ブラウザ ) とサーバーとの処理を受け持つ アプリケーション サーバー Web コンテナ EJB コンテナ Web ブラウザ Web アプリケーション ( コンポーネント ) EJB ( コンポーネント ) データベース サービス ( セキュリティ, トランザクション, DB 接続 ) Java Virtual Machine 7

8 コンポーネントとコンテナ 開発者はコンポーネントとして必要な機能を実装すれば OK ( その他はコンテナがやってくれます ) Java EE の主要なコンポーネント Web アプリケーション : JSF, サーブレット /JSP = Web コンテナが制御 ビジネス ロジック : EJB (Session Bean, Message Driven Bean) = EJB コンテナが制御 コンポーネント : アプリケーション固有の機能が実装されている コンテナが提供するサービスを利 コンテナによって管理される 開発者が作るもの コンテナ コンポーネント コンテナ : クライアントに サービス を提供する実 環境 コンポーネントのライフサイクルを管理 アプリケーション サーバーで提供されるもの 8

9 Java で Web アプリケーションを開発するには? 開発環境 IDE Web アプリケーション のフレームワーク JavaServer Faces ( アプリケーション サーバーに同梱される ) など ( 他のフレームワークでも OK) 実 環境 アプリケーション サーバー GlassFish ( 参照実装 ) Oracle WebLogic Server ( 商 製品 ) など ( オープンソースのアプリケーション サーバーや他社製品でも OK ) 商 アプリケーション サーバー製品を使う場合は 開発環境でも同じ環境を使いましょう 9

10 JSF: JavaServer Faces Java EE 標準の Web アプリケーション フレームワーク Java EE 5 から標準に Servlet API だけでは不 する機能を補う 値マッピング 値検証など コンポーネント ベースでユーザー インタフェースを作成 UI の構成要素は UI コンポーネント として提供される フレームワークの使 イメージ Web アプリケーション Struts 開発するアプリケーション Web アプリケーション Spring MVC Servlet Web アプリケーション JSF Java EE 標準で提供される 10

11 開発環境は何を使う? IDE ごとに機能が少し違うので好みのものを選択して OK Java EE 7 対応 IDE であれば何でも OK NetBeans ( 今回は NetBeans を使います ) Eclipse IntelliJ IDEA Oracle JDeveloper etc 11

12 開発環境の準備 : の場合 NetBeans 日本語サイトから 手可能 Java EE を選択すると開発に必要なものはひと通り揃う GlassFish ( アプリケーション サーバー ) 日本語化済み 12

13 アプリケーション サーバーの指定 : の場合 1. [ サービス ] タブの サーバー を右クリックして サーバーの追加 を選択 2. [ サーバー インスタンスの追加 ] 画面でアプリケーション サーバーを追加 アプリケーション サーバーのインストール先を指定する Oracle WebLogic Server を使う場合は事前にドメインを作成 13

14 開発環境の準備 : の場合 以下 (ry JSF を拡張した ADF (Oracle Application Development Framework) というフレームワークを使って開発する場合はとても便利です Oracle Technology Network から入手可能です 14

15 開発環境の準備 : の場合 Oracle Enterprise Pack for Eclipse を使 します Eclipse とアプリケーション サーバー (GlassFish や Oracle WebLogic Server) のツールなどがバンドルされている アプリケーション サーバーは別途インストール 日本語化は Pleiades などで う 日本語化済み Eclipse (Pleiades All in One) を 手して OEPE プラグインを追加しても OK 15

16 アプリケーション サーバーの指定 : の場合 1. [ サーバー ] タブのリンクをクリック 2. [ 新規サーバー ] 画面でアプリケーション サーバーを追加 サーバー ランタイムが登録されていない場合は アプリケーション サーバーのインストール先を指定する Oracle WebLogic Server を使う場合は 次の画面でドメイン指定する ( ドメインは事前に作成しておく ) GlassFish を使う場合も同様に登録します 16

17 プロジェクトの作りかた : の場合 [ 新規プロジェクト ] を選択してカテゴリ : [Java Web] - プロジェクト :[Web アプリケーション ] を選択 任意のプロジェクト名を設定する Web アプリケーションの設定 デプロイ先のサーバー名 Java EE バージョン コンテキスト パス フレームワークを指定 JavaServer Faces を選択 17

18 プロジェクトの作りかた Maven を使う場合 $ mvn -DarchetypeGroupId=org.codehaus.mojo.archetypes -DarchetypeArtifactId=webapp-javaee7 -DarchetypeVersion=1.1 -DgroupId=d1f2 -DartifactId=ee7webApp -Dversion=0.0.1-SNAPSHOT -Dpackage=jdt2017.d1f2 -Darchetype.interactive=false --batch-mode --update-snapshots archetype:generate イタリック体の部分は必要に応じて環境にあわせて修正してから実 あとは Maven プロジェクトを IDE でひらく 18

19 Web アプリケーションの開発 JSF で Web アプリケーションを作るには? 19

20 サンプルアプリケーション 戻る index.xhtml hello.xhtml hello.xhtml 送信送信 1 フォームに した情報を次のページで表示 2 チェックボックスで選択した項目を次のページで表示 3 選択した項目に関連する情報を表形式で表示 20

21 JSF で開発するもの JSF で開発するものは Facelet と管理 Bean Facelet 画面の定義 (JSF ページ ) 画面のレイアウトを記述する XHTML ベースのテンプレート エンジン 管理 Bean 処理の定義 Facelet と一緒に使う Java クラス 値の保持やボタン押下時の処理などを記述する 21

22 Facelet とは? Web アプリケーションのビューを提供 Facelet は JSF ページの実装方法のひとつ XHTML 構文を使 してページを宣言 複数のタグライブラリを使 可能 ページのテンプレート作成が可能 Facelet で記述したページは UIComponent として扱われる JSF ページは JSP でも実装可能ですができるだけ Facelet で実装しましょう UIComponent ツリー UIRootView HtmlOutput Text Facelet <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN Html " <html DataTable xmlns=" xmlns:h=" xmlns:f=" HtmlOutput xmlns:ui=" Link <h:head> <title>java EE ではじめる Web アプリケーション開発 </title> </h:head> <h:body> <p> 選択した地域は <ui:repeat value="#{areabean.area}" var="data"> #{data} </ui:repeat> です </p> <br/> <h4> 選択した地域の都道府県 </h4> <h:datatable id="dt1" value="#{areabean.prefecturesinarea}" var="p" border="1"> <h:column> <f:facet name="header"> <h:outputtext value=" 都道府県 "/> </f:facet> <h:outputtext value="#{p.name}" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value=" 都道府県庁所在地 "/> </f:facet> <h:outputtext value="#{p.capital}" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value=" 地域 "/> </f:facet> <h:outputtext value="#{p.region}" /> </h:column> </h:datatable> <h:link value=" 戻る " outcome="index2" /> </h:body> </html> ブラウザ UI 22

23 JSF ページを Facelet で書いてみよう <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" <h:head> <title>java EE ではじめる Web アプリケーション開発 </title> </h:head> <h:body> <h2> <h:outputtext value="index.xhtml" /> </h2> <hr /> <h3> 名前を してください </h3> <h:form> 名前 : <h:inputtext id="it1" value="#{hellobean.name}" /> <h:commandbutton value=" 送信 " action="hello" /> </h:form> </h:body> </html> index.xhtml Web ブラウザで表示すると 23

24 JSF タグライブラリ 接頭辞 説明 Namespace URI composite 複合コンポーネントの宣言と定義するためのJSFタグ h コンポーネントとHTMLレンダラを含む JSF HTML タグ f 特定のレンダリングに依存しないコアFacesタグ ui Facletテンプレート作成のためのJSFタグ c JSTLコアライブラリのサブセット fn JSTL 関数タグライブラリ One Point: JSF ではページを構成するためのタグライブラリが提供されています (JSF ページでは Namespace をインポートして使 することができます ) 24

25 フォームの作成 <h:form> タグ index.xhtml <h:form> <h:form> 名前 : <h:inputtext value="#{hellobean.name}" /> した値は HelloBean オブジェクトの変数 name に格納される <h:commandbutton id="subimt" value=" 送信 " action="hello" /> </h:form> 遷移先の JSF ページを指定 25

26 JSF タグあれこれ <h:outputtext> <h:outputlabel> <h:inputtext> <h:inputsecret> <h:column> <h:selectoneradio> <h:selectonemenu> <h:selectmanycheckbox> <h:selectbooleancheckbox> <h:commandbutton> <h:commandlink> <h:datatable> 26

27 JSF タグあれこれ : 書き方 テキスト ( パスワード ) JSF タグ <h:inputsecret id="is1" value="#{bean.attr}" /> 出 される HTML タグ <input id="f1:is1" type="password" name="f1:is1" value="" /> ラジオボタン ドロップダウン チェックボックス <h:selectoneradio id="or1" value="#{bean.attr}"> <f:selectitem itemvalue="radio1" itemlabel="radio1"/> <f:selectitem itemvalue="radio2" itemlabel="radio2"/> </h:selectoneradio> <h:selectonemenu id="ol1" value="#{bean.attr}"> <f:selectitem itemvalue="list1" itemlabel="list1"/> <f:selectitem itemvalue="list2" itemlabel="list2"/> <f:selectitem itemvalue="list3" itemlabel="list3"/> </h:selectonemenu> <h:outputlabel for="cb1" value=" 選択 ( チェックボックス ): "/> <h:selectbooleancheckbox id="cb1" value="#{bean.attr}" /> <table id="f1:or1"><tr><td> <input type="radio" name="f1:or1" id="f1:or1:0" value="radio1" /> <label for="f1:or1:0">radio1</label></td><td> <input type="radio" name="f1:or1" id="f1:or1:1" value="radio2" /> <label for="f1:or1:1">radio2</label> </td></tr></table> <select id="f1:ol1" name="f1:ol1" size="1"> <option value="list1">list1</option> <option value="list2">list2</option> <option value="list3">list3</option> </select> <label for="f1:cb1"> 選択 ( チェックボックス ): </label> <input id="f1:cb1" type="checkbox" name="f1:cb2" /> 27

28 画面の遷移 <h:form> 名前 : <h:inputtext id="it1" value="#{hellobean.name}" /> <h:commandbutton value=" 送信 " action="hello" /> </h:form> index.xhtml hello.xhtml <h:link value=" 戻る " outcome="index" /> 28

29 管理 Bean Facelet の 値の保持やボタン押下時に実 するビジネス ロジックを記述するクラス CDI Bean として実装 管理 Bean の構成要素 保持する値 ビジネス ロジック 画面遷移 CDI (Context Dependency Injection) アプリケーション実 中の処理状態 (Context) に関連付けて依存性を注 (Dependency Injection) する Java EE 標準仕様 Web アプリケーション以外のコンポーネントからも同じ手段でインスタンスを利 可能 JSF EJB CDI JPA JAX-RS (RESTful) 29

30 管理 Bean (CDI) のスコープ スコープスコープをあらわす注釈有効期間 管理 Bean は注釈で指定された有効期間で コンテナによってインスタンス化 破棄されます HTTP リクエストを受けてからレスポンスを返すまでの間 HTTP セッションが有効な間 Web アプリケーションが起動してから終了するまでの間 request と session の間で Conversation.begin() から Conversation.end() を実 するまでの間 インジェクション先のライフサイクルと同じ ( デフォルト ) Scoped 30

31 管理 Bean を書く 管理 Bean のインスタンスは指定したスコープでインスタンス化され 破棄される ( 開発者はインスタンス化のコードは書かなくて良い ) import javax.enterprise.context.requestscoped; public class HelloBean { 管理 Bean を使 する場合は java.io.serializable を実装する String name; public HelloBean() { } public void setname(string name) { this.name = name; } public String getname() { return name; } 引数なしのコンストラクタが必要 ( 必要に応じてオーバーロード ) フィールド ( 保持する値 ) とアクセサ メソッドを定義 } public String getmessage() { return (name == null name.equals(""))? " こんにちは名無しさん!" : " こんにちは " + name + " さん!"; } フィールドがないアクセサ メソッドも定義可能 31

32 Facelet から管理 Bean へのアクセス <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" <h:head> <title>java EE ではじめる Web アプリケーション開発 </title> </h:head> <h:body> <h2> <h:outputtext value="hello.xhtml" /> </h2> <hr /> <h2> メッセージを表示します </h2> <p> <h:outputtext value="#{hellobean.message}" /> <br /> </p> <h:link value=" 戻る " outcome="index" /> </h:body> </html> 管理 Bean には EL 式を使ってアクセスすることができる hello.xhtml 32

33 EL 式の使い方 JSF の EL 式の構文は #{ 管理 Bean の名前. プロパティ名 } hello.xhtml <h:outputtext value="#{hellobean.message}" /> 管理 Bean 名はクラス名 ( 先頭小文字 ) (@Named 注釈の value 属性で変更可能 public class HelloBean { String name; public String getname() { return name; } public String getmessage() { return (name == null name.equals(""))? } 管理 Bean のプロパティの getter メソッドを呼び出します " こんにちは名無しさん!" : " こんにちは " + name + " さん!"; 33

34 画面の遷移 : 管理 Bean で遷移ロジックを実装 ボタン押下時にビジネス ロジックを実 する場合などに有効 index.xhtml <h:commandbutton id="subimt" value=" 送信 " action="hello" /> index.xhtml <h:form> <h:inputtext id="name"/> <h:commandbutton id="subimt" value=" 送信 " action="hello" /> </h:form> 管理 Bean のメソッドも指定可能 ( 動的ナビゲーション ) action = "#{hellobean.navigation}" HelloBean 指定された JSF ページに遷移 ( 静的ナビゲーション ) public String navigation() { // 任意の処理 } return "hello"; hello.xhtml <h:outputtext value=" 何かを表示します " /> 戻り値の型が void のメソッドの呼び出し またはメソッドの戻り値が null の場合は呼び出し元のページを表示 34

35 デプロイ プロジェクトを右クリック -[ 実 ] を選択すると Web アプリケーションがアプリケーション サーバーにデプロイされる の場合 : プロジェクトの.war ファイルは target ディレクトリ配下に出 されている 35

36 動かしてみよう 戻る index.xhtml 送信 hello.xhtml 36

37 アプリケーションはどう動いている? JSF も MVC ベースのフレームワーク HTTP リクエスト コントローラー Web コンテナ HTTP レスポンス (FacesServlet) 成 管理 モデル 操作 リダイレクト ( 管理 Bean) ビュー アクセス (Facelet) 37

38 FacesServlet の役割 MVC モデルのコントローラーに相当 リクエストに応じて JSF ライフサイクルを管理するフロント コントローラー コンポーネント FacesServlet 1. FacesContext を 成する javax.faces.context.facescontext リクエスト処理とレスポンス 成に関連するコンテキスト情報 ライフサイクルの各フェーズで利 される Lifecycle 2. 制御を Lifecycle に渡す 3. 6 つのライフサイクル フェーズを処理 FacesContext 38

39 JSF のライフサイクル HTTP リクエスト ビューの復元 値の適 イベント処理 検証処理 イベント処理 HTTP レスポンス レスポンスのレンダリング イベント処理 アプリケーション呼び出し イベント処理 モデル値の更新 39

40 JSF のライフサイクル : 各フェーズの処理 ビューの復元 値の適 検証処理 リクエストに基づいてページのUIComponentツリーを作成 ( 復元 ) する ( 初期リクエスト時は作成 ポスト バック時は復元 ) 送信されたフォームの値をUIコンポーネントに適 する文字列データをJavaデータ型に変換 ( コンバータ ) UIComponentに関連付けられた検証( バリデータ ) を う モデル値の更新 値の適 フェーズで適 された UIComponent の値を管理 Bean にコピーする アプリケーション呼び出し 管理 Bean のメソッドを呼び出してビジネスロジックを実 する レスポンスのレンダリング 管理 Bean の値を読み取り (EL 式 ) レスポンスを返す 40

41 これはどうすれば? - フォームで日本語を扱う アプリケーション サーバーにリクエスト処理の設定を追加しておく WEB-INF/glassfish-web.xml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN " <glassfish-web-app error-url=""> <parameter-encoding default-charset="utf-8" /> </glassfish-web-app> Oracle WebLogic Server でもデプロイメント記述子 (WEB-INF/weblogic.xml) で同様の設定ができます 41

42 データの表示方法 : チェックボックス 戻る index.xhtml hello.xhtml hello.xhtml 送信送信 2 チェックボックスで選択した項目を次のページで表示 42

43 複数選択のチェックボックスの作成 <h:form> <h:outputtext value=" 地域 : " /> <h:selectmanycheckbox id="cb1" value="#{areabean.area}"> <f:selectitems value="#{areabean.options}"/> 選択肢は f:selectitems タグで表示可能 </h:selectmanycheckbox> <h:commandbutton value=" 送信 " action="area"/> </h:form> 選択した地域は <ui:repeat value="#{areabean.area}" var="data"> #{data} </ui:repeat> です List に含まれる要素は ui:repeat で表示可能 AreaBean private List<SelectItem> options; public List<SelectItem> getoptions() { return option; } private List<Sting> area; public void setarea(list<string> area) { this.area = area; } public List<String> getarea() { return area; } 43

44 参考 : 管理 Bean の実装 3. public class AreaBean { 4. // 選択した地方名 5. private List<String> area; 6. // selectmanycheckbox で選択したアイテム 7. private List<SelectItem> options; 8. // 都道府県リスト ( 読み取り専 : 初期化処理の実装は省略 ) 9. private List<Prefecture> prefectures; 10. public List<SelectItem> getoptions() { 11. return options; 12. } 13. public void setarea(list<string> area) { 14. this.area = area; 15. } 16. public List<String> getarea() { 17. return area; 18. } AreaBean.java 19. public List<Prefecture> getprefecturesinarea() { 20. // 選択した地域名を持つ都道府県リストを取得 21. List<Prefecture> selectedprefectures = new ArrayList<>(); 22. area.stream().foreach(area -> prefectures.stream().filter( pref -> pref.getregion().equals(area)).foreach(selectedprefectures::add)); 23. return selectedprefectures; 24. } 26. public void init() { 27. // 地方の値リスト 28. String[] area = {" 北海道 ", " 東北 ", " 関東 ", " 信越 ", " 北陸 ", " 東海 ", " 近畿 ", " 中国 ", " 四国 ", " 九州 ", " 沖縄 "}; 29. // options に SelectItem オブジェクトとして格納 30. options = new LinkedList<>(); 31. Stream.of(area).forEach( element -> options.add( new SelectItem(element, element))); 32. } 33.} 44

45 データの表示方法 : テーブル表示 戻る index.xhtml hello.xhtml hello.xhtml 送信送信 3 選択した項目に関連する情報を表形式で表示 45

46 表の生成 <h:datatable> タグ コレクションデータをテーブル形式で表示する value 属性には表を 成するデータ ( コレクション ) を指定します var 属性には コレクション内のオブジェクトの参照変数を指定します <h:datatable value="#{areabean.prefecturesinarea}" var="p" border="1"> <h:column> <f:facet name="header"> <h:outputtext value=" 都道府県 "/> </f:facet> <h:outputtext value="#{p.name}" /> </h:column> 以下略 </h:datatable> AreaBean private List<Prefecture> prefecturesinarea; public List<Prefecture> getprefecturesinarea() { return selectedcountry; } Prrefecture private String name; private String capital; private String region; 46

47 表の生成 <h:datatable> タグ 表のファセットの指定 <h:datatable value="#{areabean.prefecturesinarea}" var="p" border="1"> <h:column> <f:facet name="header"> <h:outputtext value=" 都道府県 "/> </f:facet> <h:outputtext value="#{p.name}" /> </h:column> 以下略 </h:datatable> 表のヘッダーやフッターは <f:facet> タグで header や footer を指定します 47

48 これはどうすれば? - 画面のデザインを揃えたい テンプレートを使 すると アプリケーションに共通のルック アンド フィールを持たせることができます <ui:insert> テンプレートにコンテンツを挿 <ui:composition> 適 するテンプレートの指定 <ui:define> テンプレートに挿 するコンテンツを定義 (<ui:insert> を置き換える ) 48

49 テンプレートの作成 <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xmlns:ui=" xmlns:h=" <h:head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <h:outputstylesheet name="/css/default.css"/> <h:outputstylesheet name="/css/csslayout.css"/> <title>java EE ではじめる Web アプリケーション開発 </title> </h:head> <h:body> <div id="top"> <ui:insert name="top">top</ui:insert> </div> <div id="content" class="center_content"> <ui:insert name="content">content</ui:insert> </div> <div id="bottom"> <ui:insert name="bottom">bottom</ui:insert> </div> </h:body> </html> template.xhtml CSS を使 する場合は h:outpustylesheet を使 可能 css ファイルは <web-root>/resources/css 配下に配置する ヘッダー (top) コンテンツ (content) フッター (bottom) 49

50 index.xhtml にテンプレートを適用する index.xhtml <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:ui=" <ui:composition template="template.xhtml"> <ui:define name ="top"> <h1>index.html</h1> </ui:define> <ui:define name="content"> <h2> 名前を してください </h2> <h:form> 名前 : <h:inputtext id="it1" value="#{hellobean.name}" /> <h:commandbutton value=" 送信 " action="hello" class="button"/> </h:form> </ui:define> <ui:define name="bottom"> <p class="footer"> Java Day Tokyo 2017</p> </ui:define> </ui:composition> </html> [top] <ui:composition> で指定したテンプレートに挿 するコンテンツを定義 [content] [bottom] 50

51 動かしてみよう 51

52 こんなことも JSF 2.2 の HTML 5 サポート HTML タグで JSF 属性を使 したり ( パススルー エレメント ) JSF コンポーネントに HTML 属性を使 したり ( パススルー属性 ) できる index.xhtml <h:form> 名前 : <h:inputtext value="#{hellobean.name}" /> <h:commandbutton id="subimt" value=" 送信 action="hello" /> </h:form> HTML タグに接頭辞 jsf で指定すると JSF 属性を使 できる ( パススルー エレメント ) 接頭辞 jsf の namespace 宣言は xmlns:jsf=" を使 するパススルー属性の場合は xmlns:pt=" <form jsf:id="f1"> 名前 : <input type="text" id="it1" jsf:value="#{hellobean.name}" /> <input type="submit" value=" 送信 " jsf:action="hello" /> </form> 52

53 まとめ : 本日お話したこと JSF は Java EE 標準の Web アプリケーション フレームワークです JSF でのプレゼンテーションは Facelet で記述します コンポーネント ベースのテンプレート フレームワークです 豊富な JSF タグを利 できますし HTML タグ主体で記述することもできます JSF でのページ遷移は 暗黙的なナビゲーションが使 できます action や outcome に遷移先を文字列で指定できます (index.xhtml の場合は index ) 管理 Bean でメソッドを定義する場合も遷移先の文字列を戻り値で返します データは管理 Bean(CDI) で保持できます CDI Bean はコンテナによってインスタンスのライフサイクルが管理されます ( 適切なスコープを注釈で指定しましょう ) Facelet からは EL 式を使ってアクセス可能です 53

54 54

55 Learn Oracle from Oracle はじめでも安心 Java EE アプリケーション開発ができるようになる オラクルユニバーシティでは Java EE を使ったアプリケーション開発を体系的に学習することができる研修コースを提供しています MVC ベースの Web アプリケーションも RESTful アプリケーションションもわかりやすい講義と実機演習を通してじっくり しっかり身につけることができます (MVC アプリケーションを開発したい方向け ) Java EE 6 アプリケーション開発 コース概要 学習内容 このコースでは Java EE 6 の Web Profile に準拠したエンタープライズアプリケーションを開発およびデプロイするための知識を習得します EJB, JPA, Servlets, JSP, JSF, CDI, Bean Validation などの Java EE 6 標準仕様をカバーし 主に JSF テクノロジを使 して デスクトップやモバイル Web ブラウザからアクセス可能な Web ベースのエンド ツー エンドのアプリケーションの開発方法に焦点を当てます Web プロファイル対応のアプリケーションの開発 JSF Facelet を使 したプレゼンテーションの作成 CDI の使 した依存性注 Bean Validation を使 した検証の実装 EJB を使 したビジネスロジック コンポーネントの実装 JPA を使 した DB アクセス コンポーネントの実装 トランザクション ポリシーとセキュリティ ポリシーの適 (RESTful アプリケーションを開発したい方向け ) Java EE 7: Web アプリケーション開発 コース概要 学習内容 このコースでは Java EE 7 の Web Profile に準拠した RESTful Web アプリケーションを開発およびデプロイするための知識を習得することができます EJB-Lite, JPA, CDI, JAX-RS, JSF や WebSocket API と JSON Processing などの Java EE 7 標準仕様を理解するとともに HTML5 や JavaScript を使 したエンド ツー エンドの Web アプリケーションを開発する方法を学習します Java EE アーキテクチャと Web プロファイル JAX-RS Web サービス Java RESTful クライアント JavaScritp や AJAX を使 する HTML5 アプリケーション WebSocket および JSON-P (Java API for JSON Processing) POJO および EJB-Lite を使 するモデル コンポーネント JPA (Java Persistence API) セキュリティ ポリシーとトランザクション ポリシーの実装 日数 5 日間 日数 5 日間 55

56 56

57

58