![• メモ帳アプリ
[作成機能]
– メモ一覧表示
– メモ検索
– メモ登録
– メモ編集
– メモ削除
それでは作ってみましょう！
13](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-13-320.jpg)
![データベース準備
– jdbc:derby://localhost:1527/javajo [JAVAJOのjavajo]
->JAVAJO->「表」を右クリック->コマンドの実行...
• 以下のDDL（データ定義言語）文を記述
17
CREATE TABLE memo (
id INTEGER NOT NULL PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
title VARCHAR(100) NOT NULL,
content LONG VARCHAR,
create_time TIMESTAMP NOT NULL
);](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-17-320.jpg)
![プロジェクト作成
– フレームワーク->JavaServer Facesをチェック->終了
– memo-appプロジェクトが生成されていることを確認
– [注意]ライブラリ->右クリックで「ライブラリの追加」->「Java EE
7 APIライブラリ」を選択&追加
– 「memo-app」右クリック->実行！
– 「Hello from Facelets」とブラウザに表示されれば成功！
21](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-21-320.jpg)
![データアクセス層の作成
• Memoエンティティクラスの編集
– Memo.javaを開き、以下の黄色部分を記述([配付資料①]の赤字部分)
– JPQL文
• SQL文に似たJPAにおける問い合わせ言語。データベースのテーブ
ルにマッピングされるエンティティクラスの操作をするクエリを記
述するための技術
• SQL文だと…
– SELECT * FROM memo WHERE content LIKE ‘％word％’
@Entity
@Table(name = "MEMO")
@XmlRootElement
@NamedQueries({
@NamedQuery(name = "Memo.findAll", query = "SELECT m FROM Memo m order by m.createTime desc"),
@NamedQuery(name = "Memo.findById", query = "SELECT m FROM Memo m WHERE m.id = :id"),
@NamedQuery(name = "Memo.findByTitle", query = "SELECT m FROM Memo m WHERE m.title = :title"),
@NamedQuery(name = "Memo.findBySearchWord", query = "SELECT m FROM Memo m WHERE m.content like :word"),
@NamedQuery(name = "Memo.findByCreateTime", query = "SELECT m FROM Memo m WHERE m.createTime = :createTime")})
public class Memo implements Serializable {
26
名前付きクエリ JPQL文](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-26-320.jpg)
![ビジネスロジック層の作成
• セッションビーンの作成
– セッションビーン
• EJBの一種。クライアント&サーバー間やシステム間のやり取り（セッショ
ン）を通じて実行するビジネスロジックを実装するためのEJBコンポーネント
[セッションビーンの種類]
• @Stateless…対話状態を保持しないセッションビーン。1回のメソッド呼び
出しで完結する処理に使用する。複数のクライアントから共有される
• @Stateful…対話状態を保持するセッションビーン。複数回の呼び出しで継続
的な処理を行う際に使用する。クライアントと1対1に対応する
• @Singleton…1つのアプリケーションで、1つしか存在しないセッションビー
ン。常に同じオブジェクトを参照する
29](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-29-320.jpg)
![ビジネスロジック層の作成
• セッションビーンの編集
• MemoService.javaを開き
[配付資料②]の赤字部分を記載（コメント部分は記載不要）
– CRUD処理用メソッドを実装
• SELECT…メモ全件取得メソッド->MemoService#findAll()
• SELECT…メモ検索メソッド->MemoService#search()
• CREATE…メモ新規作成メソッド->MemoService#create()
• UPDATE…メモ更新メソッド->MemoService#update()
• DELETE…メモ削除メソッド->MemoService#delete()
31](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-31-320.jpg)
![プレゼンテーション層の作成
• マネージドBeanを編集
– [配付資料③]の赤字部分を記載（コメント部分は記載不要）
– IDE上でゲッター・セッター自動生成方法
• ソースコード上を右クリック->リファクタリング->フィールドを
カプセル化->ゲッター・セッターにチェック->リファクタリング
37](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-37-320.jpg)
![プレゼンテーション層の作成
• Faceletsでページの作成
– Facelets
• JSFのページ作成言語のこと
– Webページ/index.xhtmlの編集
– [配付資料④]の赤字部分を記載（コメント部分は記載不要）
40](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-40-320.jpg)
![プレゼンテーション層の作成
• Faceletsの解説
– EL式…JSFページ上にロジックを書くための式言語
• #{[マネージドBeanのEL名].[メンバメソッド or メンバ変数]}
• メンバ変数を指定すると、そのゲッター&セッターが呼ばれる
42](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-42-320.jpg)
![プレゼンテーション層の作成
• Faceletsでページの作成
– memo-appを右クリック->新規->その他
– JavaServer Faces->JSFページ->次
– 以下を入力->終了
入力値
ファイル名 edit
フォルダ [空白]
オプション Facelets
43](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-43-320.jpg)
![プレゼンテーション層の作成
• Faceletsでページの作成
– Webページ/edit.xhtmlの編集
– [配付資料⑤]の赤字部分を記載（コメント部分は記載不要）
44](https://image.slidesharecdn.com/8javajavaee-150829005346-lva1-app6892/85/Java-Java-EE-44-320.jpg)
Java女子部 Java EEハンズオン（応用編）
- 2. 本日のコンテンツ • Java EEの概要紹介 • Java EEハンズオン – Java EEでメモ帳アプリケーションをつくってみましょう！ • 対象：Java EEに触れたことのない方 （Javaの言語自体は分かる方） 2
- 3. Java EE = Java Enterprise Edition 業務アプリケーション（Webアプリケーション）開発時に よく利用する機能をまとめたフレームワーク → Java EEはインタフェースの集合 → 実装はサーバが提供（今回はGrassFish） Java SE（Java Standard Edition）はJavaの文法体系 • Java SEはデスクトップアプリケーションの作成に使用 • 「サーバ」、「Webブラウザ」といったキーワードが出てくればそれ はきっとJava EE Java SE ベース（文法体系） Webアプリ開発 に使う機能 Java EE 3
- 4. Java EEの機能 UIの作成 • 入力値の検証、文字列変換、テンプレート、国際化対応 業務ロジックの作成 • トランザクション、並行実行・排他制御、他の業務アプリケーション との連携など データベース処理 • データベースを意識しないCRUD処理 4
- 5. 業務アプリケーションの構成 プレゼンテーション層 ビジネスロジック層 データアクセス層 データ ベース Webブ ラウザ UIを提供 アプリケー ション ロジックを 提供 データ ベース 処理を 提供 5
- 8. JSF(JavaServer Faces) UIを部品（コンポーネント）単位で作成できるAPI • 画面に配置したUI部品を、Javaクラスのメンバ（フィールドや メソッド）に対応づけてアプリケーションを開発できる ▶直観的な開発が可能。UI部品の再利用ができる かじうら みさき 女 名前： 性別： Private String name; Private String sex; public void regester() RegisterBean部品とフィールドを紐付ける （＝バインド） Javaクラス （バッキングBean） 送信 ブラウザ 8
- 10. EJB(Enterprise Java Beans) 容易にビジネスロジックを記述するためのAPI • トランザクション開始・コミット・ロールバック制御を自動化可能 →ビジネスロジックにトランザクション制御の記述が不要に • 通常のJavaクラス（POJO）にアノテーションを付加するだけでEJB 化できる ビジネス ロジック EJB トランザクションを 自動的に開始 エラーが無ければ 自動的にコミット！ ランタイムエラー発生でロールバック トランザクション 呼出し元 10
- 12. JPA(Java Persistence API) Javaオブジェクトとリレーショナルデータベースの テーブルを対応付けるAPI • JPAでは、テーブルではなく、テーブルにマッピングされるエン ティティというオブジェクトを操作する • データベースへのアクセス処理を意識させない • データベース毎の差異を吸収する→移植性が向上 • データベースに依存しないクエリ言語（JPQL）が使える • 通常のSQLを使用することも可能 JPA エンティティ 実際に扱う対象 DBサーバ データ ベース 12
- 13. • メモ帳アプリ [作成機能] – メモ一覧表示 – メモ検索 – メモ登録 – メモ編集 – メモ削除 それでは作ってみましょう！ 13
- 15. 事前環境構築 • 以下の順番でインストール • ①JDK（Java SE 8u60）インストール http://www.oracle.com/technetwork/java/javase/downloads/ • ②NetBeans（Java EE版）インストール https://netbeans.org/downloads/ • NetBeans – Java EEでの開発に適したIDE（統合開発環境）。GlassFish Serverが バンドルされている • JDK – Javaでアプリケーションを開発すためのコンパイラやデバッガ、クラ スライブラリ、Javaプログラム実行環境(Java仮想マシン)などが含ま れている 15
- 16. データベース準備 • NetBeansにバンドルされているJava DB（Derby）を 使用 – 「サービス」タブ->データベース->「Java DB」を右クリック ->データベースの作成->以下を入力して「OK」 – データベース->Java DB->「javajo」を右クリック->接続... 入力項目 入力値 データベース名 javajo ユーザ名 javajo パスワード javajo 16
- 17. データベース準備 – jdbc:derby://localhost:1527/javajo [JAVAJOのjavajo] ->JAVAJO->「表」を右クリック->コマンドの実行... • 以下のDDL（データ定義言語）文を記述 17 CREATE TABLE memo ( id INTEGER NOT NULL PRIMARY KEY GENERATED ALWAYS AS IDENTITY, title VARCHAR(100) NOT NULL, content LONG VARCHAR, create_time TIMESTAMP NOT NULL );
- 20. プロジェクト作成 • プロジェクトの作成 – メニューバー「ファイル」->新規プロジェクト – Java Web->Webアプリケーション->次 – プロジェクト名：memo-app ->次 – 以下の状態であることを確認して「次」をクリック！ 20
- 21. プロジェクト作成 – フレームワーク->JavaServer Facesをチェック->終了 – memo-appプロジェクトが生成されていることを確認 – [注意]ライブラリ->右クリックで「ライブラリの追加」->「Java EE 7 APIライブラリ」を選択&追加 – 「memo-app」右クリック->実行！ – 「Hello from Facelets」とブラウザに表示されれば成功！ 21
- 24. データアクセス層の作成 • エンティティの作成 – エンティティ • データベースにデータを永続化するためのオブジェクト。データ ベースのテーブルにマッピングされる – memo-app右クリック->新規->その他->持続性->データベースから のエンティティ・クラス->次 – データ・ソース(D):->新しいデータ・ソース – 以下を入力&選択->OK 24
- 25. データアクセス層の作成 • エンティティの作成 – 「MEMO」を選択->追加->次 – 「パッケージ(K):」memo.entity->次 – 「コレクション型(C):」java.util.List ->終了 – Memoエンティティクラスの生成を確認 25
- 26. データアクセス層の作成 • Memoエンティティクラスの編集 – Memo.javaを開き、以下の黄色部分を記述([配付資料①]の赤字部分) – JPQL文 • SQL文に似たJPAにおける問い合わせ言語。データベースのテーブ ルにマッピングされるエンティティクラスの操作をするクエリを記 述するための技術 • SQL文だと… – SELECT * FROM memo WHERE content LIKE ‘％word％’ @Entity @Table(name = "MEMO") @XmlRootElement @NamedQueries({ @NamedQuery(name = "Memo.findAll", query = "SELECT m FROM Memo m order by m.createTime desc"), @NamedQuery(name = "Memo.findById", query = "SELECT m FROM Memo m WHERE m.id = :id"), @NamedQuery(name = "Memo.findByTitle", query = "SELECT m FROM Memo m WHERE m.title = :title"), @NamedQuery(name = "Memo.findBySearchWord", query = "SELECT m FROM Memo m WHERE m.content like :word"), @NamedQuery(name = "Memo.findByCreateTime", query = "SELECT m FROM Memo m WHERE m.createTime = :createTime")}) public class Memo implements Serializable { 26 名前付きクエリ JPQL文
- 27. データアクセス層の作成 • Memoエンティティクラスの編集 – titleフィールドの@Sizeアノテーションを修正 – Bean Validation…入力値の検証を行うAPI • デフォルトで@NotNull（nullはダメ）、@Size（指定範囲のサイ ズでないとダメ）といったアノテーションを用意している • message属性でエラーメッセージを指定 @NotNull @Size(min = 1, max = 100, message = "タイトルを1～100文字で入力してください。") @Column(name = "TITLE") private String title; 27
- 29. ビジネスロジック層の作成 • セッションビーンの作成 – セッションビーン • EJBの一種。クライアント&サーバー間やシステム間のやり取り（セッショ ン）を通じて実行するビジネスロジックを実装するためのEJBコンポーネント [セッションビーンの種類] • @Stateless…対話状態を保持しないセッションビーン。1回のメソッド呼び 出しで完結する処理に使用する。複数のクライアントから共有される • @Stateful…対話状態を保持するセッションビーン。複数回の呼び出しで継続 的な処理を行う際に使用する。クライアントと1対1に対応する • @Singleton…1つのアプリケーションで、1つしか存在しないセッションビー ン。常に同じオブジェクトを参照する 29
- 30. ビジネスロジック層の作成 • セッションビーンの作成 – memo-appを右クリック->新規->その他 – Enterprise JavaBeans->セッションBean->次 – 以下を入力&選択->終了 入力項目 入力値 EJB名 MemoService パッケージ memo.service セッションのタイプ ステートレス 30
- 31. ビジネスロジック層の作成 • セッションビーンの編集 • MemoService.javaを開き [配付資料②]の赤字部分を記載（コメント部分は記載不要） – CRUD処理用メソッドを実装 • SELECT…メモ全件取得メソッド->MemoService#findAll() • SELECT…メモ検索メソッド->MemoService#search() • CREATE…メモ新規作成メソッド->MemoService#create() • UPDATE…メモ更新メソッド->MemoService#update() • DELETE…メモ削除メソッド->MemoService#delete() 31
- 32. ビジネスロジック層の作成 • セッションビーンの解説 – EntityManager（エンティティマネージャ） • 永続性コンテキスト（エンティティをDBに登録したり、登録済のエンティ ティの値を変更したりする処理を行うためのワークスペースのようなもの）に 対して処理を行うオブジェクト • エンティティの管理、指定したデータベースからのデータの読み書き、エン ティティの単純なCRUD操作、JPQLを使用した複雑なクエリの実行をするため の機能 – @PersistenceContext • エンティティマネージャをインジェクト（ソースコード上で依存して いる部分を外部から注入すること）するアノテーション エンティティ 永続性コンテキスト エン ティ ティ エン ティ ティ エン ティ ティ エン ティ ティ DB エンティティ マネージャ 32
- 33. ビジネスロジック層の作成 • セッションビーンの解説 – EntityManager（エンティティマネージャ） – EntityManagerの主なメソッド 33 メソッド 説明 createNamedQuery エンティティクラスに定義した名前付きクエリを生成 getResultList クエリを実行し、実行結果のリストを取得 persist エンティティをデータベースに登録 merge データベース内のエンティティを更新（エンティティ を管理状態にする） remove エンティティをデータベースから削除
- 35. プレゼンテーション層の作成 • GrassFishディスクリプタの編集 – 文字コードをWebページ標準のUTF-8に変更する – memo-appを右クリック->新規->その他 – GrassFish->GrassFishディスクリプタ->次 – 終了 – 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> 35
- 36. プレゼンテーション層の作成 • マネージドBeanを作成 – マネージドBean • ページと結びついたJavaクラス • ページで扱う値、処理を記述する – 画面遷移、ビジネスロジックの呼び出し、入力値・出力値の管理 – memo-appを右クリック->新規->その他 – JavaServer Faces->JSF管理対象Bean->次 – 以下を入力->終了 入力項目 入力値 クラス名 MemoBean パッケージ memo.bean スコープ Session 36
- 37. プレゼンテーション層の作成 • マネージドBeanを編集 – [配付資料③]の赤字部分を記載（コメント部分は記載不要） – IDE上でゲッター・セッター自動生成方法 • ソースコード上を右クリック->リファクタリング->フィールドを カプセル化->ゲッター・セッターにチェック->リファクタリング 37
- 38. プレゼンテーション層の作成 • マネージドBeanの解説 – @Namedアノテーションを付与すると、マネージドBeanに名前がつけ られる • ページからEL式（JSFページ上にロジックを書くための式言語）を 使ってアクセス可能になる – 主なスコープ • @RequestScoped…1回のリクエストによる呼び出しと、それへの レスポンスによる応答の間だけ存続する • @SessionScoped…HTTPセッションが存続している間存続する • @ViewScoped…リクエストにより表示されたJSFページが他の ページへ切り替わる直前まで、マネージドBeanが存続する 38
- 39. プレゼンテーション層の作成 • マネージドBeanの解説 – @EJB • セッションビーンをインジェクト（ソースコード上で依存している 部分を外部から注入すること）するアノテーション – メソッドのString型戻り値 • ページ名を指定すると、そのページに遷移できる – nullや””を指定すると現在のページを再表示 • “?faces-redirect=true” – ページ・リダイレクトで遷移可能 – リダイレクトでない場合、画面が遷移してもURLが変化しない ことがあるため 39
- 40. プレゼンテーション層の作成 • Faceletsでページの作成 – Facelets • JSFのページ作成言語のこと – Webページ/index.xhtmlの編集 – [配付資料④]の赤字部分を記載（コメント部分は記載不要） 40
- 41. プレゼンテーション層の作成 • Faceletsの解説 41 Faceletsタグ 説明 <f:event> type=”preRenderView”を記述して画面描画前にメソッドを実行できる <h:dataTable> 指定したデータを元に表を生成 value属性…表示したいリスト・配列を指定 var属性…リスト・配列内の1要素を示す変数名を指定 <h:column> 列を生成 <f:facet> ヘッダなどの要素を追加 name属性…”header”を指定するとヘッダになる <h:commandButton> action属性でマネージドBeanのメソッドを実行できるボタン <h:outputText> 文字列を出力 <h:convertDateTime> Date型をString型に変換するコンバータ pattern属性…ここに指定したパターン文字フォーマットで文字列を生成 timeZone属性…デフォルトではグリニッジ標準時が出力されるため”Japan”指定 で日本時間に変更する ※web.xmlにタイムゾーン指定することも可能
- 42. プレゼンテーション層の作成 • Faceletsの解説 – EL式…JSFページ上にロジックを書くための式言語 • #{[マネージドBeanのEL名].[メンバメソッド or メンバ変数]} • メンバ変数を指定すると、そのゲッター&セッターが呼ばれる 42
- 43. プレゼンテーション層の作成 • Faceletsでページの作成 – memo-appを右クリック->新規->その他 – JavaServer Faces->JSFページ->次 – 以下を入力->終了 入力値 ファイル名 edit フォルダ [空白] オプション Facelets 43
- 44. プレゼンテーション層の作成 • Faceletsでページの作成 – Webページ/edit.xhtmlの編集 – [配付資料⑤]の赤字部分を記載（コメント部分は記載不要） 44
- 45. プレゼンテーション層の作成 • Faceletsでページの解説 45 Faceletsタグ 説明 <h:panelGrid> 列数指定で表を生成する。列数分の要素ごとに行を変えて整形してくれる columns属性…列数を指定 <h:outputLabel> フォーム部品に対するラベル <h:inputText> 1行のテキストボックス <h:inputTextarea> 複数行にわたる大きなテキストエリア cols属性…列数を指定 rows属性…行数を指定 <h:button> 他のページに遷移するためのボタン <h:message> 指定部品に対するエラーメッセージ for属性…対象部品のIDを指定
- 46. プレゼンテーション層の作成 • Faceletsでページの解説 – Faceletsタグのrendered属性 • EL式がtrueのときに表示、falseのときに非表示に – Faceletsタグのonclick属性 • JavaScriptプログラムを実行するための属性 • 要素クリック時にJavaScriptが実行される 46
- 47. 完成！ • メモ帳アプリ実行 – （memo-app右クリック->ビルド） – memo-app右クリック->実行 • スタイルを変更してカスタマイズ – 部分的なスタイル変更…Faceletsタグのstyle属性 – 全体的なスタイル変更…タグにIDやクラスを指定してcss作成 • <h:outputStylesheet name=“cssファイル名” library=“css”/> • CSS用フォルダ作成 – 「Webページ」右クリック->新規->フォルダ » resourcesフォルダ、cssフォルダを生成 • CSSファイル作成 – 「css」右クリック->新規->その他 » Web->Cascading Style Sheet「style」 47