追加・編集画面の作成
さて今日は追加・編集画面の作成。いつも通り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>