Come aggiungere a livello di programmazione risorse JS e CSS a <h:head>?

Question

Devo aggiungere risorse JS e CSS a livello di codice a <h:head> della pagina JSF. Non è chiaro come ottenere ciò. Qualcuno potrebbe dare un suggerimento o un esempio di kickoff?

Answer 1

che dipende da dove esattamente si desidera dichiarare la risorsa. Normalmente, l'unica ragione per dichiararli in modo programmatico è che si dispone di un numero personalizzato UIComponent o Renderer che genera codice HTML che a sua volta richiede tali risorse JS e/o CSS. Devono quindi essere dichiarati da @ResourceDependency o @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 { 
    // ... 
} 

Ma se si davvero necessità di dichiarare altrove, come ad esempio in un metodo supporto di fagioli che viene richiamato prima render risposta (altrimenti è semplicemente troppo tardi), allora si può fare di UIViewRoot#addComponentResource(). La risorsa componente deve essere creata come UIOutput con un tipo di renderizzatore di javax.faces.resource.Script o javax.faces.resource.Stylesheet, per rappresentare un valore completo <h:outputScript> o <h:outputStylesheet> rispettivamente. Gli attributi library e name possono essere semplicemente inseriti nella mappa degli attributi.

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"); 

Answer 2

È possibile aggiungere uno script e stile le risorse per una pagina come questa:

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); 

o, in forma funzione:

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); 
}