Processing math: 100%

2023年5月31日水曜日

Cozy Web/エンティティ更新

Cozy Web上でエンティティのモデル定義をすることで、Web上でのリソースアクセスをノンプログラミングで行う方法についてみています。

ここまで、エンティティの作成についてみてきました。

今回はエンティティの更新についてみていきます。

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となります。

トップページ

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.     </ul>  
  11.     </body>  
  12. </html>  

エンティティ操作シナリオ

エンティティのモデル定義を行うとエンティティ作成シナリオが自動的に作成されます。

このエンティティ作成シナリオによって、エンティティの作成オペレーションが可能になったことを前々回、前回に確認しました。

エンティティの更新オペレーションも同様にエンティティ作成シナリオによって可能になります。

エンティティの更新には以下の2種類があります。

  • 更新するエンティティのIDを更新画面から入力
  • 更新するエンティティのIDを更新開始時に指定

今回は前者の更新エンティティIDを更新画面から入力するシナリオを実行します。

実行

それではエンティティの更新を実行してみましょう。

エンティティ更新ページ

以下のようにリソース名の後ろに「_update_」をつけてアクセスします。

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

次のようにエンティティ作成に必要なデータを登録するためのFORMの画面が表示されました。

まだビューの定義はされていないので、Cozy Webのデフォルト入力画面が表示されます。

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.   </head>  
  11.   <body>  
  12.     <form action="" method="POST">  
  13.       <table class="">  
  14.         <tbody>  
  15.           <tr class="">  
  16.             <th scope="row" class="">Id</th>  
  17.             <td class="">  
  18.               <input type="text" name="id" value=""/>  
  19.             </td>  
  20.           </tr>  
  21.           <tr class="">  
  22.             <th scope="row" class="">Name</th>  
  23.             <td class="">  
  24.               <input type="text" name="name" value=""/>  
  25.             </td>  
  26.           </tr>  
  27.           <tr class="">  
  28.             <th scope="row" class="">Price</th>  
  29.             <td class="">  
  30.               <input type="text" name="price" value=""/>  
  31.             </td>  
  32.           </tr>  
  33.         </tbody>  
  34.       </table>  
  35.       <table>  
  36.         <tr>  
  37.           <td>  
  38.             <input type="submit" name="$submit" value="Input"/>  
  39.           </td>  
  40.           <td>  
  41.             <input type="submit" name="$submit" value="Cancel"/>  
  42.           </td>  
  43.         </tr>  
  44.       </table>  
  45.       <input type="hidden" name="$scenario" value="{&quot;name&quot;:&quot;update-entity&quot;,&quot;state&quot;:&quot;input&quot;,&quot;entity&quot;:&quot;product&quot;,&quot;schema&quot;:{&quot;columns&quot;:[{&quot;name&quot;:&quot;id&quot;,&quot;datatype&quot;:&quot;token&quot;,&quot;multiplicity&quot;:&quot;1&quot;}, {&quot;name&quot;:&quot;name&quot;,&quot;datatype&quot;:&quot;string&quot;,&quot;multiplicity&quot;:&quot;1&quot;}, {&quot;name&quot;:&quot;price&quot;,&quot;datatype&quot;:&quot;int&quot;,&quot;multiplicity&quot;:&quot;1&quot;}]},&quot;data&quot;:{}}"/>  
  46.     </form>  
  47.   </body>  
  48. </html>  

このページでは以下のボタンが表示されています。

Input
データ登録
Cancel
キャンセル Inputボタンを押下するとエンティティ作成のための次の画面に遷移します。

Cancelボタンを押下するとトップページに戻ります。

登録データ確認ページ

データ登録画面でInputボタンが押されたので、登録データ確認画面が表示されます。

