JSF2.2入門 第3回ページ移動

kanban3

katatsumuriシンプルなページ移動

leaf入力ページ

第2回目の「ユーザー入力」では入力ページと出力ページが同じものでした。ここでは入力と出力を別のページで行うようにします。ページ移動コントロールは「ナビゲーション」とも呼ばれます。

まず入力用のJSFページをinput1.xhtmlとして作ります。入力要素は名前と生年月日で変更ありませんが、h:commandButtonactionプロパティを追加します。値はresult1としました。ボタンが押されたら、ここに書いた文字列に.xhtmlという拡張子を加えたJSFページ、つまり「result1.xhtml」に移動するルールになっています。とても単純なルールです。

[input1.xhtml]

<?xml version=’1.0′ encoding=’UTF-8′ ?>
<!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:h=”http://xmlns.jcp.org/jsf/html”
xmlns:f=”http://xmlns.jcp.org/jsf/core”>
<f:view>
<h:head>
<title>User Registration and Navigation</title>
</h:head>
<h:body>
<h:form>
お名前<h:inputText value=”#{userInfoBean.userName}”/><p/>
生年月日<h:inputText value=”#{userInfoBean.birthDay}”/><p/>
<h:commandButton type=”submit” value=”送信” action=”result1″/>
<h:commandButton type=”reset” value=”キャンセル” /><p/>
</h:form>
</h:body>
</f:view>
</html>

leaf出力ページ

出力ページは、さきほど説明したとおりresult1.xhtmlです。ここではh:outputTextでマネージドビーンから名前と生年月日を取得して表示しているだけです。

[result1.xhtml]

<?xml version=’1.0′ encoding=’UTF-8′ ?>
<!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:h=”http://xmlns.jcp.org/jsf/html”
xmlns:f=”http://xmlns.jcp.org/jsf/core”>
<f:view>
<h:head>
<title>Your Info</title>
</h:head>
<h:body>
<h2>入力情報</h2>
お名前:<h:outputText value=”#{userInfoBean.userName}”/><p/>
生年月日:<h:outputText value=”#{userInfoBean.birthDay}”/>
</h:body>
</f:view>
</html>

leaf実行する

NetBeansのプロジェクトウインドウで、input1.xhtmlファイルを選択して右クリックし[ファイルの実行]を選択します。ブラウザーが立ち上がりページが表示されますので、なにか情報を入力して[送信]ボタンを押します。

160529-1input

そうするとresult1.xhtmlに移動して、入力された情報が表示されます。

160529-2out

この例はシンプルなものでしたが、普通は入力値に基づいて何か処理をしてから結果を別のページで表示するという構成になります。

katatsumuri入力内容で次のページを変更

次の例は入力情報に男性か女性かを聞くラジオボタンを追加して、それを判断して行先のページを決定します。つまり男性用ページと女性用ページに振り分けます。

leafマネージドビーンに男女情報を追加する

マネージドビーンに男性か女性かを判別するためのgenderというプロパティを1つ加えます。NetBeansで、さきほどのUserInfoBeansビーンをコピーしてペーストし、名前をUserInfoBeans2.に変更してからその中身を変更します。変更部分は次のようになります。

160529-0beans

変更と追加したところは太字のところです。マネージドビーンをコピーペーストするとクラス名は新しい名前を聞かれますが、赤い太文字の部分、@Namedアノーテーション内の文字列は自動的に変更されませんので変更し忘れないように気を付けてください。

[UserInfoBeans2]

・・・

@Named(value = “userInfoBean2“)
@SessionScoped
public class UserInfoBean2 implements Serializable {
String userName;
String birthDay;
String gender;

public UserInfoBean2() {
}
・・・

blic String getGender() {
return gender;
}

public void setGender(String gender) {
this.gender = gender;
}
public String targetPage(){
if(gender.equals(“men”)){
return “resultForMen”;
}else{
return “resultForWemen”;
}
}
}

それからtargetPage()メソッドを用意します。これは性別情報genderの値によって、シンプルに男性なら「resultForMen」女性なら「resultForWemen」という文字列を返すものです。ここから返される値を送信ボタンのactionプロパティに入れればよいのです。actionプロパティの値+”.xhtml”のページに移動するルールですから。

genderはString型としましたが、booleanやintでも扱うことができますね。処理が変わってきますが。

leaf入力ページを少し変更する

さきほどの単純移動の例で作ったinput1.xhtmlをコピペしてinput2.xhtmlとします。そこのh:commandButtonだけを変更します。actionプロパティの値として、マネージドビーンUserInfoBeans2のtargetPage()メソッドから返される値を入れます。userInfoBean2.targetPageという書き方はビーンのプロパティを取得する意味とメソッドを実行する意味と2つあることを意識してください。

[input2.xhtml]

・・・
<h:commandButton type=”submit” value=”送信” action=”#{userInfoBean2.targetPage}”/>

・・・

leaf出力ページ

男性用のページはresultForMen.xhtmlです。女性用のページはresultForWemen.xhtmlです。違いは太文字のところだけで単純です。

[resultForMen.xhtml]

・・・

<h:body>
<h2>入力情報</h2>
男性ですね。<p/>
お名前:<h:outputText value=”#{userInfoBean2.userName}”/><p/>
生年月日:<h:outputText value=”#{userInfoBean2.birthDay}”/>
</h:body>

・・・
[resultForWemen.xhtml]

・・・

<h:body>
<h2>入力情報</h2>
女性ですね。<p/>
お名前:<h:outputText value=”#{userInfoBean2.userName}”/><p/>
生年月日:<h:outputText value=”#{userInfoBean2.birthDay}”/>
</h:body>

・・・

leaf実行する

次のページが表示されますので、何か入れて送信ボタンをおします。女性のラジオボタンが押されていることを見てください。

160529-3nav1

送信ボタンを押すとちゃんと女性用のページに移動しました。URL欄のところに着目ですが、移動したページのものではなく、入力ページのままになっている特徴があります。

160529-4nav2

leafまとめ

ページ移動は、h:commandButtonactionプロパティを追加することで実現できる。actionプロパティに書いた文字列に.xhtmlという拡張子を加えたJSFページ移動するルールである。actionプロパティの値は固定値でもいいし、マネージドビーンから返される値でもよい。後者の場合にはさまざまな処理を行って行先ページをダイナミックに変えることができ多彩なアプリに応用できる。

previousnext

JSF2.2のすべてをまとめたkindle電子書籍 「JavaServer Faces2.2 入門」もぜひご覧ください。パソコン、iPhone、Androidどんな端末用にもamazonが無料のKindle電子書籍リーダーを用意しています。それをつかってKindle本を手軽にお楽しみください。あなたが今お使いの端末用Kidle電子書籍リーダーのご案内

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA