<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document PUBLIC
  "-//Apache Software Foundation//DTD XDOC 1.0//EN"
  "http://maven.apache.org/dtd/xdoc_1_0.dtd">

<document>
  <properties>
    <title>ビュー層 - View Layer</title>
    <author email="kurokkie@users.sourceforge.jp">kurokkie</author>
  </properties>
  <body>
    <section name="ビュー層">
      <p>ビュー層は、画面を出力するためのテンプレートを提供します。</p>
    </section>
    <section name="HTML">
      <p>
HTML と簡単な XML の画面は JSP と JSTL を使って出力しています。画面のテンプレートフレームワークとして
<a href="http://tiles.apache.org/">Apache Tiles</a> を利用し、画面の再利用化を図っていま
す。
      </p>
      <subsection name="JSP">
        <p>JSP で利用できるタグライブラリは以下のとおりです。</p>
        <ul>
          <li><a href="http://java.sun.com/products/jsp/jstl/reference/docs/index.html">JSTL</a> core タグ、fmt タグ (メッセージングは Spring タグを利用)</li>
          <li><a href="http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html">Spring タグ</a>、<a href="http://static.springframework.org/spring/docs/2.5.x/reference/spring-form.tld.html">Spring form タグ</a></li>
          <li><a href="http://static.springframework.org/spring-security/site/reference/html/authorization-common.html#authorization-taglibs">Spring Security タグ</a></li>
          <li><a href="http://tiles.apache.org/framework/tiles-jsp/tlddoc/index.html">Apache Tiles タグ</a></li>
          <li><a href="tlddoc/index.html">United Front 2 タグ</a></li>
        </ul>
        <p>
JSP では、アンダーバーから始まる予約変数を共通的に利用できます。これらの変数はパッケージ <a
href="apidocs/org/unitedfront2/web/handler/package-summary.html"><code>org.unitedfront.web.handler</code></a>
に収録されているハンドラクラスによって作成されています。次に示すのは、共通的に利用できる変数です。
        </p>
        <div class="smaller">
          <table>
            <tr>
              <th>変数名</th>
              <th>型</th>
              <th>説明</th>
            </tr>
            <tr>
              <td><code>_user</code></td>
              <td><a href="apidocs/org/unitedfront2/domain/User.html"><code>User</code></a></td>
              <td>操作中のユーザです。</td>
            </tr>
            <tr>
              <td><code>_terminal</code></td>
              <td><a href="apidocs/org/unitedfront2/domain/Terminal.html"><code>Terminal</code></a></td>
              <td>操作中のユーザの端末です。 <code>PC</code> または <code>MOBILE</code> のいずれかを取得できます。</td>
            </tr>
            <tr>
              <td><code>_locale</code></td>
              <td><a href="http://java.sun.com/javase/ja/6/docs/ja/api/java/util/Locale.html"><code>Locale</code></a></td>
              <td>操作中のユーザが選択している言語です。</td>
            </tr>
            <tr>
              <td><code>_theme</code></td>
              <td><a href="http://static.springframework.org/spring/docs/2.5.x/api/org/springframework/ui/context/Theme.html"><code>Theme</code></a></td>
              <td>操作中のユーザが選択しているテーマです。</td>
            </tr>
            <tr>
              <td><code>_availableLocales</code></td>
              <td><a href="http://java.sun.com/javase/ja/6/docs/ja/api/java/util/List.html"><code>List&lt;Locale&gt;</code></a></td>
              <td>アプリケーションがサポートしている言語リストです。現在サポートされているのは英語と日本語です。</td>
            </tr>
            <tr>
              <td><code>_usingEmail</code></td>
              <td><code>boolean</code></td>
              <td>アプリケーションが e メールの利用を有効にしている場合は <code>true</code> 、そうでなければ <code>false</code> 。</td>
            </tr>
          </table>
        </div>
        <div>
          <h4>サンプルコード</h4>
          <p>
メールアドレス変更フォーム画面の JSP <a
href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/webapp/WEB-INF/view/account/MailAddrChangeForm.jsp?root=unitedfront2&amp;view=markup">MailAddrChangeForm.jsp</a>
の記述例を示します。隠しフィールドとして指定している <code>_eventId</code> と
<code>_flowExecutionKey</code> は Web コントローラの Spring Web Flow が利用します。変数
<code>validator</code> を使って入力値検証クラスへアクセスできます。United Front 2 の画面は PC
およびモバイルから閲覧できるよう構成する必要があります。<a href="tlddoc/uf2/script.html"><code>script</code> タグ</a>
を使うことで、PC 端末からのアクセス時のみ HTML <code>SCRIPT</code> タグを評価するようにしています。
          </p>
<pre name="code" class="html">
&lt;%@ page language="java" pageEncoding="UTF-8" %&gt;
&lt;%@ include file="/WEB-INF/view/Include.jsp" %&gt;
&lt;uf2:script&gt;
  &lt;!-- SCRIPT タグは PC 端末でのみ出力 --&gt;
  function onSubmitConfirm(mailAddr) {
    // 入力内容確認プロンプト
  }
