web-dev-qa-db-fra.com

Comment inclure un autre XHTML dans XHTML en utilisant JSF 2.0 Facelets?

Quel est le moyen le plus correct d'inclure une autre page XHTML dans une page XHTML? J'ai essayé différentes méthodes, aucune d'entre elles ne fonctionne.

jsfxhtmlincludejsf-2facelets
213
Ikthiander

_<ui:include>_

La manière la plus élémentaire est <ui:include> . Le contenu inclus doit être placé à l'intérieur de <ui:composition> .

Exemple de démarrage de la page maître _/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>
_

La page d'inclusion _/WEB-INF/include.xhtml_ (oui, il s'agit du fichier dans son intégralité, les balises extérieures à _<ui:composition>_ sont inutiles car elles sont de toute façon ignorées par 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>
_

Ceci doit être ouvert par _/page.xhtml_. Notez que vous n'avez pas besoin de répéter _<html>_, _<h:head>_ et _<h:body>_ dans le fichier à inclure car cela donnerait sinon HTML non valide .

Vous pouvez utiliser une expression EL dynamique dans _<ui:include src>_. Voir aussi Comment ajax-refresh dynamique inclure le contenu par le menu de navigation? (JSF SPA) .

_<ui:define>_/_<ui:insert>_

Une manière plus avancée d'inclure est templating . Cela comprend essentiellement le contraire. La page de modèle maître doit utiliser <ui:insert> pour déclarer des espaces où insérer le contenu de modèle défini. Le modèle de page client qui utilise le modèle principal doit utiliser <ui:define> pour définir le contenu du modèle à insérer.

Modèle de page maître _/WEB-INF/template.xhtml_ (à titre d'indication de conception: l'en-tête, le menu et le pied de page peuvent également être des fichiers _<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>
_

Modèle de page client _/page.xhtml_ (notez l'attribut template; ici aussi, il s'agit du fichier dans son intégralité):

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

Ceci doit être ouvert par _/page.xhtml_. S'il n'y a pas de _<ui:define>_, le contenu par défaut à l'intérieur de _<ui:insert>_ sera affiché à la place, le cas échéant.

_<ui:param>_

Vous pouvez passer des paramètres à _<ui:include>_ ou _<ui:composition template>_ by <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 >
_

Dans le fichier include/template, il sera disponible en tant que _#{foo}_. Si vous devez passer "plusieurs" paramètres à _<ui:include>_, vous feriez mieux d'enregistrer le fichier include en tant que fichier de balise, de sorte que vous puissiez finalement l'utiliser comme so _<my:tagname foo="#{bean.foo}">_. Voir aussi Quand utiliser <ui: include>, fichiers de balises, composants composites et/ou composants personnalisés?

Vous pouvez même transmettre des haricots entiers, des méthodes et des paramètres via _<ui:param>_. Voir aussi JSF 2: comment passer une action comprenant un argument à appeler à une sous-vue Facelets (en utilisant ui: include et ui: param)?

Conseils de conception

Les fichiers qui ne sont pas supposés être accessibles au public simplement en entrant/devinant son URL doivent être placés dans le dossier _/WEB-INF_, comme le fichier include et le fichier modèle dans l'exemple ci-dessus. Voir aussi Quels fichiers XHTML dois-je mettre dans/WEB-INF et lesquels non?

Il n'est pas nécessaire qu'il y ait de balisage (code HTML) en dehors de _<ui:composition>_ et _<ui:define>_. Vous pouvez en mettre n'importe lequel, mais ils seront ignorés par Facelets. La mise en place de balises n'est utile que pour les concepteurs Web. Voir aussi Existe-t-il un moyen de gérer une page JSF sans générer l'ensemble du projet?

Le doctype HTML5 est le doctype recommandé de nos jours, "malgré" qu'il s'agisse d'un fichier XHTML. Vous devriez voir XHTML comme un langage qui vous permet de produire une sortie HTML à l'aide d'un outil basé sur XML. Voir aussi Est-il possible d'utiliser JSF + Facelets avec HTML 4/5? et prise en charge de JavaServer Faces 2.2 et HTML5, pourquoi le XHTML est-il toujours utilisé .

Les fichiers CSS/JS/image peuvent être inclus en tant que ressources relogeables/localisées/versionnées de manière dynamique. Voir aussi Comment référencer une ressource CSS/JS/image dans le modèle Facelets?

Vous pouvez placer des fichiers Facelets dans un fichier JAR réutilisable. Voir aussi Structure pour plusieurs projets JSF avec code partagé .

Pour des exemples concrets de modèles avancés de modèles Facelets, consultez le dossier _src/main/webapp_ de code source de Java EE Kickoff App et code source de site de démonstration OmniFaces .

409
BalusC

Page incluse:

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

Y compris la page:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • Vous démarrez votre fichier xhtml inclus avec ui:composition comme indiqué ci-dessus.
  • Vous incluez ce fichier avec ui:include dans le fichier xhtml inclus, comme indiqué ci-dessus.
22
Benchik