2023年2月28日火曜日

Cozy Web/エンティティ表示

前々回に作成した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
投稿者 時刻:
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)