第 3 章ウェブアプリケーションの仕組みウェブシステムは具体的な処理を実行するビジネスロジックとユーザーインタフェースになるウェブ画面そして全体の処理の流れをコントロールするコントローラーから構成されますそのため MVC Model View Controller システムといわれ

(1)

3

第章

ウェブアプリケーションの仕組み

　ウェブシステムは、具体的な処理を実行するビジネスロジックとユーザーインタフェースになるウェブ画面、そして、全体の処理の流れをコントロールするコントローラーから構成されます、そのため、MVC（Model View Controller）システムといわれます。

　MVCには、高機能なウェブ部品（コンポーネント）を使って全体を構成するコンポーネントベースのMVCと、HTTP通信を単純にモデル化したアクションベースのMVC があります。どちらにも長所と短所があります。例えば、コンポーネントベースの MVCは開発は容易ですが、全体が緊密に連携しているので、開発の自由度に制約があります。一方、アクションベースのMVCは、Viewシステムを自由に入れ替えることができ、細かな調整も可能ですが、その分だけ開発の複雑さが増します。

　Jakarta EEはJSF（Java Server Faces）によるコンポーネントベースのMVCですが、

今後のバージョンで、アクションベースのMVCも正式に利用できるようになる予定です。この章では、JSFを中心としたコンポーネントベースのMVCについて、概要を解説します。

　なお、NetBeansの入力支援機能を覚えるために、最初の例題（sample01）は実際にプロジェクトとソースコードを作成しながら読み進めてください。

1 プロジェクトの構成 ...

2 バッキングビーン ...

3 JSFページ ...

4 ページナビゲーション ...

5 ウェブアプリケーションとPayara Server ...

6 まとめ ...

（注）

Java Server Faces（JSF）は、Jakart EEではJakarta Facesという名前に変わりましたが、

Jakarta Facesには略称がないので、本書では従来通りJSFという略称を使用します。

Jakarta Faces

(2)

3

　これから前章で作成したsample01プロジェクトにコードを書き足して、ウェブアプリケーションを作っていきますが、まず、プロジェクトの内容を確認しておきましょう。このプロジェクトは、JSF（Java Server Faces）を使ってウェブアプリケーションを作成するための構成になっています。

各種の設定ファイル

ウェブデータ・CSS^など

Java^{プログラム}

データベース接続設定ファイル

プロジェクトの構成ファイル

各種の設定ファイル

　［Webページ］のWEB-INFフォルダには、アプリケーションの設定ファイルが入っています。

faces-config.xml

ファイルは、メッセージを国や地域に応じて異なる言語で表示さ

せる場合に編集して使います。

beans.xml

はCDI（Context Dependency Injection）のための設定ファイルです。このファイルはウェブ周りを制御するJSFとCDIの連携のためにも必須のファイルです

Section Section Section Section Section S Sectition Se Sectctioionn Section S i

1

S ti

^{プロジェクトの構成}

１

and

Jakarta Faces

Jakarta Faces も索引語として掲載する

Jakarta

(3)

3 web.xml

は、Webアプリケーションの動作を設定する最も重要な設定ファイルです。こ

こでは、JSFアプリケーション用になっています。セキュリティ設定を追加する時には、さらに編集する必要があります。

payara-web.xml

ファイルは、payara serverに関する設定を行うファイルです。文字コードをUTF-8に設定するために使います。

ウェブデータ

　［Webページ］には、他にもresourcesフォルダと

index.xhtml

があります。resources フォルダは、ウェブで使用する画像、CSS、Javascriptなどを入れておくフォルダです。

index.xhtml

はウェブページです。ウェブページはすべてここに置く必要があります。

　なお、JSFでは、ウェブページをXHTML（Extensible Hyper Text Markup Language）

を使って書くので、

index.html

ではなく

index.xhtml

となっていることに注意してください。

index.xhtml

をダブルクリックして、エディタに表示してみてください。一般のウェ

ブページが、

<head>

や

<body>

のようなタグを文書に埋め込んで作成するのに対して、

XHTMLでは、それらを拡張した

<h:head>

や

<h:body>

のようなタグを使います。

ソース・パッケージ

　ここには、Java言語のクラスファイルを置きます。パッケージとして、beansが作ってあります。この中にある、

ConfigurationBean.java

は、空のクラスファイルですが、

JSF2.3対応であることを示す設定ファイルの役割をもちますので、消さずにそのまま使います（置いておくだけで編集はしません）。

　なお、beansは仮のパッケージです。ここにいろいろなクラスファイルを置くことができますが、別の名前のパッケージを作成して、そこにクラスを作成することもできます。

persistence.xml

　jakarta EEでは、アプリケーションサーバー（Payara Server）内に、あらかじめいくつかのデータベース接続が作成されています。個々のアプリケーションは自分でデータベース接続を行わず、サーバーの接続を使ってデータベースを操作します。

　この

persistence.xml

は、サーバーの接続を利用するための情報が書かれた設定ファ

イルです。デフォルトでは、jdbc/mydbという名前の接続情報（データソースという）が指

(4)

3

