Web UI Framework

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>

17 days ago Andrew Goodricke Syntax error fixed
4 years ago Manon Lumeau 9
5 years ago Solen Guitter 8
5 years ago Manon Lumeau 7
5 years ago Manon Lumeau 6
5 years ago Manon Lumeau 5
6 years ago Solen Guitter 4
6 years ago Solen Guitter 3
9 years ago Jean-Marc Orliaguet 1
9 years ago Jean-Marc Orliaguet 2
History: Created by Jean-Marc Orliaguet

We'd love to hear your thoughts!

All fields required