Zoneコンポーネント

Tapestry

http://kuramo.ch/tapestry5/tapestry-core/ja/guide/ajax.html に書かれているZoneコンポーネントについて書きます。Zoneとは何か、を要約すると次のようなものです。

で、サンプルコードを書きました。

ZoneDemo1.tml:

<t:block id="currentTimeBlock"> The current time is: ${currentTime}. </t:block>

<t:zone t:id="currentTimeZone">
    <t:delegate t:to="block:currentTimeBlock"/>
</t:zone>

[<t:actionlink t:id="updateCurrentTime" t:zone="currentTimeZone">update current time</t:actionlink>]

ZoneDemo1.java:

public class ZoneDemo1 {

    @Inject
    private Block currentTimeBlock;

    Block onActionFromUpdateCurrentTime() {
        return currentTimeBlock;
    }

    public Date getCurrentTime() {
        return new Date(); 
    }
}

[update current time] のリンクをクリックすると、現在時刻が更新されます。実際に動作するサンプルを http://kuramo.ch/t5demo/ajax/zonedemo1 に用意しました。


まず、最初にアクセスしたときにページ全体がレンダリングされますが、そのときにZoneコンポーネント()のところは

<div class="t-zone" id="currentTimeZone"> The current time is: Mon Mar 24 01:28:58 GMT+09:00 2008. </div>

といったHTMLになります。これは要素をDelegateコンポーネント()が参照し、レンダリングしているためです。要素はその場では何もレンダリングしません。

そして [update current time] のリンクをクリックするとリクエストがサーバに送られて、イベントハンドラメソッド onActionFromUpdateCurrentTime() が実行されます。このメソッドはBlock型のオブジェクトを返していますが、これはテンプレート上の要素、つまり最初のアクセスで時刻をレンダリングした要素をJavaソースから参照したものです。

Tapestryはイベントハンドラメソッド onActionFromUpdateCurrentTime() から返された要素をレンダリングしてブラウザへのレスポンスとします。そしてブラウザ上で <div class="t-zone" id="currentTimeZone"> の中身が更新され、更新された要素を強調するためにScriptaculousを使ってハイライトされます。

以上がTapestryでAjaxを使ってページの一部だけを更新するときの基本的な流れです。


さて、似たようなサンプルをもうひとつ用意しました。 http://kuramo.ch/t5demo/ajax/zonedemo2 です。

<t:block id="currentTimeBlock">${currentTime}</t:block>

<t:zone t:id="currentTimeZone">
    The current time is:
    <div class="t-zone-update" style="display:inline;">
        <t:delegate t:to="block:currentTimeBlock"/>
    </div>.
</t:zone>

[<t:actionlink t:id="updateCurrentTime" t:zone="currentTimeZone">update current time</t:actionlink>]

Javaクラスはひとつ目のサンプルと同じです。見た目の動作はひとつ目のサンプルと全く変わりませんが、ひとつ目の方は時刻の文字列だけでなく The current time is: というテキストも一緒に更新されるのに対して、ふたつ目のサンプルは時刻の文字列部分しか更新されません。Firebugなどで The current time is: の部分を適当な文字列に書き換えてからリンクをクリックしてみると違いがわかると思います。

これは http://kuramo.ch/tapestry5/tapestry-core/ja/guide/ajax.html の「Zoneのdivと更新用div」のところに説明がありますが、Zoneの中に class="t-zone-update" な div があるとそこが更新されるということです。しかし、ScriptaculousによるハイライトはZoneコンポーネント全体に作用します。