Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to 20150829 Java女子部勉強会 Java EEハンズオン
Similar to 20150829 Java女子部勉強会 Java EEハンズオン (20)
Recently uploaded
Recently uploaded (14)
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