답변:
<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>. 탐색 메뉴로 동적 포함 컨텐츠를 아약스 새로 고치는 방법을 참조하십시오 . (JSF SPA) .
<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 >포함 / 템플릿 파일 내부에서로 사용할 수 있습니다 #{foo}. 에 "many"매개 변수를 전달해야하는 경우 <ui:include>포함 파일을 태그 파일로 등록하여 궁극적으로 그렇게 사용할 수 있도록하는 것이 좋습니다 <my:tagname foo="#{bean.foo}">. <ui : include>, 태그 파일, 복합 구성 요소 및 / 또는 사용자 정의 구성 요소를 사용하는시기를 참조하십시오 .
를 통해 전체 Bean, 메소드 및 매개 변수를 전달할 수도 있습니다 <ui:param>. 참조 JSF 2 : 어떻게 Facelets의 하위보기로 호출 될 인수를 포함하는 조치를 통과 (UI를 사용하여 : 포함 UI : PARAM)?
URL을 입력 / 추측하여 공개적으로 액세스 할 수없는 /WEB-INF파일은 위 예제의 포함 파일 및 템플릿 파일과 같이 폴더에 배치해야합니다 . 참조 어떤 XHTML 파일은 내가에 / WEB-INF 둘 필요가 어느하지?
<ui:composition>및 외부에 마크 업 (HTML 코드)이 필요하지 않습니다 <ui:define>. 어떤 것도 넣을 수 있지만 Facelets에서는 무시 됩니다. 마크 업을 넣는 것은 웹 디자이너에게만 유용합니다. 참조 전체 프로젝트를 구축하지 않고 JSF 페이지를 실행하는 방법이 있나요?
HTML5 doctype은 요즘 권장되는 doctype입니다. "그렇더라도"XHTML 파일입니다. XHTML을 XML 기반 도구를 사용하여 HTML 출력을 생성 할 수있는 언어로보아야합니다. 참조 는 HTML 4/5로 JSF + Facelets에 사용할 수 있습니까? 및 XHTML은 여전히 사용하는 이유 자바 서버는 2.2 및 HTML5 지원을 얼굴 .
CSS / JS / 이미지 파일은 동적으로 재배치 가능 / 현지화 / 버전 화 된 리소스로 포함될 수 있습니다. Facelets 템플릿에서 CSS / JS / 이미지 리소스를 참조하는 방법 도 참조하십시오 .
Facelets 파일을 재사용 가능한 JAR 파일에 넣을 수 있습니다. 공유 코드가있는 여러 JSF 프로젝트의 구조 도 참조하십시오 .
고급 Facelets 템플릿의 실제 예를 보려면 Java EE Kickoff App 소스 코드 및 OmniFaces 쇼케이스 사이트 소스 코드 의 src/main/webapp폴더를 확인하십시오 .
<ui:composition ...>내부를 선언하는 경우에만 doctype을 선언 해야하는 경우 Afaik <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, 그렇지 않으면 entity referenced but not declaredHTML 엔터티를 사용할 때 오류가 발생합니다.
포함 된 페이지 :
<!-- 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"/>ui:composition위에 표시된대로 포함 된 xhtml 파일을 시작합니다 .ui:include위에 표시된대로 xhtml 파일을 포함하여 해당 파일을 포함시킵니다.<ui:include src="/yourFile.xhtml"/>또는<ui:include src="/WEB-INF/yourFile.xhtml"/>