&lt;/uf2:script&gt;
&lt;div&gt;
  &lt;h2&gt;&lt;spring:message code="account.MailAddrChangeForm"/&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;spring:message code="account.MailAddrChangeForm.body"/&gt;&lt;/p&gt;
  &lt;form:form commandName="account"
      onsubmit="return onSubmitConfirm(this.mailAddr.value);"&gt;
    &lt;input type="hidden" name="_eventId" value="submit"/&gt;
    &lt;input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}"/&gt;
    &lt;div class="element"&gt;
      &lt;!-- メールアドレス入力欄 --&gt;
      &lt;spring:message code="account.MailAddrChangeForm.newMailAddr"/&gt;:
      &lt;form:errors path="mailAddr" cssClass="errors"/&gt;&lt;br/&gt;
      &lt;form:input path="mailAddr" id="mailAddrChangeForm.mailAddr"/&gt;
      ( &lt;spring:message code="validation.Validate.maxLength"
          arguments="${validator.mailAddrMaxLength}"/&gt; )
    &lt;/div&gt;
    &lt;div class="element"&gt;
      &lt;!-- 送信ボタン --&gt;
      &lt;input type="submit" value="&lt;spring:message code="submit"/&gt;"
          class="button" onclick="this.disabled='disabled';this.form.submit();"/&gt;
    &lt;/div&gt;
  &lt;/form:form&gt;
&lt;/div&gt;
</pre>
          <p>画面は次のように表示されます。</p>
          <div class="source"><img src="images/mailAddrChangeForm.png" alt="メールアドレス変更フォーム"/></div>
        </div>
      </subsection>
      <subsection name="Tiles 定義">
        <p>
メールアドレス変更フォーム画面の Tiles 定義を示します。Tiles 定義は <a
href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/webapp/WEB-INF/view/account/tiles-defs.xml?root=unitedfront2&amp;view=markup">WEB-INF/view/account/tiles-defs.xml</a>
に記述します。<a
href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/webapp/WEB-INF/view/tiles-defs.xml?root=unitedfront2&amp;view=markup">WEB-INF/view/tiles-defs.xml</a>
で定義されているページ全体のレイアウトを表す Tiles 定義 <code>layout</code> を継承しています。
<code>focusedInputId</code> 要素にメールアドレス入力用の <code>INPUT</code> タグの ID
<code>mailAddrChangeForm.mailAddr</code> を指定することで、ページ表示直後にフォーカスする入力
欄を指定しています。
        </p>
<pre name="code" class="xml">
&lt;definition name="account.MailAddrChangeForm" extends="layout"&gt;
  &lt;put-attribute name="focusedInputId" value="mailAddrChangeForm.mailAddr"/&gt;
  &lt;put-attribute name="body" value="/WEB-INF/view/account/MailAddrChangeForm.jsp"/&gt;
&lt;/definition&gt;
</pre>
      </subsection>
      <subsection name="ページング">
        <p>
ページングのフレームワークについて説明します。ページングは、<a href="tlddoc/uf2/paging.html">paging タグ</a>
を利用して表現します。paging タグの使用例を示します。コントローラクラスではデータの総件数を格納する変数
<code>count</code> を JSP へ渡しています。表示件数のデフォルトは２０件ですが、変更する場合は属性
<code>displayCount</code> を利用します。
        </p>
<pre name="code" class="html">
&lt;uf2:paging count="${count}" url="/sample/index.html"/&gt;
</pre>
        <p>
上記のコードはブラウザ画面上で次のように表示されます。この例では、前ページが存在しないため、前ページのボタ
ンが無効になっています。
        </p>
        <div class="source"><img src="images/paging.png" alt="ページング画面"/></div>
      </subsection>
    </section>
    <section name="メール">
      <p>
メール用のテンプレートは United Front 2 で独自エンジンを利用します。XML 形式のメールテンプレートファイル
を JSP と同じ /WEB-INF/view 以下に作成します。データ出力には EL 式のように扱える
<a href="http://jakarta.apache.org/commons/jexl/">JEXL</a> を採用しています。メールテン
プレートは多言語対応しています。テンプレート名の末尾にアンダーバーで区切ってロケールを指定し、ファイル名としま
す。メールテンプレートの XML 書式は次のとおりです。
      </p>
      <div class="smaller">
        <table>
          <tr>
            <th>タグ/属性</th>
            <th>説明</th>
          </tr>
          <tr>
            <td>email</td>
            <td>ルートタグです。</td>
          </tr>
          <tr>
            <td>to</td>
            <td>宛先となるメールアドレスを設定します。</td>
          </tr>
          <tr>
            <td>cc</td>
            <td>CC に指定するメールアドレスを設定します。セミコロン (;) 区切りで複数設定できます。</td>
          </tr>
          <tr>
            <td>bcc</td>
            <td>BCC に指定するメールアドレスを設定します。セミコロン (;) 区切りで複数設定できます。</td>
          </tr>
          <tr>
            <td>subject</td>
            <td>件名を設定します。</td>
          </tr>
          <tr>
            <td>text</td>
            <td>本文を設定します。</td>
          </tr>
        </table>
      </div>
