How to Declare the CSS and Javascript Resources Used in Your Templates

The CSS and JavaScript resources needed by your JSF pages can be added directly from inside your templates.

Let us consider the following JSF page:

<nxthemes:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:nxthemes="http://nuxeo.org/nxthemes"
  xmlns:ui="http://java.sun.com/jsf/facelets">

  <ui:define name="body">

<div class="myWidget">A special widget that requires custom CSS and Javascript.</div>
  </ui:define>

</nxthemes:composition>

The simplest way to include resources to the page is to add a <nxthemes:require> tag to your JSF template:

<nxthemes:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:nxthemes="http://nuxeo.org/nxthemes"
  xmlns:ui="http://java.sun.com/jsf/facelets">

  <nxthemes:require resource="myCss.css" />
  <nxthemes:require resource="myScript.js" />

  <ui:define name="body">

<div>A special widget that requires custom CSS and Javascript</div>
  </ui:define>

</nxthemes:composition>

This will load the myCss.css style and the myScript.js script and all their dependencies automatically whenever the JSF page is being displayed.

If you are using FreeMarker templates under WebEngine, the syntax is:

<@nxthemes_require>myCss.css</@nxthemes_require>
<@nxthemes_require>myScript.js</@nxthemes_require>

 Resources are declared as theme contributions as usual:

<extension target="org.nuxeo.theme.services.ThemeService" point="resources">

    <resource name="myCss.css">
      <path>path/to/myCss.css</path>
    </resource>

    <resource name="myScript.js">
      <path>path/to/myScript.js</path>
    </resource>

</extension>