[XPages] クライアントJavascriptにサーバー側の値を埋め込む方法

前回の続き

前回、Radio Button Groupコントロールで生成されるラジオボタンの値をクライアントJavascriptで取得する方法を説明しました。（記事はこちら） その時に、

var chkRadioMember = dojo.query("input[name$='#{id:radioGroupMember}']");

 というように#{id:hogehoge} というクライアントJavascriptではなさそうなソースコードが出てきました。

前回のブログでは、この#{id:hogehoge}というフォーマットで記述されたコードはHTMLがブラウザに表示される前にサーバー側で ’view:_id1:radioGroupMember‘ といった値に動的に変換されることになっています、と解説しました。

今回は、この#{id:hogehoge} の意味を紐解くと共に、ちょっとディープに利用方法を探ってみようと思います。

実は知らない間に使っていた #{} のフォーマット

#{} の形を色々と探してみると、XPagesでは以下のようなパターンが他にも存在するのを確認できました。

#{document1.Firstname}
#{view1}
#{javascript:sessionScope.myName}
#{id:firstname1}

XPagesのソースを覗いた事がある方だったらどれも見た覚えがあるかと思います。

それぞれ役割が違っていて、

#{document1.Firstname}  ← Dominoドキュメントをバインドして、フィールドを表示させた時
#{view1} ← バインドさせたDominoビューを利用する
#{javascript:sessionScope.myName} ← SSJSで計算をさせたい時
#{id:firstname1} ← XPagesのIDからCSJS用のIDに変換した値を取り出したい時

というような用途で使いわけていきます。

もしかしたら、データソースをバインドするような形式はドキュメントやビュー以外にもあるかもしれません。自分の環境では以下のようなデータソースが選択できましたがDocumentとView以外は試していません（汗）

CSJSで使える#{} のフォーマット

#{} はなにかしらサーバーサイドで計算させたい時に利用するものだということは分かったと思います。

ここでは、どれがCSJSのソースコード中に埋め込む形で使えて、どれが使えないか検証してみました。

試したコードは以下の種類です。

 <xp:this.script>
  <![CDATA[
    alert("[SSJS]sessionScope.myName は #{javascript:sessionScope.myName}"); ← 動いた
    alert("[SSJS]document1.Firstname は #{javascript:document1.getItemValueString("Firstname")}"); ← 動いた
    alert("[CSJS]firstname1 は "+dojo.byId("#{id:firstname1}").value); ← 動いた
    alert("[SSJS]document1.Firstname は #{document1.Firstname}"); ← エラーになった
  ]]>
</xp:this.script>

という具合で、#{document1.Firstname} というようなバインドしてあるDominoドキュメントのFirstnameのフィールドを取得する、という記述はCSJSで使えませんでした。

しかし、#{javascript:document1.getItemValueString(“Firstname”)} を利用すると同じ値が取得できているのがわかると思います。

結論として、CSJSでは

#{id:hogehoge}

#{javascript:hogehoge}

の2つが使えるという結果になりました。

実際、自分がXPagesを見てきて、CSJSに利用されているのは#{id:hogehoge} の記述ばかりです。

#{javascript:hogehoge} もほとんど見ないです。（というか、実際この検証をするまで使えることを知りませんでした）

使えるけど、ソースがグチャグチャになってしまうのでCSJSとSSJSを混ぜこぜで使うのは全くオススメできません。

もしその必要性が出てきてしまったら設計から見なおしたほうがいいのかもしれませんね…