テーブルの検索と登録を行うアプリケーションを作成します。
対象となるテーブルは下記のような構造となっています。
| カラム名 | 型 | 属性 |
| customer_id | INT(8) | プライマリキー、auto_increment |
| name | VARCHAR(64) | NOT NULL |
| address | VARCHAR(128) | NOT NULL |
| phone | VARCHAR(16) | NOT NULL |
| VARCHAR(64) | NULL |
public class CustomerSearch extends ServiceAction {
public Object execute() throws Exception {
return null;
}
}
アクションクラスは
jp.simm.jaxson.service.ServiceAction
を継承します。
処理を実行してその結果を返すexecute()は必ず実装する必要があります。
@Responder(JsonResponder.class)
public class CustomerSearch extends ServiceAction {
...
Responder注釈を省略した場合はJsonResponderがデフォルトとして使用されますので
この場合は注釈の必要はありません。
public class CustomerSearch extends ServiceAction {
@ContextParam
private String name;
@ContextParam
private String address;
@ContextParam
private String phone;
@ContextParam
private String email;
...
ContextParam注釈されたフィールドはアクション生成時に指定したスコープから
フィールド名称と同じ名前のパラメータ値がセットされます。
public class CustomerSearch extends ServiceAction {
@Connector("default")
@TableDEF("customer");
BasicPersister persister;
...
Persisterフィールドはアクション生成時にインスタンスが生成されてデータベース接続がセットされます。
public Object execute() throws Exception {
SelectOption option = new SelectOption()
.addWhere(new Like("name", Like.CONTAINS, name),
new Like("phone", Like.CONTAINS, phone),
new Like("address", Like.CONTAINS, address),
new Like("email", Like.CONTAINS, email))
.addOrder("customer_id");
return persister.select(option);
}
クライアントから渡されたパラメータを部分一致条件として検索を行っているのが分かると思います。
<body>
名前 : <input type="text" id="nameCondition" /><br/>
住所 : <input type="text" id="addressCondition" /><br/>
電話 : <input type="text" id="phoneCondition" /><br/>
メール : <input type="text" id="emailCondition" /><br/>
<table id="customers">
<thead>
<tr>
<td id="name">名前</td>
<td id="address">住所</td>
<td id="phone">電話番号</td>
<td id="email">メールアドレス</td>
</tr>
</thead>
</table>
</body>
要素に "id" を指定することでJavaScriptで参照する時にその要素を特定することができます。
idはドキュメント内で一意でなくてはならないことに注意してください。名前 :
住所 :
電話 :
メール :
| 名前 | 住所 | 電話番号 | メールアドレス |
<head>
...
<script type="text/javascript" src="/sample/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/sample/js/jaxson/jaxson.js"></script>
<script type="text/javascript" src="/sample/js/common.js"></script>
<script type="text/javascript" src="/sample/js/customerSearch.js"></script>
...
</head>
JavaScriptファイルは必ず上記の順でインポートしなくてはなりません。
function init() {
$('nameCondition').onkeyup = searchCustomer;
$('addressCondition').onkeyup = searchCustomer;
$('phoneCondition').onkeyup = searchCustomer;
$('emailCondition').onkeyup = searchCustomer;
}
function searchCustomer() {
var params = new Object();
params.name = $F('nameCondition');
params.address = $F('addressCondition');
params.phone = $F('phoneCondition');
params.email = $F('emailCondition');
doAction('jp.simm.sample.action.CustomerSearch', params, function(result) {
if (result) {
setElementValue($('customers'), result);
}
});
}
initはドキュメントロード時に実行する定義済み関数でDOM要素が全て読込まれた後に呼び出されますので、
初期化処理でDOM要素を参照する必要がある処理はこの関数内に記述します。名前 :
住所 :
電話 :
メール :
| 名前 | 住所 | 電話番号 | メールアドレス |
| 望月誠二 | 長野県佐久市望月 | 0267-55-5555 | mochi@simm.jp |
public class CustomerEdit extends ServiceAction {
@ContextParam
private Customer customer;
@Entity(Customer.class)
private GenericPersister persister;
public Object execute() throws Exception {
int updateCount = 0;
if (customer.getCustomer_id() != null) {
updateCount = persister.update(customer);
} else {
updateCount = persister.insert(customer);
}
return updateCount;
}
}
今回はクライアントから渡されるパラメータの受け皿のフィールドに
BeanクラスであるCustomerクラスを使用します。
@TableDEF("customer")
public class Customer implements Serializable {
@FieldDEF (
table = "customer",
column = "customer_id",
validator = RequiredValidator.class
key = true
)
private Integer customer_id;
@FieldDEF (
table = "customer",
column = "name",
validator = RequiredValidator.class
)
private String name;
@FieldDEF (
table = "customer",
column = "address",
validator = RequiredValidator.class
)
private String address;
@FieldDEF (
table = "customer",
column = "phone",
validator = RequiredValidator.class
)
private String phone;
@FieldDEF (
table = "customer",
column = "email",
)
private String email;
public Integer getCustomer_id() {
return customer_id;
}
...
}
クラスに注釈されたTableDEFで対象となるテーブルを指定します。
@FieldDEF (
table = "customer",
column = "email",
validator = GenericFieldValidator.class,
validatorParams = "isEmail",
validatorMessage = "メールアドレスに誤りがあります。"
)
private String email;
<body>
<form id="customerForm">
名前 : <input type="text" id="name" /><br/>
住所 : <input type="text" id="address" /><br/>
電話 : <input type="text" id="phone" /><br/>
メール : <input type="text" id="email" /><br/>
<input type="hidden" id="customer_id" />
</form>
<br/>
<input id="update" type="button" value="登録" onclick="updateCustomer()" />
</body>
function updateCustomer() {
doAction('jp.simm.sample.action.CustomerEdit', formToObject($('customerForm')),
function(data) {
if (data && data.value == 1) {
alert("登録が完了しました。");
} else {
alert("登録に失敗しました。");
}
}
);
}
Persister.update(E) および Persister.insert(E) は更新レコード数を返しますから、
それによって登録の成功、失敗を判断してダイアログに表示しています。