8

I need to add programmatically JavaScript and CSS resources to <h:head> of a JSF page. It isn't clear how to achieve this. How can I do it or is there a kickoff example?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Younes
  • 1,635
  • 1
  • 19
  • 33

2 Answers2

14

That depends on where exactly you'd like to declare the resource. Normally, the only reason to programmatically declare them is that you've a custom UIComponent or Renderer which generates HTML code which in turn requires those JS and/or CSS resources. They are then to be declared by @ResourceDependency or @ResourceDependencies.

@ResourceDependency(library="mylibrary", name="foo.css")
public class FooComponentWithCSS extends UIComponentBase {
    // ...
}

@ResourceDependencies({
    @ResourceDependency(library="mylibrary", name="bar.css"),
    @ResourceDependency(library="mylibrary", name="bar.js")
})
public class BarComponentWithCSSandJS extends UIComponentBase {
    // ...
}

But if you really need to declare them elsewhere, such as in a backing bean method which is invoked before render response (otherwise it's simply too late), then you can do that by UIViewRoot#addComponentResource(). The component resource must be created as an UIOutput having a renderer type of javax.faces.resource.Script or javax.faces.resource.Stylesheet, to represent a fullworthy <h:outputScript> or <h:outputStylesheet> respectively. The library and name attributes can just be put in the attribute map.

UIOutput css = new UIOutput();
css.setRendererType("javax.faces.resource.Stylesheet");
css.getAttributes().put("library", "mylibrary");
css.getAttributes().put("name", "bar.css");

UIOutput js = new UIOutput();
js.setRendererType("javax.faces.resource.Script");
js.getAttributes().put("library", "mylibrary");
js.getAttributes().put("name", "bar.js");

FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().addComponentResource(context, css, "head");
context.getViewRoot().addComponentResource(context, js, "head");
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 1
    Here you find information where to place the declaration: http://stackoverflow.com/questions/3586629 – Thor May 30 '13 at 06:14
  • Great! This saved my day. – Dmitry Trifonov Nov 20 '16 at 14:57
  • I was also struggling with where to add the declaration. I ended up adding it in the constructor of my UIComponent. – Jasper de Vries Apr 17 '17 at 07:56
  • 1
    @JasperdeVries: Any method which is invoked *before* render response suffices. Inside an `UIComponent` you'd usually hook on `PostAddToViewEvent` or perhaps `PreRenderViewEvent` for that. – BalusC Apr 17 '17 at 18:37
1

You can add a script and style resources to a page like this:

var head = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "xxxx.js";
head.appendChild(s);

s = document.createElement("style");
s.type = "text/css"
s.src = "yyy.css";
head.appendChild(s);

Or, in function form:

function addScript(path) {
    var head = document.getElementsByTagName("head")[0];
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = path;
    head.appendChild(s);
}

function addCSSFile(path) {
    var head = document.getElementsByTagName("head")[0];
    var s = document.createElement("style");
    s.type = "text/css";
    s.src = path;
    head.appendChild(s);
}
jfriend00
  • 683,504
  • 96
  • 985
  • 979