2022年12月31日土曜日

Cozy Web/HelloResource

Cozy Webの目的の一つはモデル駆動開発とWeb開発を接続することにあります。

モデリングによって定義したモデルが、そのままWebアプリケーションのアプリケーション・ロジックとして動作し、Web画面をデザインするだけでWebアプリケーションが作成できるのが理想形です。

現時点ではその理想形にはまだまだ距離がありますが、部分的には実現できているところもあります。今回はエンティティをWebのリソースとしてアクセスする処理をモデルベースで実現する方法について説明します。

HelloResource

モデル駆動開発を指向した、モデルを使用したWebアプリケーションとしてHelloResourceを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloResourceを作成します。

ビュー

HelloResourceでは、Web画面を記述するビュー(*.html, *.jadeなど)は定義していません。リソースの表示はデフォルトのビュー機能によって自動的にレイアウトされます。

モデル

WEB-INF/modelsでアプリケーションで使用するモデルを定義します。以下のモデル定義をmodel.orgとしてWEB-INF/modelsに格納します。

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を以下の通りに定義しています。

  • feature項で格納するテーブル名をproductと定義
  • 属性としてid, name, priceの3つを定義

モデルはCozy Webのスクリプト言語であるCozy Scriptの基盤となっているKaleidoxの提供するモデル駆動機能をベースとしています。

Kaleidoxの提供するモデル駆動機能は以下で説明しています。

モデルの定義、データベースとの接続、状態機械の定義、状態機械によるイベント駆動といった機能を提供しています。

これらの機能をCozyではWebアプリケーションから使用することができるようになります。

実行

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

一覧

まず一覧取得です。

モデルとして定義したリソースのproductの一覧取得は以下になります。

WebアプリケーションのURL http://localhost:8080/web/HelloResource の直下にリソース名productを指定しています。

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

この結果、以下のHTML文書が返されます。(読みやすいようにxmllintで整形しています。)

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>  

tableタグで3つのエンティティに対応する情報が表示されています。

詳細

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

この結果、以下のHTML文書が返されます。(読みやすいようにxmllintで整形しています。)

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.     <table class="">  
  13.       <tbody>  
  14.         <tr class="">  
  15.           <th scope="row" class="">Id</th>  
  16.           <td class="">2</td>  
  17.         </tr>  
  18.         <tr class="">  
  19.           <th scope="row" class="">Name</th>  
  20.           <td class="">Orange</td>  
  21.         </tr>  
  22.         <tr class="">  
  23.           <th scope="row" class="">Price</th>  
  24.           <td class="">350</td>  
  25.         </tr>  
  26.       </tbody>  
  27.     </table>  
  28.   </body>  
  29. </html>  

一覧表示のidが2の部分は以下になります。

view plainprint?
  1. <tr data-href="product/2.html">  
  2.   <td class="">2</td>  
  3.   <td class="">Orange</td>  
  4.   <td class="">350</td>  
  5. </tr>  

このエンティティが詳細情報として表示されているのが分かります。

まとめ

HelloResourceでは、必要最小限の構成要素としてモデル定義のみを作成しました。HTMLなどのビューは作成していません。

モデル定義を記述したmodel.orgを作成し、WEB-INF/modelsに配置するのみで、エンティティの内容が一覧画面、詳細画面として表示できることが分かりました。ビューの定義がない場合は、Cozy Webのデフォルト画面を使ってエンティティ情報が表示されました。

次回はビューを定義して、デザイン化された画面でエンティティ情報の表示を行ってみる予定です。

諸元

Cozy
0.0.10
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2022年11月30日水曜日

Cozy Web/HelloScript

前回はCozy Scriptの組込み関数を使用して、システムが提供するオペレーションをフォーム画面から呼出して使用する方法について説明しました。

今回はフォーム画面から入力したパラメタを引数にしてCozy Scriptを実行する方法について説明します。

HelloScript

フォームから使用できるアプリケーション・ロジックをCozy Scriptのスクリプトとして記述することができます。

Cozy scriptを用いたWebアプリケーションHelloScriptを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloScriptを作成します。

Formページ

フォームを使った入力画面として以下のページをindex.jadeとしてホームディレクトリに配置します。

view plainprint?
  1. -@val form: ViewForm  
  2. html  
  3.   head  
  4.     title HelloScript  
  5.   body  
  6.     form(method="POST" action={form.action})  
  7.       input(hidden="true" name="$scenario" value={form.scenario})  
  8.       input(name="arg1" value={form.arg1})  
  9.       input(name="arg2" value={form.arg2})  
  10.       input(name="arg3" value={form.arg3})  
  11.       button(type="submit" id="submitbutton" name="$submit" value="ok") Submit  
  12.       button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel  

ViewFormオブジェクト

以下の宣言でフォームの設定に必要なViewFormを参照可能にします。

view plainprint?
  1. -@val form: ViewForm  

Form/action

actionにViewFormオブジェクトのaction属性を設定します。

view plainprint?
  1. form(method="POST" action={form.action})  

今回の場合は空文字が設定されます。入力と同じページにフォームのPOSTが行われるということですね。

POST処理に必要な情報は後述する「$scenario」に設定されています。

Input/Hidden

Hidden属性のInputで入力する「$scenario」プロパティにViewFormオブジェクトのscenario属性を設定します。

view plainprint?
  1. input(hidden="true" name="$scenario" value={form.scenario})  

今回の場合は「{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}」が設定されています。URLエンコーディングを解除した値は「{"name":"invoke-operation","state":"input","data":{}}」です。

Cozy Webがフォーム処理を行うために必要な情報が設定されています。

Inputデータ

Hidden属性のないInputでデータ入力を行います。

今回は以下の3行が対象です。

view plainprint?
  1. input(name="arg1" value={form.arg1})  
  2. input(name="arg2" value={form.arg2})  
  3. input(name="arg3" value={form.arg3})  

nameにarg1,arg2,arg3を指定しているので、arg1プロパティとarg2プロパティ, arg3プロパティの3つのプロパティの入力ということになります。値のデフォルト値としてViewFormオブジェクトのarg1属性とarg2属性の値を設定しています。今回のケースでは空文字が設定されます。

Input/Ok

OK用のサブミットボタンとして以下のButtonを設定しました。

view plainprint?
  1. button(type="submit" id="submitbutton" name="$submit" value="ok") Submit  

name属性に「$submit」、value属性に「ok」を指定しています。

Input/Cancel

キャンセル用のサブミットボタンとして以下のButtonを設定しました。

view plainprint?
  1. button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel  

name属性に「$submit」、value属性に「cancel」を指定しています。

コントローラ

WEB-INF/controllersにindex.jade用のコントローラである以下のindex.jsonを配置します。

view plainprint?
  1. {  
  2.   "action": "script-scenario",  
  3.   "script0": "(+ 1 2 3)",  
  4.   "script": "(+ arg1 (* arg2 arg3))",  
  5.   "method": "POST",  
  6.   "successView": "index_complete",  
  7.   "errorView": "index_error",  
  8.   "parameters": [{  
  9.     "name": "arg1",  
  10.     "datatype": "int"  
  11.   },{  
  12.     "name": "arg2",  
  13.     "datatype": "int"  
  14.   },{  
  15.     "name": "arg3",  
  16.     "datatype": "int"  
  17.   }]  
  18. }  

action

コントローラのアクションとしてscript-scenarioを指定しています。

view plainprint?
  1. "action": "script-scenario",  

script-scenarioは、フォームで入力したパラメタ入力を使ってスクリプトを呼び出し、その結果をビューに渡すモデルとして生成する処理を行うシナリオです。

フォーム入力にまつわるWebブラウザとサーバ間のインタラクションをシナリオに従って実現します。

script

実行するスクリプトをCozy Scriptで記述します。

view plainprint?
  1. "script": "(+ arg1 (* arg2 arg3))",  

method

メソッドはPOSTを指定しています。

view plainprint?
  1. "method": "POST",  

FormのメソッドがPOSTのものを受け付けます。

successView

successViewにはindex_completeを指定しています。

view plainprint?
  1. "successView": "index_complete",  

コントローラの処理が成功するとこのページに遷移します。

errorView

errorViewにはindex_errorを指定しています。

view plainprint?
  1. "errorView": "index_error",  

コントローラの処理が失敗するとこのページに遷移します。

parameters

フォームから入力されるパラメタとして、パラメタ名とデータ型を指定しています。

view plainprint?
  1. "parameters": [{  
  2.   "name": "arg1",  
  3.   "datatype": "int"  
  4. },{  
  5.   "name": "arg2",  
  6.   "datatype": "int"  
  7. },{  
  8.   "name": "arg3",  
  9.   "datatype": "int"  
  10. }]  

パラメタは、パラメタ名arg1でデータ型int, パラメタ名arg2でデータ型int, パラメタ名arg3でデータ型intの3つです。

成功ページ

成功ページとして以下のindex_complete.htmlを用意します。コントローラのsuccessViewで指定したページです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Script Success</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Script Success</h1>  
  7.     <c:model/>  
  8.     </body>  
  9. </html>  

このページ内の以下のタグはコントローラの実行結果のモデルの内容を表形式で表示するものです。

view plainprint?
  1. <c:model/>  

今回の場合は、スクリプトの実行結果が出力されます。

エラーページ

成功ページとして以下のindex_error.htmlを用意します。コントローラのerrorViewで指定したページです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Script Error</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Script Error</h1>  
  7.     <c:error/>  
  8.     </body>  
  9. </html>  

このページ内の以下のタグはコントローラの実行時にエラーが発生した場合、そのエラーを表形式で表示するものです。

view plainprint?
  1. <c:error/>  

今回の場合は、スクリプトの実行結果がエラーとなる場合に出力されます。

実行

Formページ

curlコマンドによってローカルホストの8080ポート上の/web/HelloScript を取得します。

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

以下のHTML文書が返されます。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>HelloScript</title>  
  5.   </head>  
  6.   <body>  
  7.     <form action="" method="POST">  
  8.       <input value="{&quot;name&quot;:&quot;execute-script&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}" name="$scenario" hidden="true" />  
  9.       <input value="" name="arg1" />  
  10.       <input value="" name="arg2" />  
  11.       <input value="" name="arg3" />  
  12.       <button value="ok" name="$submit" id="submitbutton" type="submit">Submit</button>  
  13.       <button value="cancel" name="$submit" id="cancelbutton" type="submit">Cancel</button>  
  14.     </form>  
  15.   </body>  
  16. </html>  

OK

OKボタンの押下は以下のcurlに相当します。

view plainprint?
  1. $ curl http://localhost:8080/web/HelloScript/ -X POST \  
  2. --data-urlencode '$submit=ok' \  
  3. --data-urlencode 'arg1=3' \  
  4. --data-urlencode 'arg2=8' \  
  5. --data-urlencode 'arg3=5' \  
  6. --data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'  

OKボタン押下と同等の上記curlの結果、以下のHTMLが出力されました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html><head>  
  3.     <title>Script Success</title>  
  4.     </head><body>  
  5.     <h1>Script Success</h1>  
  6.     43  
  7. </body></html>  

c:modelタグの場所に、スクリプト「(+ 3 (* 8 5))」の計算結果である43が出力されています。

まとめ

今回はフォーム画面から入力したパラメタを引数にしてCozy Scriptを実行する方法について説明しました。

次回はCozy Scriptに組み込まれたモデル駆動の機能を使用してリソースに対するアクセスを実現する方法について説明する予定です。

諸元

Cozy
0.0.9
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2022年10月31日月曜日

Cozy Web/HelloOperation

フォーム処理ではサーバーサイドでアプリケーション・ロジックを実行する必要があります。

Cozyではアプリケーション・ロジックを記述する方式としてKaleidoxの関数を使用することが可能です。

今回はKaleidoxの組込み関数「+」をCozy Webから使用する方法について見ていきます。

HelloOperation

フォームから使用できるアプリケーション・ロジックはオペレーションとして提供されています。

Kaleidoxの組込み関数はオペレーションとして登録されているので、そのまま使用することができます。

