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