How to Add JavaScript or CSS Resources to Your Pages
Today we have a question from jvinai who asks how he can add jQuery UI resources into his project.
To do this you need to know a little bit about the theme engine:
The theme is in charge of the global layout or structure of a page (composition of the header, footer, left menu, main area…), as well as its branding or styling using CSS. It also handles additional resources like JavaScript and CSS files.
As usual, this works with extension points. The first thing to do is declare your resource. It can be a CSS or a JavaScript file.
<extension target="org.nuxeo.theme.styling.service" point="resources">
<resource name="static_styles.css">
<path>css/static_styles.css</path>
</resource>
<resource name="jquery.fancybox.js">
<path>scripts/jquery/jquery.fancybox.pack.js</path>
</resource>
</extension>
The next step is to state where you want your resource to be loaded. You need to choose the fragment where you want to have it (a page is made of fragments). If you want it to be loaded in every page, I would suggest you put your resource in the include fragment. Notice the merge="true" attribute. If you don’t use it, you will override the default include completely.
<extension target="org.nuxeo.theme.services.ThemeService" point="views">
<view name="nuxeo5 includes" template-engine="jsf-facelets" merge="true">
<format-type>widget</format-type>
<resource>jquery.fancybox.js</resource>
<resource>static_styles.css</resource>
</view>
</extension>
Make sure that your resources are copied in the war using the deployment-fragment.xml:
<?xml version="1.0"?>
<fragment version="1">
<install>
<!-- unzip the war template -->
<unzip from="${bundle.fileName}" to="/" prefix="web">
<include>web/nuxeo.war/**</include>
</unzip>
</install>
</fragment>
Now, you can deploy your code and test it. If you look at the source code of the page, you won’t see the resource as it is. The theme engine has minified it along with the other resources.