定されています。なお、JETに同梱してあるPayara Serverには、MySQLデータベースへの接続として、jdbc/mydbという名前のデータソースがあらかじめ作成してあるので、編集せずこのまま利用できます。

pom.xml

　プロジェクトの構成ファイルです。必要なライブラリやMavenの動作などを指定してあります。Jakarta EEを使う時の一般的な設定になっているので、ほとんどの場合、編集する必要はありません。

設定を行うコマンドファイルを追加しています。

(5)

3 2.1 バッキングビーンとは

　ウェブアプリケーションの仕組みを知るために、右図のような画面で入力された番号と氏名を、

サーバー側で受け取るという簡単なウェブアプリケーションを作成します。

　この画面はJSFのタグを使っているので JSFページと言います。そして、JSFページの

特徴は、バッキングビーンと呼ばれるJavaプログラムにアクセスできることです。

　画面で入力した値は何もしなくても、バッキングビーンの変数（number、name）に代入されます。また逆に、入力領域にはバッキングビーンの変数の値が初期値として表示されます。

　バッキングビーンは、JSFページとダイレクトに結び付くJavaクラスです。特に、JSFページの入力領域と変数を結び付けることを「バインドする」といいます。

　普通はバッキングビーンから先に作成します。ここで作成するバッキングビーンの名前は、

MeiboBean.java

です。MeiboBeanは以下に示すように、デフォルトコンストラクタを持ち、フィールド変数とそのゲッター・セッターメソッドがあるだけの単純なJavaクラスです。

バッキングビーンの基礎 sample01/beans/MeiboBean.java 例題1

1 package beans;

2 public class MeiboBean {

3 private Integer number; // ^番号 4 private String name; // 氏名 5 public Integer getNumber() {

6 return number;

7 }

8 public void setNumber(Integer number) {

9 this.number = number;

10 } Section

Section Section Section Section S Sectition Se Sectctioionn Section

S i

2

S ti

^{バッキングビーン}

ウェブ画面の入力項目に対応するフィールド変数

(6)

3

11 public String getName() {

12 return name;

13 }

14 public void setName(String name) {

15 this.name = name;

16 }

17 }

　フィールド変数numberとnameは、ウェブ画面の入力項目である番号、氏名に対応しています。ウェブ画面で入力された値は、これらの変数に代入されます。また、逆にこれらの変数に値が入っていれば、自動的にウェブ画面に表示されます。

　このMeiboBeanはカプセル化されただけの単純なクラスですが、これがバッキングビーンの基本形なのです。念のために記しておくと、カプセル化したクラスとは、フィールド変数をprivateにし、publicなゲッター、セッターを持つことでした。また、このような単純なクラスから生成されるオブジェクトをPOJO（Plane Old Java Object）といいます。

2.2 バッキングビーンの作成

　以下では1章で作成したsample01プロジェクトを使って、バッキングビーンを作成する手順を解説します。セッター、ゲッターの自動生成も解説していますので、実際に手順にしたがって作成してください。

（1）Javaクラスを作成する

① ［sample01］プロジェクトをマウスの右ボタンでクリックし、［新規］→［Javaクラス］と選択して

［New Javaクラス］ダイアログを表示する

② ［クラス名］にMeiboBean、［パッケージ名］にbeansと入力して［終了］ボタンを押す

③ MeiboBean.javaが作成されNetBeansのエディタに表示される

(7)

3

コメント文は削除してください。

（2）プログラムを編集する

　作成された

MeiboBean.java

ファイルを編集して例題を作成します。コメント文は削除して構いません。以下ではフィールド変数を作成し、アクセサメソッドを自動挿入します。

① フィールド変数number（番号）とname（氏名）を作成するただし、private修飾子を付ける

② セッター・ゲッターメソッド（アクセサメソッド）を自動作成する ・5行目でマウスの右ボタンをクリックする

・ポップアップメニューから［コードを挿入］を選択する

・ポップアップメニューから［取得メソッドおよび設定メソッド］を選択する

ここで右クリック

Integerはオブジェクトなので初期値はnullです。そのため、numberを Integer^{型にしておくと、}JSF^ページを初期表示する際に入力欄は空白になります。これに対して、int型にしておくと初期表示では0が表示されます。

(8)

3

③ ［取得メソッドおよび設定メソッドの生成］ダイアログですべての変数をチェックして［生成］ボ タンを押す

2.3 アノテーションの役割

　前項の手順でバッキングビーンのソースコードができましたが、まだそれだけではJSF ページ（ウェブ画面）と連携することはできません。連携するためには、次のように、クラスに2つのアノテーションを付ける必要があります。

完成したバッキングビーン sample01/beans/MeiboBean.java 例題2

1 package beans;

2 import jakarta.enterprise.context.RequestScoped;

3 import jakarta.inject.Named;

4 @Named

5 @RequestScoped

7 private Integer number; // ^番号 8 private String name; // 氏名 9 public Integer getNumber() {

10 return number;

11 }

14 }

16 return name;

17 }

20 }

21 }

追加するアノテーション

(9)

3 @Named

　@を付けた識別名をアノテーションといいます。すでにオーバーライドメソッドを示す

@overrideなどを知っていると思いますが、JavaEEのアノテーションはもっと複雑な働きをします。

