3. ビューをデザインする

ここでは、アプリケーションのビューを作成します。

3.1. CSS ファイルのインポート

HTML コンポーネントの外観をカスタマイズするには CSS ファイルを使用します。

  1. [ファイル｜新規｜その他] を選択します。
  2. Web を展開して [CSS] を選択し、[次へ] をクリックします。
  3. Web フォルダを選択し、ファイル名として「stylesheet.css」を入力して [終了] をクリックします。



    新しいファイル stylesheet.css が、Web アプリケーションのルート フォルダ、たとえば web (Web アプリケーション ルート) の下に作成されます。

  4. workshop-jsf-tutorial/web/Resources/stylesheet.css ファイルのすべてのコードを web/stylesheet.css ファイルにコピーします。
  5. stylesheet.css ファイルを保存します。

3.2. images フォルダの作成

このアプリケーションでは、画像ファイルを images フォルダに格納します。

  1. [ファイル｜新規｜フォルダ] を選択します。
  2. [新しいフォルダ] ウィザードで親フォルダ workshop-JSF-tutorial/web を選択し、フォルダ名として「images」と入力します。
  3. [終了] をクリックします。

    これにより、web アプリケーションのルート フォルダ、たとえば web (Web アプリケーション ルート) の下に、新しいフォルダ images が作成されます。
  4. 画像ファイル banner.gif を、workshop-jsf-tutorial/web/Resources/images フォルダから workshop-jsf-tutorial/web/images フォルダにコピーします。

3.3. ビューの作成

ここでは、ユーザ登録フォームを表示する register.jsp という名前の JSP ページを作成します。

  1. [ファイル｜新規｜その他] を選択し、Web を展開して [JSP] と [次へ] をクリックします。
  2. [ファイル名] フィールドに「register.jsp」と入力し、ファイルの格納先として workshop-jsf-tutorial/web/pages を選択します。

  3. [次へ] をクリックします。
  4. テンプレートとして [新規 JSP ファイル (HTML)] が選択されていることを確認して [次へ] をクリックします。
  5. リソース バンドル ベース名 [リソース｜アプリケーション] を選択します。このベース名は、register.jsp で使用します。

  6. [終了] をクリックします。
  7. register.jsp という名前の空の JSP ページが作成されます。JSF コア タグ ライブラリからの JSF タグ <f:view> および <f:loadBundle> が含まれています。コードを開いて確認します。
    8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <%@ page language="java" contentType="text/html; charset=iso-8859-1" %>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
    <f:loadBundle basename="resources.application" var="bundle"/>
    <f:view>
       <html>
         <head>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <title>Untitled Document</title>
         </head>
         <body>

         </body>
      </html>
    </f:view>
  8. デフォルトでは、新しい JSP ファイルに

    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

    という taglib 行は追加されません。

    この行をコピーして register.jsp ファイルに追加してください。

loadBundle タグの basename 属性は、アプリケーションのリソース パッケージ内に格納されている ResourceBundle を参照します。basename 属性には、ファイルの完全修飾クラス名を指定する必要があります。

3.4. register.jsp ビューのデザイン

ここでは、UI コンポーネントを追加して JSF ページ register.jsp をデザインします。

JSF ページをデザインするには、利用可能な JSF タグとして [デザイン パレット] ビューに表示されるタグを使用します。  

[デザイン パレット] ビューの [JSP 変数] セクションには、その JSP ページで使用できる変数の一覧が表示されます。一覧から変数を選択して、JSP ページに簡単に挿入できます。変数のスコープは各種のアイコンで示されます。

  

各変数をマウスでポイントすると、その変数に関する情報が表示されます。

Session スコープの変数 user を右クリックすると、ポップアップ メニューが表示されます。

ポップアップ メニューには、以下の操作を実行するためのオプションが表示されます。

