Processing math: 100%

2023年3月31日金曜日

Cozy Web/エンティティ作成

Cozy Webはモデル駆動開発の基盤となるWebフレームワークです。リソースのモデルを定義することで、ノンプログラミングでWeb上のリソースをアクセスできる機能について説明を進めています。

前回はHelloResourceを用いてエンティティの参照について説明しました。

今回は引き続き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.     </ul>  
  10.     </body>  
  11. </html>  

実行

それでは実行してみましょう。

エンティティ作成ページ

最初にエンティティ作成を行うためのデータ入力ページを表示します。

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

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

次のようにエンティティ作成に必要なデータを登録するための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;create-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="">5</td>  
  16.           </tr>  
  17.           <tr class="">  
  18.             <th scope="row" class="">Name</th>  
  19.             <td class="">Banana</td>  
  20.           </tr>  
  21.           <tr class="">  
  22.             <th scope="row" class="">Price</th>  
  23.             <td class="">250</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;create-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;create-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="">5</td>  
  18.           </tr>  
  19.           <tr class="">  
  20.             <th scope="row" class="">Name</th>  
  21.             <td class="">Banana</td>  
  22.           </tr>  
  23.           <tr class="">  
  24.             <th scope="row" class="">Price</th>  
  25.             <td class="">250</td>  
  26.           </tr>  
  27.         </tbody>  
  28.       </table>  
  29.       <input type="hidden" name="id" value="5"/>  
  30.       <input type="hidden" name="name" value="Banana"/>  
  31.       <input type="hidden" name="price" value="250"/>  
  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;create-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;create-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;create-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.     </ul>  
  16.   </body>  
  17. </html>  

確認

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

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

以下のように無事リソースが追加されました。

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="">300</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.12
投稿者 時刻: 0 件のコメント:
ラベル: , , ,
登録: 投稿 (Atom)