　この@Namedは、クラスに任意の名前を付けるアノテーションです。@Namedで付けた名前はEL名といい、システムに登録されます。例えば、@Namedで、バッキングビーンに myBeanという名前を付けるには次のようにします。

@Named("myBean")

public class MeiboBean {

　また、例題のようにアノテーションだけを指定すると、クラス名の先頭の1文字を小文字に変えたものがEL名になります。つまり、

MeiboBean.java

はmeiboBeanというEL名になります。

　そして重要なことは、EL名を持つクラスだけが、JSFページからアクセスできるということです。逆にいうとJSFページはEL名でしかバッキングビーンにアクセスできません。

そのため、バッキングビーンにするクラスには必ず@Namedアノテーションが必要です。

@RequestScoped

　バッキングビーンは、newでオブジェクトを作ることはできません。オブジェクトの生成と廃棄は、JavaEEシステムが自動的に行います。その代わり、プログラマがスコープア ノテーションを付けてバッキングビーンの生成と廃棄のタイミングを指定します。いつ生 成していつ廃棄するかを決めるのは、プログラマの役割です。

　@RequestScopedは、そのようなスコープアノテーションのひとつです。このアノテーションを付けたバッキングビーンは、ブラウザで送信ボタンを押すなどの動作（リクエスト）

が発生した時にオブジェクトが自動生成されます。そして受信したデータを処理し、ブラウザに返信する動作（レスポンス）が完了すると廃棄されます。

　リクエストとレスポンスは、HTTP通信の基本動作です。わずか1回のリクエスト－レスポンスの処理過程に合わせて、バッキングビーンオブジェクトの生成と廃棄を実行するよう指定するのが@RequestScopedです。

　このスコープでは、ブラウザで送信ボタンを押すたびに新しいバッキングビーンのオブジェクトが作成されます。そのため、バッキングビーンのフィールド変数の値が、毎回、

初期化されることも覚えておきましょう。

(10)

3

　スコープアノテーションには、他にも@SessionScoped、@ApplicationScopedなどがあります。@SessionScopedはユーザーがログインしてからログアウトするまでの過程に相当し、@Applicationはアプリケーションが起動してから停止するまでの過程です。

　このように、スコープアノテーションはバッキングビーンオブジェクトの生成と廃棄のタイミングを、アプリケーションの実行過程（コンテキスト）と関連付けて指定するところに大きな特徴があります。

　どのスコープを使うべきかは、プログラマが判断します。しかし、システム資源が不足しないよう、可能な限り存続期間の短いスコープを使用するのが原則です。

2.4 アノテーションの追加と自動インポート

　アノテーションを追加すると、それを定義したライブラリをインポートする必要があります。ライブラリは、次の手順で自動インポートします。実際に手順にしたがって作成してみてください。

① @Named、@RequestScopedアノテーションをクラス宣言の前に挿入する

② エディタ上でマウスの右ボタンをクリックする

③ ポップアップメニューで［インポートを修正］を選ぶ（import文の自動挿入を行うため）

このあたりで右クリック

④ 挿入するimport文を確認して［OK］ボタンを押す

(11)

3 アノテーションの付け方

　ここで登場したアノテーションはクラス宣言の直前に書いて、クラスに作用しますが、

次のように1行に連続して書いても効果は同じです。

@Named @RequestScoped public class MeiboBean implements Serializable {

･･････

}

※RequestScopedのためのimport 文は2つの選択肢があるので、図のようにjakarta.enterprise.･･を選択してください。

(12)

3 3.1 JSFページの構成

　JSFで使う

<h:body>

のような拡張タグをFaceletsタグといいます。JSFページはHTML タグとFaceletsタグを使って作成します。FaceletsタグはHTMLタグと似ているので、

HTMLの文法を理解していれば容易に使いこなせます。

　すでに1章でsample01プロジェクトに次のような

index.xhtml

を作成していました。

　そこで、これを次のように書き換えてください。枠で囲った部分が編集した箇所です。

Faceletsタグを使う sapmle01/index.xhtml 例題3

1 <?xml version='1.0' encoding='UTF-8' ?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4 <html xmlns="http://www.w3.org/1999/xhtml"

5 xmlns:h="http://xmlns.jcp.org/jsf/html">

6 <h:head>

7 <title> Sample01 </title>

8 </h:head>

9 <h:body>

10 <h2>名簿データの作成</h2>

11 <h:form>

12 番号：<h:inputText value="#{meiboBean.number}" /><br/>

13 氏名：<h:inputText value="#{meiboBean.name}" /><br/>

14 <h:commandButton value="送信" />

15 </h:form>

16 </h:body>

17 </html>

3

S ti

^JSFページ

でが作成されています。

(13)

3

　NetBeansのコード補完機能について2章で解説しましたが、JSFページでも同じようにできます。つまり、タグの一部分を入力するだけで、ポップアップメニューに入力候補が表示されます。練習のためにこのコード補完機能を利用しながら入力してみてください。

画面表示に関係する記述

<h:body>

〜

</h:body>

の間に書かれているタグが直接的に表示画面と関係する部分です。

表示すると図のようになります。

<h2>

〜

</h2>

は見出しです。

　また、

<h:form>

〜

</h:form>

はサーバーへの送信データを示すタグです。入出力に関連したタグは、この間に書く必要があります。

h:inputText

タグは1行入力を行うテキストフィールド、

h:commandButton

タグはコマンドボタンです。

名前空間の定義

　JSFページは、XHTMLというHTMLを拡張した文法で書かれています。その大きな特徴は、接頭辞を付けることで新しいタグを定義できることです。接頭辞とは、例えば、

<h:head>

の

"h"

の部分です。なお、

":"

は接頭辞と名前との境を表す区切り文字です。

　この結果、

<h:message>

のようなHTMLにはないタグを定義したり、

<h:head>

の

ように

<head>

と同じ名前ですが別モノとみなされるタグを定義することができます。

XHTMLでは、他と重複しない限り、このような接頭辞を自由に使うことができます。

　接頭辞で区別されるグループを名前空間（name space）といいます。例えば

h:message

は名前空間

h

に属するタグですし、

f:facet

は名前空間

f

に属するタグです。このように名前空間は接頭辞によって決まるので、使用する場合はJSFページの先頭部分でどんな接頭辞を使うのか書いておかねばなりません。

　これを名前空間の定義といいます。それは例題では、5行目の太字部分です。

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

　このような定義は、NetBeansが自動的に挿入するのであえて覚えておく必要はありませんが、意味は知っておく必要があります。4、5行は名前空間

h

の定義です。本当の名前空間は

h

ではなく

"http://xmlns.jcp.org/jsf/html"

なのですが、

h

をその代わりに

(14)

3

　名前空間は他と重複しないことが前提なので、このようなURL形式で定義しますが、長すぎると不便なので

h

を代わりに使う、と定義しているわけです。

Faceletsとバッキングビーンを結び付けるEL式

　12、13行目にある

h:inputText

タグは、1行のテキスト入力を表すFaceletsタグです。HTMLの

<input type="text">

に相当します。このタグの中で

value

属性は、

h:inputText

タグの値を表しますが、例題では次のように書かれています。

番号：<h:inputText value="#{meiboBean.number}" />

氏名：<h:inputText value="#{meiboBean.name}" />

　ここで使われている

#{

･･･

}

