BLOGブログ
新卒SEのJavaEE挑戦記2(JSF編)
こんにちは、入社一年目のYです。
前回の記事では、eclipseから新規GlassFishサーバーの追加を行いました。
今回より、JavaEE6による簡単なwebアプリケーションを作成しながら、JavaEEについて学んでいきます。
見出し
この連載で作成するアプリケーション
社員情報の登録、一覧、詳細機能からなる、社員情報を管理するアプリケーションを作成します。
今回作成する画面
登録機能の中から、静的な画面を表示するだけで済む、社員情報の入力画面を作成します。
Mavenプロジェクトの作成
Mavenプロジェクトではpom.xmlという設定ファイルを使用し、依存ライブラリの管理とビルドの設定を簡単に行うことができます。
Mavenプロジェクトを作成するには、eclipse画面上部の[ファイル > 新規 > その他]を選択します。
[新規]ダイアログを開いたら、[Maven > Mavenプロジェクト]を選択し、「次へ」を押下します。
[シンプルなプロジェクトの作成]にチェックを入れ、「次へ」を押下します。
グループIdとアーティファクトId(プロジェクト名になります)は任意の名前にしてください。
私の環境では、グループIdは社名、アーティファクトId(プロジェクト名)は「 blog 」としています。
パッケージングは「war」を選択します。
「完了」ボタンを押下すると、Mavenプロジェクトが作成されます。
ライブラリの追加
今回追加するライブラリは以下の通りです。
- JSF2.1
ライブラリは基本的に、ローカル環境で動作させる最低限必要なもののみで構成し、必要になった際に随時追加していきます。
pom.xmlは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>jp.co.iterative</groupId> <artifactId>blog</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <dependencies> <dependency> <groupId>javax.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.1</version> </dependency> </dependencies> </project> |
JSF2.1を使った社員情報入力画面の作成
JSFはJavaEEの仕様であり、動的なwebページを生成するフレームワークです。
社員情報入力画面を下記手順で作成します。
eclipseでXHTMLの雛形を生成する
XHTMLファイルを以下のディレクトリに作成します。
blog/src/main/webapp/inputEmp.xhtml
eclipseではJSFの構成をもったXHTMLファイルを簡単に作成することができます。[新規 > HTML]から新規HTMLファイルのダイアログを開きます。
ファイル名「inputEmp.xhtml」を入力して「次へ」ボタンを押下します。
[新規Facelet構成ページ]を選択して「完了」するとJSFの構成をもつXHTMLが作成されます。
社員情報入力画面の作成
新規作成したinputEmp.xhtmlは以下の内容で記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:body> <h1>社員情報登録</h1> <h:form> <h:panelGrid columns="2"> <h:outputText value="氏名"/> <h:inputText/> <h:outputText value="部署"/> <h:selectOneMenu> <f:selectItem itemLabel="総務"/> <f:selectItem itemLabel="経理"/> </h:selectOneMenu> <h:outputText value="性別"/> <h:selectOneRadio> <f:selectItem itemLabel="男性"/> <f:selectItem itemLabel="女性"/> </h:selectOneRadio> </h:panelGrid> <h:commandButton value="確認画面へ進む"/> </h:form> </h:body> </html> |
「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]を右クリックし、[追加および除去]を選択します。
作成したプロジェクトをサーバーに追加します。
サーバーを起動して、下記のURLで作成したページにアクセスしてみましょう。
http://localhost:8080/blog/faces/inputEmp.xhtml
上のような画面が表示されたら成功です。
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><body> <h1>社員情報登録</h1> <form id="j_idt5" name="j_idt5" method="post" action="/blog/faces/inputEmp.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt5" value="j_idt5" /> <table> <tbody> <tr> <td>氏名</td> <td><input type="text" name="j_idt5:j_idt8" /></td> </tr> <tr> <td>部署</td> <td><select name="j_idt5:j_idt10" size="1"> <option value="" selected="selected">総務</option> <option value="" selected="selected">経理</option> </select></td> </tr> <tr> <td>性別</td> <td><table> <tr> <td> <input type="radio" name="j_idt5:j_idt14" id="j_idt5:j_idt14:0" value="" /><label for="j_idt5:j_idt14:0"> 男性</label></td> <td> <input type="radio" name="j_idt5:j_idt14" id="j_idt5:j_idt14:1" value="" /><label for="j_idt5:j_idt14:1"> 女性</label></td> </tr> </table></td> </tr> </tbody> </table> <input type="submit" name="j_idt5:j_idt17" value="確認画面へ進む" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-5371502134818739882:6579382049968047725" autocomplete="off" /> </form></body> </html> |
今回作成した社員情報入力画面は、FacesServletがinputEmp.xhtmlを処理して、上記の内容をブラウザにレスポンスすることで表示されます。
JSFのライフサイクル
JSFは以下のようなライフサイクルをもっています。
- ビューの復元(初回リクエスト時はビューの作成)
- 入力値の適用
- 検証の処理
- モデル値の更新
- アプリケーションの呼び出し
- レスポンスのレンダリング
今回作成した画面では静的な画面であるため、1~5の処理は見て取れませんが、1と6の処理が行われていることがわかります。
2~5の処理に関しては、動的なページを作成する次回以降の投稿で検証していきます。
次回の予定
引き続き社員情報の登録機能を作成します。入力内容の確認画面を作成し、画面遷移やサーバサイドでの処理を追加します。
ランキング
- 小さくても気を付けたい、紙書類の扱いポイント3つ
- 質問できない人への処方箋
- 報連相できない人をできるようにする方法
- .NET でプログラムの処理時間をストップウォッチで測る(Stopwatch クラス)
- ASP.NET MVC5 で初期エラーメッセージの変更方法
- 2016年度版 無料でSQLの学習ができるサイト11個を調べてみた
- Javaでjsoupを使ってスクレイピングを行う方法-jsoupインストール編
- 新卒SEのJavaEE挑戦記2(JSF編)
- プログラミングの「アルゴリズムとデータ構造」を学ぶには「Scratch」を使えば挫折が防げます
- プログラミング始めるなら!アルゴリズムを学べるスマートフォンアプリ3選