Cách lập trình thêm tài nguyên JS và CSS vào <h:head>?

Question

Tôi cần thêm tài nguyên JS và CSS theo chương trình vào <h:head> trang JSF. Nó không phải là rõ ràng làm thế nào để đạt được điều này. Ai đó có thể đưa ra một gợi ý hoặc một ví dụ kickoff?

Answer 1

Điều đó phụ thuộc vào nơi chính xác bạn muốn khai báo nguồn. Thông thường, lý do duy nhất để lập trình khai báo chúng là bạn đã tùy chỉnh UIComponent hoặc Renderer tạo mã HTML, lần lượt yêu cầu các tài nguyên JS và/hoặc CSS đó. Sau đó, họ sẽ được tuyên bố bởi @ResourceDependency hoặc @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 { 
    // ... 
} 

Nhưng nếu bạn thực sự cần phải khai báo ở những nơi khác, chẳng hạn như trong một phương pháp đậu ủng hộ mà được gọi trước làm cho phản ứng (nếu không nó chỉ đơn giản là quá muộn), sau đó bạn có thể làm điều đó bởi UIViewRoot#addComponentResource(). Tài nguyên thành phần phải được tạo dưới dạng UIOutput có loại trình kết xuất là javax.faces.resource.Script hoặc javax.faces.resource.Stylesheet, để đại diện cho một tương ứng đầy đủ <h:outputScript> hoặc <h:outputStylesheet> tương ứng. Các thuộc tính library và name chỉ có thể được đặt trong bản đồ thuộc tính.

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

Bạn có thể thêm một kịch bản và phong cách nguồn lực để một trang như thế này:

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

Hoặc, ở dạng chức năng:

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