の形式をEL式（Expression Language）といいます。EL式は、

JSFページ内で使える専用の式言語です。Java言語の一般的な式ならどんな式でも書けますが、最も重要なのはここで示したEL名.メンバ名という書き方です。

　例えば、

meiboBean.number

はMeiboBeanオブジェクトのフィールド変数

number

を指します。したがってJSF画面の「番号」欄で入力された値は、変数

number

に入力されます。また、

number

に何か値が入っていれば、「番号」欄には最初からその値が表示されます。

これは

meiboBean.name

についても同じです。

　このように、

h:inputText

タグがMeiboBeanの変数と結びつくことをJSFではバインドと言います。EL式によってFaceletsタグとバッキングビーンの変数を結び付けるバインドは、JSFの大きな利点です。

【注意】バッキングビーンではセッターとゲッターが必須です

　#{meiboBean.number}はmeiboBeanのnumberというフィールド変数を指していますが、

フィールド変数はprivateになっていて直接的にはアクセスできません。EL式では、実際には numberのゲッターであるgetNumber()メソッドをアクセスしています。

　したがって、フィールド変数を作ったら必ずpublicなゲッターを作成してください。ゲッターがないとEL式から参照できなくなります。また、セッターがないとウェブで入力された値をEL 式を通じて受け取ることもできません。

　セッター、ゲッターは71ページで解説したように自動生成できますので利用してください。

コマンドボタンの働き

　14行目の

h:commandButton

タグは、Faceletsの送信ボタンです。また、

value

属性で指定した文字列は、ボタン表面に表示される文字列です。

EL式

現状は73ページ。ページ確定後に変更する（これはメモです）

(15)

3

<h:commandButton value="送信" />

　次の図のように、JSFページで入力されたデータは、送信ボタンをクリックするとサーバーに送信され、MeiboBeanのフィールド変数に代入されます。

　HTMLタグとFaceletsタグで画面を作成し、value属性にEL式を書いてバッキングビーンとバインドするだけでよいので、JSFでのウェブアプリケーション開発は理解しやすく作成も容易です。

3.2 ウェブアプリケーションの動作を確認する

　完成したsample01を起動して、バッキングビーンが正しく値を受け取っているかどうかを確認する必要があります。そのため、フィールド変数の値をコンソール出力するメソッドを追加してみましょう。

出力メソッドを追加する

　バッキングビーンの中に、新たに

toConsole

メソッドを作成してください。

toConsole

メソッドは、フィールド変数

number

と

name

をコンソールに出力するだけのメソッドです。

(16)

3

コンソール出力を追加する sample01/beans/MeiboBean.java 例題4

1 package beans;

4 @Named

5 @RequestScoped

7 private Integer number; // ^番号 8 private String name; // 氏名 9 public void toConsole(){

10 System.out.println("number="+this.number+"/ name="+this.name);

11 }

12 public Integer getNumber() {

13 return number;

14 }

17 }

19 return name;

