![自己紹介
• かじうらみさき（@Kaji_ichigo）
• 2014年 日本オラクル新卒入社
– 社会人2年生★
– Java女子部2年生★
• Javaのコンサルタントをしています
• [お仕事]
–Java EE周辺技術支援
–Javaのバージョンアップのための調査
3](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-3-320.jpg)
![事前環境構築（今回）
• 以下の順番でインストール
• JDK 8u51 with NetBeans 8.0.2のインストール
– 必要なJDKがバンドルされたNetBeans
[入手先]
– http://www.oracle.com/technetwork/java/javase/downloads/jdk-
netbeans-jsp-142931.html
• Java EEプラグインの追加
– メニューバー「ツール」->プラグイン->使用可能なプラグイン->
「EJBおよびEAR」「Java EEベース」をチェック->インストール
• サーバの設定
– サービスタブ->「サーバ」を右クリック->サーバーの追加->
GlassFish Serverを選択->（存在しない場合…ライセンス契
約・・・にチェック->今すぐダウンロード->GlassFish
Server4.1）->次->終了
10](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-10-320.jpg)
![• メモ帳アプリ
それでは作ってみましょう！
[作成機能]
– メモ一覧表示
– メモ登録
– メモ編集
– メモ削除
22](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-22-320.jpg)
![プロジェクト作成
– フレームワーク->JavaServer Facesをチェック->終了
– memo-appプロジェクトが生成されていることを確認
– [注意]「ライブラリ」を右クリック->「ライブラリの追
加」->「Java EE 7 APIライブラリ」を選択&追加
– 「memo-app」を右クリック->実行！
– 「Hello from Facelets」とブラウザに表示されれば成功！
26](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-26-320.jpg)
![32
• DTOを編集
– [配付資料①]の赤字部分を記載（コメント部分は記載不要）
• Serializableを実装
• プロパティを3つ記載。後はコード自動生成
import文生成方法（importするパッケージ名に注意！）
– 豆電球をクリック->XXをインポートに追加
IDE上ゲッター・セッター生成方法
– ソースコード上右クリック->リファクタリング->フィールドをカプセル
化->ゲッター・セッターにチェック->リファクタリング
IDE上equalsメソッド、hashCodeメソッド実装方法
– ソースコード上右クリック->コードを挿入…->equals()および
hashCode()…->全てのフィールドにチェック->生成
DTOの作成](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-32-320.jpg)
![• マネージドBeanを編集
– [配付資料②]の赤字部分を記載（コメント部分は記載不要）
• createメソッド（メモ新規作成ページへ）
• editメソッド（メモ編集ページへ）
• registerメソッド（メモ新規登録）
• updateメソッド（メモ更新）
• deleteメソッド（メモ削除）
IDE上でゲッター・セッター自動生成方法
– ソースコード上右クリック->リファクタリング->フィール
ドをカプセル化->ゲッター・セッターにチェック->リファ
クタリング
@SessionScopedのインポートには注意が必要！
– javax.enterprise.context.SessionScopedを選択 36
マネージドBeanの作成](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-36-320.jpg)
![ページの作成
• Faceletsとは？
– JSFのページ作成技術のこと
• Faceletsでページの作成
– Webページ/index.xhtmlの編集
– [配付資料③]の赤字部分を記載（コメント部分は記載不要）
– <title>タグの値を修正
– <h:body>～</h:body>タグの中身を記述
• <!-- -->はコメント。記述不要
41](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-41-320.jpg)
![ページの作成
• Faceletsの解説
– EL式
• JSFページ上にロジックを書くための式言語
#{[マネージドBeanのEL名].[メンバメソッド or メンバ変数]}
• メンバ変数を指定すると、そのゲッター&セッターが
呼ばれる
44](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-44-320.jpg)
![ページの作成
• Faceletsでページの作成
– memo-appを右クリック->新規->その他
– JavaServer Faces->JSFページ->次
– 以下を入力->終了
入力項目 入力値
ファイル名 edit
フォルダ [空白]
オプション Facelets
45](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-45-320.jpg)
![ページの作成
• edit.xhtmlの編集
– Webページ/edit.xhtmlの編集
– [配付資料④]の赤字部分を記載（コメント部分は記載不要）
– <title>タグの値を修正
– <h:body>～</h:body>タグの中身を記述
46](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-46-320.jpg)
![応用
• スタイル変更してカスタマイズしたい！
– 部分的なスタイル変更…Faceletsタグのstyle属性を使用
– 全体的なスタイル変更…タグにIDやクラスを指定して
CSS（Cascading Style Sheets ）を作成
• <h:outputStylesheet name=“cssファイル名” library=“css”/>
– memo-app右クリック->新規->フォルダ
• 「resources」フォルダ、その下に「css」フォルダを生成
– memo-app右クリック->新規->その他
• Web->Cascading Style Sheet
– [配付資料：参考]の通り記載
– Ctrl+Shift->カラーチューザーでカラーコード簡易指定
50](https://image.slidesharecdn.com/8javajavaee-150829003633-lva1-app6891/85/20150829-Java-Java-EE-50-320.jpg)
20150829 Java女子部勉強会 Java EEハンズオン
- 3. 自己紹介 • かじうらみさき（@Kaji_ichigo） • 2014年 日本オラクル新卒入社 – 社会人2年生★ – Java女子部2年生★ • Javaのコンサルタントをしています • [お仕事] –Java EE周辺技術支援 –Javaのバージョンアップのための調査 3
- 5. 本日の目的 • Java EEがどのようなものか、 なんとなく理解して帰る！！ • JSF（画面作成用API）を使った画面 の作成方法がなんとなく分かった！ 状態を目指す 5
- 6. 参加対象者 • Java EEに触れたことのない方 （Javaの言語自体は分かる or 勉強中） 6
- 7. 本日のコンテンツ • Java EEの概要紹介（20分） • Java EEハンズオン（90分） –Java EEでメモ帳アプリケーションをつ くってみましょう！ 7
- 8. 8
- 9. 事前環境構築 • JDK（Java Development Kit） – Javaでアプリケーションを開発すためのコンパ イラ、デバッガ、クラスライブラリ、Javaプロ グラム実行環境(Java仮想マシン)などが含まれ ている • NetBeans – Java EEでの開発に適したIDE（統合開発環境）。 Java EEに準拠したGlassFish Serverがセット になっている 9
- 10. 事前環境構築（今回） • 以下の順番でインストール • JDK 8u51 with NetBeans 8.0.2のインストール – 必要なJDKがバンドルされたNetBeans [入手先] – http://www.oracle.com/technetwork/java/javase/downloads/jdk- netbeans-jsp-142931.html • Java EEプラグインの追加 – メニューバー「ツール」->プラグイン->使用可能なプラグイン-> 「EJBおよびEAR」「Java EEベース」をチェック->インストール • サーバの設定 – サービスタブ->「サーバ」を右クリック->サーバーの追加-> GlassFish Serverを選択->（存在しない場合…ライセンス契 約・・・にチェック->今すぐダウンロード->GlassFish Server4.1）->次->終了 10
- 11. 事前環境構築（こちらでもOK） • 以下の順番でインストール • ①JDK（Java SE 8u60）インストール http://www.oracle.com/technetwork/java/ja vase/downloads/ • ②NetBeans（Java EE版）インストール https://netbeans.org/downloads/ 11
- 13. Java EE = Java Enterprise Edition Webアプリケーションの開発 時によく利用する機能をまと めたフレームワーク 13 Java SE ベース（文法体系） Webアプリ開発 に使う機能Java EE
- 14. Java EEの機能 アプリケーション画面の作成 • 画面の入力値チェック、文字列の変換、画面用テン プレート、グローバル対応 アプリケーションロジックの作成 • トランザクション（データベース処理の一連のまと まり）、他のアプリケーションとの連携など データベース処理 • データベースを意識しないレコードの生成・読み取 り・更新・削除 14
- 15. Java EEの機能 15 Connector JPA JTA JMS Managed Bean EJB Common Annotations Interceptors CDIServletJSPJSF JAX-RSEL Java Caching API Batch Application Java API for JSON Processing Java API for WebSocket Bean Validation
- 16. Java EEの機能 16 Connector JPA JTA JMS Managed Bean EJB Common Annotations Interceptors CDIServletJSPJSF JAX-RSEL Bean Validation Java Caching API Batch Application Java API for JSON Processing Java API for WebSocket ハンズオンの対象
- 17. JSF(JavaServer Faces) 画面を部品(コンポーネント)単位で作成できるAPI • 画面に配置したUI部品を、Javaクラスのメン バ（フィールドやメソッド）に対応づけてアプ リケーションを開発できる！ Duke 男 名前： 性別： private String name; private String sex; public void register() RegisterBean 部品とフィールドを 紐付ける（＝バインド） Javaクラス （マネージドBean） 送信 ブラウザ 17
- 18. 名前： <h:inputTest value =“#{registerBean.name}”/> 性別： <h:inputText value=“#{registerBean.sex}”/> <h:commandButton value=“送信” action=“#{registerBean.register()}”/> JSF(JavaServer Faces) 画面を部品(コンポーネント)単位で作成できるAPI private String name; private String sex; public void register() RegisterBean 部品とフィールドを 紐付ける（＝バインド） Javaクラス 18 XHTML ページ （画面上に表示する部品 を記述） マネージドBean (表示する値、 ページから呼び出す処理 を記述)
- 22. • メモ帳アプリ それでは作ってみましょう！ [作成機能] – メモ一覧表示 – メモ登録 – メモ編集 – メモ削除 22
- 25. プロジェクト作成 • メニューバー「ファイル」->新規プロジェクト – Java Web->Webアプリケーション->次 – プロジェクト名：memo-app ->次 – 以下の状態であることを確認して「次」クリック！ 25
- 26. プロジェクト作成 – フレームワーク->JavaServer Facesをチェック->終了 – memo-appプロジェクトが生成されていることを確認 – [注意]「ライブラリ」を右クリック->「ライブラリの追 加」->「Java EE 7 APIライブラリ」を選択&追加 – 「memo-app」を右クリック->実行！ – 「Hello from Facelets」とブラウザに表示されれば成功！ 26
- 27. 事前準備 • GlassFishディスクリプタの編集 – 文字コードをWebページ標準のUTF-8に変更する • GlassFishサーバのデフォルトはISO-8859-1（英語圏用） – 「memo-app」を右クリック->新規->その他 – GlassFish->GlassFishディスクリプタ->次->終了 – XMLタブ->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" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd"> <glassfish-web-app error-url=""> <class-loader delegate="true"/> <jsp-config> <property name="keepgenerated" value="true"> <description>Keep a copy of the generated servlet class' java code.</description> </property> </jsp-config> <parameter-encoding default-charset="UTF-8" /> </glassfish-web-app> 27
- 28. アプリ作成開始！ 28 名前： <h:inputTest value =“#{registerBean.name}”/> 性別： <h:inputText value=“#{registerBean.sex}”/> <h:commandButton value=“送信” action=“#{registerBean.register()}”/> private String name; private String sex; public void register() RegisterBean バインド JavaクラスXHTML ページ （画面上に表示する部品を記述） マネージドBean (表示する値、 ページから呼び出す処理 を記述)Duke 男 名前： 性別： 送信
- 29. アプリ構成 29 名前： <h:inputTest value =“#{registerBean.name}”/> 性別： <h:inputText value=“#{registerBean.sex}”/> <h:commandButton value=“送信” action=“#{registerBean.register()}”/> private String name; private String sex; public void register() RegisterBean バインド JavaクラスXHTML ページ （画面上に表示する部品を記述） マネージドBean (表示する値、 ページから呼び出す処理 を記述)Duke 男 名前： 性別： 送信 これから作る
- 30. DTOの作成 • DTOとは？ –Data Transfer Objectの略 「データ」を「運ぶ」「オブジェクト」 – デザインパターンの1つ – 必要データを格納して他のクラスに引き渡す • 今回だと – メモタイトル、メモ内容、作成日時 – ビジネスロジックは書かない 30
- 31. 入力項目 入力値 クラス名 Memo パッケージ memo.dto • memo-appを右クリック->新規->Javaクラス • 以下を入力->終了 31 DTOの作成
- 32. 32 • DTOを編集 – [配付資料①]の赤字部分を記載（コメント部分は記載不要） • Serializableを実装 • プロパティを3つ記載。後はコード自動生成 import文生成方法（importするパッケージ名に注意！） – 豆電球をクリック->XXをインポートに追加 IDE上ゲッター・セッター生成方法 – ソースコード上右クリック->リファクタリング->フィールドをカプセル 化->ゲッター・セッターにチェック->リファクタリング IDE上equalsメソッド、hashCodeメソッド実装方法 – ソースコード上右クリック->コードを挿入…->equals()および hashCode()…->全てのフィールドにチェック->生成 DTOの作成
- 33. • DTOの解説 – Bean Validation • 入力値の検証を行うAPI • デフォルトで以下のようなアノテーションを用意 （以下は一部） – @NotNull（nullはダメ） – @Size（指定範囲のサイズでないとダメ） • message属性でエラーメッセージを指定 – ValidationMessages.propertiesファイルに書いてもOK 33 DTOの作成
- 34. • マネージドBeanとは？ – ページと結びついたJavaクラス – ページで扱う値、処理を記述する • 画面遷移、ビジネスロジックの呼び出し、入力値・ 出力値の管理 – privateなフィールド変数とpublicなゲッター・セッ ターを持つ（カプセル化）ふつうのJavaオブジェクト 34 マネージドBeanの作成
- 35. マネージドBeanの作成 入力項目 入力値 クラス名 MemoBean パッケージ memo.bean スコープ session • マネージドBeanを作成 – memo-appを右クリック->新規->その他 – JavaServer Faces->JSF管理対象Bean->次 – 以下を入力->終了 35
- 36. • マネージドBeanを編集 – [配付資料②]の赤字部分を記載（コメント部分は記載不要） • createメソッド（メモ新規作成ページへ） • editメソッド（メモ編集ページへ） • registerメソッド（メモ新規登録） • updateメソッド（メモ更新） • deleteメソッド（メモ削除） IDE上でゲッター・セッター自動生成方法 – ソースコード上右クリック->リファクタリング->フィール ドをカプセル化->ゲッター・セッターにチェック->リファ クタリング @SessionScopedのインポートには注意が必要！ – javax.enterprise.context.SessionScopedを選択 36 マネージドBeanの作成
- 37. • マネージドBeanの解説 – @Namedアノテーションを付与すると、マネージド Beanに名前がつけられる • ページからEL式（JSFページ上にロジックを書く ための式言語）を使ってアクセス可能になる！ 37 マネージドBeanの作成
- 38. • マネージドBeanの解説 – マネージドBeanの生成と廃棄のタイミングはスコー プアノテーションで指定する（newで生成しない） – 主なスコープ • @RequestScoped…1回のリクエストによる呼び出し&レス ポンスによる応答の間だけ存続する • @SessionScoped…HTTPセッションが有効な間存続する。 ブラウザを変えると別セッション • ＠ApplicationScoped…アプリケーションが実行されている 間ずっと存続する。全ユーザと1つのインスタンスを共有。 アンデプロイするまでずっと生き続ける • @ViewScoped…リクエストにより表示されたページが他の ページへ切り替わる直前まで存続する 38 マネージドBeanの作成
- 39. • マネージドBeanの解説 – メソッドのString型戻り値 • ページ名を指定すると、そのページに遷移できる – nullや””を指定すると現在のページを再表示 • “?faces-redirect=true” – ページ・リダイレクトで遷移できる – リダイレクトでない場合（フォワード）、画面 が遷移してもURLが変化しないことがあるため 39 マネージドBeanの作成
- 40. アプリ構成 40 名前： <h:inputTest value =“#{registerBean.name}”/> 性別： <h:inputText value=“#{registerBean.sex}”/> <h:commandButton value=“送信” action=“#{registerBean.register()}”/> private String name; private String sex; public void register() RegisterBean バインド JavaクラスXHTML ページ （画面上に表示する部品を記述） マネージドBean (表示する値、 ページから呼び出す処理 を記述)Duke 男 名前： 性別： 送信 これから作る
- 41. ページの作成 • Faceletsとは？ – JSFのページ作成技術のこと • Faceletsでページの作成 – Webページ/index.xhtmlの編集 – [配付資料③]の赤字部分を記載（コメント部分は記載不要） – <title>タグの値を修正 – <h:body>～</h:body>タグの中身を記述 • <!-- -->はコメント。記述不要 41
- 42. ページの作成 • Faceletsの解説 42 Faceletsタグ 説明 <h:dataTable> 指定したデータを元に表を生成 value属性…表示したいリスト・配列を指定 var属性…リスト・配列内の1要素を示す変数名を指定 <h:column> 列を生成 <f:facet> ヘッダなどの要素を追加 name属性…”header”を指定するとヘッダになる
- 43. Faceletsタグ 説明 <h:commandButton> action属性でマネージドBeanのメ ソッドを実行できるボタン <h:outputText> 文字列を出力 <h:convertDateTime> Date型をString型に変換するコン バータ pattern属性…ここに指定したパターン文字 フォーマットで文字列を生成 timeZone属性…デフォルトではグリニッジ 標準時が出力されるため”Japan”指定で日本 時間に変更する ※web.xmlにタイムゾーン指定することも可能 ページの作成 • Faceletsの解説 43
- 44. ページの作成 • Faceletsの解説 – EL式 • JSFページ上にロジックを書くための式言語 #{[マネージドBeanのEL名].[メンバメソッド or メンバ変数]} • メンバ変数を指定すると、そのゲッター&セッターが 呼ばれる 44
- 45. ページの作成 • Faceletsでページの作成 – memo-appを右クリック->新規->その他 – JavaServer Faces->JSFページ->次 – 以下を入力->終了 入力項目 入力値 ファイル名 edit フォルダ [空白] オプション Facelets 45
- 46. ページの作成 • edit.xhtmlの編集 – Webページ/edit.xhtmlの編集 – [配付資料④]の赤字部分を記載（コメント部分は記載不要） – <title>タグの値を修正 – <h:body>～</h:body>タグの中身を記述 46
- 47. Faceletsタグ 説明 <h:panelGrid> 列数指定で表を生成する。列数分の要 素ごとに行を変えて整形してくれる columns属性…列数を指定 <h:outputLabel> フォーム部品に対するラベル <h:inputText> 1行のテキストボックス <h:inputTextarea> 複数行にわたる大きなテキストエリア cols属性…列数を指定 rows属性…行数を指定 <h:button> 他のページに遷移するためのボタン <h:message> 指定部品に対するエラーメッセージ for属性…対象部品のIDを指定 ページの作成 • edit.xhtmlの解説 47
- 48. ページの作成 • edit.xhtmlの解説 – Faceletsタグのrendered属性 • EL式がtrueのときに表示、falseのときに非表示に – Faceletsタグのonclick属性 • JavaScriptプログラムを実行するための属性 • 要素クリック時にJavaScriptが実行される 48
- 49. 完成！ • メモ帳アプリ実行 – （memo-app右クリック->ビルド） – memo-app右クリック->実行 49
- 50. 応用 • スタイル変更してカスタマイズしたい！ – 部分的なスタイル変更…Faceletsタグのstyle属性を使用 – 全体的なスタイル変更…タグにIDやクラスを指定して CSS（Cascading Style Sheets ）を作成 • <h:outputStylesheet name=“cssファイル名” library=“css”/> – memo-app右クリック->新規->フォルダ • 「resources」フォルダ、その下に「css」フォルダを生成 – memo-app右クリック->新規->その他 • Web->Cascading Style Sheet – [配付資料：参考]の通り記載 – Ctrl+Shift->カラーチューザーでカラーコード簡易指定 50
- 51. 応用 • メモリ上におくだけではなくてデータベースに メモを登録したい！ – JPA&EJBを使いましょう • 希望者のみサンプルコード&資料提供 – JPA • Javaオブジェクトとリレーショナルデータベース のテーブルを対応付けるAPI – EJB • 容易にビジネスロジックを記述するためのAPI 51
- 52. 本日の目的 • Java EEがどのようなものか、 なんとなく理解して帰る！！ • JSF（画面作成用API）を使った画面 の作成方法がなんとなく分かりまし たか・・・？ 52