ビュー層

ビュー層は、画面を出力するためのテンプレートを提供します。

HTML

HTML と簡単な XML の画面は JSP と JSTL を使って出力しています。画面のテンプレートフレームワークとして Apache Tiles を利用し、画面の再利用化を図っていま す。

JSP

JSP で利用できるタグライブラリは以下のとおりです。

JSP では、アンダーバーから始まる予約変数を共通的に利用できます。これらの変数はパッケージ org.unitedfront.web.handler に収録されているハンドラクラスによって作成されています。次に示すのは、共通的に利用できる変数です。

変数名 型 説明
_user User 操作中のユーザです。
_terminal Terminal 操作中のユーザの端末です。 PC または MOBILE のいずれかを取得できます。
_locale Locale 操作中のユーザが選択している言語です。
_theme Theme 操作中のユーザが選択しているテーマです。
_availableLocales List<Locale> アプリケーションがサポートしている言語リストです。現在サポートされているのは英語と日本語です。
_usingEmail boolean アプリケーションが e メールの利用を有効にしている場合は true 、そうでなければ false 。

サンプルコード

メールアドレス変更フォーム画面の JSP MailAddrChangeForm.jsp の記述例を示します。隠しフィールドとして指定している _eventId と _flowExecutionKey は Web コントローラの Spring Web Flow が利用します。変数 validator を使って入力値検証クラスへアクセスできます。United Front 2 の画面は PC およびモバイルから閲覧できるよう構成する必要があります。script タグ を使うことで、PC 端末からのアクセス時のみ HTML SCRIPT タグを評価するようにしています。 

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/Include.jsp" %>
<uf2:script>
  <!-- SCRIPT タグは PC 端末でのみ出力 -->
  function onSubmitConfirm(mailAddr) {
    // 入力内容確認プロンプト
  }
</uf2:script>
<div>
  <h2><spring:message code="account.MailAddrChangeForm"/></h2>
  <p><spring:message code="account.MailAddrChangeForm.body"/></p>
  <form:form commandName="account"
      onsubmit="return onSubmitConfirm(this.mailAddr.value);">
    <input type="hidden" name="_eventId" value="submit"/>
    <input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}"/>
    <div class="element">
      <!-- メールアドレス入力欄 -->
      <spring:message code="account.MailAddrChangeForm.newMailAddr"/>:
      <form:errors path="mailAddr" cssClass="errors"/><br/>
      <form:input path="mailAddr" id="mailAddrChangeForm.mailAddr"/>
      ( <spring:message code="validation.Validate.maxLength"
          arguments="${validator.mailAddrMaxLength}"/> )
    </div>
    <div class="element">
      <!-- 送信ボタン -->
      <input type="submit" value="<spring:message code="submit"/>"
          class="button" onclick="this.disabled='disabled';this.form.submit();"/>
    </div>
  </form:form>
</div>

画面は次のように表示されます。

メールアドレス変更フォーム

Tiles 定義

メールアドレス変更フォーム画面の Tiles 定義を示します。Tiles 定義は WEB-INF/view/account/tiles-defs.xml に記述します。WEB-INF/view/tiles-defs.xml で定義されているページ全体のレイアウトを表す Tiles 定義 layout を継承しています。 focusedInputId 要素にメールアドレス入力用の INPUT タグの ID mailAddrChangeForm.mailAddr を指定することで、ページ表示直後にフォーカスする入力 欄を指定しています。 

<definition name="account.MailAddrChangeForm" extends="layout">
  <put-attribute name="focusedInputId" value="mailAddrChangeForm.mailAddr"/>
  <put-attribute name="body" value="/WEB-INF/view/account/MailAddrChangeForm.jsp"/>
</definition>

ページング

ページングのフレームワークについて説明します。ページングは、paging タグ を利用して表現します。paging タグの使用例を示します。コントローラクラスではデータの総件数を格納する変数 count を JSP へ渡しています。表示件数のデフォルトは２０件ですが、変更する場合は属性 displayCount を利用します。 

<uf2:paging count="${count}" url="/sample/index.html"/>

上記のコードはブラウザ画面上で次のように表示されます。この例では、前ページが存在しないため、前ページのボタ ンが無効になっています。

ページング画面

メール

メール用のテンプレートは United Front 2 で独自エンジンを利用します。XML 形式のメールテンプレートファイル を JSP と同じ /WEB-INF/view 以下に作成します。データ出力には EL 式のように扱える JEXL を採用しています。メールテン プレートは多言語対応しています。テンプレート名の末尾にアンダーバーで区切ってロケールを指定し、ファイル名としま す。メールテンプレートの XML 書式は次のとおりです。

タグ/属性 説明
email ルートタグです。
to 宛先となるメールアドレスを設定します。
cc CC に指定するメールアドレスを設定します。セミコロン (;) 区切りで複数設定できます。
bcc BCC に指定するメールアドレスを設定します。セミコロン (;) 区切りで複数設定できます。
subject 件名を設定します。
text 本文を設定します。 
<email to="宛先"　from="差出人"
    cc="セミコロン区切りのメールアドレス" bcc="セミコロン区切りのメールアドレス">
  <subject>件名</subject>
  <text>本文</text>
</email>

各値では、次の予約変数を利用できます。

変数名 型 説明
_systemMailAddr String システムのメールアドレスです。システムのメールアドレスは localConfiguration.properties で設定できます。
_systemUrl String システムの URL です。システムの URL は localConfiguration.properties で設定できます。
Note

United Front 2 では個人情報の観点から、ユーザのメールアドレスを他のユーザが知ることができないようにし ています。ユーザ宛のメールも、上記のシステムのメールアドレスを差出人 from に設定します。

サンプルコード

メールアドレス変更完了通知メールのテンプレート MailAddrChange-mail_ja.xml を示します。末尾にロケールを指定している点に注意してください。英語のメールテンプレートファイルは MailAddrChange-mail_en.xml になります。 

<email to="${mailAddrAndPassword.mailAddr}" from="${_systemMailAddr}">
  <subject>メールアドレス変更完了</subject>
  <text>
メールアドレスを変更しました。パスワードも再発行されています。
新しいメールアドレスと以下のパスワードでログインしてください。

${mailAddrAndPassword.password}
  </text>
</email>

メッセージ

United Front 2 は Spring Framework のメッセージ機能を利用してアプリケーションを多言語化していま す。メッセージはプロパティファイル messages_${lang}.properties に設定しています。例えば、日本語のメッ セージファイルは messages_ja.properties となります。日本語のメッセージファイルは ASCII 文字で記述する必要がありますが、 Eclipse ResourceBundle Editor を使って ASCII 文字のメッセージファイルを直接リポジトリに保存しています。

メッセージコードの決め方には簡単なルールがあります。単語であれば、その英単語をそのままメッセージコードにしま す。JSP に記述するメッセージコードは ${機能名}.${JSPファイル名}.{メッセージ名} 、アクションクラスに記述するメッセージコードは ${機能名}.${クラス名}.{メッセージ名} とします。メッセージ名は状況に応じてドット（.）を使っ て多段階層のコードを作ります。いくつかの例を示します。 

user = User
account.LoginForm.title = Login
account.AuthenticationAction.error = Authentication failure.
profile.View.friendSubscription.body
    = You have received friend subscriptions from users below.