view plainprint?
  1. <html>  
  2.   <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  4.     <meta name="keywords" content="TBD"/>  
  5.     <meta name="description" content="TBD"/>  
  6.     <meta name="robots" content="noindex,nofollow"/>  
  7.     <meta name="author" content="TBD"/>  
  8.   </head>  
  9.   <body>  
  10.     <form action="" method="POST">  
  11.       <table class="">  
  12.         <tbody>  
  13.           <tr class="">  
  14.             <th scope="row" class="">Id</th>  
  15.             <td class="">1</td>  
  16.           </tr>  
  17.           <tr class="">  
  18.             <th scope="row" class="">Name</th>  
  19.             <td class="">Apple</td>  
  20.           </tr>  
  21.           <tr class="">  
  22.             <th scope="row" class="">Price</th>  
  23.             <td class="">300</td>  
  24.           </tr>  
  25.         </tbody>  
  26.       </table>  
  27.       <input type="hidden" name="id" value="5"/>  
  28.       <input type="hidden" name="name" value="Banana"/>  
  29.       <input type="hidden" name="price" value="250"/>  
  30.       <table>  
  31.         <tr>  
  32.           <td>  
  33.             <input type="submit" name="$submit" value="Ok"/>  
  34.           </td>  
  35.           <td>  
  36.             <input type="submit" name="$submit" value="Back"/>  
  37.           </td>  
  38.           <td>  
  39.             <input type="submit" name="$submit" value="Cancel"/>  
  40.           </td>  
  41.         </tr>  
  42.       </table>  
  43.       <input type="hidden" name="$scenario" value="{&quot;name&quot;:&quot;update-entity&quot;,&quot;state&quot;:&quot;confirm&quot;,&quot;entity&quot;:&quot;product&quot;,&quot;schema&quot;:{&quot;columns&quot;:[{&quot;name&quot;:&quot;id&quot;,&quot;datatype&quot;:&quot;token&quot;,&quot;multiplicity&quot;:&quot;1&quot;}, {&quot;name&quot;:&quot;name&quot;,&quot;datatype&quot;:&quot;string&quot;,&quot;multiplicity&quot;:&quot;1&quot;}, {&quot;name&quot;:&quot;price&quot;,&quot;datatype&quot;:&quot;int&quot;,&quot;multiplicity&quot;:&quot;1&quot;}]},&quot;data&quot;:{&quot;name&quot;:&quot;Banana&quot;,&quot;scenario&quot;:&quot;{\&quot;name\&quot;:\&quot;update-entity\&quot;,\&quot;state\&quot;:\&quot;input\&quot;,\&quot;entity\&quot;:\&quot;product\&quot;,\&quot;schema\&quot;:{\&quot;columns\&quot;:[{\&quot;name\&quot;:\&quot;id\&quot;,\&quot;datatype\&quot;:\&quot;token\&quot;,\&quot;multiplicity\&quot;:\&quot;1\&quot;},{\&quot;name\&quot;:\&quot;name\&quot;,\&quot;datatype\&quot;:\&quot;string\&quot;,\&quot;multiplicity\&quot;:\&quot;1\&quot;},{\&quot;name\&quot;:\&quot;price\&quot;,\&quot;datatype\&quot;:\&quot;int\&quot;,\&quot;multiplicity\&quot;:\&quot;1\&quot;}]},\&quot;data\&quot;:{}}&quot;,&quot;price&quot;:&quot;250&quot;,&quot;id&quot;:&quot;5&quot;,&quot;submit&quot;:&quot;Input&quot;}}"/>  
  44.     </form>  
  45.   </body>  
  46. </html>  

画面に入力したデータが表示されます。この結果を確認した上で、以下のいずれかのボタンを押下します。

OK
確認OK
Back
入力画面にモデル
Cancel
キャンセル

Okボタンを押下するとエンティティ作成のための次の画面に遷移します。

結果ページ

