Come includere un altro XHTML in XHTML usando JSF 2.0 Facelets?

218

Qual è il modo più corretto per includere un'altra pagina XHTML in una pagina XHTML? Ho provato diversi modi, nessuno di loro funziona.

jsf  xhtml  include  jsf-2  facelets 
— Ikthiander
fonte

Risposte:

423

<ui:include>

Il modo più semplice è <ui:include>. Il contenuto incluso deve essere inserito all'interno <ui:composition>.

Esempio di avvio della pagina principale /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 pagina di inclusione /WEB-INF/include.xhtml(sì, questo è il file nella sua interezza, tutti i tag esterni <ui:composition>non sono necessari in quanto vengono comunque ignorati da 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>

Questo deve essere aperto da /page.xhtml. Fare nota che non c'è bisogno di ripetere <html>, <h:head>e <h:body>all'interno del file di inclusione come che altrimenti risultare in HTML non valido .

Puoi usare un'espressione EL dinamica in <ui:include src>. Vedi anche Come aggiornare ajax in modo dinamico includere i contenuti tramite il menu di navigazione? (JSF SPA) .

<ui:define>/<ui:insert>

Un modo più avanzato di includere è il templating . Ciò include sostanzialmente il contrario. La pagina del modello principale deve essere utilizzata <ui:insert>per dichiarare i luoghi in cui inserire il contenuto del modello definito. La pagina del client del modello che utilizza la pagina del modello principale deve essere utilizzata <ui:define>per definire il contenuto del modello da inserire.

Pagina modello principale /WEB-INF/template.xhtml(come suggerimento di progettazione: l'intestazione, il menu e il piè di pagina possono a loro volta essere anche <ui:include>file):

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

Pagina client modello /page.xhtml(notare l' templateattributo; anche qui, questo è il file nella sua interezza):

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

Questo deve essere aperto da /page.xhtml. Se non è presente <ui:define>, <ui:insert>verrà visualizzato il contenuto predefinito all'interno , se presente.

<ui:param>

È possibile passare parametri a <ui:include>o <ui:composition template>da <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 >

All'interno del file include / template, sarà disponibile come #{foo}. Nel caso in cui sia necessario passare "molti" parametri a <ui:include>, allora è meglio prendere in considerazione la registrazione del file include come tagfile, in modo da poterlo infine utilizzare in questo modo <my:tagname foo="#{bean.foo}">. Vedi anche Quando usare <ui: include>, file tag, componenti compositi e / o componenti personalizzati?

Puoi anche passare interi bean, metodi e parametri tramite <ui:param>. Vedi anche JSF 2: come passare un'azione che include un argomento da invocare a una sotto-vista Facelets (usando ui: include e ui: param)?

Suggerimenti di progettazione

I file che non dovrebbero essere accessibili pubblicamente semplicemente inserendo / indovinando il suo URL, devono essere collocati nella /WEB-INFcartella, come il file include e il file modello nell'esempio sopra. Vedi anche Quali file XHTML devo inserire in / WEB-INF e quali no?

Non è necessario alcun markup (codice HTML) all'esterno <ui:composition>e <ui:define>. Puoi metterne uno qualsiasi, ma verranno ignorati da Facelets. Inserire il markup è utile solo per i web designer. Vedi anche C'è un modo per eseguire una pagina JSF senza costruire l'intero progetto?

Il doctype HTML5 è il doctype raccomandato in questi giorni, "nonostante" sia un file XHTML. Dovresti vedere XHTML come un linguaggio che ti consente di produrre output HTML usando uno strumento basato su XML. Vedi anche È possibile utilizzare JSF + Facelets con HTML 4/5? e JavaServer Faces 2.2 e supporto HTML5, perché viene ancora utilizzato XHTML .

I file CSS / JS / image possono essere inclusi come risorse trasferibili dinamicamente / localizzati / con versione. Vedi anche Come fare riferimento a risorse CSS / JS / immagine nel modello Facelets?

È possibile inserire i file Facelets in un file JAR riutilizzabile. Vedi anche Struttura per più progetti JSF con codice condiviso .

Per esempi reali di modelli avanzati di facelets, controlla la src/main/webappcartella del codice sorgente dell'app Java EE Kickoff e OmniFaces mostra il codice sorgente del sito .

— BalusC
fonte
1
Ciao Balus, per quanto riguarda: Il modo più semplice è <ui: include>. Il contenuto incluso deve essere inserito in <ui: composizione>. Penso che il contenuto incluso possa essere semplicemente in <p> </p> funzionerà.
— Koray Tugay,
1
@KorayTugay: Sì, è corretto. ui: la composizione è necessaria solo per a) utilizzare un modello (vedi sopra) oppure b) per avvolgere tutto in <html> <body> in modo da poter caricare il file con un browser o un editor HTML.
— sleske,
Ciao, per favore, puoi risolvere questo indovinello per me? Mi sbatto la testa da 3 giorni. stackoverflow.com/questions/24738079/...
— Kishor Prakash
1
@Odysseus: non se in realtà è una composizione.
— BalusC,
1
Dopo aver dichiarato solo <ui:composition ...>all'interno del facelet devi dichiarare anche il tipo di documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, altrimenti si ottiene un entity referenced but not declarederrore quando si utilizzano entità HTML.
— ChristophS,
24

Pagina inclusa:

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

Pagina compresa:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • Si avvia il file xhtml incluso con ui:compositioncome mostrato sopra.
  • Includete quel file con ui:includenel file xhtml incluso come mostrato anche sopra.
— Benchik
fonte
A volte non è sufficiente identificare il percorso mentre si utilizza solo un nome file. Per coloro che hanno provato l'inclusione del file sopra e non ha funzionato. Puoi provare ad aggiungere un simbolo di barra prima del nome del file o della directory / WEB-INF. Così sembra <ui:include src="/yourFile.xhtml"/>o<ui:include src="/WEB-INF/yourFile.xhtml"/>
— Lefan il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.