JSHeader equivallent in XPages

JsHeader section in the custom forms is one place on which a traditional web developer will rely upon mostly in my perspective. Having to do that all over the years, XPages all of a sudden felt too crude to me most of the times untill now. 'cos I never knew the existence of the awesome tag named "xp:scriptBlock" . Mind the case, it is B and not b.

Yes this is one place which I find very similar to the JSHeader section in the Notes form for the XPage. A simple syntax of the tag can be described as follows,

<xp:scriptBlock type="text/javascript">

<xp:this.value><![CDATA[             -- your javascript functions go here--    ]]></xp:this.value>

</xp:scriptBlock>

Following is a small illustration of the usage of the same.

I have declared a function named greetings() inside the script block in an Xpage. Its purpose is to get the user name from a field (xpage edit box) and greet the user. This function is called by a button on the same page and yeppi that works.

Note:This solution is for clientside javascript alone and does not work with XPages. Also I have not performed any exhaustive test with this. So dont hate me if it does n't work for you :)

The code of the entire XPage is as follows,

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:scriptBlock type="text/javascript">

<xp:this.value>

<![CDATA[function greetings() {alert('Hi '+document.getElementById("#{id:userName}").value+'.. Having fun with XPages!!!')}]]>

</xp:this.value>

</xp:scriptBlock>

<xp:br></xp:br>

<xp:br></xp:br>

User Name : &#160;

<xp:inputText id="userName"></xp:inputText>

<xp:br></xp:br>

<xp:br></xp:br>

<xp:button value="Call the javascript function defined with in the XPage"

id="button1">

<xp:eventHandler event="onclick" submit="false">

<xp:this.script><![CDATA[greetings()]]></xp:this.script>

</xp:eventHandler>

</xp:button>

<xp:br></xp:br>

</xp:view>

Hope this helps :)