วิธีรวม XHTML อื่นใน XHTML โดยใช้ JSF 2.0 Facelets


218

วิธีที่ถูกต้องที่สุดในการรวมหน้า XHTML อื่นในหน้า XHTML คืออะไร? ฉันได้ลองวิธีที่แตกต่างกันไม่มีพวกเขาทำงาน

คำตอบ:


423

<ui:include>

<ui:include>วิธีพื้นฐานที่สุดคือ <ui:composition>เนื้อหารวมถึงจะต้องวางอยู่ภายใน

ตัวอย่างกำหนดการของหน้าต้นแบบ/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>

หน้ารวม/WEB-INF/include.xhtml(ใช่นี่คือไฟล์ที่ครบถ้วนแท็กใด ๆ ข้างนอก<ui:composition>ไม่จำเป็นเนื่องจาก Facelets ถูกละเว้นไป):

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

/page.xhtmlนี้จะต้องเปิดโดย ทำบันทึกที่คุณไม่จำเป็นต้องทำซ้ำ<html>, <h:head>และ<h:body>ภายในรวมไฟล์เป็นที่อาจจะส่งผลในการที่ไม่ถูกต้อง HTML

คุณสามารถใช้นิพจน์ EL แบบไดนามิก<ui:include src>ได้ ดูเพิ่มเติมวิธีการ ajax-refresh dynamic รวมเนื้อหาตามเมนูการนำทาง (JSF สปา)


<ui:define>/<ui:insert>

วิธีที่สูงขึ้นรวมทั้งเป็นแม่แบบ ซึ่งรวมถึงโดยทั่วไปในทางกลับกัน หน้าเทมเพลตหลักควรใช้<ui:insert>เพื่อประกาศสถานที่เพื่อแทรกเนื้อหาแม่แบบที่กำหนดไว้ หน้าเทมเพลตไคลเอ็นต์ที่ใช้หน้าเทมเพลตหลักควรใช้<ui:define>เพื่อกำหนดเนื้อหาเทมเพลตที่จะแทรก

หน้าเทมเพลตหลัก/WEB-INF/template.xhtml(ตามคำแนะนำการออกแบบ: ส่วนหัวเมนูและส่วนท้ายสามารถเป็น<ui:include>ไฟล์ได้):

<!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>

หน้าไคลเอนต์เทมเพลต/page.xhtml(บันทึกแอtemplateททริบิวต์และที่นี่คือไฟล์ทั้งหมด):

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

/page.xhtmlนี้จะต้องเปิดโดย หากไม่มี<ui:define>อยู่เนื้อหาเริ่มต้นภายใน<ui:insert>จะปรากฏแทนหากมี


<ui:param>

คุณสามารถส่งผ่านพารามิเตอร์<ui:include>หรือโดย<ui:composition template><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 >

ภายในไฟล์ include / template จะมีให้ใน#{foo}รูปแบบ ในกรณีที่คุณต้องผ่านพารามิเตอร์ "มาก" ไป<ui:include>แล้วคุณควรที่จะพิจารณาลงทะเบียนรวมถึงแฟ้มเป็น tagfile <my:tagname foo="#{bean.foo}">เพื่อที่ว่าในที่สุดคุณสามารถใช้มันเพื่อให้ชอบ ดูเพิ่มเติมเมื่อใดที่จะใช้ <ui: รวม>, แท็กไฟล์, ส่วนประกอบคอมโพสิตและ / หรือส่วนประกอบที่กำหนดเอง?

<ui:param>คุณยังสามารถส่งผ่านถั่วทั้งวิธีการและพารามิเตอร์ผ่าน ดูเพิ่มเติมที่JSF 2: วิธีการส่งการกระทำรวมถึงการโต้แย้งที่จะเรียกไปยังมุมมองย่อย Facelets (โดยใช้ ui: include และ ui: param)


คำแนะนำการออกแบบ

ไฟล์ที่ไม่ควรเข้าถึงได้โดยสาธารณะเพียงแค่ใส่ / คาดเดา URL ของไฟล์นั้นจะต้องอยู่ใน/WEB-INFโฟลเดอร์เช่นไฟล์รวมและไฟล์เทมเพลตในตัวอย่างด้านบน ดูเพิ่มเติมที่ไฟล์ XHTML ใดที่ฉันจำเป็นต้องใส่ใน / WEB-INF และไฟล์ใด

