In the JavaScript codes, you can reference to a component or other objects with the late-binding EL expression. The late-binding EL expression starts with #{ and ending with } as depicted below.
<button action="onmouseover: action.show(#{parent.tip})"/>
The late-binding EL expressions are evaluated as late as the Rendering Phase. On the other hand, if you assign an EL expression starting with ${, it will be evaluated at the Component Creation Phase, before assigning to the action property. For example,
<button action="onfocus: action.show(${tip}); onblur: action.hide(${tip})"/>
<div id="tip" visible="false">...</div>
will be evaluated to
<button action="onfocus: action.show(); onblur: action.hide()"/> <div id="tip" visible="false">...</div>
since the tip component is not created when assigning the action property.
Even if the referenced component was created before action is assigned, it is still incorrect, since the ZUML loader has no knowledge of CSA, and it converts the component to a string by invoking the toString method.
Of course, it doesn't prevent you from using ${} in an action, as depicted below. Just remember it is evaluated before assigning the action property.
<variables myaction="onfocus: action.show(#{tip}); onblur: action.hide(#{tip});"
<button action="${myaction} onmouseover: action.show(#{parent.parent.tip})"/>
In the following example, we demonstrated how to use client-side actions to provide on-line help. When user change the focus to any of the text boxes, a help message is displayed accordingly.
<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>
A ZUL component actually converts an EL expression (#{}) to proper JavaScript codes based on the class of the result object.
If result is null, it is replaced with null.
If result is a component, it is replaced with $e('uuid'), where $e is a JavaScript function to return a reference to a HTML tag and uuid is the component's UUID.
If result is a Date object, it is replaced with new Date(milliseconds).
Otherwise, the result is converted to a string by calling the toString method, and then replaced with 'result in string'.