BLOGブログ

  • このエントリーをはてなブックマークに追加

新卒SEのJavaEE挑戦記2(JSF編)

こんにちは、入社一年目のYです。

前回の記事では、eclipseから新規GlassFishサーバーの追加を行いました。
今回より、JavaEE6による簡単なwebアプリケーションを作成しながら、JavaEEについて学んでいきます。

この連載で作成するアプリケーション

社員情報の登録、一覧、詳細機能からなる、社員情報を管理するアプリケーションを作成します。

今回作成する画面

登録機能の中から、静的な画面を表示するだけで済む、社員情報の入力画面を作成します。

Mavenプロジェクトの作成

Mavenプロジェクトではpom.xmlという設定ファイルを使用し、依存ライブラリの管理とビルドの設定を簡単に行うことができます。

Mavenプロジェクトを作成するには、eclipse画面上部の[ファイル > 新規 > その他]を選択します。

blog2_20160129_11

[新規]ダイアログを開いたら、[Maven > Mavenプロジェクト]を選択し、「次へ」を押下します。

blog2_20160129_10

[シンプルなプロジェクトの作成]にチェックを入れ、「次へ」を押下します。

blog2_20160129_12

グループIdとアーティファクトId(プロジェクト名になります)は任意の名前にしてください。
私の環境では、グループIdは社名、アーティファクトId(プロジェクト名)は「 blog 」としています。
パッケージングは「war」を選択します。

blog2_20160129_13

「完了」ボタンを押下すると、Mavenプロジェクトが作成されます。

blog2_20160129_14

ライブラリの追加

今回追加するライブラリは以下の通りです。

  • JSF2.1

ライブラリは基本的に、ローカル環境で動作させる最低限必要なもののみで構成し、必要になった際に随時追加していきます。
pom.xmlは以下の通りです。

JSF2.1を使った社員情報入力画面の作成

JSFはJavaEEの仕様であり、動的なwebページを生成するフレームワークです。
社員情報入力画面を下記手順で作成します。

eclipseでXHTMLの雛形を生成する

XHTMLファイルを以下のディレクトリに作成します。
blog/src/main/webapp/inputEmp.xhtml

eclipseではJSFの構成をもったXHTMLファイルを簡単に作成することができます。[新規  > HTML]から新規HTMLファイルのダイアログを開きます。

blog2_20160129_7

ファイル名「inputEmp.xhtml」を入力して「次へ」ボタンを押下します。

blog2_20160129_8

[新規Facelet構成ページ]を選択して「完了」するとJSFの構成をもつXHTMLが作成されます。

blog2_20160129_1

社員情報入力画面の作成

新規作成したinputEmp.xhtmlは以下の内容で記述します。

「h:」から始まるタグは、HTMLタグを出力するJSFのカスタムタグです。
使用しているカスタムタグの大まかな役割は下記の通りです。

カスタムタグ タグの役割
<h:body> <body>タグを出力する
<h:form> <form>タグを出力する
<h:panelGrid> 表を出力する
<h:outputText> 文字列を出力する
<h:inputText> テキストボックスを出力する
<h:selectOneMenu> リストボックスを出力する
<h:selectOneRadio> ラジオボタンを出力する
<f:selectItem> 選択肢の項目を出力する
<h:commandButton> ボタンを出力する

グラスフィッシュにデプロイする

作成したアプリケーションをグラスフィッシュサーバーにデプロイします。
画面下の[ サーバー ]ビューの[ローカルホストのGlassFish3.1]を右クリックし、[追加および除去]を選択します。

blog2_20160129_6

作成したプロジェクトをサーバーに追加します。

blog2_20160129_2

サーバーを起動して、下記のURLで作成したページにアクセスしてみましょう。
http://localhost:8080/blog/faces/inputEmp.xhtml

blog2_20160129_3

上のような画面が表示されたら成功です。

JSFについて

JSFとは、「 JavaServer Fasces 」の頭文字をとったもので、動的なwebページを生成するフレームワークです。JSFはMVCパターンを使用しており、上で作成したXHTMLはMVCで言うV(iew)にあたります。そして、C(ontroller)にあたるのが、FacesServletと呼ばれるサーブレットです。FacesServletはユーザーからのリクエストを受け取り、M(odel)へと情報を伝えています。

先ほどの画面で言うと、URLの「 /faces 」の部分がFacesServletを使用するためのURLになっています。

書籍『Beginning Java EE 6』では下記のように記載されています。

JSFアプリケーションはFacesServletを使用してHTTPをインターセプトし、HTMLを生成する標準のWebアプリケーションです。

 

先ほどの画面のHTMLソースを見てみましょう。

http://localhost:8080/blog/faces/inputEmp.xhtml

 

今回作成した社員情報入力画面は、FacesServletがinputEmp.xhtmlを処理して、上記の内容をブラウザにレスポンスすることで表示されます。

JSFのライフサイクル

JSFは以下のようなライフサイクルをもっています。

  1. ビューの復元(初回リクエスト時はビューの作成)
  2. 入力値の適用
  3. 検証の処理
  4. モデル値の更新
  5. アプリケーションの呼び出し
  6. レスポンスのレンダリング

今回作成した画面では静的な画面であるため、1~5の処理は見て取れませんが、1と6の処理が行われていることがわかります。

2~5の処理に関しては、動的なページを作成する次回以降の投稿で検証していきます。

次回の予定

引き続き社員情報の登録機能を作成します。入力内容の確認画面を作成し、画面遷移やサーバサイドでの処理を追加します。

ランキング

最近の投稿

アーカイブ

カテゴリー

RSS