<pre name="code" class="xml">
&lt;email to="宛先"　from="差出人"
    cc="セミコロン区切りのメールアドレス" bcc="セミコロン区切りのメールアドレス"&gt;
  &lt;subject&gt;件名&lt;/subject&gt;
  &lt;text&gt;本文&lt;/text&gt;
&lt;/email&gt;
</pre>
      <p>各値では、次の予約変数を利用できます。</p>
      <div class="smaller">
        <table>
          <tr>
            <th>変数名</th>
            <th>型</th>
            <th>説明</th>
          </tr>
          <tr>
            <td><code>_systemMailAddr</code></td>
            <td><a href="http://java.sun.com/javase/ja/6/docs/ja/api/java/lang/String.html"><code>String</code></a></td>
            <td>システムのメールアドレスです。システムのメールアドレスは <a href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/config/localConfiguration.properties?root=unitedfront2&amp;view=markup">localConfiguration.properties</a> で設定できます。</td>
          </tr>
          <tr>
            <td><code>_systemUrl</code></td>
            <td><a href="http://java.sun.com/javase/ja/6/docs/ja/api/java/lang/String.html"><code>String</code></a></td>
            <td>システムの URL です。システムの URL は <a href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/config/localConfiguration.properties?root=unitedfront2&amp;view=markup">localConfiguration.properties</a> で設定できます。</td>
          </tr>
        </table>
      </div>
      <div class="info">
        <h5>Note</h5>
        <p>
United Front 2 では個人情報の観点から、ユーザのメールアドレスを他のユーザが知ることができないようにし
ています。ユーザ宛のメールも、上記のシステムのメールアドレスを差出人 <code>from</code> に設定します。
        </p>
      </div>
      <subsection name="サンプルコード">
        <p>
メールアドレス変更完了通知メールのテンプレート <a
href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/webapp/WEB-INF/view/account/MailAddrChange-mail_ja.xml?root=unitedfront2&amp;view=markup">MailAddrChange-mail_ja.xml</a>
を示します。末尾にロケールを指定している点に注意してください。英語のメールテンプレートファイルは <a
href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/webapp/WEB-INF/view/account/MailAddrChange-mail_en.xml?root=unitedfront2&amp;view=markup">MailAddrChange-mail_<strong>en</strong>.xml</a>
になります。
        </p>
<pre name="code" class="xml">
&lt;email to="${mailAddrAndPassword.mailAddr}" from="${_systemMailAddr}"&gt;
  &lt;subject&gt;メールアドレス変更完了&lt;/subject&gt;
  &lt;text&gt;
メールアドレスを変更しました。パスワードも再発行されています。
新しいメールアドレスと以下のパスワードでログインしてください。

${mailAddrAndPassword.password}
  &lt;/text&gt;
&lt;/email&gt;
</pre>
      </subsection>
    </section>
    <section name="メッセージ">
      <p>
United Front 2 は Spring Framework のメッセージ機能を利用してアプリケーションを多言語化していま
す。メッセージはプロパティファイル messages_${lang}.properties に設定しています。例えば、日本語のメッ
セージファイルは
<a href="http://svn.sourceforge.jp/cgi-bin/viewcvs.cgi/trunk/src/main/resources/messages_ja.properties?root=unitedfront2&amp;view=markup">messages_ja.properties</a>
となります。日本語のメッセージファイルは ASCII 文字で記述する必要がありますが、
<a href="http://sourceforge.net/projects/eclipse-rbe">Eclipse ResourceBundle Editor</a>
を使って ASCII 文字のメッセージファイルを直接リポジトリに保存しています。
      </p>
      <p>
メッセージコードの決め方には簡単なルールがあります。単語であれば、その英単語をそのままメッセージコードにしま
す。JSP に記述するメッセージコードは
<code>${機能名}.${JSPファイル名}.{メッセージ名}</code> 、アクションクラスに記述するメッセージコードは
<code>${機能名}.${クラス名}.{メッセージ名}</code> とします。メッセージ名は状況に応じてドット（.）を使っ
て多段階層のコードを作ります。いくつかの例を示します。
      </p>
<source>
user = User
account.LoginForm.title = Login
account.AuthenticationAction.error = Authentication failure.
profile.View.friendSubscription.body
    = You have received friend subscriptions from users below.
</source>

<script type="text/javascript" src="js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

<script type="text/javascript">
var ID='100354378-view';
var AD=1;
var FRAME=0;
</script>
<script src="http://j1.ax.xrea.com/l.j?id=100354378" type="text/javascript"></script>
<noscript>
<a href="http://w1.ax.xrea.com/c.f?id=100354378" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100354378&amp;url=X" alt="AX" border="0"/></a>
</noscript>

    </section>
  </body>
</document>
