Modegramming Style: 5月 2022

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

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

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

HelloController

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

準備

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

Webページ

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

<html>
    <head>
	<title>HelloController</title>
    </head>
    <body>
	<p><c:value name="a"/></p>
    </body>
</html>

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

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

Controller

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

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

{
  "action": "property",
  "properties": [{
    "name" : "a",
    "value" : 5
  }]
}

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

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

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

実行

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

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

curl -v http://localhost:8080/web/HelloTag/index.html

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

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

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

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

*   Trying ::1:8080...
* Connected to localhost (::1) port 8080 (#0)
> GET /web/HelloController/index.html HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.76.1
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Date: Sun, 29 May 2022 02:41:41 GMT
< Content-Type: text/html;charset=utf-8
< Transfer-Encoding: chunked
< Server: Jetty(9.4.38.v20210224)
< 
<!DOCTYPE html>
<html><head>
	<title>HelloController</title>
    </head><body>
	<p>5</p>
    
</body></html>
* Connection #0 to host localhost left intact

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

Webページの種類

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

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

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

Jade

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

-@val service: ViewService
html
  head
    title HelloController
  body
    p =service.get("a")

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

Jade&タグ

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

html
  head
    title HelloController
  body
    p<
      c:value(name="a")

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

SSP

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

<%@ val service: ViewService %>
<html>
    <head>
	<title>HelloController</title>
    </head>
    <body>
	<p><%= service.get("a") %></p>
    </body>
</html>

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

SSP&タグ

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

<html>
    <head>
	<title>HelloController</title>
    </head>
    <body>
	<p><c:value name="a"/></p>
    </body>
</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

Modegramming Style

2022年5月31日火曜日

Cozy Web/Controller