20 }

23 }

24 }

ボタンにactionListenerを追加する

　次はJSFページの送信ボタンを押した時に、

toConsole

メソッドが起動されるようにします。そこで、送信ボタン（

commandButton

）に

actionListener

属性を指定します。

actionListener

属性には、コマンドボタンが押された時に実行したいメソッドを、EL

式で指定できます。具体的には、EL式で

MeiboBean

の

toConsole

メソッドを指定します。

<h:commandButton value="送信" actionListener="#{meiboBean.toConsole()}" />

　次の図のように、EL式の入力で

"meiboBean."

までタイプすると、選択肢が表示され、

toConsole

メソッドを選択できます。

追加する出力メソッド

(17)

3 index.xhtml

にこの部分を挿入すると次のようになります。

actionListenerを持つ画面 sapmle01/index.xhtml 例題5

1 <?xml version='1.0' encoding='UTF-8' ?>

6 <h:head>

7 <title>Sample01</title>

8 </h:head>

9 <h:body>

11 <h:form>

12 番号：<h:inputText value="#{meiboBean..number}" /><br/>

13 氏名：<h:inputText value="#{meiboBean..name}" /><br/>

14 <h:commandButton value="送信"

15 actionListener="#{meiboBean.toConsole()}" />

16 </h:form>

17 </h:body>

18 </html>

actionListener

を追加しても、コマンドボタンの本来の機能は変わりません。送信

ボタンを押すとJSFページに入力されたデータはサーバーに送信され、バッキングビーンのフィールド変数にセットされます。そして、その後で

toConsole

メソッドが実行されます。つまり

number

と

name

に値がセットされた後、

toConsole

メソッドが実行されることになります。

actionListener属性の用途

　本格的に何かの処理を実行する時は、

actionListener

ではなく、次節で解説する

action

属性を使います。

actionListener

属性は、この例のように簡単なチェックや前処理などのために使います。

actionListener

属性に指定するメソッドは、戻り値が

void

であればどんなメソッドでも構いません。また、メソッドは引数を持っていても構いません。EL式でも次のように

この部分を挿入

(18)

3

引数を指定できます。

actionListener = "#{backingBean.method(a1, a2, ･･･)}"

値の受け渡しを確認する

　以上で動作を確認する準備は完了です。次の手順でプロジェクトを実行してください。

なお、付録1の〇ページに記載した方法で、規定のブラウザをGoogle Chromeに変更しておいてください。

① sample01プロジェクトをマウスの右ボタンでクリックする

② ポップアップメニューから［実行］を選択する

　少し待つとブラウザが起動して、

index.xhtml

が表示されます。

toConsole

メソッドの出力結果は、コンソール（サーバーログ）画面に表示されます。次

の図は、JSFページで番号と名前を入力し、送信ボタンを押した時の表示内容です。

　番号に12345、氏名に田中宏と入力していますが、その値がコンソールにも表示されています。これによりバッキングビーンが正しくデータを受け取っていることがわかります。

　なお、サーバーログが表示されていない場合は、次のようにすると表示できます。

サーバーログの表示方法

① NetBeansの左上にある［サービス］タブをクリックする

② ［サーバー］→［Payara Server］と選択する

③ ［Payara Server］をマウスの右ボタンでクリックし、［View Domain Server Log］を選ぶ

(19)

3

　ウェブシステムには、複数の画面があるのが普通です。画面から画面へ、ボタンやリンクを押すと遷移しますが、当然、単純なHTMLとは違うコントロールが必要です。ページ遷移のコントロールを、ページナビゲーションといいます。

　この節では、sample02プロジェクトを使ってその仕組みを解説し、実行してみます。

4.1 ウェブページの構成

　sample02プロジェクトでは、

index.xhtml

と

output.xhtml

の2つのJSFページを作成し、下図のようなページナビゲーションを実装します。

index.xhtml output.xhtml 送信ボタンを押す

［戻る］をクリック

index.xhtml

には送信ボタンがあり、

output.xhtml

には［戻る］というリンクがあります。これらをマウスでクリックすることでページ移動します。コマンドボタンとリンクは、

共にFaceletsタグです。以下では、その書き方を解説します。

h:commandButton （コマンドボタン）

　コマンドボタンは、

h:commandButton

を使って次のように書きます。

<h:commandButton value="送信" action="#{meiboBean.next()}"/>

　コマンドボタンでのナビゲーションは

actionListener

ではなく、

action

属性を使います。一般に、ボタンが押された時には、それに応じて実行しなければならない何かの処理があるはずです。例えば、フィールド変数の値を加工したり、データベースに保存するなどの処理です。Jakarta EEでは、そのような処理をビジネスロジックといいます。

Section Section Section Section Section S Sectition Se Sectctioionn Section

S i

4

S ti

^{ページナビゲーション}

(20)

3 action

属性には、ビジネスロジックを実行するバッキングビーンのメソッドを指定し

ます。例では、EL式を使って

meiboBean.next()

を指定しています。これはバッキングビーンの

return

文で指定するのです。

　具体的には、バッキングビーンの

"output.

xhtml"

というファイル名をreturn文で返します。これが、次に表示するJSFページの指定になります。

