2023年10月31日火曜日

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.     <div>  
  14.       <table class="">  
  15.         <caption class="">product</caption>  
  16.         <thead class="">  
  17.           <tr class="">  
  18.             <th scope="col" class="">Id</th>  
  19.             <th scope="col" class="">Name</th>  
  20.             <th scope="col" class="">Price</th>  
  21.           </tr>  
  22.         </thead>  
  23.         <tbody class="">  
  24.           <tr data-href="product/1.html">  
  25.             <td class="">1</td>  
  26.             <td class="">Apple</td>  
  27.             <td class="">300</td>  
  28.           </tr>  
  29.         </tbody>  
  30.       </table>  
  31.       <table>  
  32.         <tr>  
  33.           <td>Prev</td>  
  34.           <td>  
  35.             <a href="#?query.offset=0&amp;query.page.size=1">1</a>  
  36.           </td>  
  37.           <td>  
  38.             <a href="#?query.offset=1&amp;query.page.size=1">2</a>  
  39.           </td>  
  40.           <td>  
  41.             <a href="#?query.offset=2&amp;query.page.size=1">3</a>  
  42.           </td>  
  43.           <td>  
  44.             <a href="#?query.offset=3&amp;query.page.size=1">4</a>  
  45.           </td>  
  46.           <td>Next</td>  
  47.         </tr>  
  48.       </table>  
  49.     </div>  
  50.   </body>  
  51. </html>  

ページング

次はページング機能を使用してみます。

ページング機能を使用する場合、query.page.sizeパラメタで1ページ数あたりの行数を指定します。

以下のようにリソース名のページを指定して、queyr.page.sizeに「1」を指定して実行してみます。

view plainprint?
  1. $ curl "http://localhost:8080/web/HelloResource/product?query.page.size=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.     <div>  
  14.       <table class="">  
  15.         <caption class="">product</caption>  
  16.         <thead class="">  
  17.           <tr class="">  
  18.             <th scope="col" class="">Id</th>  
  19.             <th scope="col" class="">Name</th>  
  20.             <th scope="col" class="">Price</th>  
  21.           </tr>  
  22.         </thead>  
  23.         <tbody class="">  
  24.           <tr data-href="product/1.html">  
  25.             <td class="">1</td>  
  26.             <td class="">Apple</td>  
  27.             <td class="">300</td>  
  28.           </tr>  
  29.         </tbody>  
  30.       </table>  
  31.       <table>  
  32.         <tr>  
  33.           <td>Prev</td>  
  34.           <td>  
  35.             <a href="#?query.offset=0&amp;query.page.size=1">1</a>  
  36.           </td>  
  37.           <td>  
  38.             <a href="#?query.offset=1&amp;query.page.size=1">2</a>  
  39.           </td>  
  40.           <td>  
  41.             <a href="#?query.offset=2&amp;query.page.size=1">3</a>  
  42.           </td>  
  43.           <td>  
  44.             <a href="#?query.offset=3&amp;query.page.size=1">4</a>  
  45.           </td>  
  46.           <td>Next</td>  
  47.         </tr>  
  48.       </table>  
  49.     </div>  
  50.   </body>  
  51. </html>  

query.page.sizeに「1」を指定しているので1ページあたり1行表示のページングが行われています。データ表示のテーブルの下部にページング移動用のテーブルが表示されています。全レコード数が4なので、4ページの構成となっています。

まとめ

今回はリソースの一覧表示のページングについて説明しました。

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

諸元

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