มีไม่จำเป็นต้องใด ๆ มาร์กอัป (HTML code) นอกและ<ui:composition> <ui:define>คุณสามารถใส่อะไรก็ได้ แต่Facelets จะไม่สนใจมัน การใส่มาร์กอัปในนั้นมีประโยชน์สำหรับนักออกแบบเว็บไซต์เท่านั้น ดูเพิ่มเติมมีวิธีเรียกใช้เพจ JSF โดยไม่ต้องสร้างโครงการทั้งหมดหรือไม่

HTML5 Doctype เป็นประเภทของคำแนะนำที่แนะนำในวันนี้ "ทั้งๆที่" เป็นไฟล์ XHTML คุณควรเห็น XHTML เป็นภาษาที่ให้คุณสร้างผลผลิต HTML โดยใช้เครื่องมือที่ใช้ XML ดูเพิ่มเติมเป็นไปได้ไหมที่จะใช้ JSF + Facelets กับ HTML 4/5 และJavaServer Faces 2.2 และ HTML5 รองรับทำไม XHTML ยังคงถูกใช้อยู่

ไฟล์ CSS / JS / อิมเมจสามารถรวมเป็นรีซอร์สที่เปลี่ยนตำแหน่ง / โลคัลไลซ์ / กำหนดเวอร์ชันแบบไดนามิก ดูเพิ่มเติมวิธีอ้างอิงทรัพยากร CSS / JS / รูปภาพในเทมเพลต Facelets?

คุณสามารถวางไฟล์ Facelets ในไฟล์ JAR ที่นำกลับมาใช้ใหม่ได้ ดูเพิ่มเติมโครงสร้างสำหรับโครงการ JSF หลายด้วยรหัสที่ใช้ร่วมกัน

สำหรับตัวอย่างโลกแห่งความจริงของ Facelets templating ขั้นสูงตรวจสอบsrc/main/webappโฟลเดอร์ของโค้ด Java EE Kickoff AppและOmniFaces ตู้โชว์ซอร์สโค้ดของไซต์


1
สวัสดี Balus เกี่ยวกับ: วิธีพื้นฐานที่สุดคือ <ui: รวม> เนื้อหาที่รวมอยู่จะต้องอยู่ใน <ui: องค์ประกอบ> ฉันมีเนื้อหาที่รวมอยู่ใน <p> </p> เนื้อหาจะทำงานได้
Koray Tugay

1
@KorayTugay: ใช่ถูกต้องแล้ว ui: การเรียบเรียงเป็นสิ่งจำเป็นสำหรับ a) ใช้เทมเพลต (ดูด้านบน) หรือ b) เพื่อรวมทุกอย่างไว้ใน <html> <body> เพื่อให้คุณสามารถโหลดไฟล์ด้วยเบราว์เซอร์หรือตัวแก้ไข HTML
sleske

สวัสดีคุณช่วยไขปริศนานี้ให้ฉันได้ไหม ฉันตีหัวของฉันตั้งแต่ 3 วันที่ผ่านมา stackoverflow.com/questions/24738079/…
Kishor Prakash

1
@ Odysseus: ไม่จริงถ้ามันเป็นองค์ประกอบ
BalusC

1
Afaik หากการประกาศเฉพาะ<ui:composition ...>ภายใน facelet คุณต้องประกาศDoctype เช่น<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">นั้นมิฉะนั้นคุณจะได้รับentity referenced but not declaredข้อผิดพลาดเมื่อใช้เอนทิตี HTML
ChristophS

24

หน้ารวม:

<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>

รวมถึงหน้า:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • คุณเริ่มต้นไฟล์ xhtml ที่รวมอยู่ด้วยui:compositionตามที่แสดงด้านบน
  • คุณรวมไฟล์นั้นui:includeไว้ในไฟล์ xhtml ดังที่แสดงไว้ด้านบน

บางครั้งมันไม่เพียงพอที่จะระบุเส้นทางในขณะที่คุณใช้เพียงชื่อไฟล์ สำหรับผู้ที่ลองใช้การรวมไฟล์ด้านบน แต่ไม่ได้ผล คุณสามารถลองเพิ่มสัญลักษณ์สแลชก่อนชื่อไฟล์หรือไดเรกทอรี / WEB-INF ดังนั้นมันจึงดูเหมือน <ui:include src="/yourFile.xhtml"/>หรือ<ui:include src="/WEB-INF/yourFile.xhtml"/>
Lefan
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.