追加・編集画面の作成

さて今日は追加・編集画面の作成。いつも通りJavaソースはcubby-examplesとほぼ一緒なので割愛。

<!-- employeeEdit.html -->
[<a id="backList" href="employee/">一覧に戻る</a>]
<table border="1" cellpadding="5" cellspacing="1" summary="社員情報入力">
  <tr><th>社員番号</th><td><input id="employeeNo" type="text" name="employeeNo"></td></tr>
  <tr><th>氏名</th><td><input id="name" type="text" name="name"></td></tr>
  <tr><th>メールアドレス</th><td><input id="email" type="text" name="email"></td></tr>
  <tr><th>ユーザーID</th><td><input id="userId" type="text" name="userId"></td></tr>
  <tr><th>パスワード</th>
    <td><input id="password" type="password" name="password"><br>
        <input id="confirmPassword" type="password" name="confirmPassword">(確認用)
    </td>
  </tr>
  <tr><th>ユーザー属性</th>
    <td>
      <select id="attribute" name="attribute">
        <option value="dummy1">dummy1</option>
        <option value="dummy2">dummy2</option>
      </select>
    </td>
  </tr>
</table>

今日はコンボボックスの表示がポイント。と言ってもCubbyのカスタムタグがあるので、Mayaa側ではそんなに意識する必要なし。

<!-- employeeEdit.mayaa -->
<t:input m:id="employeeNo" type="text" name="employeeNo" maxlength="20" size="20"/>
<t:input m:id="name" type="text" name="name" maxlength="20" size="20"/>
<t:input m:id="email" type="text" name="email" maxlength="20" size="20"/>
<t:input m:id="userId" type="text" name="userId" maxlength="20" size="20"/>
<t:input m:id="password" type="password" name="password" maxlength="20" size="20"/>
<t:input m:id="confirmPassword" type="password" name="confirmPassword" maxlength="20" size="20"/>
<t:select m:id="attribute" name="attribute" items="${action.attributeTypes}"
  labelProperty="attributeName" valueProperty="attributeCode"
  emptyOption="true" emptyOptionLabel="選択してください"/>

items="${action.attributeTypes}"は、XXXXXAction#getAttributeTypes()を呼び出してくれる。このメソッドは配列またはCollectionをreturnする必要あり。あとlabelPropertyとvaluePropertyはListの中身のクラスのプロパティを指定する。submitボタンはサボったのでまた明日。

<!-- 実行後のHTMLソース -->
[<a href="/sspj/employee/" id="backList">一覧に戻る</a>]
<table border="1" cellpadding="5" cellspacing="1" summary="社員情報入力">
  <tr><th>社員番号</th><td><input type="text" name="employeeNo" value="" maxlength="20" size="20" /></td></tr>
  <tr><th>氏名</th><td><input type="text" name="name" value="" maxlength="20" size="20" /></td></tr>
  <tr><th>メールアドレス</th><td><input type="text" name="email" value="" maxlength="20" size="20" /></td></tr>
  <tr><th>ユーザーID</th><td><input type="text" name="userId" value="" maxlength="20" size="20" /></td></tr>
  <tr><th>パスワード</th>
    <td>
      <input type="password" name="password" value="" maxlength="20" size="20" /><br />
      <input type="password" name="confirmPassword" value="" maxlength="20" size="20" />(確認用)
    </td>
  </tr>
  <tr><th>ユーザー属性</th>
    <td>
      <select name="attribute" >
        <option value="">選択してください</option>
        <option value="0" >管理者ユーザー</option>
        <option value="1" >一般ユーザー</option>
      </select>
    </td>
  </tr>
</table>