4.3.3 入出力ページの作成

JavaServer Facesアプリケーションで使用する入出力ページを作成します。

1 入出力ページの新規作成

入出力ページを作成します。まずreserveDetails.jspを作成します。以下の手順で行います。

Interstage Studioのメイン画面で、[ファイル]メニューの[新規] > [JavaServer Faces 入出力ページ(Apcoordinator)]を選択します。

以下のダイアログが表示されます。プロジェクトにhotelReserveが指定されていることを確認してください。

それぞれの項目に設定する値は以下のとおりです。

設定項目	設定内容
プロジェクト名	"hotelReserve"を指定します。
フォルダ名	"/ContextRoot"を指定します。
ファイル名	"reserveDetails"を指定します。

プロジェクト名は既存のプロジェクトを指定してください。フォルダ名は指定したプロジェクト配下のフォルダを指定してください。

プロジェクト名、フォルダ名の指定は、[参照]ボタンを使って、ダイアログから選択することが可能です。

[終了]ボタンをクリックすると、reserveDetails.jspのひな型が生成されます。以下のソースになります。

reserveDetails.jsp（ひな型）

<html>
 <%@ page contentType="text/html;charset=windows-31j" %>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@ taglib uri="ujijsf-taglib" prefix="uji" %>
 <f:view>
  <head>
  </head>
  <body>
  </body>
 </f:view>
</html>

reserveDetails.jspはInterstage Studio上で画面部品をドラッグ＆ドロップして作成します。reserveDetails.jspの作成については次節を参照してください。

その他の入出力ページ(reserveConfirm.jsp, reserveLook.jsp, reserveTermination.jsp)に関しても、reserveDetails.jspと同様にひな型を作成します。

reserveConfirm.jspを作成します。以下の手順で行います。

[ファイル]メニューの[新規] > [JavaServer Faces 入出力ページ(Apcoordinator)]を選択します。

以下のダイアログが表示されます。プロジェクトに hotelReserve が指定されていることを確認してください。

それぞれの項目に設定する値は以下のとおりです。

設定項目	設定内容
プロジェクト名	"hotelReserve"を指定します。
フォルダ名	"/ContextRoot"を指定します。
ファイル名	"reserveConfirm"を指定します。

reserveConfirm.jspに関して入力する項目は以下のとおりです。作成したひな型に次のソースをコピーしてください。赤文字部分は変更、追加する部分です。

reserveConfirm.jsp

<html>
 <%@ page contentType="text/html;charset=windows-31j" %>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@ taglib uri="ujijsf-taglib" prefix="uji" %>
 <f:view>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=windows-31j">
  <title>予約確認画面</title>
  </head>
  <body>
  
  <H2>ホテル予約サンプル</H2>

  <uji:form name="mainForm" method="post" >
  <br>
  <h3>予約確認</h3>
  <table border="1">
    <tbody>
    <tr>
      <td>ご利用期間</td>
      <td><uji:getProperty bean="reserveBean" property="periodStr" /></td>
    </tr>
    <tr>
      <td>部屋の種類</td>
      <td><uji:getProperty bean="reserveBean" property="roomTypeStr" escape="true" /></td>
    </tr>
    <tr>
      <td>オプション</td>
      <td><uji:getProperty bean="reserveBean" property="optionsStr" escape="true" /></td>
    </tr>
    <tr>
      <td>料金</td>
      <td><uji:getProperty bean="reserveBean" property="charge" escape="true" /></td>
    </tr>
    <tr>
      <td colSpan="2">
        <uji:pushButton label="キャンセル" action="cancel" />
        <uji:pushButton id="reserve" label="OK" action="#{__reserveConfirm.reserve_action}"/>
      </td>
    </tr>

  </tbody>
  </table>
  </uji:form>
  
  </body>
 </f:view>
</html>

reserveLook.jspを作成します。以下の手順で行います。

