前々回に作成した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
投稿