3.4.1. ページ タイトルとスタイルシートの指定

  1. register.jsp の <title> タグ内のテキスト「Insert Title Here」を削除し、「<h:」と入力して〔Ctrl〕+〔Space〕キーを押します。



    2. JSF HTML タグ ライブラリのタグの一覧が表示されます。これは、Workshop AppXRay テクノロジによって提供される、コード補完という非常に便利な機能です。

  2. タグの一覧から h:outputText タグを選択して〔Enter〕を押します。これにより、空の <h:outputText/> タグが追加されます。
  3. outputText タグを閉じる前に〔Space〕キーを押します。outputText 属性の一覧が表示されます。

  4. <h:outputText> タグの属性値を選択します。
  5. [プロパティ] タブを選択します。
    [スマート エディタ] タブで、Value 属性のアイコン をクリックします。
  6. [バインディングの選択] ダイアログで、[リソース] タブをクリックして [新しいリソース キー] リンクをクリックします。
  7. [新しいリソース キー] エディタで、[リソース キー] フィールドに「registerPageTitle」、[リソース値] フィールドに「Workshop への登録」と入力します。
  8. [新しいリソース キー] エディタで [OK] をクリックします。 新しいキーと値のペアが、リソース バンドル application.properties ファイルに追加されます。
  9. [バインディングの選択] ダイアログで [OK] をクリックします。
  10. [デザイン パレット] ビューで、HTML タグ リストから Import CSS File タグをドラッグし、register.jsp ページの [デザイン エディタ] (＝上方の空白のペイン) にドロップします。

  11. [ファイルの選択] ダイアログが表示されます。workshop-jsf-tutorial/web/stylesheet.css ファイルを選択します。

  12. これにより、</head> タグの前に、CSS ファイルを参照する <link> タグが追加されます。
    13. <link rel="stylesheet" type="text/css" href="../stylesheet.css">
  13. register.jsp ファイルを保存します。

3.4.2. HTML テーブルの追加

WYSIWYG の JSF エディタでは、[デザイン パレット] ビューのタグ ライブラリに登録されているすべてのタグをドラッグ アンド ドラッグできます。

  1. [デザイン パレット] ビューで、HTML タグ リストから テーブル タグをドラッグし、register.jsp ページの [デザイン エディタ] にドロップします。[テーブル タグ] ダイアログが表示されます。
  2. [テーブル タグ] ダイアログで、次の図のようにパラメータを入力します。

  3. [OK] をクリックします。
  4. HTML table タグが、register.jsp ページの body タグ内に追加されます。

3.4.3. ページへの画像の追加

  1. [デザイン パレット] ビューの JSF HTML タグ リストから [グラフィック イメージ] タグを HTML テーブルの 1 行目にドロップします。

  2. [URL] のアイコン をクリックし、画像ファイル banner.gif を選択して [OK] をクリックします。

  3. [代替] (画像の代替テキスト) のアイコン をクリックします。[バインディングの選択] ダイアログで、[リソース] タブをクリックして [新しいリソース キー] リンクをクリックします。

  4. [新しいリソース キー] エディタで、リソース キーとして「alt_img_text」、リソース値として「JSF エディタ」と入力します。
  5. [新しいリソース キー] エディタで [OK] をクリックします。 新しいキーと値のペアが、リソース バンドル application.properties ファイルに追加されます。
  6. [バインディングの選択] ダイアログで [OK] をクリックします。
  7. [グラフィック イメージ タグ] ダイアログで [OK] をクリックします。
  8. これにより、HTML テーブルの 1 行目に <h:graphicImage> タグと属性値が追加されます。
  9. register.jsp ページを保存します。

分割ペイン ビューの [デザイン] タブをクリックすると、WYSIWYG のエディタ (デザイン エディタ) に切り替えることができます。

もちろん、ソース エディタに切り替えてソースのみで作業することもできます。

3.4.4. アプリケーション メッセージの追加

ユーザ登録時にすでに存在するユーザ ID が入力されたら、ユーザに再入力を求めるメッセージを表示する必要があります。UserBean の registerUser( ) メソッドは、入力されたユーザ ID がすでに存在する場合に FacesMessage を FacesContext に追加するメソッドです。

