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