a4j:loadScript is similar to the standard script tag with src attribute, but it allows to load script from alternative sources like a jar file.

src attribute defines the context relative path to the script. Instead of html script tag it's not required to have a prefix of your application. The leading slash in the path means the root of the web context.

You can use "resource://" prefix to access the script file using RichFaces resource framework. For example, if your script file is located inside the jar file and has a full path there: /org/mycompany/assets/script/focus.js , you can point to it with:

It is possible to register aliases in the static script files or dynamically generated scripts and use those aliases then. For example, RichFaces has an alias for the prototype.js script. So, you can point to "resource://prototype.js" as a src for loading script and use prototype features. The following example shows how to use shipped with RichFaces prototype.js and script.aculo.us to create a client-side effects.

Script demo

Using Scriptaculous Effects

Name:
Job:

You have just entered:

Name:

Job:

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
            
    <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js"/>
    <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js"/>
    
    <script>
        Effect.Transitions.Elastic = function(pos) {
            return -1*Math.pow(4,-2*pos) * Math.sin((pos*3-1)*(3*Math.PI)/2) + 1;
        };
    </script>
        <style type="text/css">
            .scriptdemobtn {
                width: 75px;
            }
            .scriptdemocolumn-l {
                padding: 2px;
                text-align: right;
            }
            .scriptdemocolumn-r {
                padding: 2px;
                text-align: left;
            }
        </style>

    <h:commandButton  class="scriptdemobtn" onclick="new Effect.BlindUp($('mypanel'), {duration:.3});return false" value="Hide" style="margin-right: 5px;" />
    <h:commandButton  class="scriptdemobtn" onclick="new Effect.BlindDown($('mypanel'),{duration:1.5,transition:Effect.Transitions.Elastic});return false" value="Show" />

    <div>
        <rich:spacer height="10" />

        <rich:panel  id="mypanel">
            <f:facet name="header">
                <h:outputText value="Using Scriptaculous Effects"/>
            </f:facet>

            <h:form>
                <h:panelGrid styleClass="rsPanel" width="250" columns="2" columnClasses="scriptdemocolumn-l,scriptdemocolumn-r">
                    <h:outputText styleClass="rsLabel" value="Name:" />
                    <h:inputText  styleClass="rsInput"  value="#{userBean.name}" />
                    
                    <h:outputText styleClass="rsLabel" value="Job:" />
                    <h:inputText  styleClass="rsInput"  value="#{userBean.job}" />
                    
                    <h:panelGroup/>
                    <h:panelGroup>
                        <rich:spacer height="5"/>
                        <h:commandButton styleClass="rsButton" value="Submit" style="width: 75px">
                            <a4j:support  disableDefault="true" event="onclick" reRender="out" />
                        </h:commandButton>
                    </h:panelGroup>

                    <f:facet name="footer">
                    </f:facet>
                            
                </h:panelGrid>
            </h:form>           
            <h:panelGrid id="out" columns="1">
                
            <h:outputText value=""/>
            <h:outputText value="You have just entered:"/>
            <h:outputText value=""/>
            <h:outputText value="Name: #{userBean.name}" />
            <h:outputText value="Job: #{userBean.job}" />
            </h:panelGrid>
                
        </rich:panel>

        <rich:spacer height="20" />
    </div>

</ui:composition>

<<Hide Source

Note that if you have an Ajax functionality on a page, the prototype.js is already attached to this page and you do not have to include it explicitly once again.

Since version 3.1.0, RichFaces introduced the rich:effect component. Hence, you do not have to write any javascript to make effects appear in your application.