2023年9月30日土曜日

Cozy Web/一覧表示

Cozy Web上でエンティティのモデル定義によって設定されたリソースの一覧アクセスをノンプログラミングで行う方法についてみていきます。

今回はリソースの一覧表示の機能機能について説明します。

HelloResource

リソースの作成・更新処理の題材としてHelloResourceを定義しました。

今回からこのHelloResourceを使用して、リソースの一覧表示の方法についてみていきます。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloResourceが作成されています。これをベースに開発を進めます。

モデル

WEB-INF/models/model.orgにアプリケーションで使用するモデルが定義されています。

view plainprint?
  1. * entity    
  2. ** product  
  3. *** features    
  4. table=product  
  5. *** attributes    
  6. | Name  | Type   | Multiplicity |  
  7. |-------+--------+--------------|  
  8. | id    | token  |            1 |  
  9. | name  | string |            1 |  
  10. | price | int    |            1 |  

エンティティproductを定義しています。

これがWebのリソースproductとなります。

トップページ

トップページとしてホームディレクトリに以下のindex.htmlを配備しています。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloResource</title>  
  4.     </head>  
  5.     <body>  
  6.     <ul>  
  7.         <li><a href="product">List</a></li>  
  8.         <li><a href="product/_create_">Create</a></li>  
  9.         <li><a href="product/_update_">Update</a></li>  
  10.         <li><a href="product/_delete_">Delete</a></li>  
  11.     </ul>  
  12.     </body>  
  13. </html>  

リソース一覧のシナリオ

リソースの作成・更新では入力フォームの入力から始まるシナリオによって、複数の画面によって作成・更新処理を実行しました。

一方、リソース一覧では一覧表示したいリソースの名前と表示方法を指定するパラメタを渡すことで、すぐに表示結果を得ることができます。

実行

それではリソース一覧の表示を行ってみましょう。

一覧表示

まず、パラメタなしの場合です。

以下のようにリソース名を指定してアクセスします。

view plainprint?
  1. $ curl http://localhost:8080/web/HelloResource/product  

その結果、以下のページが表示されました。(この結果はxmllintで整形しています。他のHTML出力も同様です。)

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  6.     <meta name="keywords" content="TBD"/>  
  7.     <meta name="description" content="TBD"/>  
  8.     <meta name="robots" content="noindex,nofollow"/>  
  9.     <meta name="author" content="TBD"/>  
  10.     <title>product</title>  
  11.   </head>  
  12.   <body>  
  13.     <table class="">  
  14.       <caption class="">product</caption>  
  15.       <thead class="">  
  16.         <tr class="">  
  17.           <th scope="col" class="">Id</th>  
  18.           <th scope="col" class="">Name</th>  
  19.           <th scope="col" class="">Price</th>  
  20.         </tr>  
  21.       </thead>  
  22.       <tbody class="">  
  23.         <tr data-href="product/1.html">  
  24.           <td class="">1</td>  
  25.           <td class="">Apple</td>  
  26.           <td class="">300</td>  
  27.         </tr>  
  28.         <tr data-href="product/2.html">  
  29.           <td class="">2</td>  
  30.           <td class="">Orange</td>  
  31.           <td class="">350</td>  
  32.         </tr>  
  33.         <tr data-href="product/3.html">  
  34.           <td class="">3</td>  
  35.           <td class="">Peach</td>  
  36.           <td class="">400</td>  
  37.         </tr>  
  38.       </tbody>  
  39.     </table>  
  40.   </body>  
  41. </html>  

範囲指定

query.offsetパラメタで開始オフセットを、query.limitパラメタで表示の範囲を指定することができます。

以下の例ではquery.offsetに1、query.limitに1を指定しているので、2番目のレコードから1レコードを表示します。

view plainprint?
  1. $ curl "http://localhost:8080/web/HelloResource/product?query.offset=1&query.limit=1"  

実行の結果、以下のようにレコード数1の表が表示されました。

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  6.     <meta name="keywords" content="TBD"/>  
  7.     <meta name="description" content="TBD"/>  
  8.     <meta name="robots" content="noindex,nofollow"/>  
  9.     <meta name="author" content="TBD"/>  
  10.     <title>product</title>  
  11.   </head>  
  12.   <body>  
  13.     <table class="">  
  14.       <caption class="">product</caption>  
  15.       <thead class="">  
  16.         <tr class="">  
  17.           <th scope="col" class="">Id</th>  
  18.           <th scope="col" class="">Name</th>  
  19.           <th scope="col" class="">Price</th>  
  20.         </tr>  
  21.       </thead>  
  22.       <tbody class="">  
  23.         <tr data-href="product/2.html">  
  24.           <td class="">2</td>  
  25.           <td class="">Orange</td>  
  26.           <td class="">350</td>  
  27.         </tr>  
  28.       </tbody>  
  29.     </table>  
  30.   </body>  
  31. </html>  

カラム指定

query.columnsパラメタで表示するカラムを指定することができます。

以下の例ではquery.columnsに「name,price」を指定しているのでnameとpriceの2カラムの表を表示します。

view plainprint?
  1. $ curl "http://localhost:8080/web/HelloResource/product?query.columns=name,price"  

実行の結果、以下のように2カラムの表が表示されました。

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  6.     <meta name="keywords" content="TBD"/>  
  7.     <meta name="description" content="TBD"/>  
  8.     <meta name="robots" content="noindex,nofollow"/>  
  9.     <meta name="author" content="TBD"/>  
  10.     <title>product</title>  
  11.   </head>  
  12.   <body>  
  13.     <table class="">  
  14.       <caption class="">product</caption>  
  15.       <thead class="">  
  16.         <tr class="">  
  17.           <th scope="col" class="">Name</th>  
  18.           <th scope="col" class="">Price</th>  
  19.         </tr>  
  20.       </thead>  
  21.       <tbody class="">  
  22.         <tr data-href="product/1.html">  
  23.           <td class="">Apple</td>  
  24.           <td class="">300</td>  
  25.         </tr>  
  26.         <tr data-href="product/2.html">  
  27.           <td class="">Orange</td>  
  28.           <td class="">350</td>  
  29.         </tr>  
  30.         <tr data-href="product/3.html">  
  31.           <td class="">Peach</td>  
  32.           <td class="">400</td>  
  33.         </tr>  
  34.       </tbody>  
  35.     </table>  
  36.   </body>  
  37. </html>  

まとめ

今回はリソースの一覧表示の基本機能について説明しました。

次回はページングやカスタム画面などの機能について説明する予定です。

諸元

Cozy
0.0.14
投稿者 時刻: 0 件のコメント:
ラベル: , , ,
登録: 投稿 (Atom)