XHTML ページに別の XHTML ページを含める最も正しい方法は何ですか? さまざまな方法を試しましたが、どれもうまくいきません。
ベストアンサー1
<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が生成されます。<html><h:head><h:body>
では、動的な EL 式を使用できます<ui:include src>。ナビゲーション メニューで動的なインクルード コンテンツを Ajax で更新する方法も参照してください。(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 >
include/template ファイル内では、 として使用できます#{foo}。 に「多くの」パラメータを渡す必要がある場合は<ui:include>、インクルード ファイルをタグファイルとして登録することを検討してください。そうすれば、最終的には のように使用できます。 <ui:include>、タグ ファイル、複合コンポーネント、カスタム コンポーネントはいつ使用するか?<my:tagname foo="#{bean.foo}">も参照してください。
を介して、Bean、メソッド、およびパラメータ全体を渡すこともできます<ui:param>。JSF 2: 呼び出される引数を含むアクションを Facelets サブビューに渡す方法 (ui:include および ui:param を使用) も参照してください。
デザインのヒント
URL を入力または推測するだけでは公開アクセスできないファイルは、上記の例の include ファイルやテンプレート ファイルのように、フォルダーに配置する必要があります。また、「/WEB-INF に配置する必要がある XHTML ファイルと、配置する必要がない XHTML ファイルは何ですか?」/WEB-INFも参照してください。
<ui:composition>およびの外側にマークアップ (HTML コード) を記述する必要はありません<ui:define>。 記述してもかまいませんが、 Facelets では無視されます。 マークアップを記述するのは、Web デザイナーにとってのみ有用です。プロジェクト全体をビルドせずに JSF ページを実行する方法はありますか?も参照してください。
HTML5 doctype は、XHTML ファイルであるにもかかわらず、現在推奨されている doctype です。XHTML は、XML ベースのツールを使用して HTML 出力を生成できる言語として考える必要があります。また、「JSF+Facelets を HTML 4/5 で使用できますか?」および「JavaServer Faces 2.2 と HTML5 のサポート、なぜ XHTML がまだ使用されているのか」も参照してください。
CSS/JS/画像ファイルは、動的に再配置可能/ローカライズ/バージョン管理されたリソースとして含めることができます。Faceletsテンプレートで CSS/JS/画像リソースを参照する方法も参照してください。
Facelets ファイルを再利用可能な JAR ファイルに置くことができます。共有コードを持つ複数の JSF プロジェクトの構造も参照してください。
高度な Facelets テンプレートの実際の例については、Java EE Kickoff App ソース コードとOmniFaces ショーケース サイトのソース コードsrc/main/webappのフォルダーを確認してください。