フォームを用いたWebアプリケーションHelloOperationを作成します。

HelloOperationでは、Kaleidoxの「+」関数をCozyのオペレーションとして実行することでフォームで入力した数値の加算を行います。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloOperationを作成します。

Formページ

フォームを使った入力画面として以下のページをindex.jadeとしてホームディレクトリに配置します。

view plainprint?
  1. -@val form: ViewForm  
  2. html  
  3.   head  
  4.     title HelloForm  
  5.   body  
  6.     form(method="POST" action={form.action})  
  7.       input(hidden="true" name="$scenario" value={form.scenario})  
  8.       input(name="arg1" value={form.arg1})  
  9.       input(name="arg2" value={form.arg2})  
  10.       button(type="submit" id="submitbutton" name="$submit" value="ok") Submit  
  11.       button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel  

ViewFormオブジェクト

以下の宣言でフォームの設定に必要なViewFormを参照可能にします。

view plainprint?
  1. -@val form: ViewForm  

Form/action

actionにViewFormオブジェクトのaction属性を設定します。

view plainprint?
  1. form(method="POST" action={form.action})  

今回の場合は空文字が設定されます。入力と同じページにフォームのPOSTが行われるということですね。

POST処理に必要な情報は後述する「$scenario」に設定されています。

Input/Hidden

Hidden属性のInputで入力する「$scenario」プロパティにViewFormオブジェクトのscenario属性を設定します。

view plainprint?
  1. input(hidden="true" name="$scenario" value={form.scenario})  

今回の場合は「{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}」が設定されています。URLエンコーディングを解除した値は「{"name":"invoke-operation","state":"input","data":{}}」です。

Cozy Webがフォーム処理を行うために必要な情報が設定されています。

Inputデータ

Hidden属性のないInputでデータ入力を行います。

今回は以下の2行が対象です。

view plainprint?
  1. input(name="arg1" value={form.arg1})  
  2. input(name="arg2" value={form.arg2})  

nameにarg1とarg2を指定しているので、arg1プロパティとarg2プロパティの2つのプロパティの入力ということになります。値のデフォルト値としてViewFormオブジェクトのarg1属性とarg2属性の値を設定しています。今回のケースでは空文字が設定されます。

Input/Ok

OK用のサブミットボタンとして以下のButtonを設定しました。

view plainprint?
  1. button(type="submit" id="submitbutton" name="$submit" value="ok") Submit  

name属性に「$submit」、value属性に「ok」を指定しています。

Input/Cancel

キャンセル用のサブミットボタンとして以下のButtonを設定しました。

view plainprint?
  1. button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel  

name属性に「$submit」、value属性に「cancel」を指定しています。

コントローラ

WEB-INF/controllersにindex.jade用のコントローラである以下のindex.jsonを配置します。

view plainprint?
  1. {  
  2.   "action": "invoke-operation-scenario",  
  3.   "operation": "+",  
  4.   "method": "POST",  
  5.   "successView": "index_complete",  
  6.   "errorView": "index_error",  
  7.   "parameters": [{  
  8.     "arg1": "int",  
  9.     "arg2": "int"  
  10.   }]  
  11. }  

action

コントローラのアクションとしてinvoke-operation-scenarioを指定しています。

view plainprint?
  1. "action": "invoke-operation-scenario",  

invoke-operation-scenarioは、フォームでパラメタ入力し、このパラメタを使ってオペレーションを呼び出し、その結果をビューに渡すモデルとして生成する処理を行うシナリオです。

フォーム入力にまつわるWebブラウザとサーバ間のインタラクションをシナリオに従って実現します。

operation

実行するオペレーションとして+を指定しています。

view plainprint?
  1. "operation": "+",  

+オペレーションはKaleidoxが定義している関数で、数値の加算をおこないます。

CozyではKaleidoxの関数をinvoke-operation-scenarioで呼び出すことができるオペレーションとして使用できるようになっています。

method

メソッドはPOSTを指定しています。

view plainprint?
  1. "method": "POST",  

FormのメソッドがPOSTのものを受け付けます。

successView

successViewにはindex_completeを指定しています。

view plainprint?
  1. "successView": "index_complete",  

コントローラの処理が成功するとこのページに遷移します。

errorView

errorViewにはindex_errorを指定しています。

view plainprint?
  1. "errorView": "index_error",  

コントローラの処理が失敗するとこのページに遷移します。

parameters

フォームから入力されるパラメタとして、パラメタ名とデータ型を指定しています。

view plainprint?
  1. "parameters": [{  
  2.   "arg1": "int",  
  3.   "arg2": "int"  
  4. }]  

パラメタは、パラメタ名arg1でデータ型intとパラメタ名arg2でデータ型intの2つです。

成功ページ

成功ページとして以下のindex_complete.htmlを用意します。コントローラのsuccessViewで指定したページです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Operation Success</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Operation Success</h1>  
  7.     <c:model/>  
  8.     </body>  
  9. </html>  

このページ内の以下のタグはコントローラの実行結果のモデルの内容を表形式で表示するものです。

view plainprint?
  1. <c:model/>  

今回の場合は、+オペレーションの結果が出力されます。

エラーページ

成功ページとして以下のindex_error.htmlを用意します。コントローラのerrorViewで指定したページです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Operation Error</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Operation Error</h1>  
  7.     <c:error/>  
  8.     </body>  
  9. </html>  

このページ内の以下のタグはコントローラの実行時にエラーが発生した場合、そのエラーを表形式で表示するものです。

view plainprint?
  1. <c:error/>  

今回の場合は、loopbackオペレーションがエラーとなる場合に出力されます。

実行

Formページ

curlコマンドによってローカルホストの8080ポート上の/web/HelloOperation を取得します。

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

以下のHTML文書が返されます。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>HelloForm</title>  
  5.   </head>  
  6.   <body>  
  7.     <form action="" method="POST">  
  8.       <input value="{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}" name="$scenario" hidden="true" />  
  9.       <input value="" name="arg1" />  
  10.       <input value="" name="arg2" />  
  11.       <button value="ok" name="$submit" id="submitbutton" type="submit">Submit</button>  
  12.       <button value="cancel" name="$submit" id="cancelbutton" type="submit">Cancel</button>  
  13.     </form>  
  14.   </body>  
  15. </html>  

OK

OKボタンの押下は以下のcurlに相当します。

view plainprint?
  1. $ curl http://localhost:8080/web/HelloOperation/ -X POST \  
  2. --data-urlencode '$submit=ok' \  
  3. --data-urlencode 'arg1=3' \  
  4. --data-urlencode 'arg2=8' \  
  5. --data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'  

OKボタン押下と同等の上記curlの結果、以下のHTMLが出力されました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html><head>  
  3.     <title>Operation Success</title>  
  4.     </head><body>  
  5.     <h1>Operation Success</h1>  
  6.     11  
  7.       
  8. </body></html>  

c:modelタグの場所に、「+ 3 8」の計算結果である11が出力されています。

まとめ

今回はCozy WebでHTMLフォームの処理にKaleidoxの組込み関数を使用する方法について説明しました。

Cozy WebではHTMLフォームを使った処理はコントローラに宣言的な定義をするだけで、Webとサーバー間のインタラクションを伴う状態遷移の管理を行ってくれます。さらにオペレーションとして登録された各種処理も実行してくれるので、オペレーションを実装すれば後はWeb画面のデザインをするだけでHTMLフォーム処理を実現することができるわけです。

今回はKaleidoxの組込み関数を使用しましたが、次回はKaleidoxのスクリプト機能を使用してHTMLフォームによる処理を実現する方法を説明します。

諸元

Cozy
0.0.8
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2022年9月30日金曜日

Cozy Web/HelloForm

Webアプリケーション開発では、フォーム処理の開発が一つのポイントになります。やりたいことそのものは単純でもHTTPプロトコルを使ってWebブラウザとサーバー間でやり取りをするシーケンスの中で実現するのは案外大変です。

Cozy Webではこの煩雑な処理を簡単に実現する機能を提供しています。

今回はCozy Webでのフォーム入力の処理方法について説明します。

HelloForm

フォームを用いたWebアプリケーションHelloFormを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloFormを作成します。

Formページ

フォームを使った入力画面として以下のページをindex.jadeとしてホームディレクトリに配置します。

view plainprint?
  1. -@val form: ViewForm  
  2. html  
  3.   head  
  4.     title HelloForm  
  5.   body  
  6.     form(method="POST" action={form.action})  
  7.       input(hidden="true" name="$scenario" value={form.scenario})  
  8.       input(name="name" value={form.name})  
  9.       button(type="submit" id="submitbutton" name="$submit" value="ok") Submit  
  10.       button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel  

ViewFormオブジェクト

以下の宣言でフォームの設定に必要なViewFormを参照可能にします。

view plainprint?
  1. -@val form: ViewForm  

Form/action

actionにViewFormオブジェクトのaction属性を設定します。

view plainprint?
  1. form(method="POST" action={form.action})  

今回の場合は空文字が設定されます。入力と同じページにフォームのPOSTが行われるということですね。

POST処理に必要な情報は後述する「$scenario」に設定されています。

Input/Hidden

Hidden属性のInputで入力する「$scenario」プロパティにViewFormオブジェクトのscenario属性を設定します。

view plainprint?
  1. input(hidden="true" name="$scenario" value={form.scenario})  

今回の場合は「{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}」が設定されています。URLエンコーディングを解除した値は「{"name":"invoke-operation","state":"input","data":{}}」です。

Cozy Webがフォーム処理を行うために必要な情報が設定されています。

Inputデータ

Hidden属性のないInputでデータ入力を行います。

今回は以下の1行が対象です。

view plainprint?
  1. input(name="name" value={form.name})  

nameに「name」指定しているので、nameプロパティの入力ということになります。値のデフォルト値としてViewFormオブジェクトのname属性の値を設定しています。今回のケースでは空文字が設定されます。

Input/Ok

OK用のサブミットボタンとして以下のButtonを設定しました。

view plainprint?
  1. button(type="submit" id="submitbutton" name="$submit" value="ok") Submit  

name属性に「$submit」、value属性に「ok」を指定しています。

Input/Cancel

キャンセル用のサブミットボタンとして以下のButtonを設定しました。

view plainprint?
  1. button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel  

name属性に「$submit」、value属性に「cancel」を指定しています。

SSPの場合

フォームのような構造を記述するページの場合、今回の例ではJadeの方が簡潔に記述できるので本ページではJadeを使っていますが、JSP(JavaServer Page)のようなHTMLライクな文法を持つSSP(Scala Server Pages)を使って記述することも可能です。

SSPの場合は以下になります。

view plainprint?
  1. <%@ val form: ViewForm %>  
  2. <html>  
  3.     <head>  
  4.     <title>HelloForm</title>  
  5.     </head>  
  6.     <body>  
  7.     <form method="POST" action="${form.action}">  
  8.         <input hidden="true" name="$scenario" value="${form.scenario}"/>  
  9.         <input name="name" value="${form.name}"/>  
  10.         <button type="submit" id="submitbutton" name="$submit" value="ok">Submit</button>  
  11.         <button type="submit" id="cancelbutton" name="$submit" value="cancel">Cancel</button>  
  12.     </form>  
  13.     </body>  
  14. </html>  

フォーム記述に使用するViewFormオブジェクトを変数formに束縛する宣言は以下になります。

view plainprint?
  1. <%@ val form: ViewForm %>  

Formタグに設定する情報はJade版と同じものです。

コントローラ

WEB-INF/controllersにindex.jade用のコントローラである以下のindex.jsonを配置します。

view plainprint?
  1. {  
  2.   "action": "invoke-operation-scenario",  
  3.   "operation": "loopback",  
  4.   "method": "POST",  
  5.   "successView": "index_complete",  
  6.   "errorView": "index_error",  
  7.   "parameters": [{  
  8.     "name": "token"  
  9.   }]  
  10. }  

action

コントローラのアクションとしてinvoke-operation-scenarioを指定しています。

view plainprint?
  1. "action": "invoke-operation-scenario",  