ここでは、要求の処理時に FacesContext に追加されたエラー メッセージを register.jsp ページに表示するための <h:messages> を追加します。

  1. エディタのドラッグ アンド ドロップ機能を使用して、[ Messages] タグを JSF HTML タグ ライブラリから HTML テーブルの 2 行目に追加します。
  2. [メッセージ タグ] ダイアログで [グローバルのみ
    ] チェック ボックスをチェックします。     [レイアウト] フィールドの値が「table」になっていることを確認します。
    CSS スタイルシート クラスを設定するには、スタイル クラスのアイコン をクリックします。[CSS スタイル クラスの選択] ダイアログで、[validationMessage] を選択して [OK] をクリックします。

  3. [メッセージ タグ] ダイアログで [OK] をクリックします。
  4. これにより、HTML テーブルの 2 行目に <h:messages> タグと属性値が追加されます。
  5. デザイン エディタの h:messages UI コンポーネントの後ろで〔Enter〕を押します。

  6. register.jsp ページを保存します。

3.4.5. HTML フォーム、フォーム フィールド、検証エラー メッセージの追加

ここでは、HTML フォームとフォーム フィールドのタグを追加します。また、各フォーム フィールドのバリデータも定義します。この手順を実行する過程で、Workshop のさまざまな機能を習得できます。

  1. ドラッグ アンド ドロップ機能を使用して、[ Form] タグを JSF HTML タグ ライブラリから HTML テーブルの 2 行目 (h:messages プレースホルダの後ろ) に追加します。

  2. [フォーム Bean] フィールドの横にあるアイコン をクリックします。[Bean/プロパティの選択] ダイアログで、JSF 管理対象 Bean [user] を選択して [OK] をクリックします。
  3. [フォーム アクション] フィールドの横にあるアイコン をクリックします。[メソッドの選択] ダイアログで、[user] 管理対象 Bean の [registerUser] メソッドを選択します。
    [次へ] をクリックします。

  4. [user] Bean のプロパティのうち、フォームの入力フィールドにバインドするプロパティをすべて選択して [次へ] をクリックします。

  5. [フォーム タグ] ダイアログで、[上へ] および [下へ] ボタンを使用して、フィールドの順序を次の図のように設定します。
    [contactDetails.address] フィールドの [入力タイプ] を [テキスト領域] に設定します。
    [contactDetails.country] フィールドの [入力タイプ] を [リスト] に設定します。


  6. [次へ] をクリックします。
  7. このアプリケーションでは検証エラー メッセージを表示する必要あるので、[Insert Validation Error Messages] チェック ボックスがチェックされていることを確認します。
    [スタイル クラス] フィールドの横にあるアイコン をクリックします。
    [CSS スタイル クラスの選択] ダイアログで、[validationMessage] を選択して [OK] をクリックします。

  8. [終了
    ] をクリックします。
     これにより、JSF HTML ラグ ライブラリからタグが挿入されます。挿入されるのは、HTML テーブルの <h:panelGrid> タグを含む <h:form> タグ、フォーム フィールド ラベルの <h:outputText> タグ、フォーム フィールドの <h:inputText>、<h:selectOneListbox>、および <h:inputTextarea> タグ、検証エラー メッセージの <h:message> タグなどです。



    9. また、UserBean.registerUser() メソッドを参照する action 属性を含む <h:commandButton> タグも追加されます。

    <h:message> タグの for 属性値は、対応するフォーム フィールドの id 属性値を参照します。

3.4.6. [プロパティ シート] と [スマート エディタ] の使用

[selectOneListbox] フィールドには、国の一覧が表示されます。ここでは、[プロパティ シート] タブと [スマート エディタ] タブを使用し、一覧に項目を追加してそのプロパティを指定します。この手順を進める過程で、[プロパティ シート] と [スマート エディタ] の違いを理解できます。

  1. デザイン エディタで、国のリストボックスを選択します。[プロパティ] ビューの [プロパティ シート] タブに、<h:selectOneListbox> タグに定義されている属性の一覧が表示され、ソース ウィンドウは対応するタグへ移動します。

    [プロパティ シート] タブには、すべてのタグ属性とその値が表示されます。属性の型によっては、属性値の編集を支援する属性値ピッカーが表示されます。

    [スマート エディタ] ビューは、効率的に編集を行うための UI を提供します。
  2. [スマート エディタ] タブで、[Static Items] 属性の横にあるアイコン をクリックします。
  3. [項目の選択 リストの編集] で [追加] をクリックします。
  4. [項目の選択タグ] ダイアログで、[ラベル] フィールドに「United States of America」、[値] フィールドに「USA」と入力します。
  5. この手順を繰り返して、[項目の選択 リストの編集] ダイアログを次の図のように編集します。

  6. リストが完成したら [OK] をクリックします。

