フォーム処理ではサーバーサイドでアプリケーション・ロジックを実行する必要があります。
Cozyではアプリケーション・ロジックを記述する方式としてKaleidoxの関数を使用することが可能です。
今回はKaleidoxの組込み関数「+」をCozy Webから使用する方法について見ていきます。
HelloOperation
フォームから使用できるアプリケーション・ロジックはオペレーションとして提供されています。
Kaleidoxの組込み関数はオペレーションとして登録されているので、そのまま使用することができます。
フォームを用いたWebアプリケーションHelloOperationを作成します。
HelloOperationでは、Kaleidoxの「+」関数をCozyのオペレーションとして実行することでフォームで入力した数値の加算を行います。
準備
cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloOperationを作成します。
Formページ
フォームを使った入力画面として以下のページをindex.jadeとしてホームディレクトリに配置します。
-@val form: ViewForm
html
head
title HelloForm
body
form(method="POST" action={form.action})
input(hidden="true" name="$scenario" value={form.scenario})
input(name="arg1" value={form.arg1})
input(name="arg2" value={form.arg2})
button(type="submit" id="submitbutton" name="$submit" value="ok") Submit
button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel
ViewFormオブジェクト
以下の宣言でフォームの設定に必要なViewFormを参照可能にします。
-@val form: ViewForm
Form/action
actionにViewFormオブジェクトのaction属性を設定します。
form(method="POST" action={form.action})
今回の場合は空文字が設定されます。入力と同じページにフォームのPOSTが行われるということですね。
POST処理に必要な情報は後述する「$scenario」に設定されています。
Input/Hidden
Hidden属性のInputで入力する「$scenario」プロパティにViewFormオブジェクトのscenario属性を設定します。
input(hidden="true" name="$scenario" value={form.scenario})
今回の場合は「{"name":"invoke-operation","state":"input","data":{}}」が設定されています。URLエンコーディングを解除した値は「{"name":"invoke-operation","state":"input","data":{}}」です。
Cozy Webがフォーム処理を行うために必要な情報が設定されています。
Inputデータ
Hidden属性のないInputでデータ入力を行います。
今回は以下の2行が対象です。
input(name="arg1" value={form.arg1})
input(name="arg2" value={form.arg2})
nameにarg1とarg2を指定しているので、arg1プロパティとarg2プロパティの2つのプロパティの入力ということになります。値のデフォルト値としてViewFormオブジェクトのarg1属性とarg2属性の値を設定しています。今回のケースでは空文字が設定されます。
Input/Ok
OK用のサブミットボタンとして以下のButtonを設定しました。
button(type="submit" id="submitbutton" name="$submit" value="ok") Submit
name属性に「$submit」、value属性に「ok」を指定しています。
Input/Cancel
キャンセル用のサブミットボタンとして以下のButtonを設定しました。
button(type="submit" id="cancelbutton" name="$submit" value="cancel") Cancel
name属性に「$submit」、value属性に「cancel」を指定しています。
コントローラ
WEB-INF/controllersにindex.jade用のコントローラである以下のindex.jsonを配置します。
{
"action": "invoke-operation-scenario",
"operation": "+",
"method": "POST",
"successView": "index_complete",
"errorView": "index_error",
"parameters": [{
"arg1": "int",
"arg2": "int"
}]
}
action
コントローラのアクションとしてinvoke-operation-scenarioを指定しています。
"action": "invoke-operation-scenario",
invoke-operation-scenarioは、フォームでパラメタ入力し、このパラメタを使ってオペレーションを呼び出し、その結果をビューに渡すモデルとして生成する処理を行うシナリオです。
フォーム入力にまつわるWebブラウザとサーバ間のインタラクションをシナリオに従って実現します。
operation
実行するオペレーションとして+を指定しています。
"operation": "+",
+オペレーションはKaleidoxが定義している関数で、数値の加算をおこないます。
CozyではKaleidoxの関数をinvoke-operation-scenarioで呼び出すことができるオペレーションとして使用できるようになっています。
method
メソッドはPOSTを指定しています。
"method": "POST",
FormのメソッドがPOSTのものを受け付けます。
successView
successViewにはindex_completeを指定しています。
"successView": "index_complete",
コントローラの処理が成功するとこのページに遷移します。
errorView
errorViewにはindex_errorを指定しています。
"errorView": "index_error",
コントローラの処理が失敗するとこのページに遷移します。
parameters
フォームから入力されるパラメタとして、パラメタ名とデータ型を指定しています。
"parameters": [{
"arg1": "int",
"arg2": "int"
}]
パラメタは、パラメタ名arg1でデータ型intとパラメタ名arg2でデータ型intの2つです。
成功ページ
成功ページとして以下のindex_complete.htmlを用意します。コントローラのsuccessViewで指定したページです。
<html>
<head>
<title>Operation Success</title>
</head>
<body>
<h1>Operation Success</h1>
<c:model/>
</body>
</html>
このページ内の以下のタグはコントローラの実行結果のモデルの内容を表形式で表示するものです。
<c:model/>
今回の場合は、+オペレーションの結果が出力されます。
エラーページ
成功ページとして以下のindex_error.htmlを用意します。コントローラのerrorViewで指定したページです。
<html>
<head>
<title>Operation Error</title>
</head>
<body>
<h1>Operation Error</h1>
<c:error/>
</body>
</html>
このページ内の以下のタグはコントローラの実行時にエラーが発生した場合、そのエラーを表形式で表示するものです。
<c:error/>
今回の場合は、loopbackオペレーションがエラーとなる場合に出力されます。
実行
Formページ
curlコマンドによってローカルホストの8080ポート上の/web/HelloOperation を取得します。
$ curl http://localhost:8080/web/HelloOperation/
以下のHTML文書が返されます。
<!DOCTYPE html>
<html>
<head>
<title>HelloForm</title>
</head>
<body>
<form action="" method="POST">
<input value="{"name":"invoke-operation","state":"input","data":{}}" name="$scenario" hidden="true" />
<input value="" name="arg1" />
<input value="" name="arg2" />
<button value="ok" name="$submit" id="submitbutton" type="submit">Submit</button>
<button value="cancel" name="$submit" id="cancelbutton" type="submit">Cancel</button>
</form>
</body>
</html>
OK
OKボタンの押下は以下のcurlに相当します。
$ curl http://localhost:8080/web/HelloOperation/ -X POST \
--data-urlencode '$submit=ok' \
--data-urlencode 'arg1=3' \
--data-urlencode 'arg2=8' \
--data-urlencode '$scenario={"name":"invoke-operation","state":"input","data":{}}'
OKボタン押下と同等の上記curlの結果、以下のHTMLが出力されました。
<!DOCTYPE html>
<html><head>
<title>Operation Success</title>
</head><body>
<h1>Operation Success</h1>
11
</body></html>
c:modelタグの場所に、「+ 3 8」の計算結果である11が出力されています。
まとめ
今回はCozy WebでHTMLフォームの処理にKaleidoxの組込み関数を使用する方法について説明しました。
Cozy WebではHTMLフォームを使った処理はコントローラに宣言的な定義をするだけで、Webとサーバー間のインタラクションを伴う状態遷移の管理を行ってくれます。さらにオペレーションとして登録された各種処理も実行してくれるので、オペレーションを実装すれば後はWeb画面のデザインをするだけでHTMLフォーム処理を実現することができるわけです。
今回はKaleidoxの組込み関数を使用しましたが、次回はKaleidoxのスクリプト機能を使用してHTMLフォームによる処理を実現する方法を説明します。
諸元
- Cozy
- 0.0.8