　また、return文で

null

か空文字列（

""

）を返すと、どこにも遷移せず、現在表示しているJSFページを再表示します。一般には、再表示にはnullを返します。なお、メソッドを

void

にしてもよく、その場合は

null

を返すのと同じ効果になります。

h:link （リンク）

　コマンドボタンに

action="output.xhtml"

、または

action="output"

と指定すると、ビジネスロジックを実行せず、次に表示するJSFページを直接指定できます。

<h:commandButton value="送信" action="output"/>

　しかし、こんな使い方をしたい時は、代わりに

h:link

タグを使うのが普通です。

h:link

（リンク）は、次に表示するJSFページを直接指定するためのFaceletsタグです。

(21)

3

output.xhtml

　例示の

output.xhtml

では、

index.xhtml

に戻るだけでよいのでリンクを使います。

具体的には次のように書きます。

<h:link outcome="index">［戻る］</h:link>

　リンクは、

outcome

属性で

"index"

を指定しています。

outcome

属性にウェブページを指定する際は拡張子のxhtmlを省略できるので、これで

"index.xhtml"

を指定したとみなされます。

4.2 プロジェクトの読み込みと実行

　JETの中のprojectsフォルダ内に、SampleProjectsフォルダがあります。すべての例題のプロジェクトがここにあります。これ以降の章では、これらのプロジェクトを開いて、

内容と動作を確認しながら読み進めてください。また、同じプロジェクトを自分で作成して確認したい場合は、projects/userProjectsフォルダに作成するといいでしょう。

　なお、練習問題はexerciseProjectフォルダに、また、その解答はanswerProjectsフォルダにあります。

　例題プロジェクトは次のようにして開きます。

①メニューで［ファイル］→［プロジェクトを開く］と選択する

②ダイアログが開くので、［ファイルの場所］にprojects/sampleProjects を指定する

③sample02を選択して、［プロジェクトを開く］ボタンを押す

トルツメ

(22)

3

　sample02プロジェクトには、

index.xhtml

、

output.xhtml

、

MeiboBean.java

が入っています。以下にそのリストを示します。

　最初に、これまでに解説した内容を確認しながら、それぞれのソースコードを読んでください。

メソッドの戻り値で次ページを指定する sample02/beans/MeiboBean 例題6

1 package beans;

2 import java.io.Serializable;

5 @Named

6 @RequestScoped

