javascript inside xhtml (Richfaces)

Question

i am trying to include jquery and jquery-ui libraries inside xhtml. Ive heard that richfaces already have jquery,but jquery-ui doesnt. I have no idea how to include them.

In addition to this, i have another js library that uses jquery and jquery-ui. So, what do i need to do to import these 3 js sources and use them inside a

<script type="text/javascript"> </script>

block? Where do these js files have to be located?

Thank you.

Answer 1

RichFaces 4.x comes indeed with jQuery bundled. It's available with the resource name jquery.js and is usually only auto-included when a certain RichFaces component requires it, but you can also explicitly include it by <h:outputScript>.

As to your own JS files, just put them in the /resources folder of the public webcontent and use <h:outputScript> the usual way.

Assuming

WebContent
 |-- resources
 |    |-- jquery-ui.js
 |    `-- yourscript.js
 :

here's how you could reference it (note that jquery.js is been supplied by RichFaces, not yourself!)

<h:head>
    ...
    <h:outputScript name="jquery.js" />
    <h:outputScript name="jquery-ui.js" />
    <h:outputScript name="yourscript.js" />
</h:head>

Answer 2

The resources provided by RichFaces are mapped to short resource names like jquery.js.

The full list of all resources can be found in a file called Static.properties inside the component jar (richfaces-components-ui-4.x.y.Final.jar).

Some lines from META-INF/richfaces/staticResourceMapping/Static.properties:

jquery.js=org.richfaces.staticResource/4.x.y.Final/Static/jquery.js
org.richfaces\:tooltip.js=org.richfaces.staticResource/4.x.y.Final/Static/org.richfaces/tooltip.js

You can see the resources with their resources name and a full path. Also note, that there are resource names with and without library names - so you have to use the library attribute with outputScript:

<h:outputScript name="jquery.js" />
<h:outputScript library="org.richfaces" name="tooltip.js" />

Include own script after jquery/... .

IMHO you should never rely on resource imports, that are side-effects of component usage.