Jak dodać inny XHTML do XHTML używając JSF 2.0?

Jaki jest najbardziej poprawny sposób umieszczenia innej strony XHTML na stronie XHTML? Próbowałem różnych sposobów, żaden z nich nie działa.

Author: BalusC, 2011-01-25

2 answers

<ui:include>

Najbardziej podstawowy sposób to <ui:include>. Dołączona treść musi być umieszczona wewnątrz <ui:composition>.

Przykład strony wzorcowej /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>
Strona include /WEB-INF/include.xhtml (tak, jest to plik w całości, wszelkie tagi poza <ui:composition> są niepotrzebne, ponieważ i tak są ignorowane przez 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>

To musi być otwarte przez /page.xhtml. Pamiętaj, że nie musisz powtarzać <html>, <h:head> i <h:body> wewnątrz pliku include jako że w przeciwnym razie spowodowałoby to nieprawidłowy HTML.

Możesz użyć dynamicznego wyrażenia EL w <ui:include src>. Zobacz też Jak odświeżyć dynamiczną zawartość za pomocą menu nawigacyjnego? (JSF SPA) .


<ui:define>/<ui:insert>

Bardziej zaawansowanym sposobem włączenia jest szablony . Obejmuje to zasadniczo odwrotnie. Strona szablonu głównego powinna używać <ui:insert> aby zadeklarować miejsca do wstawienia zdefiniowanej zawartości szablonu. Strona klienta szablonu który jest za pomocą strony szablonu głównego powinien używać <ui:define> aby zdefiniować zawartość szablonu, który ma zostać wstawiony.

Strona główna szablonu /WEB-INF/template.xhtml (jako wskazówka projektowa: nagłówek, menu i stopka mogą z kolei być plikami <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>

Template client page /page.xhtml (zwróć uwagę na atrybut template; również tutaj jest to plik w całości):

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

To musi być otwarte przez /page.xhtml. Jeśli nie ma <ui:define>, to domyślna zawartość w {[18] } będzie wyświetlane zamiast, jeśli w ogóle.


<ui:param>

Możesz przekazać parametry <ui:include> lub <ui:composition template> przez <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 >

Wewnątrz pliku include / template, będzie on dostępny jako #{foo}. W przypadku, gdy musisz przekazać" wiele " parametrów <ui:include>, lepiej rozważ zarejestrowanie pliku include jako pliku znacznika, aby ostatecznie móc go używać w ten sposób <my:tagname foo="#{bean.foo}">. Zobacz także kiedy używać , tag files, composite components i / lub custom składniki?

Możesz nawet przekazać całe ziarna, metody i parametry za pomocą <ui:param>. Zobacz także JSF 2: Jak przekazać akcję zawierającą argument do wywołania do widoku podrzędnego Facelets (używając ui:include i UI:param)?


Wskazówki projektowe

Pliki, które nie powinny być publicznie dostępne po prostu wpisaniu / odgadnięciu adresu URL, muszą być umieszczone w folderze /WEB-INF, jak plik nagłówka i plik szablonu w powyższym przykładzie. jakie pliki XHTML muszę umieścić w /WEB-INF, a które nie?

Nie musi być żadnego znacznika (kodu HTML) poza <ui:composition> i <ui:define>. Możesz umieścić dowolny, ale będą one ignorowane przez Facelets. Umieszczanie tam znaczników jest przydatne tylko dla projektantów stron internetowych. Zobacz także czy istnieje sposób na uruchomienie strony JSF bez budowania całego projektu?

Doctype HTML5 jest obecnie zalecanym doctype, pomimo tego, że jest to plik XHTML. Powinieneś zobacz XHTML jako język, który pozwala na tworzenie wyjścia HTML za pomocą narzędzia opartego na XML. Zobacz też czy można używać JSF+z HTML 4/5? i JavaServer obsługuje 2.2 i HTML5, dlaczego XHTML jest nadal używany.

Pliki CSS / JS / image mogą być dołączane jako dynamicznie relokowalne/zlokalizowane / wersjonowane zasoby. Zobacz także jak odwoływać się do CSS / JS / image resource w szablonie Facelets?

Możesz umieścić pliki Facelets w słoiku wielokrotnego użytku plik. Zobacz także strukturę dla wielu projektów JSF ze współdzielonym kodem.

Aby zapoznać się z prawdziwymi przykładami zaawansowanych szablonów Facelets, sprawdź folder src/main/webapp kod źródłowy aplikacji Java EE Kickoff i OmniFaces showcase site source code.

 390
Author: BalusC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:02

Dołączona Strona:

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

Łącznie ze stroną:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • uruchamiasz dołączony plik xhtml z ui:composition, Jak pokazano powyżej.
  • dołączasz ten plik z ui:include w tym pliku xhtml, jak również pokazano powyżej.
 22
Author: Benchik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-07 06:28:41