3.4.7. 編集の同期

  1. [WYSIWYG の JSF (デザイン) エディタ] ビュー、[ソース エディタ] ビュー、[プロパティ] ビュー、および [アウトライン] ビューは相互に同期します。つまり、いずれかのビューに加えた変更は、リアルタイムで他のビューに反映されます。
  2. [スマート エディタ] ビューの [レンダリング プロパティ] セクションで、[タイプ] フィールドのオプションとして [メニュー] を選択します。これにより、Country リスト タグが <h:selectOneListbox> タグから <h:selectOneMenu> タグに変更されます。

3.4.8. テーブル ヘッダとテーブル フッタの挿入

  1. デザイン エディタで h:panelGrid コンポーネントを右クリックし、ポップアップ メニューから [パネル グリッド｜テーブル ヘッダの挿入] を選択します。



    2. JSF コア タグ ライブラリの <f:facet> によってテーブル ヘッダ行が追加されます。

  2. JSF HTML タグ ライブラリから [出力テキスト] タグをドラッグし、テーブル ヘッダ行にドロップします。
  3. [出力テキスト タグ] ダイアログで、[値] フィールドの横にあるアイコン をクリックします。[バインディングの選択] ダイアログで、[リソース] タブをクリックして [新しいリソース キー] リンクをクリックします。

  4. [新しいリソース キー] エディタで、[リソース キー] フィールドに「registerFormHeader」、[リソース値] フィールドに「メンバーの登録」と入力します。

  5. [新しいリソース キー] ダイアログで [OK] をクリックします。 新しいキーと値のペアが、リソース バンドル application.properties ファイルに追加されます。
  6. [バインディングの選択] ダイアログで [OK] をクリックします。
  7. [出力テキスト タグ] ダイアログで [OK] をクリックします。
  8. デザイン エディタで h:panelGrid コンポーネントを右クリックし、ポップアップ メニューから [パネル グリッド｜テーブル フッタの挿入] を選択します。
  9. [ソース ビュー] で、[送信] ボタン (<h:commandButton action="#{user.registerUser}" value="Submit"/>) をテーブル フッタに移動します。
  10. register.jsp ページを保存します。

3.4.9. テーブルのスタイル クラスの指定

  1. デザイン エディタで、h:panelGrid コンポーネントを選択します。
  2. [スマート エディタ] で [テーブル クラス] のアイコン をクリックし、[CSS スタイル クラスの選択] ダイアログで [table-background] オプションを選択して [OK] をクリックします。
  3. [カラム クラス] テーブル プロパティのアイコン をクリックし、[スタイル値の編集] ダイアログで次の図のように 3 つのカラムのスタイルを選択して [OK] をクリックします。

  4. これで、テーブルとテーブル カラムの CSS スタイル クラスを指定できました。次は、テーブル ヘッダとテーブル フッタの CSS スタイル クラスを設定します。
  5. [プロパティ] ビューで [プロパティ シート] タブ ビューを選択し、headerClass 属性の [値] カラムをクリックします。アイコン alt が表示されます。アイコン alt をクリックし、[CSS スタイル クラスの選択] ダイアログでスタイル クラス [table-header] を選択して [OK] をクリックします
  6. 同様の手順で、[footerClass] スタイル シート属性のスタイル クラス [table-footer] を選択します。
  7. フォーム フィールドを 1 つずつ選択します ([アドレス] フィールドを除く)。[スマート エディタ] タブの [スタイル クラス] フィールドに「form-field」と入力します。
  8. register.jsp ページを保存します。

3.4.10. フォーム フィールドのバリデータの定義

次に、HTML フォーム フィールドの検証ルールを設定します。次の表に、フォーム フィールドの検証ルール (条件) の例を示します。