[ファイル]メニューの[新規] > [JavaServer Faces 入出力ページ(Apcoordinator)]を選択します。

以下のダイアログが表示されます。プロジェクトにhotelReserveが指定されていることを確認してください。

それぞれの項目に設定する値は以下のとおりです。

設定項目	設定内容
プロジェクト名	"hotelReserve"を指定します。
フォルダ名	"/ContextRoot"を指定します。
ファイル名	"reserveLook"を指定します。

reserveLook.jspに関して入力する項目は以下のとおりです。作成したひな型に次のソースをコピーしてください。赤文字部分は変更、追加する部分です。

reserveLook.jsp

<html>
 <%@ page contentType="text/html;charset=windows-31j" %>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@ taglib uri="ujijsf-taglib" prefix="uji" %>
 <f:view>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=windows-31j">
  <title>予約状況画面</title>
  </head>

  <body>
    <h2>ホテル予約サンプル</h2>
    <uji:form name="mainForm" method="post" >
      <br>
      <h3>予約状況</h3>
      <uji:tableView bean="reserveBean" property="reserveLookTable" borderType="solid" borderWidth="1" alignmentHorizontal="center"/><br>
      <uji:pushButton label="予約する" action="success" />
    </uji:form>
  </body>
 </f:view>
</html>

reserveTermination.jspを作成します。以下の手順で行います。

[ファイル]メニューの[新規] > [JavaServer Faces 入出力ページ(Apcoordinator)]を選択します。

以下のダイアログが表示されます。プロジェクトに hotelReserve が指定されていることを確認してください。

それぞれの項目に設定する値は以下のとおりです。

設定項目	設定内容
プロジェクト名	"hotelReserve"を指定します。
フォルダ名	"/ContextRoot"を指定します。
ファイル名	"reserveTermination"を指定します。

reserveTermination.jspに関して入力する項目は以下のとおりです。作成したひな型に次のソースをコピーしてください。赤文字部分は変更、追加する部分です。

reserveTermination.jsp

<html>
 <%@ page contentType="text/html;charset=windows-31j" %>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@ taglib uri="ujijsf-taglib" prefix="uji" %>
 <f:view>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=windows-31j">
  <title>予約完了画面</title>
  </head>

  <body>
   <h2>ホテル予約サンプル</h2>
   <uji:form name="mainForm" method="post" >
     <br>
     <uji:pushButton label="初期画面へ" action="success" />
   </uji:form>
  </body>
 </f:view>
</html>

index.jspを修正します。以下の手順で行います。index.jspに次のソースをコピーしてください。赤文字部分は変更、追加する部分です。

index.jsp

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
 <%@ page contentType= "text/html; charset=windows-31j" %>
 </head>
 <body>
 <jsp:forward page="/faces/reserveLook.jsp" />
 </body>
</html>

2 タグの配置とBeanへの関連付け(reserveDetails.jspの作成)

Interstage Studio上でタグをドラッグ＆ドロップすることによりreserveDetails.jspを作成します。

まず、フォーム作成します。レンダリングタグパレットの[UJIクライアントスクリプトタグ]カテゴリからフォーム(uji:form)を選択してreserveDetails.jspに追加します。

次に、画面レイアウトに使用する表をフォームの中に追加します。表は以下の手順で追加します。

[表] > [挿入]メニューの[表の挿入]を選択します。

以下の[表の挿入]ダイアログが表示されます。[行][列]を指定し、[幅を指定する]のチェックを外して[OK]をクリックします。

「到着日」「出発日」などの画面に固定的に表示する文字列は、挿入箇所にカーソルを合わせて、画面に直接入力します。

続いて、入出力項目となるタグを追加します。タグはレンダリングタグパレットからドラッグ＆ドロップすることによって追加します。レンダリングタグパレットから追加するタグを選択し、追加したい位置にドラッグ＆ドロップしてください。追加するタグは以下のとおりです。

