JavaScriptコード中でレイト(late)バインディングEL表記を使用して、コンポーネント又は他のオブジェクトを参照できます。レイトバインディングEL表記は以下に書かれているように、#{で始まり、}で終わります。
<button action="onmouseover: action.show(#{parent.tip})"/>
レイトバインディングEL表記はレンダー段階と同じくらいに遅く評価されます。一方で、${,で始まるEL表記を指定したら、コンポーネント作成段階でactionプロパティに指定される前に評価されます。例えば、
<button action="onfocus: action.show(${tip}); onblur: action.hide(${tip})"/>
<div id="tip" visible="false">...</div>
は以下に処理されます。
<button action="onfocus: action.show(); onblur: action.hide()"/> <div id="tip" visible="false">...</div>
それはactionプロパティが指定されるとき、tipコンポーネントがまだ作成されていないからです。
actionが指定される前に参照コンポーネントが作成されるとすると、ZUMLローダーがCSAについて 何も知らないので、それはまだ正しく動作しません。toStringメソッドを呼び出されることでコンポーネントは文字列に変換されます。
もちろん、以下に示すように、動作中に$ {}をしても構いません。ただ覚えておいてほしいのはactionプロパティを指定する前に処理されるという事です。
<variables myaction="onfocus: action.show(#{tip}); onblur: action.hide(#{tip});"
<button action="${myaction} onmouseover: action.show(#{parent.parent.tip})"/>
以下の例で、クライアント側を使用してオンラインヘルプを提供する方法をデモします。ユーザーがフォーカスをテキストボックスに変えるとき、それに従ってヘルプメッセージが表示されます。
<grid>
<columns> 
<column/>
<column/>
<column/>
</columns>
<rows>
<row>
<label value="text1: "/>
<textbox action="onfocus: action.show(#{help1}); onblur: action.hide(#{help1})"/>
<label id="help1" visible="false" value="This is help for text1."/>
</row>
<row>
<label value="text2: "/>
<textbox action="onfocus: action.show(#{help2}); onblur: action.hide(#{help2})"/>
<label id="help2" visible="false" value="This is help for text2."/>
</row>
</rows>
</grid>
ZULコンポーネントは実際にEL表記(＃{})を結果オブジェクトのクラスに基づいて、適切なJavaScriptコードに変換します。
結果が無効な場合、nullととって変えます。
結果がコンポーネントの場合、$e (' uuid ')を取り換えます。$eはJavaScriptのファンクションで参照をHTMLタグに返します。uuidはコンポーネントのUUIDです。
結果がデータのオブジェクトの場合、new Date(milliseconds)と取り換えます。
それ以外の場合、toStringメソッドを呼び出す事で、結果は文字列に変換されます。そして、' result in string'と取り換えます。