web-dev-qa-db-ja.com

JSF 2.0 Faceletsを使用してXHTMLに別のXHTMLを含める方法

XHTMLページに別のXHTMLページを含めるための最も正しい方法は何ですか？私はさまざまな方法を試してきましたが、どれも機能していません。

jsfxhtmlincludejsf-2facelets
212
Ikthiander

<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>を繰り返す必要はありません。そうしないと、 invalid HTML になります。

<ui:include src>では動的EL式を使用できます。 ナビゲーションメニューで動的インクルードコンテンツをajax-refreshする方法は？ （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}として利用可能になるでしょう。 <ui:include>に "many"パラメータを渡す必要がある場合は、インクルードファイルをタグファイルとして登録することをお勧めします。そうすれば、最終的には<my:tagname foo="#{bean.foo}">のように使用できます。 <ui：include>、タグファイル、コンポジットコンポーネント、カスタムコンポーネントのいずれを使用するか？

<ui:param>を介してBean全体、メソッド、およびパラメータを渡すこともできます。 も参照してください。JSF 2：呼び出される引数を含むアクションをFaceletsサブビューに渡す方法（ui：includeおよびui：paramを使用）？

デザインのヒント

URLを入力して/推測するだけでは公にアクセスできないファイルは、上記の例のインクルードファイルやテンプレートファイルのように、/WEB-INFフォルダに配置する必要があります。 / WEB-INFに配置する必要があるXHTMLファイルと、配置しないXHTMLファイルはありますか？

<ui:composition>と<ui:define>の外にマークアップ（HTMLコード）がある必要はありません。あなたは何でも置くことができます、しかしそれらはFaceletsによって無視されます。そこにマークアップを置くことは、Webデザイナーにとってのみ有用です。 プロジェクト全体をビルドせずにJSFページを実行する方法はありますか？

HTML5文書型が最近推奨されている文書型ですが、それにもかかわらずXHTMLファイルです。 XMLベースのツールを使用してHTML出力を生成できる言語としてXHTMLを見てください。 HTML 4/5でJSF + Faceletsを使用することは可能ですか？ および JavaServer Faces 2.2およびHTML 5のサポート、なぜXHTMLなのかまだ使われている 。

CSS/JS/imageファイルは動的に再配置可能な/ローカライズされた/バージョン管理されたリソースとして含めることができます。 FaceletsテンプレートでCSS/JS/imageリソースを参照するにはどうすればよいですか？

Faceletsファイルは再利用可能なJARファイルに入れることができます。 共有コード付きの複数のJSFプロジェクトの構造 も参照してください。

高度なFaceletsテンプレート作成の実際の例については、 Java EE Kickoffアプリケーションのソースコード および OmniFacesショーケースサイトのソースコード/のsrc/main/webappフォルダを確認してください。 。

407
BalusC

含まれるページ：

<!-- 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で開始します。
  • 上記のように、インクルードxhtmlファイルにui:includeを付けてそのファイルを含めます。
22
Benchik