Comment inclure un autre XHTML dans XHTML en utilisant JSF 2.0 Facelets?
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/imagepeuvent ê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 .
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.