JSF 2.0 Faceletsを使用して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>はFaceletによって無視されるため、不要です):

<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する方法も参照してください(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.xhtmltemplate属性に注意してください。ここでも、これはファイル全体です):

<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>ある場合は、最終的にそのように使用できるように、インクルードファイルをタグファイルとして登録することを検討することをお勧めします<my:tagname foo="#{bean.foo}"><ui:include>、タグファイル、複合コンポーネント、および/またはカスタムコンポーネントをいつ使用するかを参照してください

を介してBean全体、メソッド、パラメータを渡すこともできます<ui:param>。参照してください。JSF 2:どのようにFaceletsのサブビューに呼び出される引数を含むアクションを渡すために(UIを使用して:含めるとUI:PARAM)?


デザインのヒント

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

<ui:composition>およびの外にマークアップ(HTMLコード)を置く必要はありません<ui:define>。任意に配置できますが、Faceletsによって無視されます。そこにマークアップを配置することは、Webデザイナーにとってのみ有用です。関連項目プロジェクト全体をビルドせずにJSFページを実行する方法はありますか?

HTML5 doctypeは、現在ではXHTMLファイルであるにもかかわらず「推奨」されているdoctypeです。XHTMLは、XMLベースのツールを使用してHTML出力を生成できる言語として表示されるはずです。参照HTML 4/5でJSF + Faceletsを使用することは可能ですか?そして、XHTMLはまだ使用されている理由のJavaServerは、2.2とHTML5サポートを顔

CSS / JS /画像ファイルは、動的に再配置可能/ローカライズ/バージョン化されたリソースとして含めることができます。FaceletsテンプレートでCSS / JS /画像リソースを参照する方法もご覧ください

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

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


1
こんにちはBalusに関して:最も基本的な方法は<ui:include>です。含まれるコンテンツは、<ui:composition>内に配置する必要があります。含まれているコンテンツが<p> </ p>に含まれているだけで機能します。
Koray Tugay 2013年

1
@KorayTugay:はい、そうです。ui:compositionは、a)テンプレート(上記を参照)を使用するか、b)すべてを<html> <body>でラップして、ブラウザーまたはHTMLエディターでファイルをロードできるようにするためにのみ必要です。
sleske 2014年

こんにちは、この謎を解いてくれますか?私は過去3日間から頭を叩いてきました。stackoverflow.com/questions/24738079/...
Kishor Prakashの

1
@オデュッセウス:それが実際に組成物である場合はそうではない。
BalusC 2015

1
Afaikは、facelet <ui:composition ...>内でのみ宣言する場合<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">も、同様にdoctypeを宣言する必要があります。そうでない場合、entity referenced but not declaredHTMLエンティティを使用するとエラーが発生します。
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"/>
  • ui:composition上記のように、インクルードされたxhtmlファイルを開始します。
  • 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.