アプリケーション定義ビュー
エンティティの更新シナリオの3つの処理、入力処理、確認処理、表示処理それぞれのアプリケーションのカスタム画面をみていきます。
入力画面
カスタムの入力画面として以下のupdate__input.htmlをproduct.entityディレクトリに配備します。
- <html>
- <head>
- <title>Update Product/Input</title>
- </head>
- <body>
- <h1>Update Product/Input</h1>
- <c:detail />
- </body>
- </html>
<html>
<head>
<title>Update Product/Input</title>
</head>
<body>
<h1>Update Product/Input</h1>
<c:detail />
</body>
</html>
タグ c:detail の場所に入力処理用の入力フォームが出力されます。
デフォルト画面との変更点はヘッダと画面のタイトル部を追加している点です。ここではシンプルな追加のみにしていますが、必要に応じて画面のデザインを追加していく形になります。
確認画面
カスタムの入力画面として以下のupdate__confirm.htmlをproduct.entityディレクトリに配備します。
- <html>
- <head>
- <title>Update Product/Confirm</title>
- </head>
- <body>
- <h1>Update Product/Confirm</h1>
- <c:detail />
- </body>
- </html>
<html>
<head>
<title>Update Product/Confirm</title>
</head>
<body>
<h1>Update Product/Confirm</h1>
<c:detail />
</body>
</html>
タグ c:detail の場所に確認処理用のフォームが出力されます。
入力画面と同様に、変更点はヘッダと画面のタイトル部を追加している点です。
表示画面
カスタムの入力画面として以下のupdate__show.htmlをproduct.entityディレクトリに配備します。
- <html>
- <head>
- <title>Update Product/Show</title>
- </head>
- <body>
- <h1>Update Product/Show</h1>
- <c:detail />
- </body>
- </html>
<html>
<head>
<title>Update Product/Show</title>
</head>
<body>
<h1>Update Product/Show</h1>
<c:detail />
</body>
</html>
タグ c:detail の場所に結果確認処理用のフォームが出力されます。
入力画面や確認画面と同様に、変更点はヘッダと画面のタイトル部を追加している点です。
実行
それではIDを指定したエンティティの更新を実行してみましょう。
エンティティ更新ページ
IDを指定してリエンティティの更新を行ってみます。IDが1の場合は以下になります。
$ curl http://localhost:8080/web/HelloResource/product/1/_update_
次のようにエンティティ作成に必要なデータを登録するためのFORMの画面が表示されました。
update__input.htmlとして登録した入力ページが表示されました。
画面のタイトルとして、カスタム画面の定義が使用されていることが分かります。
- <!DOCTYPE html>
- <html><head>
- <title>Update Product/Input</title>
- </head><body>
- <h1>Update Product/Input</h1>
- <form action="" method="POST">
- <table class="">
- <tbody><tr class=""><th scope="row" class="">Id</th><td class=""><input type="text" name="id" value="1" /></td></tr><tr class=""><th scope="row" class="">Name</th><td class=""><input type="text" name="name" value="Apple" /></td></tr><tr class=""><th scope="row" class="">Price</th><td class=""><input type="text" name="price" value="300" /></td></tr></tbody>
- </table>
- <table>
- <tr><td><input type="submit" name="$submit" value="Input" /></td><td><input type="submit" name="$submit" value="Cancel" /></td></tr>
- </table>
- <input type="hidden" name="$scenario" value="{"name":"update-entity","state":"input","entity":"product","schema":{"columns":[{"name":"id","datatype":"token","multiplicity":"1"}, {"name":"name","datatype":"string","multiplicity":"1"}, {"name":"price","datatype":"int","multiplicity":"1"}]},"data":{},"id":"1"}" />
- </form>
-
- </body></html>
<!DOCTYPE html>
<html><head>
<title>Update Product/Input</title>
</head><body>
<h1>Update Product/Input</h1>
<form action="" method="POST">
<table class="">
<tbody><tr class=""><th scope="row" class="">Id</th><td class=""><input type="text" name="id" value="1" /></td></tr><tr class=""><th scope="row" class="">Name</th><td class=""><input type="text" name="name" value="Apple" /></td></tr><tr class=""><th scope="row" class="">Price</th><td class=""><input type="text" name="price" value="300" /></td></tr></tbody>
</table>
<table>
<tr><td><input type="submit" name="$submit" value="Input" /></td><td><input type="submit" name="$submit" value="Cancel" /></td></tr>
</table>
<input type="hidden" name="$scenario" value="{"name":"update-entity","state":"input","entity":"product","schema":{"columns":[{"name":"id","datatype":"token","multiplicity":"1"}, {"name":"name","datatype":"string","multiplicity":"1"}, {"name":"price","datatype":"int","multiplicity":"1"}]},"data":{},"id":"1"}" />
</form>
</body></html>
作成の場合と違って、FORMの中にID「1」の情報が動的的に設定されています。
このページでは以下のボタンが表示されています。
- Input
- データ登録
- Cancel
- キャンセル
ID 1のデータはAppleですが、値段を100円から150円に変更しましょう。
Inputボタンを押下するとエンティティ更新のための次の画面に遷移します。
Cancelボタンを押下するとトップページに戻ります。
登録データ確認ページ
データ登録画面でInputボタンを押すと、登録データ確認画面が表示されます。
update__confirm.htmlとして登録した入力ページが表示されました。
画面のタイトルとして、カスタム画面の定義が使用されていることが分かります。
- <!DOCTYPE html>
- <html><head>
- <title>Update Product/Confirm</title>
- </head><body>
- <h1>Update Product/Confirm</h1>
- <form action="" method="POST">
- <table class="">
- <tbody><tr class=""><th scope="row" class="">Id</th><td class="">1</td></tr><tr class=""><th scope="row" class="">Name</th><td class="">Apple</td></tr><tr class=""><th scope="row" class="">Price</th><td class="">150</td></tr></tbody>
- </table>
- <input type="hidden" name="id" value="1" /><input type="hidden" name="name" value="Apple" /><input type="hidden" name="price" value="150" />
- <table>
- <tr><td><input type="submit" name="$submit" value="Ok" /></td><td><input type="submit" name="$submit" value="Ok_show" /></td><td><input type="submit" name="$submit" value="Back" /></td><td><input type="submit" name="$submit" value="Cancel" /></td></tr>
- </table>
- <input type="hidden" name="$scenario" value="{"name":"update-entity","state":"confirm","entity":"product","schema":{"columns":[{"name":"id","datatype":"token","multiplicity":"1"}, {"name":"name","datatype":"string","multiplicity":"1"}, {"name":"price","datatype":"int","multiplicity":"1"}]},"data":{"name":"Apple","scenario":"{\"name\":\"update-entity\",\"state\":\"input\",\"entity\":\"product\",\"schema\":{\"columns\":[{\"name\":\"id\",\"datatype\":\"token\",\"multiplicity\":\"1\"}, {\"name\":\"name\",\"datatype\":\"string\",\"multiplicity\":\"1\"}, {\"name\":\"price\",\"datatype\":\"int\",\"multiplicity\":\"1\"}]},\"data\":{},\"id\":\"1\"}","price":"150","id":"1","submit":"Input"},"id":"1"}" />
- </form>
-
- </body></html>
<!DOCTYPE html>
<html><head>
<title>Update Product/Confirm</title>
</head><body>
<h1>Update Product/Confirm</h1>
<form action="" method="POST">
<table class="">
<tbody><tr class=""><th scope="row" class="">Id</th><td class="">1</td></tr><tr class=""><th scope="row" class="">Name</th><td class="">Apple</td></tr><tr class=""><th scope="row" class="">Price</th><td class="">150</td></tr></tbody>
</table>
<input type="hidden" name="id" value="1" /><input type="hidden" name="name" value="Apple" /><input type="hidden" name="price" value="150" />
<table>
<tr><td><input type="submit" name="$submit" value="Ok" /></td><td><input type="submit" name="$submit" value="Ok_show" /></td><td><input type="submit" name="$submit" value="Back" /></td><td><input type="submit" name="$submit" value="Cancel" /></td></tr>
</table>
<input type="hidden" name="$scenario" value="{"name":"update-entity","state":"confirm","entity":"product","schema":{"columns":[{"name":"id","datatype":"token","multiplicity":"1"}, {"name":"name","datatype":"string","multiplicity":"1"}, {"name":"price","datatype":"int","multiplicity":"1"}]},"data":{"name":"Apple","$scenario":"{\"name\":\"update-entity\",\"state\":\"input\",\"entity\":\"product\",\"schema\":{\"columns\":[{\"name\":\"id\",\"datatype\":\"token\",\"multiplicity\":\"1\"}, {\"name\":\"name\",\"datatype\":\"string\",\"multiplicity\":\"1\"}, {\"name\":\"price\",\"datatype\":\"int\",\"multiplicity\":\"1\"}]},\"data\":{},\"id\":\"1\"}","price":"150","id":"1","$submit":"Input"},"id":"1"}" />
</form>
</body></html>
画面に入力したデータが表示されます。この結果を確認した上で、以下のいずれかのボタンを押下します。
- Ok
- 確認OK
- Ok_show
- 確認OKで結果を表示
- Back
- 入力画面にモデル
- Cancel
- キャンセル
Ok_showボタンを押下するとエンティティ更新が行われ、更新した情報の表示画面に遷移します。
Okの場合は、エンティティ更新後トップページに遷移します。
結果ページ
更新確認画面でOK_showボタンを押すと、エンティティの更新が行われ、作成されたエンティティの情報表示ページに移ります。
update__show.htmlとして登録した入力ページが表示されました。
画面のタイトルとして、カスタム画面の定義が使用されていることが分かります。
- <!DOCTYPE html>
- <html><head>
- <title>Update Product/Show</title>
- </head><body>
- <h1>Update Product/Show</h1>
- <form action="" method="POST">
- <table class="">
- <tbody><tr class=""><th scope="row" class="">Id</th><td class="">1</td></tr><tr class=""><th scope="row" class="">Name</th><td class="">Apple</td></tr><tr class=""><th scope="row" class="">Price</th><td class="">150</td></tr></tbody>
- </table>
- <input type="hidden" name="id" value="1" /><input type="hidden" name="name" value="Apple" /><input type="hidden" name="price" value="150" />
- <table>
- <tr><td><input type="submit" name="$submit" value="Ok" /></td></tr>
- </table>
- <input type="hidden" name="$scenario" value="{"name":"update-entity","state":"show","entity":"product","schema":{"columns":[{"name":"id","datatype":"token","multiplicity":"1"}, {"name":"name","datatype":"string","multiplicity":"1"}, {"name":"price","datatype":"int","multiplicity":"1"}]},"data":{"name":"Apple","scenario":"{\"name\":\"update-entity\",\"state\":\"confirm\",\"entity\":\"product\",\"schema\":{\"columns\":[{\"name\":\"id\",\"datatype\":\"token\",\"multiplicity\":\"1\"}, {\"name\":\"name\",\"datatype\":\"string\",\"multiplicity\":\"1\"}, {\"name\":\"price\",\"datatype\":\"int\",\"multiplicity\":\"1\"}]},\"data\":{\"name\":\"Apple\",\"$scenario\":\"{\\\"name\\\":\\\"update-entity\\\",\\\"state\\\":\\\"input\\\",\\\"entity\\\":\\\"product\\\",\\\"schema\\\":{\\\"columns\\\":[{\\\"name\\\":\\\"id\\\",\\\"datatype\\\":\\\"token\\\",\\\"multiplicity\\\":\\\"1\\\"}, {\\\"name\\\":\\\"name\\\",\\\"datatype\\\":\\\"string\\\",\\\"multiplicity\\\":\\\"1\\\"}, {\\\"name\\\":\\\"price\\\",\\\"datatype\\\":\\\"int\\\",\\\"multiplicity\\\":\\\"1\\\"}]},\\\"data\\\":{},\\\"id\\\":\\\"1\\\"}\",\"price\":\"150\",\"id\":\"1\",\"$submit\":\"Input\"},\"id\":\"1\"}","price":"150","id":"1","submit":"Ok_show"},"id":"1"}" />
- </form>
-
- </body></html>
<!DOCTYPE html>
<html><head>
<title>Update Product/Show</title>
</head><body>
<h1>Update Product/Show</h1>
<form action="" method="POST">
<table class="">
<tbody><tr class=""><th scope="row" class="">Id</th><td class="">1</td></tr><tr class=""><th scope="row" class="">Name</th><td class="">Apple</td></tr><tr class=""><th scope="row" class="">Price</th><td class="">150</td></tr></tbody>
</table>
<input type="hidden" name="id" value="1" /><input type="hidden" name="name" value="Apple" /><input type="hidden" name="price" value="150" />
<table>
<tr><td><input type="submit" name="$submit" value="Ok" /></td></tr>
</table>
<input type="hidden" name="$scenario" value="{"name":"update-entity","state":"show","entity":"product","schema":{"columns":[{"name":"id","datatype":"token","multiplicity":"1"}, {"name":"name","datatype":"string","multiplicity":"1"}, {"name":"price","datatype":"int","multiplicity":"1"}]},"data":{"name":"Apple","$scenario":"{\"name\":\"update-entity\",\"state\":\"confirm\",\"entity\":\"product\",\"schema\":{\"columns\":[{\"name\":\"id\",\"datatype\":\"token\",\"multiplicity\":\"1\"}, {\"name\":\"name\",\"datatype\":\"string\",\"multiplicity\":\"1\"}, {\"name\":\"price\",\"datatype\":\"int\",\"multiplicity\":\"1\"}]},\"data\":{\"name\":\"Apple\",\"$scenario\":\"{\\\"name\\\":\\\"update-entity\\\",\\\"state\\\":\\\"input\\\",\\\"entity\\\":\\\"product\\\",\\\"schema\\\":{\\\"columns\\\":[{\\\"name\\\":\\\"id\\\",\\\"datatype\\\":\\\"token\\\",\\\"multiplicity\\\":\\\"1\\\"}, {\\\"name\\\":\\\"name\\\",\\\"datatype\\\":\\\"string\\\",\\\"multiplicity\\\":\\\"1\\\"}, {\\\"name\\\":\\\"price\\\",\\\"datatype\\\":\\\"int\\\",\\\"multiplicity\\\":\\\"1\\\"}]},\\\"data\\\":{},\\\"id\\\":\\\"1\\\"}\",\"price\":\"150\",\"id\":\"1\",\"$submit\":\"Input\"},\"id\":\"1\"}","price":"150","id":"1","$submit":"Ok_show"},"id":"1"}" />
</form>
</body></html>
作成したエンティティのデータが表示されます。この結果を確認した後に、OKボタンを押下するとトップページに戻ります。
確認
確認のためにリソースproductの一覧を表示してみましょう。
$ curl http://localhost:8080/web/HelloResource/product
以下のようにオブジェクトID 1のAppleの値段が150に変更されました。
- <?xml version="1.0"?>
- <!DOCTYPE html>
- <html>
- <head>
- <title>Product List</title>
- </head>
- <body>
- <table class="">
- <caption class="">product</caption>
- <thead class="">
- <tr class="">
- <th scope="col" class="">Id</th>
- <th scope="col" class="">Name</th>
- <th scope="col" class="">Price</th>
- </tr>
- </thead>
- <tbody class="">
- <tr data-href="product/1.html">
- <td class="">1</td>
- <td class="">Apple</td>
- <td class="">150</td>
- </tr>
- <tr data-href="product/2.html">
- <td class="">2</td>
- <td class="">Orange</td>
- <td class="">350</td>
- </tr>
- <tr data-href="product/3.html">
- <td class="">3</td>
- <td class="">Peach</td>
- <td class="">400</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
<?xml version="1.0"?>
<!DOCTYPE html>
<html>
<head>
<title>Product List</title>
</head>
<body>
<table class="">
<caption class="">product</caption>
<thead class="">
<tr class="">
<th scope="col" class="">Id</th>
<th scope="col" class="">Name</th>
<th scope="col" class="">Price</th>
</tr>
</thead>
<tbody class="">
<tr data-href="product/1.html">
<td class="">1</td>
<td class="">Apple</td>
<td class="">150</td>
</tr>
<tr data-href="product/2.html">
<td class="">2</td>
<td class="">Orange</td>
<td class="">350</td>
</tr>
<tr data-href="product/3.html">
<td class="">3</td>
<td class="">Peach</td>
<td class="">400</td>
</tr>
</tbody>
</table>
</body>
</html>
投稿
