Hobione's Weblog

Living & Breathing in Web 2.0 Era

JavaScript in Facelets/XHTML

XHTML is more uniformed then regular html so here are few ways to add javascript code in a xhtml file

No. 1: Regular old style with special wrap (CDATA).  Here is template.xhtml
javascript

No.2: External .js file
Create a .js file, like external.js

function externalJs(){
    alert('external js file');
}

Now, add this <script type=”text/javascript” src=”external.js”></script> in the template.xhtml
Both of these java script call should work, one will come from template.xhmtl and other one will come from External JS file.

<f:view xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:ice="http://www.icesoft.com/icefaces/component">

    <ui:composition template="layout.xhtml">
    <ui:define name="content">
        <ice:form style="width: 45%;">
            <a href="javascript: clicked();">JS in template.xhtml</a>
            <a href="javascript: externalJs();">External JS</a>
        </ice:form>
        </ui:define>
  </ui:composition>
</f:view>

Related topics:
Five Steps to add Facelets

Datejs (Opensource JavaScript Library)

JavaScript 101

Advertisements

January 8, 2009 - Posted by | Facelets

1 Comment »

  1. Maybe a noob question, but how come your IDE does not complaint when you put attribute xmlns as attribute inside f:view tag (in the line 01 of template.xhmtl)? As far a I know, f:view does not have this attribute…

    Comment by Hicks | July 9, 2009 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: