読者です 読者をやめる 読者になる 読者になる

Hedgehog Note

日々の開発メモです。

JSFの勉強1 使ってみる

JavaServer Faces(JSF)、JavaEE標準のWebアプリケーションフレームワークです。

最近JSFの勉強はじめました。
知識の整理を兼ねてやったことをまとめていきます。
JSF 2.2を対象としています。

今回の内容

  • 画面遷移
  • h:outputLabel
  • h:inputText
  • h:inputSecret
  • h:commandButton
  • h:button

作るもの

ログインするとウェルカムしてくれる超簡易画面。
ログイン画面とトップ画面の2画面構成です。

f:id:yoshiyuki9026:20170401111653p:plain

f:id:yoshiyuki9026:20170401111700p:plain

実装

画面はxhtmlのテンプレート(Facelets)で作成し、ロジックはPOJOクラス(バッキングBean)に実装します。そしてそれらをEL式によりバインドします。

まずはログイン画面です。

index.xhtml

13行目と17行目のvalue、19行目のactionはそれぞれバッキングBeanと紐付けています。全体を見るとh:から始まるFaceletsタグがもりもり出てきていますが、HTMLタグとほぼ同じなのですぐに理解できます。

続いてバッキングBeanです。

IndexBean.java

入力項目用にuserIdとpasswordを定義し(getter/setterはLombokを使用)、ボタンアクション用にlogin()を定義します。ログインロジックはユーザーに"user"、パスワードに"pass"を入力した場合にトップ画面へリダイレクトし、それ以外の場合はログイン画面に留まるというものです。なお、Bean管理はCDIです。

最後にトップ画面です。必要な部分のみ抜き出していますが、ウェルカム文字と戻るボタンを表示するだけの簡単なものです。

top.xhtml

3行目のoutcomeでログイン画面への遷移を指定します。ログイン画面で使用したh:commandButtonはPOST通信ですが、こちらのh:buttonはGET通信をするという違いがあります。

稼働確認

アプリを起動し、ブラウザで表示するとログイン画面が表示されます。
画面遷移も期待通り動きます。

では、実際に出力されたHTMLソースを見てみます(整形済)。

Faceletsタグが正しく変換されています。

Facelets HTML
h:outputLabel label
h:inputText input type=“text”
h:inputSecret input type=“password”
h:commandButton input
h:button input type=“button” onclick=“~”