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

Quelle est la meilleure façon d'inclure une autre page XHTML dans une page XHTML? J'ai essayé différentes méthodes, aucune ne fonctionne.

205
demandé sur BalusC 2011-01-25 14:19:42

2 réponses

<ui:include>

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

Kickoff exemple 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>

the include page /WEB-INF/include.xhtml (Oui, c'est le fichier dans son intégralité, toutes les balises en dehors de <ui:composition> sont inutiles car elles sont ignorées par les Facelets de toute façon):

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

cela doit être ouvert par /page.xhtml . Notez que vous n'avez pas besoin de répéter <html> , <h:head> et <h:body> à l'intérieur du fichier include car cela entraînerait autrement HTML invalide .

vous pouvez utiliser une expression EL dynamique dans <ui:include src> . Voir aussi comment faire pour ajax-rafraîchir dynamique inclure le contenu par menu de navigation? (JSF SPA) .


<ui:define> / <ui:insert>

une façon plus avancée d'inclure est templating . Cela comprend essentiellement l'inverse. La page du modèle principal devrait utiliser <ui:insert> pour déclarer les endroits où insérer le contenu du modèle défini. La page client du modèle qui utilise la page du modèle principal doit utiliser <ui:define> pour définir le contenu du modèle qui doit être inséré.

Master template page /WEB-INF/template.xhtml (comme un indice de conception: l'en-tête, le menu et le pied de page peuvent à leur tour même être <ui:include> fichiers):

<!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, c'est le 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>

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


<ui:param>

vous pouvez passer les paramètres à <ui:include> ou <ui:composition template> par <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} . Dans le cas où vous devez passer "beaucoup" de paramètres à <ui:include> , alors vous devriez considérer l'enregistrement du fichier include comme un tagfile, de sorte que vous pouvez finalement l'utiliser comme <my:tagname foo="#{bean.foo}"> . Voir aussi quand utiliser < ui: include>, fichiers d'étiquettes, composants composites et/ou composants personnalisés?

vous pouvez même passer des haricots entiers, des méthodes et des paramètres via <ui:param> . Voir aussi JSF 2: Comment passer une action incluant un argument à invoquer à une sous-vue de Facelets (en utilisant ui:include et ui:param)?


Conception indices

les fichiers qui ne sont pas censé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 template dans l'exemple ci-dessus. Voir aussi quels fichiers XHTML dois-je mettre dans /WEB-INF et lesquels ne le sont pas?

il n'y a pas besoin de markup (code HTML) en dehors de <ui:composition> et <ui:define> . Vous pouvez mettre n'importe quel, mais ils seront ignorés par Facelets. Mettre du markup là-dedans n'est utile que pour les concepteurs de sites web. Voir aussi Existe-t-il un moyen d'exécuter une page JSF sans construire 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 la sortie HTML en utilisant un outil basé sur XML. Voir aussi Est-il possible d'utiliser JSF+Facelets avec HTML 4/5? et JavaServer fait face à un support 2.2 et HTML5, pourquoi XHTML est encore utilisé .

Les fichiers CSS/JS/image

peuvent être inclus en tant que ressources relocalisables/localisées/suivies en versions dynamiques. Voir aussi comment référencer CSS / JS / image resource dans le modèle Facelets?

vous pouvez mettre des fichiers Facelets dans un fichier JAR réutilisable. Voir Aussi Structure pour multiple Projets JSF avec code partagé .

pour des exemples réels de modelage avancé de Facelets, consultez le dossier src/main/webapp de Java EE Kickoff App source code et OmniFaces showcase site source code .

390
répondu BalusC 2017-05-23 12:03:02

Inclus la page:

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

y compris 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
répondu Benchik 2016-09-07 06:28:41