フォーム フィールド フィールドの型 (入力の型) 検証ルール (条件)
ユーザ ID 文字列 (テキスト フィールド) 必須。 4 ～ 8 文字の文字列でなければならない。
パスワード 文字列 (パスワード フィールド) 必須。 1000 ～ 9999 の間の数値でなければならない。
氏名 文字列 (テキスト フィールド) 必須。
住所 文字列 (テキスト領域) 必須。
市町村 文字列 (テキスト フィールド) 必須。
国 文字列 (リスト) 必須。
郵便番号 文字列 (テキスト フィールド) 必須。
  1. デザイン エディタで、userId テキスト フィールドを選択します。[スマート エディタ] タブに、userId テキスト フィールドの <h:inputText> タグの属性が表示されます。 [検証] セクションの [必須] チェック ボックスをチェックします。これにより、userId テキスト フィールド タグに required="true" 属性が追加されます。
  2. [バリデータ] フィールドの横にあるアイコン をクリックします。[バリデータの編集] ダイアログで [追加] ボタンをクリックし、[長さバリデータ] オプションを選択します。

  3. [長さバリデータ タグ] ダイアログの [最小長] フィールドに「4」、[最大長] フィールドに「8」と入力し、[OK] をクリックします。これにより、userId テキスト フィールドのバリデータ一覧に、JSF の標準の [長さバリデータ] が追加されます。
  4. [バリデータの編集] ダイアログで[OK] をクリックします。

    JSF コア タグ ライブラリの <f:validateLength> タグが、userId 入力テキスト フィールドに追加されます。
  5. デザイン エディタで、password テキスト フィールドを選択します。 [スマート エディタ] タブに、password テキスト フィールドの <h:inputText> タグの属性が表示されます。 [検証] セクションの [必須] チェック ボックスをチェックします。これにより、userId テキスト フィールド タグに required="true" 属性が追加されます。
  6. [バリデータ] フィールドの横にあるアイコン をクリックします。 [バリデータの編集] ダイアログで [追加] ボタンをクリックし、[Long バリデータ] オプションを選択します。
  7. [長さバリデータ タグ] ダイアログの [Min. Value] フィールドに「1000」、[Max. Value] フィールドに「9999」と入力し、[OK] をクリックします。
  8. これにより、password テキスト フィールドのバリデータ一覧に、JSF の標準の [Long バリデータ] が追加されます。[OK] をクリックします。

    JSF コア タグ ライブラリの <f:validateLongRange> タグが、password 入力テキスト フィールドに追加されます。
  9. その他のフォーム フィールド (name、city、zipcode、country など) についても、検証属性 [必須] のチェック ボックスをチェックします。

    入力を必須にするフォーム フィールドには、記号 ( * ) を指定する必要があります。
  10. デザイン エディタで、userId 入力テキスト フィールドの後に記号 * を入力します。これにより、JSF コア タグ ライブラリからの <f:verbatim> に記号 * が追加されます。
  11. 記号 * を選択して CSS スタイル クラスを指定します。記号を右クリックし、ポップアップ メニューから [CSS スタイル クラス｜html-text] を選択します。

  12. <span> タグによって、記号 * にスタイル クラス html-text が適用されます。
  13. その他のフォーム フィールド (password、name、address、city、zipcode、country など) についても、記号 * を追加してスタイル クラス html-text を適用します。
  14. register.jsp ページを保存します。

3.4.11. UI コンポーネント ラベルのローカライズ