invoke-operation-scenarioは、フォームでパラメタ入力し、このパラメタを使ってオペレーションを呼び出し、その結果をビューに渡すモデルとして生成する処理を行うシナリオです。

フォーム入力にまつわるWebブラウザとサーバ間のインタラクションをシナリオに従って実現します。

operation

実行するオペレーションとしてloopbackを指定しています。

view plainprint?
  1. "operation": "loopback",  

loopbackは入力したデータをそのまま表形式のモデルとして受け渡すオペレーションです。

method

メソッドはPOSTを指定しています。

view plainprint?
  1. "method": "POST",  

FormのメソッドがPOSTのものを受け付けます。

successView

successViewにはindex_completeを指定しています。

view plainprint?
  1. "successView": "index_complete",  

コントローラの処理が成功するとこのページに遷移します。

errorView

errorViewにはindex_errorを指定しています。

view plainprint?
  1. "errorView": "index_error",  

コントローラの処理が失敗するとこのページに遷移します。

parameters

フォームから入力されるパラメタとして、パラメタ名とデータ型を指定しています。

view plainprint?
  1. "parameters": [{  
  2.   "name": "token"  
  3. }]  

パラメタは、パラメタ名nameでデータ型はトークン文字列の一つだけです。

成功ページ

成功ページとして以下のindex_complete.htmlを用意します。コントローラのsuccessViewで指定したページです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Form Success</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Form Success</h1>  
  7.     <c:model/>  
  8.     </body>  
  9. </html>  

このページ内の以下のタグはコントローラの実行結果のモデルの内容を表形式で表示するものです。

view plainprint?
  1. <c:model/>  

今回の場合は、loopbackオペレーションの結果が出力されます。

エラーページ

成功ページとして以下のindex_error.htmlを用意します。コントローラのerrorViewで指定したページです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Form Error</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Form Error</h1>  
  7.     <c:error/>  
  8.     </body>  
  9. </html>  

このページ内の以下のタグはコントローラの実行時にエラーが発生した場合、そのエラーを表形式で表示するものです。

view plainprint?
  1. <c:error/>  

今回の場合は、loopbackオペレーションがエラーとなる場合に出力されます。

実行

Formページ

curlコマンドによってローカルホストの8080ポート上の/web/HelloForm を取得します。

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

以下のHTML文書が返されます。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>HelloForm</title>  
  5.   </head>  
  6.   <body>  
  7.     <form action="" method="POST">  
  8.       <input value="{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}" name="$scenario" hidden="true" />  
  9.       <input value="" name="name" />  
  10.       <button value="ok" name="$submit" id="submitbutton" type="submit">Submit</button>  
  11.       <button value="cancel" name="$submit" id="cancelbutton" type="submit">Cancel</button>  
  12.     </form>  
  13.   </body>  
  14. </html>  

Web画面は以下のとおりです。

OK

view plainprint?
  1. $ curl http://localhost:8080/web/HelloForm/ -X POST \  
  2. --data-urlencode '$submit=ok' \  
  3. --data-urlencode 'name=abc' \  
  4. --data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'  
view plainprint?
  1. <!DOCTYPE html>  
  2. <html><head>  
  3.     <title>Form Success</title>  
  4.     </head><body>  
  5.     <h1>Form Success</h1>  
  6.     <table class="">  
  7.       <tbody><tr class=""><th scope="row" class="">$submit</th><td class="">ok</td></tr><tr class=""><th scope="row" class="">Name</th><td class="">abc</td></tr><tr class=""><th scope="row" class="">$scenario</th><td class="">{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}</td></tr></tbody>  
  8.     </table>  
  9.       
  10. </body></html>  

Web画面は以下のとおりです。

エラー

コントローラで指定したloopbackオペレーションでは、データのいずれかに「#500」のような「#」記号の後ろに数値を入れた文字列を入力すると、この数値をエラー番号としたエラーが発生するようになっています。

この機能を利用してエラーページの動作を確認してみましょう。

Webページの入力から「#500」を入れてSubmitボタンを押したときのHTTPの送信は以下のcurlで実現できます。

「name=#500」となっているところがキモです。

view plainprint?
  1. $ curl -v http://localhost:8080/web/HelloForm/ -X POST \  
  2. --data-urlencode '$submit=ok' \  
  3. --data-urlencode 'name=#500' \  
  4. --data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'  

この結果以下のHTMLが返ってきました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html><head>  
  3.     <title>Form Error</title>  
  4.     </head><body>  
  5.     <h1>Form Error</h1>  
  6.     <table class="">  
  7.       <tbody><tr class=""><th scope="row" class="">Code</th><td class="">500</td></tr><tr class=""><th scope="row" class="">Message</th><td class="" /></tr><tr class=""><th scope="row" class="">Top URI</th><td class="" /></tr><tr class=""><th scope="row" class="">Back URI</th><td class="" /></tr><tr class=""><th scope="row" class="">Exception Message</th><td class="" /></tr><tr class=""><th scope="row" class="">Exception Stack</th><td class="" /></tr><tr class=""><th scope="row" class="">Call Tree</th><td class="" /></tr></tbody>  
  8.     </table>  
  9.       
  10. </body></html>  

Web画面は以下のとおりです。

キャンセル

invoke-operattionシナリオでは、cancelがサブミットされるとキャンセル動作が行われます。

view plainprint?
  1. $ curl -v http://localhost:8080/web/HelloForm/ -X POST \  
  2. --data-urlencode '$submit=cancel' \  
  3. --data-urlencode 'name=#500' \  
  4. --data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'  

キャンセル動作を行うと、元のページにリダイレクトされ、新規にデータ入力の状態になります。