登録データ確認画面でOKボタンが押されたので、エンティティの作成が行われ、作成されたエンティティの情報表示ページに移ります。

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.   </head>  
  11.   <body>  
  12.     <form action="" method="POST">  
  13.       <table class="">  
  14.         <tbody>  
  15.           <tr class="">  
  16.             <th scope="row" class="">Id</th>  
  17.             <td class="">1</td>  
  18.           </tr>  
  19.           <tr class="">  
  20.             <th scope="row" class="">Name</th>  
  21.             <td class="">Apple</td>  
  22.           </tr>  
  23.           <tr class="">  
  24.             <th scope="row" class="">Price</th>  
  25.             <td class="">100</td>  
  26.           </tr>  
  27.         </tbody>  
  28.       </table>  
  29.       <input type="hidden" name="id" value="1"/>  
  30.       <input type="hidden" name="name" value="Apple"/>  
  31.       <input type="hidden" name="price" value="100"/>  
  32.       <table>  
  33.         <tr>  
  34.           <td>  
  35.             <input type="submit" name="$submit" value="Ok"/>  
  36.           </td>  
  37.         </tr>  
  38.       </table>  
  39.       <input type="hidden" name="$scenario" value="{&quot;name&quot;:&quot;update-entity&quot;,&quot;state&quot;:&quot;show&quot;,&quot;entity&quot;:&quot;product&quot;,&quot;schema&quot;:{&quot;columns&quot;:[{&quot;name&quot;:&quot;id&quot;,&quot;datatype&quot;:&quot;token&quot;,&quot;multiplicity&quot;:&quot;1&quot;}, {&quot;name&quot;:&quot;name&quot;,&quot;datatype&quot;:&quot;string&quot;,&quot;multiplicity&quot;:&quot;1&quot;}, {&quot;name&quot;:&quot;price&quot;,&quot;datatype&quot;:&quot;int&quot;,&quot;multiplicity&quot;:&quot;1&quot;}]},&quot;data&quot;:{&quot;name&quot;:&quot;Banana&quot;,&quot;scenario&quot;:&quot;{\&quot;name\&quot;:\&quot;update-entity\&quot;,\&quot;state\&quot;:\&quot;confirm\&quot;,\&quot;entity\&quot;:\&quot;product\&quot;,\&quot;schema\&quot;:{\&quot;columns\&quot;:[{\&quot;name\&quot;:\&quot;id\&quot;,\&quot;datatype\&quot;:\&quot;token\&quot;,\&quot;multiplicity\&quot;:\&quot;1\&quot;},{\&quot;name\&quot;:\&quot;name\&quot;,\&quot;datatype\&quot;:\&quot;string\&quot;,\&quot;multiplicity\&quot;:\&quot;1\&quot;},{\&quot;name\&quot;:\&quot;price\&quot;,\&quot;datatype\&quot;:\&quot;int\&quot;,\&quot;multiplicity\&quot;:\&quot;1\&quot;}]},\&quot;data\&quot;:{\&quot;name\&quot;:\&quot;a\&quot;,\&quot;$scenario\&quot;:\&quot;{\\\&quot;name\\\&quot;:\\\&quot;update-entity\\\&quot;,\\\&quot;state\\\&quot;:\\\&quot;input\\\&quot;,\\\&quot;entity\\\&quot;:\\\&quot;product\\\&quot;,\\\&quot;schema\\\&quot;:{\\\&quot;columns\\\&quot;:[{\\\&quot;name\\\&quot;:\\\&quot;id\\\&quot;,\\\&quot;datatype\\\&quot;:\\\&quot;token\\\&quot;,\\\&quot;multiplicity\\\&quot;:\\\&quot;1\\\&quot;},{\\\&quot;name\\\&quot;:\\\&quot;name\\\&quot;,\\\&quot;datatype\\\&quot;:\\\&quot;string\\\&quot;,\\\&quot;multiplicity\\\&quot;:\\\&quot;1\\\&quot;},{\\\&quot;name\\\&quot;:\\\&quot;price\\\&quot;,\\\&quot;datatype\\\&quot;:\\\&quot;int\\\&quot;,\\\&quot;multiplicity\\\&quot;:\\\&quot;1\\\&quot;}]},\\\&quot;data\\\&quot;:{}}\&quot;,\&quot;price\&quot;:\&quot;10\&quot;,\&quot;id\&quot;:\&quot;5\&quot;,\&quot;$submit\&quot;:\&quot;Input\&quot;}}&quot;,&quot;price&quot;:&quot;250&quot;,&quot;id&quot;:&quot;5&quot;,&quot;submit&quot;:&quot;Ok&quot;}}"/>  
  40.     </form>  
  41.   </body>  
  42. </html>  

作成したエンティティのデータが表示されます。この結果を確認した後に、OKボタンを押下するとトップページに戻ります。

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <title>HelloResource</title>  
  6.   </head>  
  7.   <body>  
  8.     <ul>  
  9.       <li>  
  10.         <a href="product">List</a>  
  11.       </li>  
  12.       <li>  
  13.         <a href="product/_create_">Create</a>  
  14.       </li>  
  15.       <li>  
  16.         <a href="product/_update_">Update</a>  
  17.       </li>  
  18.     </ul>  
  19.   </body>  
  20. </html>  

確認

確認のためにリソースproductの一覧を表示してみましょう。

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

以下のようにオブジェクトID 1のAppleの値段が100に変更されました。

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <title>Product List</title>  
  6.   </head>  
  7.   <body>  
  8.     <table class="">  
  9.       <caption class="">product</caption>  
  10.       <thead class="">  
  11.         <tr class="">  
  12.           <th scope="col" class="">Id</th>  
  13.           <th scope="col" class="">Name</th>  
  14.           <th scope="col" class="">Price</th>  
  15.         </tr>  
  16.       </thead>  
  17.       <tbody class="">  
  18.         <tr data-href="product/1.html">  
  19.           <td class="">1</td>  
  20.           <td class="">Apple</td>  
  21.           <td class="">100</td>  
  22.         </tr>  
  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.         <tr data-href="product/3.html">  
  29.           <td class="">3</td>  
  30.           <td class="">Peach</td>  
  31.           <td class="">400</td>  
  32.         </tr>  
  33.         <tr data-href="product/4.html">  
  34.           <td class="">4</td>  
  35.           <td class="">Banana</td>  
  36.           <td class="">250</td>  
  37.         </tr>  
  38.       </tbody>  
  39.     </table>  
  40.   </body>  
  41. </html>  

まとめ

Cozy Web上でエンティティのモデル定義をすることで、Web上でのリソースアクセスをノンプログラミングで行う方法についてみています。

リソースの作成に続いて、今回はリソースの更新の基本形について説明しました。

次回も引き続きリソースの更新について説明します。

諸元

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