Tapestry JavaScript(2)

前回簡単なJavaScriptテンプレートのサンプルを載せました。
TagListコンポーネントをHTMLテンプレートから呼び出すと自動的にJavaScriptも出力されるわけですが、同じページに2つTagListコンポーネントを使用すると変数名やfunctionの重複が発生します。
重複を回避するために<unique>を使用します。この他にもJavaScriptテンプレートには、使用可能なエレメントが存在します。これらについて説明していきたいと思います。

<unique>エレメント

重複例

HTMLテンプレート

<span jwcid="@TagList" /><span jwcid="@TagList" />

出力されるHTML

<script type="text/javascript"><!--var name = "12345";alert(name);var name = "12345";alert(name);// --></script>

上記の出力結果では、1つのscriptタグ内にまとめられてはいますが、変数名の重複が起こっています。
また、alertは1回だけ表示したい時もあります。

重複の回避

同じものを表示させないようにするには、<unique>エレメントを使用します。

-WEB-INF/jwc/TagList.script

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE scriptPUBLIC "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN""http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd"><script><body><unique>var ${varName} = "${varValue}";</unique>    alert(name);</body></script>

上記のように変数の値の部分のみをuniqueエレメントで囲うことで、同じコンポーネントを2回使用してもページ内には1回のみ表示されるようになります。( alert文はuniqueエレメントで囲っていませんので2回表示されます)

出力されるHTML

<script type="text/javascript"><!--var name = "12345";alert(name);alert(name);// --></script>

initializationエレメント

JavaScriptを記述するとページを総て読み込んだ後に特定の関数を実行したいことがあります。
window.onload = function ()等で指定しても良いのですが、Tapestryでは、ページの最後(body終了タグの直前)にJavaScriptを埋め込む命令があります。

-WEB-INF/jwc/TagList.script

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE scriptPUBLIC "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN""http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd"><script><body><unique>var ${varName} = "${varValue}";</unique><initialization>    alert(name);</initialization></body></script>

HTML出力結果

.....<script language="JavaScript" type="text/javascript"><!--alert(name);// --></script></body>

initializationタグで囲まれた部分が、HTMLの最後に表示されます。もちろんこの中でuniqueエレメントを使用する事も可能です。

input-symbolエレメント

.java ファイルから指定される変数を定義します。
オプションとして用意されているエレメントですので、記述してもしなくてもかまいません。
多くの変数を扱うときScriptテンプレート側で変数名等を明確にしたいときに使用します。

-TagList.java

Map symbols = new HashMap();symbols.put("varName","name");symbols.put("varValue","12345");getScript().execute(aCycle,pageRenderSupport,symbols);

-TagList.script

<input-symbol key="varName" class="java.lang.String" required="yes"/><input-symbol key="varValue" class="java.lang.String" required="yes"/>

forearchエレメント

名前の通り繰り返し処理を行います。

-TagList.script

<input-symbol key="bookmarkList" class="java.util.List" required="yes"/>....<foreach key="keyObj" index="no" expression="bookmarkList">${keyObj.getTitle()};${no};</foreach>

-出力例

title0;0;title2;1;

-TagList.java

symbols.put("bookmarkList",list);getScript().execute(aCycle,pageRenderSupport,symbols);

上記の例ではListクラスを指定しており、リストのアイテム数回繰り返しを行います。
List以外を指定するときは以下の通りにします。

Setを指定

<input-symbol key="bookmarkList" class="java.util.List" required="yes"/>

Mapを指定

<input-symbol key="bookmarkMap" class="java.util.Map" required="yes"/><foreach key="keyObj" index="no" expression="bookmarkMap.keySet()">${keyObj.getTitle()};${no};</foreach>

Tapestry JavaScript(1)にアノテートによるScriptテンプレートファイルの指定方法を追加しました。
https://www.taosoftware.co.jp/blog/2006/03/tapestry_javascript.html#more


コメント

このブログの人気の投稿

島へ移住の話【炊飯】

ドローンプログラミング体験教室を伊豆大島の小学校でしてきました

情報処理安全確保支援士登録証のカード型が届きました。