Adding CSS and JS resources programmatically

In this post you can see how to programmatically load resource in a JSF page. Per example, the JSF page can look like this - notice that we don't load any resources via JSF tags:
...

<h:head>

 <title></title>

</h:head>

<h:body>

 <h:form>

  <h:commandButton value="Switch to Rafa Style" action="#{resBean.addResourcesAction()}"/>

 </h:form>

 <div id="wrapper" style="width:100%; text-align:center">

  <h:graphicImage library="default" name="img/rafa.png"/>

  <!-- <h:graphicImage value="#{resource['default:img/rafa.png']}"/> -->

 </div>

</h:body>

...

Now, when the button Switch to Rafa Style is pressed, a managed bean will supply a CSS file and a JS file, like this:

 public void addResourcesAction() {

  FacesContext facesContext = FacesContext.getCurrentInstance();

  UIOutput rafa_css = new UIOutput();

  UIOutput rafa_js = new UIOutput();

  rafa_css.setRendererType("javax.faces.resource.Stylesheet");

  rafa_css.getAttributes().put("library", "default");

  rafa_css.getAttributes().put("name", "css/rafa.css");

  rafa_js.setRendererType("javax.faces.resource.Script");

  rafa_js.getAttributes().put("library", "default");

  rafa_js.getAttributes().put("name", "js/rafa.js");

  facesContext.getViewRoot().addComponentResource(facesContext, rafa_css, "head");

  facesContext.getViewRoot().addComponentResource(facesContext, rafa_js, "head");

  }

}

You may also want to read:

Add given JavaScript resource to end of head/body of the current view

Add given JavaScript code as inline script to end of body of the current view

GitHub Complete Code [AddResourcesProgrammatically]