7 public class MeiboBb {

8 private Integer number;

9 private String name;

10 public String next(){

11 System.out.println("★number="+this.number+"/ name="+this.name);

12 return "output.xhtml"; // 次に表示するウェブページ 13 }

14 // 以下にセッターとゲッター（省略）

15 }

※ これ以降の例題ではスペースを省略するためセッターとゲッターの表示を省略します。

例題6：コマンドボタンでメソッドを実行するJSFページ sample02/index.xhtml 1 <?xml version='1.0' encoding='UTF-8' ?>

6 <h:head>

7 <title>Sample02 input</title>

8 </h:head>

9 <h:body>

11 <h:form>

12 番号：<h:inputText value="#{meiboBean.number}" /><br/>

13 氏名：<h:inputText value="#{meiboBean.name}" /><br/>

14 <h:commandButton value="送信" action="#{meiboBean.next() }" />

15 </h:form>

16 </h:body>

17 </html>

ビジネスロジックと、ページナビゲーションを実行するnext^メソッド

コマンドボタン

(23)

3

例題6：他のページに直接リンクするJSFページ sample02/output.xhtml 1 <?xml version='1.0' encoding='UTF-8' ?>

6 <h:head>

7 <title>Sample02 output</title>

8 </h:head>

9 <h:body>

10 <h2>名簿データの確認</h2>

11 <h:form>

12 番号：<h:outputText value="#{meiboBean.number}"/><br/>

13 氏名：<h:outputText value="#{meiboBean.name}"/><br/>

14 <h:link outcome="index">［戻る］</h:link>

15 </h:form>

16 </h:body>

17 </html>

h:outputText

　例題6の

output.xhtml

にあるこのタグは、画面にデータを表示するためのタグです。

番号：<h:outputText value="#{meiboBean.number}"/>

　バッキングビーンのフィールド変数の値を表示する時は、

#{meiboBean.number}

のようにEL式を書きます。ただし、次のように、

h:outputText

を使わずEL式だけを書いても同じ結果になります。

番号：#{meiboBean.number}

氏名：#{meiboBean.name}

　outputTextタグを使う利点はCSSを指定したり、HTMLのコードそのものを出力したりできることです。また、他のFaceletsタグと組み合わせて使う場合があります（4章で解説します）。

リンク

(24)

3 4.3 ナビゲーションの実行と確認

　次の手順で、sample02プロジェクトを実行してください。

プロジェクトの実行

① Payara Serverが起動していることを確認する

② プロジェクト欄で［sample02］をクリックして選択する

③ 実行ボタン（）を押す

　すぐにJSF画面（

index.xhtml

）が表示されるので、次の図のように、番号と氏名を入力し送信ボタンを押してください。すると、表示用画面に切り替わって入力したデータが再表示されます。このとき、NetBeansの下段にある［Payara Server］ウィンドウに番号と氏名が表示されることを確認してください。これはnextメソッドのビジネスロジックの実行結果です。

　［戻る］ボタンをクリックすると入力画面が再表示されますが、入力欄が空欄になっていることにも注意してください。これは、バッキングビーンのフィールド変数に何も値が入っていないことを意味しています。

　その理由は、

@RequestScoped

アノテーションの働きで、バッキングビーンが 1度廃棄され、再作成されたからです。

@RequestScoped

では、HTTP通信の1回のリクエスト とレスポンスの過程に合わせて、オブジェクトの生成と廃棄トルツメ

（ビルドが必要な場合は自動的に実行されます）

この位置に挿入

(25)

3

が行われます。実は、例題での一連の操作では、リクエス

トとレスポンスは次のように3回繰り返され、バッキングビーンも3回にわたって生成と廃棄が繰り返されています。

　次の表をリクエストとレスポンスに注意しながら見てください。

1. 初期画面表示

リクエスト プログラム起動（http://localhost:8080/sample02/ にアクセスする）

レスポンス input.xhtmlをブラウザに送信（ブラウザにindex.xhtmlが表示される）

2. データ入力して結果を確認表示

リクエスト ブラウザで入力後、［送信］ボタンを押して入力データをサーバーに送信する レスポンス output.xhtmlをブラウザに送信する（ブラウザにoutput.xhtmlが表示される）

3. 入力画面に戻る

リクエスト［戻る］をクリック（http://localhost:8080/sample02/faces/ にアクセスする）

レスポンス input.xhtmlをブラウザに送信（ブラウザにindex.xhtmlが表示される）

　プログラムを起動したり、JSFページでボタンやリンクをクリックしたりすると、それが新しいリクエストになることを覚えておきましょう。

(26)

3 5.1 ウェブアプリケーションのパッケージング

　ウェブアプリケーションのフォルダ構成や、各フォルダにどんなファイルを入れるかなどを総称してパッケージングといいます。NetBeansでは、パッケージングは自動的に処理されるので知らなくとも作業できますが、基礎知識として知っておくと後々役に立つケースがあります。ここでは、パッケージングの概要を紹介します。

　ウェブアプリケーションは、次の図のような構造にパッケージングする必要があります。図の中でグレーの部分はフォルダを表しています。

　WEB-INFフォルダの直下には、システムの動作を決定するweb.xmlファイルを入れます。

web.xml

以外のファイルは、必要な場合にのみ

追加するオプションのファイルです。

　プログラムは、ライブラリ（lib）と作成したプログラム（classes）に分けてWEB-INFフォルダの下に格納します。

　なお、classesフォルダにあるメッセージプロパティファイルは、ウェブに表示するメッセージを様々な言語別に定義しておくファイルです。

　resourcesフォルダには、画像やCSSなどウェブページに読み込ませるデータを配置します。

ウェブページからは、リソースライブラリとしてアクセスします。

　パッケージングしたウェブアプリケーションをサーバーにデプロイするには、JDKに含まれるjarコマンドを使って、これらを1つの圧縮ファイルにまとめます。圧縮ファイルには warという拡張子が付くのでwarファイルといいますが、その実態はzip圧縮ファイルです。

　NetBeansは、warファイルへの変換とPayara Serverへのデプロイを自動的に行うので、

これらを手作業で行うことはありません。

5

S ti

ウェブアプリケーションとPayara Server

(27)

3

　なお

rt.jar

のように拡張子がjarであるファイルは、jarファイルといいます。これはプ

ログラムと共に、実行に必要な情報を記述したテキストファイルを合わせてzip圧縮したものです。入出力やデータ構造などの機能を提供するライブラリファイルで利用されます。

JDKやJavaEEは、多数のjarファイル（=ライブラリファイル）の集合体です。jarファイルも jarコマンドで作成できます。

　また、複数のwarファイルからなる大規模なJaveEEソフトウェアのために、earファイルという形式のファイルもjarコマンドで作成できます。

5.2 Payara Serverの操作方法

　Payara Server自体を運用・管理するための画面をドメイン管理コンソール（Domain Admin Console）といいます。ドメイン管理コンソールは、データベースシステムなどのリソース管理や、認証・認可の設定などサーバーの基本動作を設定するのに欠かせない画面です。

　ここでは、ドメイン管理コンソールの起動方法を解説します。

Payara Serverの管理画面を開く

　サーバーコンソールを開くには、NetBeansから次のように操作します。

① ［サービス］タブをクリックする

② ［サーバー］のをクリックして展開する

③ ［Payara Server］を右ボタンでクリックする

④ ［View Domain Admin Console］を選択する

(28)

3

⑤ 次のような画面が表示されます。

　なお、ドメイン管理コンソールを直接開くには、次のURLをブラウザでアクセスします。

http://localhost:4848/

　巻末資料には、データべース関連の設定方法の解説があります。

(29)

3

　JSFフレームワークがJSFページとバッキングビーンから構成されていることが、理解できたでしょうか。これが最も重要なところです。EL式によりJSFページとバッキングビーンのメンバをバインドできること、そして、バッキングビーンのreturn文でページナビゲーションをコントロールできることが大きな特徴です。

要点

※理解した項目にはチェックを入れましょう

バッキングビーン

□ JSFフレームワークは、JSFページとバッキングビーンで構成する

□ バッキングビーンは、JSFページとダイレクトに結び付くJavaプログラムである

□ バッキングビーンには、@Namedアノテーションを付けねばならない

□ また、@RequestScopedなどのスコープアノテーションも付ける必要がある

□ @Namedは、「@Named("myBean")」のように書いてクラスにEL名を付ける

□ 「@Named」だけ指定すると、先頭1文字を小文字にしたクラス名がEL名になる

□ JSFページでは、EL名を持つクラスオブジェクトのメンバをEL式を使って直接アクセスできる。

これを「バインドする」という。

□ スコープアノテーションは、バッキングビーンオブジェクトの存続期間を決める

□ @RequestScopedでは、1回のリクエストとレスポンスの間のみ存続する

□ JSFページでボタンなどをクリックするたびにリクエストとレスポンスが発生する

□ バッキングビーンは、プログラマがnewで作成してはいけない

□ バッキングビーンは、JakartaEEのサブシステムが自動的に生成・廃棄する

JSFページ

□ JSFページはXHTMLなので、h:などを使うために先頭で名前空間を定義する

□ EL式は、「オブジェクト.メンバ」の形式で使い、変数やメソッドをアクセスする

□ h:inputTextは1行入力を行う

□ h:outputTextは画面にデータやHTMLタグを出力する

□ h:commandButtonはボタンを表す

□ h:linkはリンクを表す

□ h:commandButtonは、JSFページで入力されたデータをサーバーに送信する

□ h:commandButtonにactionListener属性を付けると、バッキングビーンのメソッドを呼び出せるが、ページナビゲーションは行えない

Section Section Section Section Section S Sectition Se Sectctioionn Section

S i

6

S ti

^まとめ

(30)

3

□ h:commandButtonにaction属性を付けると、ビジネスロジックを実行した後でreturn文により次に表示するJSFページを指定できる

□ 同じJSFページを再表示するには、return文でnullまたは空文字列を返す

□ action属性で実行されるメソッドの戻り値をvoidにすると、nullを返すのと同じ効果になる

□ h:link（リンク）は直接、特定のJSFページを呼び出すのに使う

Payara Serverの操作

□ ウェブアプリケーションは、決められた構成にパッケージングし、war形式の圧縮ファイルにしてデプロイする

□ WEB-INFフォルダにあるweb.xmlファイルが、最も重要な設定ファイルである

□ 文字コードとしてUTF-8を使うには、payara-config.xmlファイルに記述する

□ Payara Serverの管理画面は、http://localhost:4848/ からも開ける

練習

※解答はサポートウェブからダウンロードできます　書籍情報を入力するウェブアプリケーショ

ンを作成してください。機能はこの章の例題と同様に、送信ボタンを押すと入力データの確認画面を表示し、さらに入力データをコンソールにも出力します。

プロジェクト名： exercise_chap03 パッキングビーン： BookBean

JSFページ1： index.xhtml JSFページ2： output.xhtml

実行時のコンソール表示

index.xhtml output.xhtml

(31)

3 問題作成のヒント

（1）価格のデータ型は、intでなくIntegerを使うと画面クリア時に0が表示されません。

（2） index.xhtmlはひな形ファイルが自動作成されますが、output.xhtmlは自分で作成しなければなりません。次の手順で作成してください。

《JSFファイルの新規作成》

① プロジェクトをマウスの右ボタンでクリックして［新規］→［その他］を選択する

② ［カテゴリ］欄でWebを、［ファイル・タイプ］欄でJSFページを選んで［次＞］を押す

③ ［ファイル名］にoutputと入力して［終了］ボタンを押す

(32)

3

第 章

ウェブアプリケーションの仕組み

3

各種の設定ファイル

faces-config.xml

beans.xml

1

プロジェクトの構成

3

web.xml

payara-web.xml

ウェブデータ

index.xhtml

index.xhtml

index.html

index.xhtml

index.xhtml

<head>

<body>

<h:head>

<h:body>

ソース・パッケージ

ConfigurationBean.java

persistence.xml

persistence.xml

3

pom.xml

3

2.1 バッキングビーンとは

MeiboBean.java

2

バッキングビーン

3

2.2 バッキングビーンの作成

3

MeiboBean.java

3

2.3 アノテーションの役割

3

@Named

MeiboBean.java

@RequestScoped

3

2.4 アノテーションの追加と自動インポート

3

アノテーションの付け方

3

3.1 JSFページの構成

<h:body>

index.xhtml

3

JSFページ

3

画面表示に関係する記述

<h:body>

</h:body>

<h2>

</h2>

<h:form>

</h:form>

h:inputText

h:commandButton

名前空間の定義

<h:head>

"h"

":"

<h:message>

<h:head>

<head>

h:message

h

f:facet

f

h

h

"http://xmlns.jcp.org/jsf/html"

h

3

h

第章

^{プロジェクトの構成}

^{バッキングビーン}

^JSFページ

^{ページナビゲーション}