view plainprint?
  1. * Connected to localhost (::1) port 8080 (#0)  
  2. > POST /web/HelloForm HTTP/1.1  
  3. > Host: localhost:8080  
  4. > User-Agent: curl/7.76.1  
  5. > Accept: */*  
  6. > Content-Length: 128  
  7. > Content-Type: application/x-www-form-urlencoded  
  8. >   
  9. * Mark bundle as not supporting multiuse  
  10. < HTTP/1.1 302 Found  
  11. < Date: Thu, 29 Sep 2022 01:29:31 GMT  
  12. < Content-Type: text/html;charset=utf-8  
  13. < Cache-Control: private,no-store,no-cache,must-revalidate  
  14. < Location: http://localhost:8080/web/HelloForm  
  15. < Content-Length: 0  
  16. < Server: Jetty(9.4.38.v20210224)  
  17. <   
  18. * Connection #0 to host localhost left intact  

curlの-Lスイッチで、リダイレクトをフォローしてみます。

view plainprint?
  1. $ curl -L http://localhost:8080/web/HelloForm/ -X POST \  
  2. --data-urlencode '$submit=cancel' \  
  3. --data-urlencode 'name=#500' \  
  4. --data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'  

そうすると以下のように、無事元のフォームページが返ってきました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>HelloForm</title>  
  5.   </head>  
  6.   <body>  
  7.     <form action="" method="POST">  
  8.       <input value="{&quot;name&quot;:&quot;invoke-operation&quot;,&quot;state&quot;:&quot;input&quot;,&quot;data&quot;:{}}" name="$scenario" hidden="true" />  
  9.       <input value="" name="name" />  
  10.       <button value="ok" name="$submit" id="submitbutton" type="submit">Submit</button>  
  11.       <button value="cancel" name="$submit" id="cancelbutton" type="submit">Cancel</button>  
  12.     </form>  
  13.   </body>  
  14. </html>  

Web画面は以下のとおりです。

まとめ

今回はCozy WebでHTMLフォームを取り扱う方法について説明しました。

フォームを扱う場合、Webとサーバ間のインタラクションに伴う状態遷移の管理を行う処理を作るのがなかなか大変です。Cozy Webでは、コントローラに宣言的な定義をするだけで、この処理を簡単に行ってくれることが分かりました。

諸元

Cozy
0.0.7
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年8月31日水曜日

Cozy Web/Webライブラリ

前回「Cozy Web/レイアウト」ではBootstrapベースのレイアウトを持った共通テンプレートをWebアプリケーション全体で共通化して利用する方法について説明しました。

この共通テンプレートを、複数のWebアプリケーションで共有できると便利です。

このことを実現するため、Cozy Webでは複数のWebアプリケーションから共有できるWebライブラリを作成する機能を提供しています。

今回はこのWebライブラリについてみていきます。

LibHello

まず、Webライブラリとして使用するLibHelloプロジェクトを作成します。

プロジェクトの構成は、ここまで紹介してきた通常のWebアプリケーションと同じものになります。

準備

cozyを起動するディレクトリのwebappsディレクトリに、WebライブラリのホームとなるディレクトリLibHelloを作成します。このディレクトリLibHelloをWebライブラリのホームディレクトリとなります。

共通テンプレート

Webページで共有されるテンプレートとして以下のものをWEB-INF/layouts/default.jadeに作成します。これは「Cozy Web/レイアウト」で作成したものと同じものです。このテンプレートページでBootstrapに必要な設定を行っています。

view plainprint?
  1. -@val model: ViewModel  
  2. !!! 5  
  3. html(lang="ja")  
  4.   head  
  5.     meta(charset="utf-8")  
  6.     meta(name="viewport" content="width=device-width, initial-scale=1")  
  7.     link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous")  
  8.     =model.pageTitle  
  9.   body  
  10.     script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous")  
  11.     header  
  12.       =model.header  
  13.       =model.navigation  
  14.     div(class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto")  
  15.       div(class="row flex-grow-sm-1 flex-grow-0")  
  16.         aside(class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3")  
  17.           div(class="bg-light border p-1 h-100 sticky-top")  
  18.             =model.sidebar  
  19.         main(class="col overflow-auto h-100")  
  20.           =model.content  
  21.     footer    
  22.       =model.footer  

部品ページ

Webページの部品はWEB-INF/partialsに格納します。いずれも「Cozy Web/レイアウト」で作成したものと同じものです。

ヘッダー

ヘッダーとして以下のheader.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapのクラスを設定しています。

view plainprint?
  1. nav(class="navbar navbar-light bg-primary")  
  2.   div(class="container-fluid")  
  3.     span(class="navbar-brand mb-0 h1") Cozy Web  

ナビゲーション・バー

ナビゲーション・バーとして以下のnavigation.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapの機能を用いてナビゲーション・バーを実現しています。

view plainprint?
  1. nav(class="navbar navbar-expand-lg navbar-light bg-light")  
  2.   div(class="container-fluid")  
  3.     a(class="navbar-brand" href="#") Navbar  
  4.     button(class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation")  
  5.       span(class="navbar-toggler-icon")  
  6.     div(class="collapse navbar-collapse" id="navbarNav")  
  7.       ul(class="navbar-nav")  
  8.         li(class="nav-item")  
  9.           a(class="nav-link active" aria-current="page" href="#") Home  
  10.         li(class="nav-item")  
  11.           a(class="nav-link" href="#") Features  
  12.         li(class="nav-item")  
  13.           a(class="nav-link" href="#") Pricing  
  14.         li(class="nav-item")  
  15.           a(class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true") Disabled  

フッター

フッターとして以下のfooter.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapのクラスを設定しています。

view plainprint?
  1. nav(class="navbar navbar-light bg-secondary")  
  2.   span Cozy Web  

サイド・バー

サイド・バーとして以下のsidebar.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapの機能を用いてサイド・バーを実現しています。

view plainprint?
  1. ul(class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate")  
  2.   li(class="nav-item")  
  3.     a(href="#" class="nav-link px-2 text-truncate")  
  4.       i(class="bi bi-house fs-5")  
  5.       span(class="d-none d-sm-inline") Home  
  6.   li  
  7.     a(href="#" class="nav-link px-2 text-truncate")  
  8.       i(class="bi bi-speedometer fs-5")  
  9.       span(class="d-none d-sm-inline") Dashboard  
  10.   li  
  11.     a(href="#" class="nav-link px-2 text-truncate")  
  12.       i(class="bi bi-card-text fs-5")  
  13.       span(class="d-none d-sm-inline") Orders  
  14.   li  
  15.     a(href="#" class="nav-link px-2 text-truncate")  
  16.       i(class="bi bi-bricks fs-5")  
  17.       span(class="d-none d-sm-inline") Products  
  18.   li  
  19.     a(href="#" class="nav-link px-2 text-truncate")  
  20.       i(class="bi bi-people fs-5")  
  21.       span(class="d-none d-sm-inline") Customers  

構成

ここまでは、前回「Cozy Web/レイアウト」のLayoutBootstrapと一点を除いて同一の構成です。異なっているのは、index.htmlがないこと。Webライブラリなので必要ないためです。

HellLib

WebライブラリLibHelloを作成したので、このWebライブラリを使ったWebアプリケーションHelloLibを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、WebライブラリのホームとなるディレクトリHelloLibを作成します。このディレクトリHelloLibをWebライブラリのホームディレクトリとなります。

project.conf

使用するWebライブラリの定義はwepapp.confで行います。

view plainprint?
  1. extend: LibHello  

extendプロパティによって、親となるWebライブラリであるLibHelloを指定しています。この設定を行うことでWebライブラリの持っている機能をすべて引き継ぐことができます。

このwebapp.confをWEB-INFに格納します。

これで設定は完了です。

Webページ

共通ページデザインは、LibHelloのものがそのまま引き継がれるので、HelloLibではWebページの本体のみ作成します。

表示したい本文を記述したページをindex.htmlとして用意します。

これは前回「Cozy Web/レイアウト」で作成したWebアプリケーション「LayoutBootstrap」と基本的に同じ内容です。(タイトルだけ変更しています)タグのクラスにBootstrapのクラスを設定しています。WebライブラリLibHelloでBootstrap 5を活用したレイアウトを設定しているので、その効果があるはずです。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloLib</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>HelloLib</h1>  
  7.     <table class="table">  
  8.         <thead>  
  9.         <tr>  
  10.             <th scope="col">#</th>  
  11.             <th scope="col">First</th>  
  12.             <th scope="col">Last</th>  
  13.             <th scope="col">Handle</th>  
  14.         </tr>  
  15.         </thead>  
  16.         <tbody>  
  17.         <tr>  
  18.             <th scope="row">1</th>  
  19.             <td>Mark</td>  
  20.             <td>Otto</td>  
  21.             <td>@mdo</td>  
  22.         </tr>  
  23.         <tr>  
  24.             <th scope="row">2</th>  
  25.             <td>Jacob</td>  
  26.             <td>Thornton</td>  
  27.             <td>@fat</td>  
  28.         </tr>  
  29.         <tr>  
  30.             <th scope="row">3</th>  
  31.             <td colspan="2">Larry the Bird</td>  
  32.             <td>@twitter</td>  
  33.         </tr>  
  34.         </tbody>  
  35.     </table>  
  36.     </body>  
  37. </html>  

実行

curlコマンドによってローカルホストの8080ポート上の/web/HelloLib を取得します。

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

取得結果は以下になります。無事、登録したHTML文書にBootstrapの各種設定を行ったHTML文書を取得することができました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta content="width=device-width, initial-scale=1" name="viewport" />  
  6.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />  
  7.     <title>HelloLib</title>  
  8.   </head>  
  9.   <body>  
  10.     <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>  
  11.     <header>  
  12.       <nav class="navbar navbar-light bg-primary">  
  13.         <div class="container-fluid">  
  14.           <span class="navbar-brand mb-0 h1">Cozy Web</span>  
  15.         </div>  
  16.       </nav>  
  17.       <nav class="navbar navbar-expand-lg navbar-light bg-light">  
  18.         <div class="container-fluid">  
  19.           <a class="navbar-brand" href="#">Navbar</a>  
  20.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
  21.             <span class="navbar-toggler-icon"></span>  
  22.           </button>  
  23.           <div class="collapse navbar-collapse" id="navbarNav">  
  24.             <ul class="navbar-nav">  
  25.               <li class="nav-item">  
  26.                 <a class="nav-link active" aria-current="page" href="#">Home</a>  
  27.               </li>  
  28.               <li class="nav-item">  
  29.                 <a class="nav-link" href="#">Features</a>  
  30.               </li>  
  31.               <li class="nav-item">  
  32.                 <a class="nav-link" href="#">Pricing</a>  
  33.               </li>  
  34.               <li class="nav-item">  
  35.                 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  36.               </li>  
  37.             </ul>  
  38.           </div>  
  39.         </div>  
  40.       </nav>  
  41.     </header>  
  42.     <div class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto">  
  43.       <div class="row flex-grow-sm-1 flex-grow-0">  
  44.         <aside class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3">  
  45.           <div class="bg-light border p-1 h-100 sticky-top">  
  46.             <ul class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate">  
  47.               <li class="nav-item">  
  48.                 <a href="#" class="nav-link px-2 text-truncate">  
  49.                   <i class="bi bi-house fs-5"></i>  
  50.                   <span class="d-none d-sm-inline">Home</span>  
  51.                 </a>  
  52.               </li>  
  53.               <li>  
  54.                 <a href="#" class="nav-link px-2 text-truncate">  
  55.                   <i class="bi bi-speedometer fs-5"></i>  
  56.                   <span class="d-none d-sm-inline">Dashboard</span>  
  57.                 </a>  
  58.               </li>  
  59.               <li>  
  60.                 <a href="#" class="nav-link px-2 text-truncate">  
  61.                   <i class="bi bi-card-text fs-5"></i>  
  62.                   <span class="d-none d-sm-inline">Orders</span>  
  63.                 </a>  
  64.               </li>  
  65.               <li>  
  66.                 <a href="#" class="nav-link px-2 text-truncate">  
  67.                   <i class="bi bi-bricks fs-5"></i>  
  68.                   <span class="d-none d-sm-inline">Products</span>  
  69.                 </a>  
  70.               </li>  
  71.               <li>  
  72.                 <a href="#" class="nav-link px-2 text-truncate">  
  73.                   <i class="bi bi-people fs-5"></i>  
  74.                   <span class="d-none d-sm-inline">Customers</span>  
  75.                 </a>  
  76.               </li>  
  77.             </ul>  
  78.           </div>  
  79.         </aside>  
  80.         <main class="col overflow-auto h-100">  
  81.             
  82.                 <h1>HelloLib</h1>  
  83.                 <table class="table">  
  84.                 <thead>  
  85.                     <tr>  
  86.                     <th scope="col">#</th>  
  87.                     <th scope="col">First</th>  
  88.                     <th scope="col">Last</th>  
  89.                     <th scope="col">Handle</th>  
  90.                     </tr>  
  91.                 </thead>  
  92.                 <tbody>  
  93.                     <tr>  
  94.                     <th scope="row">1</th>  
  95.                     <td>Mark</td>  
  96.                     <td>Otto</td>  
  97.                     <td>@mdo</td>  
  98.                     </tr>  
  99.                     <tr>  
  100.                     <th scope="row">2</th>  
  101.                     <td>Jacob</td>  
  102.                     <td>Thornton</td>  
  103.                     <td>@fat</td>  
  104.                     </tr>  
  105.                     <tr>  
  106.                     <th scope="row">3</th>  
  107.                     <td colspan="2">Larry the Bird</td>  
  108.                     <td>@twitter</td>  
  109.                     </tr>  
  110.                 </tbody>  
  111.             </table>  
  112.                 
  113.         </main>  
  114.       </div>  
  115.     </div>  
  116.     <footer>  
  117.       <nav class="navbar navbar-light bg-secondary">  
  118.         <span>Cozy Web</span>  
  119.       </nav>  
  120.     </footer>  
  121.   </body>  
  122. </html>  

このページは以下のように表示されます。

Bootstrapの機能を活かしたレイアウト、カラーコーディネーションになっています。

小さな画面で表示すると、以下のようにメニューが折り畳まれて表示されます。Bootstrapのレシポンシブデザインが効いていることが分かります。

いずれも前回のLayoutBootstrapとタイトルを除いては同じ動きです。

効果

WebアプリケーションHelloLibで用意したファイルはindex.htmlのみです。

HelloLibはWebライブラリLibHelloを引き継いでいるので、LibHelloが提供しているBootstrapの機能を活かした共有レイアウトをそのまま利用できています。

まとめ

今回はWebアプリケーションの共通テンプレートをWebライブラリという形の部品として作成し、Webアプリケーションで使用する方法について説明しました。

Bootstrapベースで、ヘッダやフッタのレイアウトを共通テンプレートとしたWebライブラリHelloLibを作成しました。

このWebライブラリを使用することで、WebアプリケーションHelloLibはHTML文書index.htmlを作成するだけで、HelloLibが提供しているBootstrapベースの共通レイアウトを使用したリッチな画面を得ることができました。

Cozy WebのWebライブラリ機能を使用することで、Webアプリケーションの開発効率を飛躍的に向上させることができます。

諸元

Cozy
0.0.6
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年7月31日日曜日

Cozy Web/レイアウト

前回「Cozy Web/Bootstrap」ではBootstrapのテンプレートを使用するためにレイアウト機能を使用しました。

今回は、このCozy Webのレイアウト機能について少し詳しく説明します。

HelloLayout

まず、レイアウト機能を使ったHelloLayoutアプリケーションを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloLayoutを作成します。このディレクトリHelloLayoutをアプリケーションのホームディレクトリとなります。

共通テンプレート

Webページで共有されるテンプレートとして以下のものをWEB-INF/layouts/default.jadeに作成します。

view plainprint?
  1. -@val model: ViewModel  
  2. !!! 5  
  3. html(lang="ja")  
  4.   head  
  5.     =model.pageTitle  
  6.   body  
  7.     =model.header  
  8.     =model.navigation  
  9.     =model.sidebar  
  10.     =model.content  
  11.     =model.footer  

headに以下の設定があります。

view plainprint?
  1. =model.pageTitle  

ページのタイトルをhead要素の配下に追加する指定になります。

またbodyに以下の設定があります。

view plainprint?
  1. =model.header  
  2. =model.navigation  
  3. =model.sidebar  
  4. =model.content  
  5. =model.footer  

それぞれ以下の部品をbody要素の配下に追加する指定です。

model.header
ページのヘッダー
model.navigation
ナビゲーション・バー
model.sidebar
サイド・バー
model.content
ページの本文
model.footer
ページのフッター

ヘッダー、フッター、ナビゲーション・バー、サイド・バーで構成される固定レイアウト内に本文を埋め込む構成になっています。

部品ページ

Webページの部品はWEB-INF/partialsに格納します。

partialsに格納する部品は、header.htmlやheader.jadeのようにファイル名本体を部品名とします。サフィックスは部品の記述を行う言語になります。

ヘッダー

ヘッダーとして以下のheader.jadeをWEB-INF/partialsに格納しました。

view plainprint?
  1. div Header  

ナビゲーション・バー

ナビゲーション・バーとして以下のnavigation.jadeをWEB-INF/partialsに格納しました。

view plainprint?
  1. div Navigation  

フッター

フッターとして以下のfooter.jadeをWEB-INF/partialsに格納しました。

view plainprint?
  1. div Footer  

サイド・バー

フッターとして以下のsidebar.jadeをWEB-INF/partialsに格納しました。

view plainprint?
  1. div Sidebar  

Webページ

WebアプリケーションのWebページとしてindex.htmlを用意します。

後述のBootstrap版との比較のために、Bootstrapのクラスを用いた同じWebページを用いています。この版ではBootstrapの設定は行っていないので、画面表示に影響しません。

view plainprint?
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.     <title>HelloLayout</title>  
  5.     </head>  
  6.     <body>  
  7.     <h1>HelloLayout</h1>  
  8.     <table class="table">  
  9.         <thead>  
  10.         <tr>  
  11.             <th scope="col">#</th>  
  12.             <th scope="col">First</th>  
  13.             <th scope="col">Last</th>  
  14.             <th scope="col">Handle</th>  
  15.         </tr>  
  16.         </thead>  
  17.         <tbody>  
  18.         <tr>  
  19.             <th scope="row">1</th>  
  20.             <td>Mark</td>  
  21.             <td>Otto</td>  
  22.             <td>@mdo</td>  
  23.         </tr>  
  24.         <tr>  
  25.             <th scope="row">2</th>  
  26.             <td>Jacob</td>  
  27.             <td>Thornton</td>  
  28.             <td>@fat</td>  
  29.         </tr>  
  30.         <tr>  
  31.             <th scope="row">3</th>  
  32.             <td colspan="2">Larry the Bird</td>  
  33.             <td>@twitter</td>  
  34.         </tr>  
  35.         </tbody>  
  36.     </table>  
  37.     </body>  
  38. </html>  

実行

curlコマンドによってローカルホストの8080ポート上の/web/HelloLayout/を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloLayoutが、先程作成したディレクトリHelloLayoutに対応するもので、ディレクトリ名がアプリケーション名になっています。

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

取得結果は以下になります。無事登録したHTML文書を取得することができました。

HTML文書には期待通りLayoutの各種設定が自動的に行われています。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <title>HelloLayout</title>  
  5.   </head>  
  6.   <body>  
  7.     <div>Header</div>  
  8.     <div>Navigation</div>  
  9.     <div>Sidebar</div>  
  10.       
  11.         <h1>HelloLayout</h1>  
  12.         <table class="table">  
  13.             <thead>  
  14.             <tr>  
  15.                 <th scope="col">#</th>  
  16.                 <th scope="col">First</th>  
  17.                 <th scope="col">Last</th>  
  18.                 <th scope="col">Handle</th>  
  19.             </tr>  
  20.             </thead>  
  21.             <tbody>  
  22.             <tr>  
  23.                 <th scope="row">1</th>  
  24.                 <td>Mark</td>  
  25.                 <td>Otto</td>  
  26.                 <td>@mdo</td>  
  27.             </tr>  
  28.             <tr>  
  29.                 <th scope="row">2</th>  
  30.                 <td>Jacob</td>  
  31.                 <td>Thornton</td>  
  32.                 <td>@fat</td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <th scope="row">3</th>  
  36.                 <td colspan="2">Larry the Bird</td>  
  37.                 <td>@twitter</td>  
  38.             </tr>  
  39.             </tbody>  
  40.         </table>  
  41.           
  42.     <div>Footer</div>  
  43.   </body>  
  44. </html>  

このページは以下のように表示されます。

LayoutBootstrap

レイアウト機能を使うと、定形のWebページ内に定義した部品を差し込める事が分かりました。

このレイアウト機能を使って、Bootstrapベースの定形ページを作ってみます。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームとなるディレクトリLayoutBootstrapを作成します。このディレクトリLayoutBootstrapをアプリケーションのホームディレクトリとなります。

共通テンプレート

Webページで共有されるテンプレートとして以下のものをWEB-INF/layouts/default.jadeに作成します。このテンプレートページでBootstrapに必要な設定を行っています。

view plainprint?
  1. -@val model: ViewModel  
  2. !!! 5  
  3. html(lang="ja")  
  4.   head  
  5.     meta(charset="utf-8")  
  6.     meta(name="viewport" content="width=device-width, initial-scale=1")  
  7.     link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous")  
  8.     =model.pageTitle  
  9.   body  
  10.     script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous")  
  11.     header  
  12.       =model.header  
  13.       =model.navigation  
  14.     div(class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto")  
  15.       div(class="row flex-grow-sm-1 flex-grow-0")  
  16.         aside(class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3")  
  17.           div(class="bg-light border p-1 h-100 sticky-top")  
  18.             =model.sidebar  
  19.         main(class="col overflow-auto h-100")  
  20.           =model.content  
  21.     footer    
  22.       =model.footer  

部品ページ

Webページの部品はWEB-INF/partialsに格納します。

ヘッダー

ヘッダーとして以下のheader.jadeをWEB-INF/partialsに格納しました。

Bootstrapのクラスを設定しています。

view plainprint?
  1. nav(class="navbar navbar-light bg-primary")  
  2.   div(class="container-fluid")  
  3.     span(class="navbar-brand mb-0 h1") Cozy Web  

ナビゲーション・バー

ナビゲーション・バーとして以下のnavigation.jadeをWEB-INF/partialsに格納しました。

Bootstrapの機能を用いてナビゲーション・バーを実現しています。

view plainprint?
  1. nav(class="navbar navbar-expand-lg navbar-light bg-light")  
  2.   div(class="container-fluid")  
  3.     a(class="navbar-brand" href="#") Navbar  
  4.     button(class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation")  
  5.       span(class="navbar-toggler-icon")  
  6.     div(class="collapse navbar-collapse" id="navbarNav")  
  7.       ul(class="navbar-nav")  
  8.         li(class="nav-item")  
  9.           a(class="nav-link active" aria-current="page" href="#") Home  
  10.         li(class="nav-item")  
  11.           a(class="nav-link" href="#") Features  
  12.         li(class="nav-item")  
  13.           a(class="nav-link" href="#") Pricing  
  14.         li(class="nav-item")  
  15.           a(class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true") Disabled  

フッター

フッターとして以下のfooter.jadeをWEB-INF/partialsに格納しました。

Bootstrapのクラスを設定しています。

view plainprint?
  1. nav(class="navbar navbar-light bg-secondary")  
  2.   span Cozy Web  

サイド・バー

サイド・バーとして以下のsidebar.jadeをWEB-INF/partialsに格納しました。

Bootstrapの機能を用いてサイド・バーを実現しています。

view plainprint?
  1. ul(class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate")  
  2.   li(class="nav-item")  
  3.     a(href="#" class="nav-link px-2 text-truncate")  
  4.       i(class="bi bi-house fs-5")  
  5.       span(class="d-none d-sm-inline") Home  
  6.   li  
  7.     a(href="#" class="nav-link px-2 text-truncate")  
  8.       i(class="bi bi-speedometer fs-5")  
  9.       span(class="d-none d-sm-inline") Dashboard  
  10.   li  
  11.     a(href="#" class="nav-link px-2 text-truncate")  
  12.       i(class="bi bi-card-text fs-5")  
  13.       span(class="d-none d-sm-inline") Orders  
  14.   li  
  15.     a(href="#" class="nav-link px-2 text-truncate")  
  16.       i(class="bi bi-bricks fs-5")  
  17.       span(class="d-none d-sm-inline") Products  
  18.   li  
  19.     a(href="#" class="nav-link px-2 text-truncate")  
  20.       i(class="bi bi-people fs-5")  
  21.       span(class="d-none d-sm-inline") Customers  

Webページ

表示したい本文を記述したページをindex.htmlとして用意します。

これは前出のHelloLayout版と基本的に同じ内容です。(タイトルだけ変更しています)今度はBootstrapのクラス指定が活きてくるはずです。

view plainprint?
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.     <title>LayoutBootstrap</title>  
  5.     </head>  
  6.     <body>  
  7.     <h1>LayoutBootstrap</h1>  
  8.     <table class="table">  
  9.         <thead>  
  10.         <tr>  
  11.             <th scope="col">#</th>  
  12.             <th scope="col">First</th>  
  13.             <th scope="col">Last</th>  
  14.             <th scope="col">Handle</th>  
  15.         </tr>  
  16.         </thead>  
  17.         <tbody>  
  18.         <tr>  
  19.             <th scope="row">1</th>  
  20.             <td>Mark</td>  
  21.             <td>Otto</td>  
  22.             <td>@mdo</td>  
  23.         </tr>  
  24.         <tr>  
  25.             <th scope="row">2</th>  
  26.             <td>Jacob</td>  
  27.             <td>Thornton</td>  
  28.             <td>@fat</td>  
  29.         </tr>  
  30.         <tr>  
  31.             <th scope="row">3</th>  
  32.             <td colspan="2">Larry the Bird</td>  
  33.             <td>@twitter</td>  
  34.         </tr>  
  35.         </tbody>  
  36.     </table>  
  37.     </body>  
  38. </html>  

実行

curlコマンドによってローカルホストの8080ポート上の/web/LayoutBootstrap を取得します。

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

取得結果は以下になります。無事、登録したHTML文書にBootstrapの各種設定を行ったHTML文書を取得することができました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta content="width=device-width, initial-scale=1" name="viewport" />  
  6.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />  
  7.     <title>LayoutBootstrap</title>  
  8.   </head>  
  9.   <body>  
  10.     <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>  
  11.     <header>  
  12.       <nav class="navbar navbar-light bg-primary">  
  13.         <div class="container-fluid">  
  14.           <span class="navbar-brand mb-0 h1">Cozy Web</span>  
  15.         </div>  
  16.       </nav>  
  17.       <nav class="navbar navbar-expand-lg navbar-light bg-light">  
  18.         <div class="container-fluid">  
  19.           <a class="navbar-brand" href="#">Navbar</a>  
  20.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
  21.             <span class="navbar-toggler-icon"></span>  
  22.           </button>  
  23.           <div class="collapse navbar-collapse" id="navbarNav">  
  24.             <ul class="navbar-nav">  
  25.               <li class="nav-item">  
  26.                 <a class="nav-link active" aria-current="page" href="#">Home</a>  
  27.               </li>  
  28.               <li class="nav-item">  
  29.                 <a class="nav-link" href="#">Features</a>  
  30.               </li>  
  31.               <li class="nav-item">  
  32.                 <a class="nav-link" href="#">Pricing</a>  
  33.               </li>  
  34.               <li class="nav-item">  
  35.                 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  36.               </li>  
  37.             </ul>  
  38.           </div>  
  39.         </div>  
  40.       </nav>  
  41.     </header>  
  42.     <div class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto">  
  43.       <div class="row flex-grow-sm-1 flex-grow-0">  
  44.         <aside class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3">  
  45.           <div class="bg-light border p-1 h-100 sticky-top">  
  46.             <ul class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate">  
  47.               <li class="nav-item">  
  48.                 <a href="#" class="nav-link px-2 text-truncate">  
  49.                   <i class="bi bi-house fs-5"></i>  
  50.                   <span class="d-none d-sm-inline">Home</span>  
  51.                 </a>  
  52.               </li>  
  53.               <li>  
  54.                 <a href="#" class="nav-link px-2 text-truncate">  
  55.                   <i class="bi bi-speedometer fs-5"></i>  
  56.                   <span class="d-none d-sm-inline">Dashboard</span>  
  57.                 </a>  
  58.               </li>  
  59.               <li>  
  60.                 <a href="#" class="nav-link px-2 text-truncate">  
  61.                   <i class="bi bi-card-text fs-5"></i>  
  62.                   <span class="d-none d-sm-inline">Orders</span>  
  63.                 </a>  
  64.               </li>  
  65.               <li>  
  66.                 <a href="#" class="nav-link px-2 text-truncate">  
  67.                   <i class="bi bi-bricks fs-5"></i>  
  68.                   <span class="d-none d-sm-inline">Products</span>  
  69.                 </a>  
  70.               </li>  
  71.               <li>  
  72.                 <a href="#" class="nav-link px-2 text-truncate">  
  73.                   <i class="bi bi-people fs-5"></i>  
  74.                   <span class="d-none d-sm-inline">Customers</span>  
  75.                 </a>  
  76.               </li>  
  77.             </ul>  
  78.           </div>  
  79.         </aside>  
  80.         <main class="col overflow-auto h-100">  
  81.             
  82.                 <h1>LayoutBootstrap</h1>  
  83.                 <table class="table">  
  84.                 <thead>  
  85.                     <tr>  
  86.                     <th scope="col">#</th>  
  87.                     <th scope="col">First</th>  
  88.                     <th scope="col">Last</th>  
  89.                     <th scope="col">Handle</th>  
  90.                     </tr>  
  91.                 </thead>  
  92.                 <tbody>  
  93.                     <tr>  
  94.                     <th scope="row">1</th>  
  95.                     <td>Mark</td>  
  96.                     <td>Otto</td>  
  97.                     <td>@mdo</td>  
  98.                     </tr>  
  99.                     <tr>  
  100.                     <th scope="row">2</th>  
  101.                     <td>Jacob</td>  
  102.                     <td>Thornton</td>  
  103.                     <td>@fat</td>  
  104.                     </tr>  
  105.                     <tr>  
  106.                     <th scope="row">3</th>  
  107.                     <td colspan="2">Larry the Bird</td>  
  108.                     <td>@twitter</td>  
  109.                     </tr>  
  110.                 </tbody>  
  111.             </table>  
  112.                 
  113.         </main>  
  114.       </div>  
  115.     </div>  
  116.     <footer>  
  117.       <nav class="navbar navbar-light bg-secondary">  
  118.         <span>Cozy Web</span>  
  119.       </nav>  
  120.     </footer>  
  121.   </body>  
  122. </html>  

このページは以下のように表示されます。

Bootstrapの機能を活かしたレイアウト、カラーコーディネーションになっています。

小さな画面で表示すると、以下のようにメニューが折り畳まれて表示されます。Bootstrapのレシポンシブデザインが効いていることが分かります。

まとめ

Cozy Webのレイアウト機能について説明しました。

BootstrapのようなWebフレームワークの定形テンプレートを容易に作成することができます。

次回は、定形テンプレートをさらに部品化する方法について説明します。

諸元

Cozy
0.0.6
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年6月30日木曜日

Cozy Web/Bootstrap

BootstrapはレスポンシブWebデザインを可能にするWebフレームワークです。

Bootstrapを使う場合、Webの全ページにBootstrapの設定を行う必要がありますが、これを手作業で行うと大変です。

Cozy Webでは、共通のページレイアウトを設定して、これを必要な全ページに自動的に適用する機能を提供しています。この機能を用いてBootstrapのWebページを作成してみます。

HelloBootstrap

Bootstrapを用いたWebアプリケーションHelloBootstrapを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloBootstrapを作成します。このディレクトリHelloBootstrapをアプリケーションのホームディレクトリとなります。

共通テンプレート

Webページで共有されるテンプレートとして以下のものをWEB-INF/layouts/default.jadeに作成します。

Bootstrapの本体はCDN上に公開されているものを使用する設定になっています。

view plainprint?
  1. -@val model: ViewModel  
  2. !!! 5  
  3. html(lang="ja")  
  4.   head  
  5.     meta(charset="utf-8")  
  6.     meta(name="viewport" content="width=device-width, initial-scale=1")  
  7.     link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous")  
  8.     =model.pageTitle  
  9.   body  
  10.     script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous")  
  11.     =model.content  

ポイントは以下の2つの設定です。

view plainprint?
  1. =model.pageTitle  
view plainprint?
  1. =model.content  

前者はページのタイトルをhead要素内に設定します。

後者はページの内容をbody要素内に展開します。

なお、ここではJadeを用いてページの定義をしていますが、HTMLやSSPを用いてもかまいません。

共通テンプレートはタグ混じりの本文文書がなく、タグによる骨格だけの文書になるので、Jadeでは構造を簡潔に見通しよく記述できるためJadeを採用しました。

Webページ

WebアプリケーションのWebページとしてindex.htmlを用意します。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloBootstrap</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>HelloBootstrap</h1>  
  7.     <table class="table">  
  8.         <thead>  
  9.         <tr>  
  10.             <th scope="col">#</th>  
  11.             <th scope="col">First</th>  
  12.             <th scope="col">Last</th>  
  13.             <th scope="col">Handle</th>  
  14.         </tr>  
  15.         </thead>  
  16.         <tbody>  
  17.         <tr>  
  18.             <th scope="row">1</th>  
  19.             <td>Mark</td>  
  20.             <td>Otto</td>  
  21.             <td>@mdo</td>  
  22.         </tr>  
  23.         <tr>  
  24.             <th scope="row">2</th>  
  25.             <td>Jacob</td>  
  26.             <td>Thornton</td>  
  27.             <td>@fat</td>  
  28.         </tr>  
  29.         <tr>  
  30.             <th scope="row">3</th>  
  31.             <td colspan="2">Larry the Bird</td>  
  32.             <td>@twitter</td>  
  33.         </tr>  
  34.         </tbody>  
  35.     </table>  
  36.     </body>  
  37. </html>  

このページにはBootstrapの設定はありませんが、table要素のclass属性にBootstrapの定義するクラスであるtableを使用しています。

実行

curlコマンドによってローカルホストの8080ポート上の/web/HelloBootstrap/を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloBootstrapが、先程作成したディレクトリHelloBootstrapに対応するもので、ディレクトリ名がアプリケーション名になっています。

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

取得結果は以下になります。無事登録したHTML文書を取得することができました。

HTML文書には期待通りBootstrapの各種設定が自動的に行われています。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta content="width=device-width, initial-scale=1" name="viewport" />  
  6.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />  
  7.   </head>  
  8.   <body>  
  9.     <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>  
  10.       
  11.         <h1>HelloBootstrap</h1>  
  12.         <table class="table">  
  13.             <thead>  
  14.             <tr>  
  15.                 <th scope="col">#</th>  
  16.                 <th scope="col">First</th>  
  17.                 <th scope="col">Last</th>  
  18.                 <th scope="col">Handle</th>  
  19.             </tr>  
  20.             </thead>  
  21.             <tbody>  
  22.             <tr>  
  23.                 <th scope="row">1</th>  
  24.                 <td>Mark</td>  
  25.                 <td>Otto</td>  
  26.                 <td>@mdo</td>  
  27.             </tr>  
  28.             <tr>  
  29.                 <th scope="row">2</th>  
  30.                 <td>Jacob</td>  
  31.                 <td>Thornton</td>  
  32.                 <td>@fat</td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <th scope="row">3</th>  
  36.                 <td colspan="2">Larry the Bird</td>  
  37.                 <td>@twitter</td>  
  38.             </tr>  
  39.             </tbody>  
  40.         </table>  
  41.           
  42.   </body>  
  43. </html>  

このページは以下のように表示されます。

次の例

次の例として以下のHTML文書をrich-table.htmlとして用意します。

このHTML文書では、table要素のclass属性にBootstrapの定義するクラスであるtable, table-striped, table-hoverを使用しています。

またtr要素のclass属性にBootstrapの定義するクラスであるtable-primaryを使用しています。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Rich Table</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Rich Table</h1>  
  7.     <table class="table table-striped table-hover">  
  8.         <thead>  
  9.         <tr class="table-primary">  
  10.             <th scope="col">#</th>  
  11.             <th scope="col">First</th>  
  12.             <th scope="col">Last</th>  
  13.             <th scope="col">Handle</th>  
  14.         </tr>  
  15.         </thead>  
  16.         <tbody>  
  17.         <tr>  
  18.             <th scope="row">1</th>  
  19.             <td>Mark</td>  
  20.             <td>Otto</td>  
  21.             <td>@mdo</td>  
  22.         </tr>  
  23.         <tr>  
  24.             <th scope="row">2</th>  
  25.             <td>Jacob</td>  
  26.             <td>Thornton</td>  
  27.             <td>@fat</td>  
  28.         </tr>  
  29.         <tr>  
  30.             <th scope="row">3</th>  
  31.             <td colspan="2">Larry the Bird</td>  
  32.             <td>@twitter</td>  
  33.         </tr>  
  34.         </tbody>  
  35.     </table>  
  36.     </body>  
  37. </html>  

実行

curlコマンドによってローカルホストの8080ポート上の/web/HelloBootstrap/rich-table を取得します。

view plainprint?
  1. $ curl http://localhost:8080/web/HelloBootstrap/rich-table  

取得結果は以下になります。無事、登録したHTML文書にBootstrapの各種設定を行ったHTML文書を取得することができました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta content="width=device-width, initial-scale=1" name="viewport" />  
  6.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />  
  7.     <title>Rich Table</title>  
  8.   </head>  
  9.   <body>  
  10.     <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>  
  11.       
  12.         <h1>Rich Table</h1>  
  13.         <table class="table table-striped table-hover">  
  14.             <thead>  
  15.             <tr class="table-primary">  
  16.                 <th scope="col">#</th>  
  17.                 <th scope="col">First</th>  
  18.                 <th scope="col">Last</th>  
  19.                 <th scope="col">Handle</th>  
  20.             </tr>  
  21.             </thead>  
  22.             <tbody>  
  23.             <tr>  
  24.                 <th scope="row">1</th>  
  25.                 <td>Mark</td>  
  26.                 <td>Otto</td>  
  27.                 <td>@mdo</td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <th scope="row">2</th>  
  31.                 <td>Jacob</td>  
  32.                 <td>Thornton</td>  
  33.                 <td>@fat</td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <th scope="row">3</th>  
  37.                 <td colspan="2">Larry the Bird</td>  
  38.                 <td>@twitter</td>  
  39.             </tr>  
  40.             </tbody>  
  41.         </table>  
  42.           
  43.   </body>  
  44. </html>  

このページは以下のように表示されます。

まとめ

今回はCozy Webの共通テンプレート機能を用いて、Bootstrapを用いたWebアプリケーションを作成しました。

特にコントローラの設定も不要で、単に共通テンプレートを所定の場所に置くだけで、Webアプリケーションのページに共通の設定を行うことができました。

次回は共通テンプレートを使って、ページに共通構造を導入してみます。

諸元

Cozy
0.0.6
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年5月31日火曜日

Cozy Web/Controller

Webアプリケーションでは、リクエストに対する動的な振る舞いを実現する必要があります。このためのメカニズムとしてCozy Webでは、Webパイプラインというメカニズムを用意しています。

Webパイプラインでは複数のモジュールをパイプライン上に配置しますが、振る舞いを記述するためのモジュールとしてパイプライン上で動作するコントローラを使用します。

今回はコントローラを用いてページの振る舞いを記述する基本的な方法について説明します。

HelloController

コントローラを使用するWebアプリケーションHelloControllerを作成します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloControllerを作成します。このディレクトリHelloControllerをアプリケーションのホームディレクトリとなります。

Webページ

コントローラによって生じる振る舞いを表示するためのWebページとして以下のindex.htmlを用意します。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloController</title>  
  4.     </head>  
  5.     <body>  
  6.     <p><c:value name="a"/></p>  
  7.     </body>  
  8. </html>  

拡張タグvalue「＜c:value name="a"/＞」によって、プロパティ「a」の内容を表示します。

このindex.htmlをHelloControlerディレクトリに配備します。

Controller

次はコントローラの設定です。

まずコントローラに設定するアクションとして、以下のプロパティaに値を設定するアクションを作成します。

view plainprint?
  1. {  
  2.   "action": "property",  
  3.   "properties": [{  
  4.     "name" : "a",  
  5.     "value" : 5  
  6.   }]  
  7. }  

このアクションをコントローラに登録するために、ホームディレクトリ配下のWEB-INF/controllersディレクトリにindex.jsonの名前で保存します。

index.jsonの名前はindex.html表示前に起動されるコントローラに登録されるアクションであることを示しています。

これでアプリケーションの作成は完了です。

実行

curlコマンドによってローカルホストの8080ポート上の /web/HelloTag/index.html を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloTagが、先程作成したディレクトリHelloTagに対応するもので、ディレクトリ名がアプリケーション名になっています。

view plainprint?
  1. curl -v http://localhost:8080/web/HelloTag/index.html  

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. *   Trying ::1:8080...  
  2. * Connected to localhost (::1) port 8080 (#0)  
  3. > GET /web/HelloController/index.html HTTP/1.1  
  4. > Host: localhost:8080  
  5. > User-Agent: curl/7.76.1  
  6. > Accept: */*  
  7. >   
  8. * Mark bundle as not supporting multiuse  
  9. < HTTP/1.1 200 OK  
  10. < Date: Sun, 29 May 2022 02:41:41 GMT  
  11. < Content-Type: text/html;charset=utf-8  
  12. < Transfer-Encoding: chunked  
  13. < Server: Jetty(9.4.38.v20210224)  
  14. <   
  15. <!DOCTYPE html>  
  16. <html><head>  
  17.     <title>HelloController</title>  
  18.     </head><body>  
  19.     <p>5</p>  
  20.       
  21. </body></html>  
  22. * Connection #0 to host localhost left intact  

無事、プロパティaの値として設定した「5」がWebページ上に表示されました。

Webページの種類

HTML文書index.htmlはコントローラで設定したプロパティを表示します。

HTML文書以外のフォーマットでも、同一のコントローラに対して動作します。

このindex.htmlと同等の各種フォーマットは以下のとおりです。

Jade

Jade文書では、serviceにバインドされたViewService経由でプロパティを取得します。

view plainprint?
  1. -@val service: ViewService  
  2. html  
  3.   head  
  4.     title HelloController  
  5.   body  
  6.     p =service.get("a")  

アプリケーションに配備する場合にはindex.jadeで保存します。

Jade&タグ

Jade文書でも拡張タグを用いることができます。この場合はViewServiceを直接使用する必要はありません。

view plainprint?
  1. html  
  2.   head  
  3.     title HelloController  
  4.   body  
  5.     p<  
  6.       c:value(name="a")  

アプリケーションに配備する場合にはindex.jadeで保存します。

SSP

SSP文書でも、serviceにバインドされたViewService経由でプロパティを取得します。

view plainprint?
  1. <%@ val service: ViewService %>  
  2. <html>  
  3.     <head>  
  4.     <title>HelloController</title>  
  5.     </head>  
  6.     <body>  
  7.     <p><%= service.get("a") %></p>  
  8.     </body>  
  9. </html>  

アプリケーションに配備する場合にはindex.sspで保存します。

SSP&タグ

SSP文書でも拡張タグを用いることができます。この場合はViewServiceを直接使用する必要はありません。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloController</title>  
  4.     </head>  
  5.     <body>  
  6.     <p><c:value name="a"/></p>  
  7.     </body>  
  8. </html>  

アプリケーションに配備する場合にはindex.sspで保存します。

HTML文書＋拡張タグに加えて、Jade文書、Jade文書＋拡張タグ、SSP文書、SSP文書＋拡張タグのいずれも、同一のコントローラ用のアクションindex.jspで同じ表示をします。ページ表示に必要なデータ生成部と、表示用のビュー部の独立性が保たれていることが分かります。

まとめ

今回はCozy WebでWebアプリケーションの振る舞いを制御するコントローラの基本的な使い方について説明しました。

JSON文書でコントローラに設定するアクションを記述し、WEB-INF/controllerに配備することでコントローラの設定を行うことができます。

コントローラで生成したデータはHTML文書などのビュー上に配置した拡張タグで表示することができます。

今回のコントローラはプロパティ設定のアクションなので動作もシンプルですが、Form処理などの複雑な処理もアクション設定のみで使用できるようになります。

次回はBootstrapを使ったWebアプリケーションをCozy Webで実現する方法を取り上げる予定です。

諸元

Cozy
0.0.6
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年4月30日土曜日

Cozy Web/Tag

前回紹介したとおりCozy WebではHTMLページを動的に生成するための機能として、テンプレートエンジンScalateによるSspやJade(Pug)を提供しています。

SspやJadeでは、基本的にプログラミング言語の断片をHTMLに埋め込む形になります。プログラミング機能をフルに使えるので、リッチな動的コンテンツを作成できるというメリットがある反面おまじない的なコードが必要になったり、アプリケーションロジックがプレゼンテーション層であるWebページに混入しがちになるといった問題がでてきます。

この問題に対してCozy Webではタグ機能を用意しました。タグ機能はCozy Webが提供する様々な機能をビュー層で簡単に使えるようにするための機能を提供します。拡張タグをHTML内に埋め込むことで、HTMLページの動的機能を簡単に実現することができます。

SSP

まずSSPによる動的ページについて確認しておきましょう。

以下はSSPによる動的ページです。

view plainprint?
  1. <%@ var context: ViewContext %>  
  2. <html>  
  3.     <head>  
  4.     <title>HelloTag</title>  
  5.     </head>  
  6.     <body>  
  7.     <p>現在の時刻は${context.datetime}です。</p>  
  8.     </body>  
  9. </html>  

まずページ内で使用する変数として、以下の行でViewContextを格納する変数contextを定義しています。

view plainprint?
  1. <%@ var context: ViewContext %>  

そして、以下の行でViewContextオブジェクトのdateTimeメソッドを呼び出し、その結果をpタグ内の文章に埋め込んでいます。dateTimeメソッドは現在時刻をロケール、タイムゾーンに対応した文字列で返します。

view plainprint?
  1. <p>現在の時刻は${context.dateTime}です。</p>  

HelloTag

Cozy Webのタグを使用したWebアプリケーションHelloTagを作成します。

アプリケーション

以下のHTMLはCozy Webタグを使用して前出のSSPと同じ動作をします。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloTag</title>  
  4.     </head>  
  5.     <body>  
  6.     <p>現在の時刻は<c:datetime/>です。</p>  
  7.     </body>  
  8. </html>  

以下の行で現在時刻を埋め込みたい場所にタグc:datetime配置しています。Cozy WebではHTML内に配置されたc:datetimeを現在時刻に変換します。

view plainprint?
  1. <p>現在の時刻は<c:datetime/>です。</p>  

SSPなどのようなプログラミング成分はなく、動的なコンテンツ部分を宣言的に定義することができます。

配備

cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloTagを作成します。

このHelloTagディレクトリに前述のindex.htmlを作成すればOKです。

起動

Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。

view plainprint?
  1. $ cozy web  

実行

curlコマンドによってローカルホストの8080ポート上の /web/HelloTag/index.html を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloTagが、先程作成したディレクトリHelloTagに対応するもので、ディレクトリ名がアプリケーション名になっています。

view plainprint?
  1. curl -v http://localhost:8080/web/HelloTag/index.html  

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. > GET /web/HelloTag/index.html HTTP/1.1  
  2. > Host: localhost:8080  
  3. > User-Agent: curl/7.76.1  
  4. > Accept: */*  
  5. >   
  6. * Mark bundle as not supporting multiuse  
  7. < HTTP/1.1 200 OK  
  8. < Date: Sat, 30 Mar 2022 18:30:00 GMT  
  9. < Content-Type: text/html;charset=utf-8  
  10. < Transfer-Encoding: chunked  
  11. < Server: Jetty(9.4.38.v20210224)  
  12. <   
  13. <!DOCTYPE html>  
  14. <html>  
  15.     <head>  
  16.     <title>Hello Tag</title>  
  17.     </head>  
  18.     <body>  
  19.     <p>現在の時刻は2022年4月30日18時30分00秒です。</p>  
  20.     </body>  
  21. </html>  

まとめ

今回はCozy WebのTag機能を説明しました

Tag機能を使えば、通常のHTMLにタグを埋め込むだけで動的コンテンツのWebページを作成することができます。

次回は動的コンテンツを実現する要の機能であるコントローラー機能を説明します。

諸元

Cozy
0.0.5
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年3月31日木曜日

Cozy Web/HTMLフォーマット

Cozy Webでは通常のHTMLに加えて、以下の4つのフォーマットをサポートしています。

Mustache
Mustache派生の独自マークアップ
Scaml
HamlのScala版
Jade
Pug派生の独自マークアップ
Ssp
VelocityやJSPなどのHTML埋め込みフォーマットのScala版

これらのフォーマットはテンプレートエンジンScalateを使用して実現しており、フォーマットの仕様はScalateの提供するものになります。

今回はこの中でSspとJadeの2つのフォーマットを使ったWebページを試してみます。

HelloSsp

Ssp(Scala Server Pages)はVeloicyやJSPなどと同系統のHTMLにマークアップするフォーマットです。Scalate独自のフォーマットで、埋め込みプログラミング言語にScalaを使用しています。

HTMLをベースに必要箇所だけマークアップする方式なので習得が容易です。またお勧めはできませんが、プログラミング言語によるロジックをマークアップで記述することが可能です。

アプリケーション

以下のindex.sspを用意します。

基本的に通常のHTMLで、"$｛"と"｝"で囲まれた「new java.util.Date()」がScala言語の埋め込み部分です。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Hello SSP!</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Hello SSP!</h1>  
  7.     <p>今日は ${new java.util.Date()} です。</p>  
  8.     </body>  
  9. </html>  

配備

cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloSspを作成します。

このHelloSspディレクトリに前述のindex.sspを作成すればOKです。

起動

Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。

view plainprint?
  1. $ cozy web  

実行

curlコマンドによってローカルホストの8080ポート上の /web/HelloSsp/index.html を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloSspが、先程作成したディレクトリHelloSspに対応するもので、ディレクトリ名がアプリケーション名になっています。

view plainprint?
  1. curl -v http://localhost:8080/web/HelloSsp/index.html  

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. > GET /web/HelloSsp/index.html HTTP/1.1  
  2. > Host: localhost:8080  
  3. > User-Agent: curl/7.76.1  
  4. > Accept: */*  
  5. >   
  6. * Mark bundle as not supporting multiuse  
  7. < HTTP/1.1 200 OK  
  8. < Date: Mon, 28 Mar 2022 22:02:47 GMT  
  9. < Content-Type: text/html;charset=utf-8  
  10. < Transfer-Encoding: chunked  
  11. < Server: Jetty(9.4.38.v20210224)  
  12. <   
  13. <!DOCTYPE html>  
  14. <html>  
  15.     <head>  
  16.     <title>Hello SSP!</title>  
  17.     </head>  
  18.     <body>  
  19.     <h1>Hello SSP!</h1>  
  20.     <p>今日は 2022年3月29日 です。</p>  
  21.     </body>  
  22. </html>  

HelloJade

SspはHTMLをベースにマークアップを入れる方式なので習得も容易ですが、HTML言語から引き継いでいる特性としてマークアップがやや煩雑です。

文章の中にマークアップする場合にはHTML言語が適していますが、HTML文書の構造などを記述する場合には冗長な表現になりがちです。

Jadeはタグの木構造を簡潔に記述することに適したフォーマットです。Jadeは現在ではPug( https://pugjs.org/ )と変名されていますが、ここではScalateの用語法を踏襲してJadeを使用します。Jadeはタグの木構造を簡潔に記述することに適したフォーマットです。Jadeは現在ではPug( https://pugjs.org/ )と変名されていますが、ここではScalateの用語法を踏襲してJadeを使用します。

アプリケーション

以下のindex.jadeを用意します。

タグの木構造をインデントで記述します。HTML文書を簡潔に記述することができます。

view plainprint?
  1. html(lang="ja")  
  2.   head  
  3.     title Hello Jade!  
  4.   body  
  5.     h1 Hello Jade!  
  6.     p  
  7.       | 今日は  
  8.       = new java.util.Date()  
  9.       | です。  
  10.     :markdown  
  11.       Jadeを使うとMarkdownで文章を書く事ができます。  

配備

cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloJadeを作成します。

このHelloJadeディレクトリに前述のindex.jadeを作成すればOKです。

起動

Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。

view plainprint?
  1. $ cozy web  

実行

curlコマンドによってローカルホストの8080ポート上の /web/HelloJade/index.html を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloJadeが、先程作成したディレクトリHelloJadeに対応するもので、ディレクトリ名がアプリケーション名になっています。

view plainprint?
  1. curl -v http://localhost:8080/web/HelloJade/index.html  

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. *   Trying ::1:8080...  
  2. * Connected to localhost (::1) port 8080 (#0)  
  3. > GET /web/HelloJade/index.html HTTP/1.1  
  4. > Host: localhost:8080  
  5. > User-Agent: curl/7.76.1  
  6. > Accept: */*  
  7. >   
  8. * Mark bundle as not supporting multiuse  
  9. < HTTP/1.1 200 OK  
  10. < Date: Mon, 28 Mar 2022 22:04:28 GMT  
  11. < Content-Type: text/html;charset=utf-8  
  12. < Transfer-Encoding: chunked  
  13. < Server: Jetty(9.4.38.v20210224)  
  14. <   
  15. <!DOCTYPE html>  
  16. <html lang="ja">  
  17.   <head>  
  18.     <title>Hello Jade!</title>  
  19.   </head>  
  20.   <body>  
  21.     <h1>Hello Jade!</h1>  
  22.     <p>  
  23.       今日は  
  24.       2022年3月29日  
  25.       です。  
  26.     </p>  
  27.     <p>Jadeを使うとMarkdownで文章を書く事ができます。</p>  
  28.   </body>  
  29.   </div>  
  30. </html>  

まとめ

Cozy WebではHTML文書記述に以下の5つのフォーマットを使用することができます。

  • HTML
  • Mustache
  • Scaml
  • Jade
  • Ssp

前回HTML文書を使用する方法を紹介しました。

HTML文書をHTMLフォーマットで作成したものは、そのまま配備するだけでWebで表示することができます。

ただ、動的な要素を持っているページの記述の場合には動的生成が可能な文書フォーマットを使用する必要があります。Cozy WebではScalateがサポートしている4つのフォーマットが使用可能になっています。

今回は、その中のJadeとSspの2つについて使用方法を説明しました。MustacheやScamlも同様にそれぞれのフォーマットでページを記述するだけなので、簡単に使用できると思います。

次回はArcadiaが提供するタグ機能を紹介する予定です。

諸元

Cozy
0.0.4
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年2月28日月曜日

Cozy Web

Modegramming Styleブログではモデリングとプログラミングの一体化を指向したModegrammingというコンセプトを提唱しており、その実現のための技術体系としてSimpleModelingを整備しています。

SimpleModelingを実現するためのプラットフォームとして以下の4つのプロダクトを集約したCozyを立ち上げたことを前回ご紹介しました。

SmartDox
文書処理系
SimpleModeler
モデルコンパイラ
Kaleidox
アクション言語
Arcadia
Webフレームワーク

CozyはGitHubで開発を進めています。

  • https://github.com/asami/cozy

Cozy Web

モデル駆動開発をWebアプリケーションまで広げるためには、モデル駆動対応したWebプラットフォームが必要です。このためのWebフレームワークとして開発を進めてきたのがArcadiaです。

CozyはこのArcadiaをベースに動作させることでモデル駆動の基盤のWebプラットフォームとして動作します。

CozyをWebプラットフォームとして動作させる形態をCozy Webと呼ぶことにします。

HelloWorld

Cozy Webの最小構成アプリケーションとしてHelloWorldを作成し、動作させてみます。

アプリケーション

最小構成のアプリケーションなので、index.htmlのみを配備します。以下のindex.htmlを用意します。

view plainprint?
  1. <html>  
  2. <head>  
  3. <title>Hello World!</title>  
  4. </head>  
  5. <body>  
  6. Hello World!  
  7. </body>  
  8. </html>  

配備

cozyを起動するディレクトリにwebappsディレクトリを作成します。

ここにアプリケーションのホームとなるディレクトリHelloWorldを作成します。

このHelloWorldディレクトリに前述のindex.htmlを作成すればOKです。

起動

Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。

view plainprint?
  1. $ cozy web  

実行

curlコマンドによってローカルホストの8080ポート上の /web/HelloWorld/index.html を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloWorldが、先程作成したディレクトリHelloWorldに対応するもので、ディレクトリ名がアプリケーション名になっています。

view plainprint?
  1. curl -v http://localhost:8080/web/HelloWorld/index.html  

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

取得結果は以下になります。無事登録したHTMLファイルを取得することができました。

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. > GET /web/HelloWorld/index.html HTTP/1.1  
  2. > Host: localhost:8080  
  3. > User-Agent: curl/7.76.1  
  4. > Accept: */*  
  5. >   
  6. < HTTP/1.1 200 OK  
  7. < Date: Sun, 27 Feb 2022 04:12:53 GMT  
  8. < Content-Type: text/html;charset=utf-8  
  9. < Cache-Control: public,max-age=86400  
  10. < Expires: Mon, 28 Feb 2022 04:12:59 GMT  
  11. < Content-Length: 337  
  12. < Server: Jetty(9.4.38.v20210224)  
  13. <   
  14. <html>  
  15. <head>  
  16. <title>Hello World!</title>  
  17. </head>  
  18. <body>  
  19. Hello World!  
  20. </body>  
  21. </html>  

まとめ

今回はモデル駆動開発向けのWebプラットフォームCozy Webを紹介しました。

ごく簡単なWebアプリケーションをHelloWorldとして配備して実行することが確認できました。

次回以降Cozy Webの機能を紹介していく予定です。

諸元

Cozy
0.0.3
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2022年1月31日月曜日

Cozy

Modegramming Styleブログではモデリングとプログラミングの一体化を指向したModegrammingというコンセプトを提唱しており、その実現のための技術体系としてSimpleModelingを整備しています。

プロダクト

ちょうど一年前の記事「SimpleModeling」では、このSimpleModelingの技術体系の構成要素である以下の4つのプロダクトの開発について説明しました。ちょうど一年前の記事「SimpleModeling」では、このSimpleModelingの技術体系の構成要素である以下の4つのプロダクトの開発について説明しました。

SmartDox
文書処理系
SimpleModeler
モデルコンパイラ
Kaleidox
アクション言語
Arcadia
Webフレームワーク

この中で、この一年は特にアクション言語であるKaleidoxの開発を進めてきました。

開発方法論

7月からオブジェクト指向開発方法論の講座を始めました。

UML(Unified Modeling Language)/UP(Unified Process)の基本を押さえつつ、オブジェクト指向開発方法論の現在地を整理する目的です。

その上で、最終的には上記のプロダクトを活用したモデル駆動開発と連携できればと考えています。

Cozy

Kaleidoxの開発も順調に進んできたので、Kaleidox, SmartDox, SimpleModeler, Arcadiaを統合した、モデル駆動開発のワークベンチとして新たなプロダクトCozyを立ち上げました。

モデルコンパイラにアクション言語、文書処理系、Webフレームワークを統合し連携することでより有効な活用を行うことができるでしょう。

状態機械図

Kaleidox, SmartDox, SimpleModeler, Arcadiaを統合することにより、KaleidoxからSimpleModelerのモデル生成機能などを直接使用できるようになりました。

今回はSimpleModelerの持つ状態機械図生成機能を使ってKaleidox上の状態機械モデルの状態機械図を生成してみます。

状態機械

まず「Kaleidox/状態機械：ヒストリー」で使用した状態機械の状態機械図を生成します。

以下のモデルでは状態機械purchaseを定義しています。

view plainprint?
  1. * event  
  2. event=[{  
  3.     name="confirm"  
  4.   },{  
  5.     name="reject"  
  6.   },{  
  7.     name="delivered"  
  8.   },{  
  9.     name="cancel"  
  10.   },{  
  11.     name="suspend"  
  12.   },{  
  13.     name="resume"  
  14. }]  
  15. * statemachine  
  16. statemachine={  
  17.   name="purchase"  
  18.   state=[{  
  19.     name=INIT  
  20.     transition=[{  
  21.       to=running  
  22.     }]  
  23.   },{  
  24.     name=canceled  
  25.     transition=[{  
  26.       to=FINAL  
  27.     }]  
  28.   },{  
  29.     name=suspended  
  30.     transition=[{  
  31.       guard=resume  
  32.       to=HISTORY  
  33.     }]  
  34.   }]  
  35.   statemachine=[{  
  36.     name="running"  
  37.     state=[{  
  38.       name=applying  
  39.       transition=[{  
  40.         to=confirming  
  41.       }]  
  42.     },{  
  43.       name=confirming  
  44.       transition=[{  
  45.         guard=confirm  
  46.         to=confirmed  
  47.       },{  
  48.         guard=reject  
  49.         to=rejected  
  50.       }]  
  51.     },{  
  52.       name=confirmed  
  53.       transition=[{  
  54.         to=delivering  
  55.       }]  
  56.     },{  
  57.       name=rejected  
  58.       transition=[{  
  59.         to=FINAL  
  60.       }]  
  61.     },{  
  62.      name=delivering  
  63.       transition=[{  
  64.         guard=delivered  
  65.         to=delivered  
  66.       }]  
  67.     },{  
  68.       name=delivered  
  69.       transition=[{  
  70.         to=FINAL  
  71.       }]  
  72.     }]  
  73.     transition=[{  
  74.       guard=cancel  
  75.       to=canceled  
  76.     },{  
  77.       guard=suspend  
  78.       to=suspended  
  79.     }]  
  80.   }]  
  81. }  

statemachine-diagram関数で上記の状態機械purchaseから状態機械図を生成します。

view plainprint?
  1. cozy> statemachine-diagram 'purchase  
  2. Image  

画像をviewコマンドで表示します。Kaleidox上で定義した状態機械の状態機械図として表示することができました。

view plainprint?
  1. cozy> :view  

エンティティ

次は「Kaleidox状態機械/エンティティの状態遷移」で使用した状態機械を持つエンティティです。

エンティティsalesorderが状態機械statusを持っています。

view plainprint?
  1. * event  
  2. event=[{  
  3.     name="confirm"  
  4.   },{  
  5.     name="reject"  
  6.   },{  
  7.     name="delivered"  
  8.   },{  
  9.     name="cancel"  
  10.   },{  
  11.     name="suspend"  
  12.   },{  
  13.     name="resume"  
  14. }]  
  15. * entity  
  16. ** salesorder  
  17. *** features  
  18. table=salesorder  
  19. *** attributes  
  20. | Name | Type  | Multiplicity |  
  21. |------+-------+--------------|  
  22. | id   | token |            1 |  
  23. | price| int   |            1 |  
  24. *** statemachines  
  25. **** status  
  26. state=[{  
  27.   name=INIT  
  28.   transition=[{  
  29.     to=running  
  30.   }]  
  31. },{  
  32.   name=canceled  
  33.   transition=[{  
  34.     to=FINAL  
  35.   }]  
  36. },{  
  37.   name=suspended  
  38.   transition=[{  
  39.     guard=resume  
  40.     to=HISTORY  
  41.   }]  
  42. }]  
  43. statemachine=[{  
  44.   name="running"  
  45.   state=[{  
  46.     name=applying  
  47.     transition=[{  
  48.       to=confirming  
  49.     }]  
  50.   },{  
  51.     name=confirming  
  52.     transition=[{  
  53.       guard=confirm  
  54.       to=confirmed  
  55.     },{  
  56.       guard=reject  
  57.       to=rejected  
  58.     }]  
  59.   },{  
  60.     name=confirmed  
  61.     transition=[{  
  62.       to=delivering  
  63.     }]  
  64.   },{  
  65.     name=rejected  
  66.     transition=[{  
  67.       to=FINAL  
  68.     }]  
  69.   },{  
  70.    name=delivering  
  71.     transition=[{  
  72.       guard=delivered  
  73.       to=delivered  
  74.     }]  
  75.   },{  
  76.     name=delivered  
  77.     transition=[{  
  78.       to=FINAL  
  79.     }]  
  80.   }]  
  81.   transition=[{  
  82.     guard=cancel  
  83.     to=canceled  
  84.   },{  
  85.     guard=suspend  
  86.     to=suspended  
  87.   }]  
  88. }]  

statemachine-diagram関数で上記のエンティティpurchaseが持っている状態機械statusの状態機械図を生成します。

view plainprint?
  1. cozy> statemachine-diagram 'salesorder  
  2. Image  

画像をviewコマンドで表示します。こちらもKaleidox上で定義した状態機械の状態機械図として表示することができました。

状態機械モデルとしては前出のpurchaseと同じなので、同じ状態機械図になっています。

view plainprint?
  1. cozy> :view  

まとめ

Kaleidoxの開発もいい感じに進み、Cozyの枠組みの中でSimpleModelerと連携して状態機械図を生成することができるようになりました。

今年はCozyの各種機能の連携を強化し、効果的なモデル駆動開発の環境づくりに取り組んでいきたいと思います。

諸元

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