前々回に作成したHelloResourceでは、Cozy Webでモデル定義をすることでWeb上のリソースとしてアクセスすることができることを説明しました。
前回はデモモードを使って、デモ時のみメモリDBにデータ投入する方法を紹介しました。
今回はHelloResourceを使って、モデルで定義したリソースをデザイン化した画面で表示する方法を説明します。
HelloResource
前々回作成したHelloResourceにエンティティの情報を表示するビューを追加します。
HelloResourceではビューは定義されていないので、エンティティのデフォルトの表示画面で表示されます。これをデザイン化した表示画面にすることが目的です。
準備
cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloResourceが作成されています。ここにビューを追加していきます。
モデル
WEB-INF/models/model.orgにアプリケーションで使用するモデルが定義されています。
* entity ** product *** features table=product *** attributes | Name | Type | Multiplicity | |-------+--------+--------------| | id | token | 1 | | name | string | 1 | | price | int | 1 |
エンティティproductを定義しています。
これがWebのリソースproductとなります。
ビュー
リソースproductの表示ビューとして以下のHTMLをプロジェクトルートにproduct.htmlとして配置します。
<html>
<head>
<title>Product List</title>
</head>
<body>
<c:table />
</body>
</html>
タグ c:table の場所にエンティティ一覧のモデルの内容が表示されます。それ以外の部分は通常のHTMLとして装飾できます。
また c:table の表示に関してもカスタマイズができますが、詳細は今後取り上げていく予定です。
product.htmlの代わりにproduct.jadeとして以下のJadeファイルを配置しても同じ振る舞いになります。
html
head
title Product List
body
c:table
実行
それではHelloResourceを実行してみましょう。
モデルとして定義したリソースのproductの一覧取得は以下になります。
WebアプリケーションのURL http://localhost:8080/web/HelloResource の直下にリソース名productを指定しています。
$ curl http://localhost:8080/web/HelloResource/product
この結果、以下のHTML文書が返されます。(読みやすいようにxmllintで整形しています。)
<?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="">300</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>
今回データとして投入した4つのエンティティに対応する情報が表示されています。
詳細表示
次はエンティティの詳細表示ビューです。
ビュー
リソースproductの詳細表示を行うビューとして以下のHTMLを用意します。
<html>
<head>
<title>Product Detail</title>
</head>
<body>
<c:detail />
</body>
</html>
タグ c:detail がエンティティの詳細表示を行うタグです。この場所にエンティティの詳細情報が表示されます。それ以外の部分は通常のHTMLとして装飾できます。
また c:detail の表示に関してもカスタマイズができますが、詳細は今後取り上げていく予定です。
このHTMLファイルをプロジェクトルート配下のproduct.entityディレクトリ配下に配置します。
product.entityディレクトリはリソースproductに対してエンティティ操作のシナリオに対するビューを格納するためのディレクトリです。サフィックスのentityが「エンティティ操作のシナリオに対するビュー」を示しています。
この配置を行うことにより「product/3」といったリソースproductのID 3のエンティティに対する表示のためのビューとして利用されます。
実行
それではHelloResourceを実行してみましょう。
$ curl http://localhost:8080/web/HelloResource/product/4
この結果、以下のHTML文書が返されます。(読みやすいようにxmllintで整形しています。)
<?xml version="1.0"?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="TBD"/>
<meta name="description" content="TBD"/>
<meta name="robots" content="noindex,nofollow"/>
<meta name="author" content="TBD"/>
<title>Product Detail</title>
</head>
<body>
<table class="">
<tbody>
<tr class="">
<th scope="row" class="">Id</th>
<td class="">4</td>
</tr>
<tr class="">
<th scope="row" class="">Name</th>
<td class="">Berry</td>
</tr>
<tr class="">
<th scope="row" class="">Price</th>
<td class="">450</td>
</tr>
</tbody>
</table>
</body>
</html>
まとめ
今回はモデルとして定義されたエンティティをリソースとして操作する際に、参照ビューを定義する方法について説明しました。
次回はエンティティ・リソースの更新についてみていきます。
諸元
- Cozy
- 0.0.12