項目	タグ
到着日	コンボボックス(uji:comboBox)
出発日	コンボボックス(uji:comboBox)
部屋の種別	ボタンリスト(uji:buttonList)
宿泊人数	十進整数入力フィールド(uji:fieldBigInteger)
オプション	ボタンリスト(uji:buttonList)
エラーメッセージ	文字列入力フィールド(uji:fieldString)
予約する	プッシュボタン(uji:pushButton)
予約状況へ戻る	プッシュボタン(uji:pushButton)

追加するタグは、[UJIコンポーネントタグ]カテゴリから選択します。

追加した表やタグはJSPエディタ上でサイズや位置の変更、スタイルの指定を行うことができます。作成した reserveDetails.jspの図を以下に示します。

[予約詳細]部分は、メニューの[書式]>[段落]>[見出し3]で装飾します。

配置したタグのアトリビュートをプロパティビューで以下のとおり設定します。

項目	タグ	プロパティ名	プロパティの値	説明
-	フォーム(uji:form)	method	"post"を指定します。	HTMLのFORMタグと同様です。
-	フォーム(uji:form)	name	"mainForm"を指定します。	フォームの名前です。
表	表(table)	border	"3"を指定します。	テーブル外枠線の太さを指定します。
宿泊人数	十進整数入力フィールド(uji:fieldBigInteger)	minimumValue	"1"を指定します。	入力可能な値の最小値を指定します。
		maximumValue	"5"を指定します。	入力可能な値の最大値を指定します。
		infoText	"宿泊人数には1-5人を指定して下さい"を指定します。	入力された値がminimumValue, maximumValueで指定した範囲を超えていた場合に表示するメッセージを指定します。入力値のチェックは、フォーム送信時に実施されます。
オプション	ボタンリスト(uji:buttonList)	multipleMode	"true"を指定します。	複数選択を可能とする場合にtrueを指定します。
エラーメッセージ	文字列入力フィールド(uji:fieldString)	plain	"true"を指定します。	入力フィールドとしてではなく、通常の文字列として表示する場合にtrueを指定します。
エラーメッセージ	文字列入力フィールド(uji:fieldString)	foreground	"ff0000"を指定します。	文字色を指定します。
予約する	プッシュボタン(uji:pushButton)	id	"check"を指定します。	タグを識別する名前を明示的に指定します。
予約する	プッシュボタン(uji:pushButton)	label	"予約する"を指定します。	ボタンに表示する文字列を指定します。
予約状況へ戻る	プッシュボタン(uji:pushButton)	label	"予約状況へ戻る"を指定します。	ボタンに表示する文字列を指定します。

配置したタグに対して、Beanの関連付けを行います。

関連付けは以下の手順で行います。

Managed Beanリストビューから、関連付けを行うBeanのプロパティを選択します。
JSPエディタの関連付けを行うコンポーネントへドラッグ＆ドロップします。

以下の表のとおりタグをプロパティに関連付けます。

項目	タグ	Managed Bean名	プロパティ名
到着日	コンボボックス(uji:comboBox)	reserveBean	arrivalDay
出発日	コンボボックス(uji:comboBox)		departureDay
部屋の種別	ボタンリスト(uji:buttonList)		roomType
宿泊人数	十進整数入力フィールド(uji:fieldBigInteger)		people
オプション	ボタンリスト(uji:buttonList)		options
エラーメッセージ	文字列入力フィールド(uji:fieldString)		message

タグとプロパティの関連付けは、以下のようにタグのアトリビュートに設定されます。

到着日のコンボボックスの例
```
<uji:comboBox bean="reserveBean" property="arrivalDay"/>
```
reserveDetails.jspがドラッグ＆ドロップにて一通り作成されたら、編集状態を[テキスト]にして、<head>タグ内に下記のソースをコピーしてください。
```
...
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=windows-31j">
 <title>予約詳細画面</title>
 </head>
...
```