JSF2.2入門 第4回様々な入力コンポーネント(1)


kanban4

katatsumuriテキストエリア・ラジオボタン・プルダウンメニュー

JSFの基本入力コンポーネントはHTMLと同じものが用意されています。今回は入力値が1つしかないパターンについて解説します。チェックボックスなどは複数選べるので次の第5回で紹介します。なお、カレンダーで入力するものもネット上では見かけますが、これもJSFで作ることができますが標準では用意されていません。これらのリッチなコンポーネントを使いたい場合にはPrimeFacesやRichFacesといったJSFを使ったライブラリを使います。PrimeFacesは別の機会に紹介します。

leafここで作る画面のイメージ

まずはここで作る画面イメージを先に見てもらったほうが理解しやすいと思います。旅行会社の問い合わせページのように、行きたい地域、やってみたいこと、ご要望、を入力してもらいます。

160607-1input

入力コンポーネントは次の3つがあります。これらは1つしか値を選ぶことができませんのでマネージドビーンもそれを前提にして作ります。

  • プルダウンメニュー
  • ラジオボタン
  • テキストエリア

送信ボタンを押すとこのフォームが送られて、送信された情報を埋め込んだ次のページが表示されます。

160607-2output

leaf入力用JSFページ

1.プルダウンメニュー

これを作るのはh:selectOneMenuです。valueには入力値を受け取るプロパティを指定します。f:selectItemタグは選択肢をセットするものです。itemValueは送信される値でitemLabelは表示される値です。

2.ラジオボタン

これはh:selectOneRadioで作ります。valueには入力値を受け取るプロパティを指定します。内側にf:selectItemタグを入れることは同じです。

3.テキストエリア

h:inputTextarea を使います。colsには横の文字数。rowsには行数を指定します。valueには入力値を受け取るプロパティを指定します。

h:commandButtonのactionプロパティにはcomponents1Resultが指定されていますのでボタンが押されるとcomponents1Result.xhtmlが表示されて、入力された情報が表示されます。

[components1.xhtml]

・・・省略・・・
<h:body>
<h2>Welcome to Travel Agency</h2>
<hr width=”550″ align=”left”/>
<h:form>
<h:panelGrid id=”pg1″ columns=”2″>
<h:outputText value=”行きたい地域を選んでください: ”/>
<h:selectOneMenu id=”area” value=”#{travelBean.area}”>
<f:selectItem itemValue=”ヨーロッパ” itemLabel=”ヨーロッパ”/>
<f:selectItem itemValue=”アメリカ” itemLabel=”アメリカ”/>
<f:selectItem itemValue=”アジア” itemLabel=”アジア”/>
</h:selectOneMenu>
<h:outputText value=”旅行でやってみたいこと: ”/>
<h:selectOneRadio id=”purpose” value=”#{travelBean.purpose}”>
<f:selectItem itemValue=”観光” itemLabel=”観光”/>
<f:selectItem itemValue=”ショッピング” itemLabel=”ショッピング”/>
<f:selectItem itemValue=”スポーツ” itemLabel=”スポーツ”/>
</h:selectOneRadio>
<h:outputText value=”何かご要望がありましたらどうぞ: ”/>
<h:inputTextarea id=”comment” cols=”40″ rows=”5″ value=”#{travelBean.comment}”/>

<h:outputText value=””/>
<h:panelGrid id=”pg2″ columns=”2″>
<h:commandButton type=”submit” value=”送信” action=”components1Result” />
<h:commandButton type=”reset” value=”キャンセル” />
</h:panelGrid>

</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>

ここでh:panelGridタグについて説明しておきましょう。これは表示を整えるために使います。結果的にはHTMLのtableタグになり、表を使った整然とした配置を作ります。このタグのcolumns=”2″というのが便利なところで、2列の表を作ることを設定しています。

h:panelGridタグの内側に現れるh:outputTextやh:selectOneMenuなど各コンポーネントを左上から右下に向かって、出現する順番で2個ずつ自動的に並べてくれるのです。最後の行はちょっと変わっていますが、送信ボタンとリセットボタンはユーザーの操作手順から言って右下にあるのが自然です。ですから下の図で4行1列のところにはダミーで何も表示しないh:outputTextを入れています。4行2列のところはボタンが2個のままだとresetボタンが次の行に行ってしまうので、h:panelGridを1つつくってまとめて、h:panelGridの入れ子にしています。このタグをうまく使うと綺麗に並べることができます。

panelGrid

leafマネージドビーン

3つのプロパティarea、purpose、commentをString型で用意して、そのゲッター、セッターを用意するだけです。簡単です。

[TravelBean.java]

package com.myjsf;

import javax.inject.Named;
import javax.enterprise.context.RequestScoped;

@Named
@RequestScoped
public class TravelBean {

String area;//地域
String purpose;//何をしたいか
String comment;//要望

public TravelBean() {
}

public String getArea() {
return area;
}

public void setArea(String area) {
this.area = area;
}

public String getPurpose() {
return purpose;
}

public void setPurpose(String purpose) {
this.purpose = purpose;
}

public String getComment() {
return comment;
}

public void setComment(String comment) {
this.comment = comment;
}
}

leaf表示用のページ

次のように3つのh:outputTextタグを使って入力された情報を表示しています。

[components1Result]

・・・省略・・・

<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:h=”http://xmlns.jcp.org/jsf/html”>
<h:head>
<title>いただいた情報</title>
</h:head>
<h:body>
<h:panelGrid columns=”2″>
<h:outputText value=”【入力情報】”/>
<h:outputText value=””/>
<h:outputText value=”行きたい地域: ”/>
<h:outputText value=”#{travelBean.area}”/>
<h:outputText value=”旅行でやってみたいこと: ”/>
<h:outputText value=”#{travelBean.purpose}”/>
<h:outputText value=”コメント: ”/>
<h:outputText value=”#{travelBean.comment}”/>
</h:panelGrid>
</h:body>
</html>

leafまとめ

1.プルダウンメニュー =h:selectOneMenu

2.ラジオボタン =h:selectOneRadio

3.テキストエリア =h:inputTextarea 

選択肢はf:selectItemを使う。

表示を整えるにはh:panelGridタグを使う。columnsに列数を指定すれば、あとは自動的に並べてくれる。

previousnext

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

同書籍のPDF版は私自身が運営するこちらのサイトから直接購入できます。

コメントを残す

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

CAPTCHA