Cách chính xác nhất để đưa một trang XHTML khác vào trang XHTML là gì? Tôi đã thử nhiều cách khác nhau, không ai trong số họ đang làm việc.
Cách chính xác nhất để đưa một trang XHTML khác vào trang XHTML là gì? Tôi đã thử nhiều cách khác nhau, không ai trong số họ đang làm việc.
Câu trả lời:
<ui:include>Cách cơ bản nhất là <ui:include>. Các nội dung bao gồm phải được đặt bên trong <ui:composition>.
Ví dụ khởi động của trang chính /page.xhtml:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Include demo</title>
</h:head>
<h:body>
<h1>Master page</h1>
<p>Master page blah blah lorem ipsum</p>
<ui:include src="/WEB-INF/include.xhtml" />
</h:body>
</html>
Trang bao gồm /WEB-INF/include.xhtml(có, đây là toàn bộ tệp, mọi thẻ bên ngoài <ui:composition>đều không cần thiết vì dù sao chúng cũng bị Facelets bỏ qua):
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h2>Include page</h2>
<p>Include page blah blah lorem ipsum</p>
</ui:composition>
Điều này cần phải được mở bằng /page.xhtml. Do lưu ý rằng bạn không cần phải lặp lại <html>, <h:head>và <h:body>bên trong bao gồm tập tin mà nếu không sẽ cho kết quả không hợp lệ HTML .
Bạn có thể sử dụng biểu thức EL động trong <ui:include src>. Xem thêm Làm thế nào để ajax-refresh động bao gồm nội dung bằng menu điều hướng? (JSF SPA) .
<ui:define>/<ui:insert>Một cách tiên tiến hơn bao gồm là templating . Điều này bao gồm về cơ bản các cách khác. Trang mẫu chính nên sử dụng <ui:insert>để khai báo các vị trí để chèn nội dung mẫu được xác định. Trang khách mẫu đang sử dụng trang mẫu chính sẽ sử dụng <ui:define>để xác định nội dung mẫu sẽ được chèn.
Trang mẫu chính /WEB-INF/template.xhtml(như một gợi ý thiết kế: đầu trang, menu và chân trang có thể lần lượt là <ui:include>các tệp):
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
<div id="footer">Footer</div>
</h:body>
</html>
Trang khách hàng mẫu /page.xhtml(lưu ý templatethuộc tính; cũng ở đây, đây là toàn bộ tệp):
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
Điều này cần phải được mở bằng /page.xhtml. Nếu không có <ui:define>, thì nội dung mặc định bên trong <ui:insert>sẽ được hiển thị thay thế, nếu có.
<ui:param>Bạn có thể truyền tham số cho <ui:include>hoặc <ui:composition template>bằng <ui:param>.
<ui:include ...>
<ui:param name="foo" value="#{bean.foo}" />
</ui:include>
<ui:composition template="...">
<ui:param name="foo" value="#{bean.foo}" />
...
</ui:composition >
Trong tệp bao gồm / mẫu, nó sẽ có sẵn dưới dạng #{foo}. Trong trường hợp bạn cần truyền "nhiều" tham số <ui:include>, thì tốt hơn hết bạn nên xem xét việc đăng ký tệp đính kèm dưới dạng tagfile, để cuối cùng bạn có thể sử dụng nó như vậy <my:tagname foo="#{bean.foo}">. Xem thêm Khi nào nên sử dụng <ui: include>, tệp thẻ, thành phần hỗn hợp và / hoặc thành phần tùy chỉnh?
Bạn thậm chí có thể vượt qua toàn bộ đậu, phương thức và tham số thông qua <ui:param>. Xem thêm JSF 2: làm thế nào để vượt qua một hành động bao gồm một đối số được gọi đến chế độ xem phụ Facelets (sử dụng ui: include và ui: param)?
Các tệp không được phép truy cập công khai chỉ bằng cách nhập / đoán URL của nó, cần được đặt trong /WEB-INFthư mục, như tệp bao gồm và tệp mẫu trong ví dụ trên. Xem thêm Tôi cần đặt tập tin XHTML nào vào / WEB-INF và tập tin nào không?
Không cần phải có bất kỳ đánh dấu (mã HTML) nào bên ngoài <ui:composition>và <ui:define>. Bạn có thể đặt bất kỳ, nhưng chúng sẽ bị bỏ qua bởi Facelets. Đưa đánh dấu vào đó chỉ hữu ích cho các nhà thiết kế web. Xem thêm Có cách nào để chạy một trang JSF mà không cần xây dựng toàn bộ dự án không?
Loại tài liệu HTML5 là loại tài liệu được đề xuất hiện nay, "mặc dù" đó là tệp XHTML. Bạn sẽ thấy XHTML như một ngôn ngữ cho phép bạn tạo đầu ra HTML bằng công cụ dựa trên XML. Xem thêm Có thể sử dụng JSF + Facelets với HTML 4/5 không? và JavaServer Faces 2.2 và HTML5 hỗ trợ, tại sao XHTML vẫn được sử dụng .
Các tệp CSS / JS / hình ảnh có thể được bao gồm dưới dạng tài nguyên có thể di chuyển / cục bộ / phiên bản động. Xem thêm Làm thế nào để tham khảo tài nguyên CSS / JS / hình ảnh trong mẫu Facelets?
Bạn có thể đặt các tệp Facelets trong tệp JAR có thể sử dụng lại. Xem thêm Cấu trúc cho nhiều dự án JSF với mã được chia sẻ .
Để biết các ví dụ trong thế giới thực về việc tạo khuôn mặt Facelets nâng cao, hãy kiểm tra src/main/webappthư mục của mã nguồn Java EE Kickoff App và OmniFaces hiển thị mã nguồn trang web .
<ui:composition ...>bên trong facelet, bạn cũng phải khai báo loại tài liệu giống như vậy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, nếu không, bạn sẽ entity referenced but not declaredgặp lỗi khi sử dụng các thực thể HTML.
Trang bao gồm:
<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>
Bao gồm trang:
<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
ui:compositionnhư được hiển thị ở trên.ui:includetrong tệp xhtml bao gồm như được hiển thị ở trên.<ui:include src="/yourFile.xhtml"/>hoặc<ui:include src="/WEB-INF/yourFile.xhtml"/>