サポート > Wagby Developer Network > 見栄えのカスタマイズ > ボディ部の構造（新規登録） (1/2)

新規登録処理における JSP の内部構造を説明します。

新規登録用 JSP ファイルの構造

ここでは、スタッフモデルの新規登録を扱います。このページを読み進める前に、ボディ部の構造（詳細表示）をお読みください。

自動生成されるボディ部の一覧表示用 JSP ファイルは、insertStaff_body.jsp となります。 insertStaff_body.jsp は、全体のフォームを提供します。特に画像ファイルのアップロードなどを実現する場合は、マルチパートフォームを適用します。


...

<form name="insertstaff_p" enctype="multipart/form-data"

  action="insertStaff.do" method="post"

    onSubmit="return doSubmit(this);">

  <input type="hidden" name="SENDACTION"/>

  <input type="hidden" name="sessionId"

    value="<jfc:MD5Hash/>"/>

  <table class="action_table">

    <tr>

      <td class="action_field">

        <input type="submit" name="btnSend"

          onClick="SENDACTION_name='action_Send'"

          class="button-insert-Send"

          value="<fmt:message

            key="__jfc_common.link.button.Insert"/>"/>

      </td>

      <td class="action_field">

        <input type="button" name="btnCancel"

          onClick="var ret = doConfirm(this,

            '<fmt:message key="

             __jfc_common.link.button.Cancel.confirm"/>');

             if (ret) {

               SENDACTION_name='action_Cancel';

               this.form.submit();

             } else

               return false;"

           class="button-insert-Cancel"

           value="<fmt:message

             key="__jfc_common.link.button.Cancel"/>"/>

      </td>

      ...

    </tr>

  </table>

  <c:import url="insertStaffP.jsp"/>

  <c:import url="insertStaffLicense.jsp"/>

  <c:import url="insertStaffAfterLicense.jsp"/>

</form>

insertStaff_body.jsp はフォームを用意し、「登録」「キャンセル」ボタンを配置しますが、実際のフォーム内容は insertStaffP.jsp ファイルに委譲しています。

なお、この例では 3 つのファイル（insertStaffP.jsp, insertStaffLicense.jsp, insertStafAfterLicense.jsp）がインポートされています。これは、「繰り返しコンテナ」には独立した JSP ファイルが生成されるためです。さらに、繰り返しコンテナの後に続く JSP ファイルは、"insert" + "(モデル名)" + "After" + "(繰り返しコンテナ名)" + ".jsp" として用意されます。

新規登録フォーム

新規登録フォームの内容は insertStaffP.jsp が対応します。

スタッフID（コンボボックス）

最初に紹介するのは、スタッフ ID をコンボボックスで選択する部分です。以下、一部を抜粋して説明します。


...

<table width="100%" class="display_table" cellspacing="1">

  <tr>

    <th class="display_label_nowrap_notnull" width="20%">

      <!-- ${staff_p.userid.label} -->

      <fmt:message key="staff.userid"/>

    </th>

    <td width="80%" align="left" valign="top"

           class="display_field_noalign">

      <!-- ${staff_p.userid} -->

      <label for="staff_p$002fuserid$005b1$005d$002f$0040id"/>

      <select name="staff_p$002fuserid$005b1$005d$002f$0040id">

        <c:forEach var="c" varStatus="__pos"

          items="${staff_p.userid}">

          <option value="<c:out value="${c.id}"/>"

            <c:if test="${c.choose == 'true'}">

              selected="selected"

            </c:if>

            >

            <c:out value="${c.content}"/>

          </option>

        </c:forEach>

      </select>

    </td>

  </tr>

</table>

...

label 要素の for 属性および select 要素の name 属性に指定された値は、記号部分がエンコード処理されています。ここは実際には "staff_p/userid[1]/@id" という表記として解釈されます。

これは XPath 表記となっています。

このフォームで表示しようとする（新規登録用の）staff_p モデルの内容を XML で表現すると、次のようになっています。（一部を抜粋）


<userid id="admin" priority="0”

  content="admin" choose="false”

  invalid="false" errorcode=""

  label=""></userid>

<userid id="guest" priority="0"

  content="guest" choose="false"

  invalid="false" errorcode=""

  label=""></userid>

このように、新規登録（ならびに更新）処理では、すべての選択肢が staff_p モデルに含まれます。 userid 要素の choose 属性が true の場合、選択された値として解釈されます。

スタッフ名（テキストフィールド）

スタッフ名の入力欄です。 staff_p_name オブジェクトには errorcode や content といった参照を行うことができます。これも Wagby の共通ルールです。


...

<th class="display_label_nowrap_notnull" width="20%">

  <!-- ${staff_p_name.label} -->

  <fmt:message key="staff_name"/>

</th>

<td width="80%" align="left" valign="top"

  class="display_field_noalign">

  <!-- ${staff_p_name} -->

  <label for="staff_p$002fname"/>

  <c:set var="__class" value=""/>

  <c:choose>

    <c:when test="${fn:length(staff_p_name.errorcode) > 0}">

      <c:set var="__class" value="errorfield"/>

    </c:when>

    <c:otherwise>

      <c:set var="__class" value="field"/>

    </c:otherwise>

  </c:choose>

  <input type="text" name="staff_p$002fname" class="${__class}"

    value="<c:out value="${staff_p_name.content}"/>"

    onKeyDown="if (event.keyCode == 0x0d) return false;"/>

</td>

...

部署名（コンボボックス）

部署名の入力欄です。コンボボックス／ラジオボタン／チェックボックスの場合、staff_p.deptid.id と staff_p.deptid.content を使います。


...

<th class="display_label_nowrap" width="20%">

  <!-- ${staff_p.deptid.label} -->

  <fmt:message key="staff.deptid"/>

</th>

<td width="80%" align="left" valign="top"

  class="display_field_noalign">

  <!-- ${staff_p.deptid} -->

  <label for="staff_p$002fdeptid$005b1$005d$002f$0040id"/>

  <select name="staff_p$002fdeptid$005b1$005d$002f$0040id">

    <c:forEach var="c" varStatus="__pos" items="${staff_p.deptid}">

      <option value="<c:out value="${c.id}"/>"

        <c:if test="${c.choose == 'true'}">

          selected="selected"

        </c:if>

        >

        <c:out value="${c.content}"/>

      </option>

    </c:forEach>

  </select>

</td>

...

このフォームで表示しようとする（新規登録用の）staff_p モデルの内容を XML で表現すると、次のようになっています。（deptid 要素に関する部分のみを抜粋）


<deptid id="-2" priority="2147483646" content="(未選択)"

  choose="false" invalid="false" errorcode=""

  label=""></deptid>

<deptid id="1" priority="0" content="総務企画部"

  choose="false" invalid="false" errorcode=""

  label=""></deptid>

<deptid id="2" priority="0" content="営業部"

  choose="false" invalid="false" errorcode=""

  label=""></deptid>

<deptid id="3" priority="0" content="技術開発部"

  choose="false" invalid="false" errorcode=""

  label=""></deptid>

このように、新規登録（ならびに更新）処理では、すべての選択肢が staff_p モデルに含まれます。 deptid 要素の choose 属性が true の場合、選択された値として解釈されます。

[ 1 | 2 ] 次へ

このページ

見栄えのカスタマイズ