国際化されたアプリケーションでは、GUI コンポーネント ラベルをローカライズする必要があります。ここでは、アプリケーション リソース バンドルを使用して、UI コンポーネント ラベルに動的な値をバインドします。

  1. workshop-jsf-tutorial/web/WEB-INF/src/java/resources/application.properties ファイルにフォーム フィールド ラベルのキーと値のペアを追加してファイルを保存します。このコード行は、workshop-JSF-tutorial/web/Typing_Aid/application_properties_1.txt からコピーすることもできます。
    2. userId=User ID\:
    password=Password\:
    name=Name\:
    address=Address\:
    city=City\:
    state=State\:
    country=Country\:
    zipcode=Zipcode\:
    officePhone=Phone (Off.)\:
    homePhone=Phone (Home)\:

    submit=Submit
    reset=Reset
  2. [デザイン エディタ] で、[ユーザ ID] テキスト フィールドのラベルとして User Id: を選択します。[スマート エディタ] ビューには、User Id: テキスト ラベルの <h:outputText> タグの属性が表示されます。
  3. [スマート エディタ] タブで、[値] フィールドの横にあるアイコン をクリックします。[バインディングの選択] ダイアログの [リソース] ビューで、リソース キーとして [userId] を選択して [OK] をクリックします。
  4. これにより、<h:outputText> タグの value 属性に、アプリケーション リソース バンドルのキー値 userId が動的にバインドされます。
  5. 同様の手順で、他の UI コンポーネント (password、name、address、city、state、zipcode、country、officePhone、homePhone、submit など) のラベルに、アプリケーション リソース バンドルの対応するキー値をバインドします。
  6. register.jsp ページを保存します。

3.4.12. JSP ページで使用できる変数の表示

Workshop では、JSP ページで使用できる変数が自動的に検出され、それらの変数を一覧から選択できます。これにより、開発時間を短縮し、エラーを最小限に抑えることができます。

  1. デザイン エディタで、userId テキスト フィールドを選択します。[ソース エディタ] ビューに、userId テキスト フィールド用に選択された <h:inputText> タグの属性が表示されます。
  2. userId テキスト フィールドの <h:inputText> タグのvalue属性から user.userId を削除して〔Ctrl〕+ スペース キーを押します。

    JSP ページで使用できる変数の一覧が表示されます。
  3. userId テキスト フィールドの <h:inputText> タグの value 属性を #{user.userId} に設定しなおします。

3.4.13. JSF 管理対象 Bean のコード補完とエラー チェック

Workshop は、アプリケーション データベースを構築して、アプリケーションに関する情報を詳細に把握しています。これらの情報をもとに、JSF 管理対象 Bean の変数やメソッドのコード補完機能を提供します。

  1. デザイン エディタで、[送信] ボタンを選択します。[ソース エディタ] ビューに、[送信] ボタン用に選択された <h:commandButton> タグの属性が表示されます。
  2. [送信] ボタンの <h:commandButton> タグの action 属性からregisterUser を削除して〔Ctrl〕+ スペース キーを押します。

    コード補完機能が起動し、管理対象 Bean UserBean のメソッドの一覧が表示されます。
  3. <h:commandButton> タグの action 属性を #{user.registerUser} に設定しなおします。

3.4.14. リアルタイムのエラー チェック

Workshop は、把握しているアプリケーションの分析をもとに、潜在的なエラーを即座に検出してリアルタイムでエラー チェックを行います。

Workshop では、エラーの影響を受けるすべてのファイルの警告/エラー マニフェストが作成されます。このマニフェストには、影響を受ける Java ファイルだけでなく、JSP および XML 関連のコンフィグレーション ファイルを始め、すべてのレベルのファイルが含まれます。

  1. たとえば、userId テキスト フィールドの <h:inputText> タグの value 属性を #{user.Id} に変更すると、ソース エディタに警告アイコンが表示されます。
  2. この状態で register.jsp ページを保存すると、管理対象 Bean beans.UserBean の Id フィールドが定義されていないことを示す警告メッセージが [問題] ビューに表示されます。

  3. value 属性を #{user.userId} に設定しなおします。
  4. 次に、UserBean クラスで、getPassword( ) メソッドの名前を getPass( ) に変更して UserBean クラスを保存してみます。
  5. [問題] ビューに、register.jsp リソースの警告メッセージとして、管理対象 Bean beans.UserBean の password フィールドが定義されていないことを示すメッセージが表示されます。
  6. UserBean クラスで、getPass( ) メソッドの名前を getPassword( ) に設定しなおして UserBean クラスを保存します。

チュートリアルを移動するには、矢印をクリックしてください。

さらにヘルプが必要ですか。質問は Workshop ニュース グループまでお寄せください。